首页 学习笔记,Web

快速开发?当然选择bootstrap了,它基于Sass( Less)前端开发库,提供了一套完整的css以及匹配的js。需要什么东西,直接到文档中挑选使用就好了。
其具有以下特性:完整的基础CSS插件;丰富的预定义样式表;基于jQuery的js插件集;非常灵活的响应式栅格系统,而且崇尚移动先行的思想。

使用样式表

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  • integrity="文件指纹"

Web安全方面的内容,涉及到劫持、xss攻击等

  • crossorigin="anonymous"

对此元素的CROS请求不设置凭据标志(不携带信息)

如果想要使用功能性的组件,需要引入以下文件:

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- popper -->
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    • 上面的文件一定是放在</body>标签 之前
    • 顺序:

      1. jquery.js
      2. popper.js(提示框插件)
      3. bootstrap.js
    1. 下载文件,直接引入

    这种方式更稳定安全

    基本页面的组成

    <!-- 设置视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 引入css -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- 引入JS相关文件,使用组件中的功能 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    • shrink-to-fit=no

    苹果专有属性,针对 IOS9 ,安卓及其他系统没有

    针对超出屏幕宽度的内容,也会缩放显示到屏幕,做的处理

    与Bootstrap3的基本页面对比

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    • 比上面多了<!--[if lt IE 9]> <![endif]--> 的内容

    条件注释

    根据一定的条件,选择当前内容是否进行注释,上述表示:如果 IE 小于 9 则不注释该内容;主要用于兼容 IE8

    条件注释主要用于处理 IE 兼容问题,针对IE5 ~ IE9的版本有效

    • 基础语法

      <!--[if IE]> html语句 <![endif]-->
    • 指定版本

      <!--[if IE 6]> html代码 <![endif]-->
    • 指定版本范围

      <!--[if lt IE 8]> html代码 <![endif]-->
      • lt 小于
      • gt 大于
      • lte 小于等于
      • gte 大于等于

    为什么不需要html5shivrespond

    Bootstrap 3Bootstrap 4
    兼容>=IE8 、 >=ios6>IE10 、 >ios7

    IE10+都是接受H5标签的,所以这两个兼容文件,我们不需要了

    当前市场上,主要流行的依旧是 Bootstrap3,兼容情况更好,更稳定

    Bootstrap重要样式及布局

    1. 盒模型:所有的盒模型都是怪异盒模型box-sizing:border-box,为避免设置padding的时候,影响布局,如果不要可以单独去除
    2. 栅格布局

    容器 .container

    boot是响应式框架,容器在不同分辨路有不同的宽度。

    1

    依然逃不掉的先分行再分列
    .row

    <div class="container">
        <div class="row"></div>
    </div>

    多种分法

    1. .col 如果是子元素平分父元素的话,就直接使用.col
    <div class="container">
        <div class="row">
            <div class="col">xiaomo</div>
            <div class="col">xiaomo</div>
        </div>
    </div>
    1. .col-sm-num 这个class中,num代表一个数字(从1-12),boot的栅格系统把一行分成列12份,num代表份数,而中间的type对应small。意为,在游览器宽度大于等于578,小于768的时候,在栅格系统中占有的份数
      对应的class有.col-num / .col-sm-num / .col-md-num / .col-lg-num / .col-xl-num
    <div class="container">
        <div class="row">
            <div class="col-md-3">xiaomo</div>
            <div class="col-md-4">xiaomo</div>
            <div class="col">xiaomo</div>
        </div>
    </div>
    1. 单元格的对齐方式
      align-items-start / align-items-center / align-items-end / align-content-start / align-content-center / align-content-end / justify-content-start / justify-content-center / justify-content-end / justify-content-around / justify-content-between
    <style>
            .container {
                height: 300px;
                border: 1px solid #1890ff;
            }
            .row {
                height: 100%;
            }
            .item {
                height: 60px;
                border: 1px solid #1890ff;
            }
    </style>
    
    <div class="container">
        <div class="row align-content-center justify-content-center">
            <div class="col-1 item">xiaomo</div>
            <div class="col-1 item">xiaomo</div>
            <div class="col-1 item">xiaomo</div>
            <div class="col-1 item">xiaomo</div>
        </div>
    </div>

    1

    1. 其他
      .w 100 用于拆行

    .order用于排序
    .order-num 数字越大越靠后
    另外,.order-first 一定可以把一个元素放在第一位
    .order-last 一定可以把一个元素放在最后一位

    <div class="container">
        <div class="row align-content-center justify-content-center">
            <div class="col-1 item order-last">1.xiaomo</div>
            <div class="col-1 item">2.xiaomo</div>
            <div class="col-1 item">3.xiaomo</div>
            <div class="col-1 item">4.xiaomo</div>
            <div class="col-1 item">5.xiaomo</div>
            <div class="col-1 item order-first">6.xiaomo</div>
        </div>
    </div>

    2

    .offset用于设置偏移量
    .offset-num / .offset-type-num

    <div class="container">
        <div class="row align-content-center">
            <div class="col-1 item offset-4">xiaomo</div>
            <div class="col-1 item">xiaomo</div>
            <div class="col-1 item">xiaomo</div>
            <div class="col-1 item">xiaomo</div>
        </div>
    </div>

    3

    组件

    Bootstrap常用的布局组件结构, 官方文档,需要什么组件,能查得到即可,对于分页等复杂需求,还需要选择合适的bootstrap插件进行增强

    4

    [size=18]常用js插件[/size]

    5

    在之前CSS的基础上,BootStrap自带12种jQuery插件,其利用bootstrap数据API,大部分插件可以在不编写任何代码的情况下触发。
    在bootstrap中,js插件遵循以下3个规则。

    • Html布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性
    • javascript实现步骤:所有插件都遵循jQuery插件开发的标准步骤,所有的事件保持统一IDE标准
    • 插件调用方法:所有插件的使用,都可以是HTML声明式,也可以是js调用式,且支持多种回调和可选参数。

    更多内容可看文档

    Bootstrap V3文档
    Bootstrap V4文档

    Bootstrap开发的优点与缺点

    优点:可以进行快速开发,准备了很多页面中经常有的内容,例如导航栏、分页 、下拉菜单

    缺点:

    1. 东西太多,体积太庞大,不需要的样式也会加载进来
    2. 组件样式对应不上设计图

    知道 bootstrap3 和 bootstrap4的差异

    1. 栅格布局
    2. body的font-size
    3. xs前缀去除
    4. 添加576px媒询

    ...等


    作者:moshanghua 转载:人工智能学院
    2020-10-21




    文章评论

      zizdog 访客FireFoxAndroid
      2020-12-8 23:52   回复

      我还没用前端框架,自己写真心累。

        Henry 站长ChromeWindows
        2020-12-23 15:27   回复

        欢迎访问,大佬的网站很棒,点个赞👍