Bootstrap 4.0

文章	评论	标签
40	347	18

快速开发？当然选择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

下载文件，直接引入
这种方式更稳定安全

基本页面的组成

<!-- 设置视口 -->
<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>

比上面多了 的内容

条件注释

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

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

基础语法
```

```
指定版本
```

```
指定版本范围
```

```
- lt 小于
- gt 大于
- lte 小于等于
- gte 大于等于

为什么不需要html5shiv和 respond

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

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

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

Bootstrap重要样式及布局

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

容器 .container

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

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

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

列多种分法

.col 如果是子元素平分父元素的话，就直接使用.col

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

.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>

单元格的对齐方式
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>

其他
.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>

.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>

组件

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

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

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

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

Bootstrap 4.0

Henry

使用样式表

Bootstrap重要样式及布局

容器 .container

组件

更多内容可看文档