<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式- -> <meta http-equiv="X-UA-Compatib1e" content= "IE=edge"> <!-- viewport表示用户是否可以缩放页面; width指定视区的逻辑宽度; device-width指示视区宽度应为设备的屏幕宽度; initial-scale指令用于设置Web页面的初始缩放比例 initial-scale=1 则将显示未经缩放的Web文档 --> <meta name= "viewport" content= "width=device-width, initial-scale=1">
如果要使⽤Bootstrap的js插件，必须先调用 jQuery.js
-
viewport 标记于指定用户是否可以缩放Web页面
-
width 和 height 指令分别指定视区的逻辑宽度和宽度。他们的值要么是以像素为单位的数字，要么是个特殊的标记符号。
-
width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
-
height 指令使用 device-height 标记指示视区宽度为设备的屏幕 宽度。
-
initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。
1.布局容器
.container 类用于固定宽度并支持响应式布局的容器（网页两侧留白）
<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度，占据全部视口 (viewport) 的容器（网页两侧不留白）
<div class="container-fluid"> ... </div>
2.栅格网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
Bootstrap框架中的网格系统就是将容器平分成12份
<div class="container"> <div class="row"> <div class="col-md-4">4列</div> <div class="col-md-8">8列</div> </div> </div>
注意：
-
行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
-
具体内容应该放置在列容器 (column) 之内
-
col- 屏幕尺寸-列数，其中屏幕尺寸有
xs(xsmall phones) 超小屏(自动)
sm(small tablets) 小屏(750px)
md(middle desktops) 中屏(970px)
lg(larger desktops) 大屏(1170px)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"> </head> <body> <!-- 布局容器 --> <div class="container"> <!-- 行元素 --> <div class="row"> <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值--> <div class="col-md-4" >4列</div> <div class="col-md-8" >8列</div> </div> </div> </body> </html>
3.列组合
列组合简单理解就是更改数字来合并列(原则：列总和数不能超12，大于12则自动换到下一行)，有点类似于表格的 colspan 属性
4.列偏移
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移 (offset) 功能来实现。
使用列偏移也非常简单，只需要在列元素上添加类名 "col-md-offset-*" (星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加 "col-md-offset-8" ,表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会导致列 断行|换行 显示)
5.列排序
* 列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
* 在 Bootstrap 框架的网格系统中是通过 添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)
* 左浮动往前 pull ,右浮动往后 push
6.列嵌套
列嵌套：你可以在一个列中添加一个或者多个行(row) 容器，然后在这个行容器中插入列。
