Bootstrap 4.0

xiaomo

快速开发？当然选择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
  1. popper.js（提示框插件）
  2. 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的版本有效

基础语法

  <!--[if IE]> html语句 <![endif]-->

指定版本

  <!--[if IE 6]> html代码 <![endif]-->

指定版本范围

  <!--[if lt IE 8]> html代码 <![endif]-->

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>

列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内

    <div class="container">
        <div class="row">
            <!-- 列嵌套时不受外面大小的影响，还是可以看做是12份 -->
            <div class="col-md-4">
                <!-- 列嵌套时最好加个行row 这样可以取消父元素的padding值 而且高度自动和父级一样 -->
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-8"></div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</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>

流体容器

通过将你的最外层.container改变为.container-fluid，可以将任何固定宽度的网格布局转变成一个完整宽度（宽度满屏）的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
响应式工具目前只是针对块级元素，不支持inline元素和表格元素。
可用的class
通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。

组件

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

常用js插件

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

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