1.常用页面模板
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<!– 移出下边的内容就可以禁止响应式布局 –>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ –>
<title>Bootstrap 101 Template</title>
<!– Bootstrap –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css” rel=”stylesheet”>
<!– HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 –>
<!– 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 –>
<!–[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]–>
</head>
<body>
<h1>你好，世界！</h1>
<!– jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) –>
<script src=”https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js”></script>
<!– 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js”></script>
</body>
</html>
2全局 CSS 样式
2-1 HTML5 文档类型
<!DOCTYPE html>
<html lang=”zh-CN”>
…
</html>
2-2 移动设备优先 Bootstrap 是移动设备优先的
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
2-3 排版与链接
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
scaffolding.less
为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数
为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线
这些样式都能在 scaffolding.less 文件中找到对应的源码。
Normalize.css
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
2-4 布局容器
.container .container
.container 类用于固定宽度并支持响应式布局的容器。
<div class=”container”>
…………………
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class=”container-fluid”>
…
</div>
.container-fluid
2-5 栅格系统
.container （固定宽度）或 .container-fluid （100% 宽度） 包含.row
一行12列
如一行 3个 .col-xs-4 多出的 .col-xs-* 则另起一行
2-6 媒体查询
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { … }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { … }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { … }
2-7 栅格参数
栅格行为： 最大尺寸
超小屏幕 手机 (<768px) 总是水平排列 .col-xs-
小屏幕 平板 (≥768px) 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 750px .col-sm-
中等屏幕 桌面显示器 (≥992px) 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 970px .col-md-
大屏幕 大桌面显示器 (≥1200px) 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C 1170px .col-lg-
2-8 实例：从堆叠到水平排列 .col-xs .col-sm .col-md .col-lg xs sm md lg
手机 .col-xs-* <768
平板 .col-sm-* >768
电脑 .col-md-* >992
大显示器 .col-lg-* >1200
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-md-1″>
1
</div>
<div class=”col-md-1″>
2
</div>
<div class=”col-md-1″>
3
</div>
<div class=”col-md-1″>
4
</div>
<div class=”col-md-1″>
5
</div>
<div class=”col-md-1″>
6
</div>
<div class=”col-md-1″>
7
</div>
<div class=”col-md-1″>
8
</div>
<div class=”col-md-1″>
9
</div>
<div class=”col-md-1″>
10
</div>
<div class=”col-md-1″>
11
</div>
<div class=”col-md-1″>
12
</div>
</div>
<div class=”row”>
<div class=”col-md-4″>
4
</div>
<div class=”col-md-8″>
8
</div>
</div>
<div class=”row”>
<div class=”col-md-4″>
4
</div>
<div class=”col-md-4″>
4
</div>
<div class=”col-md-4″>
4
</div>
</div>
<div class=”row”>
<div class=”col-md-6″>
6
</div>
<div class=”col-md-6″>
6
</div>
</div>
</div>
2-9 实例：流式布局容器
<div class=”container-fluid”>
<div class=”row”>
…
</div>
</div>
2-10 实例：移动设备和桌面屏幕
<div class=”container”>
<div class=”row”>
<div class=”col-xs-12 col-md-4″>
手机12 电脑显示器4
</div>
<div class=”col-xs-6 col-md-8″>
手机6 电脑显示器8
</div>
</div>
<div class=”row”>
<div class=”col-xs-6 col-md-4″>
4
</div>
<div class=”col-xs-6 col-md-4″>
4
</div>
<div class=”col-xs-6 col-md-4″>
4
</div>
</div>
<div class=”row”>
<div class=”col-xs-12 col-md-6″>
6
</div>
<div class=”col-xs-12 col-md-6″>
6
</div>
</div>
</div>
2-11 实例：手机、平板、桌面
<div class=”row”>
<div class=”col-xs-12 col-sm-6 col-md-8″>.col-xs-12 .col-sm-6 .col-md-8</div>
<div class=”col-xs-6 col-md-4″>.col-xs-6 .col-md-4</div>
</div>
<div class=”row”>
<div class=”col-xs-6 col-sm-4″>.col-xs-6 .col-sm-4</div>
<div class=”col-xs-6 col-sm-4″>.col-xs-6 .col-sm-4</div>
<!– Optional: clear the XS cols if their content doesn’t match in height –>
<div class=”clearfix visible-xs-block”></div>
<div class=”col-xs-6 col-sm-4″>.col-xs-6 .col-sm-4</div>
</div>
2-12 实例：多余的列（column）将另起一行排列
.clearfix .visible-xs-block
<div class=”row”>
<div class=”col-xs-9″>.col-xs-9</div>
<div class=”col-xs-4″>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class=”col-xs-6″>.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
2-13 响应式列重置
<div class=”row”>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<!– Add the extra clearfix for only the required viewport –>
<div class=”clearfix visible-xs-block”></div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
</div>
2-14 列偏移
col-md-offset-4 向右偏移4
如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度
<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4 col-md-offset-4″>.col-md-4</div>
</div>
2-15 嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
<div class=”row”>
<div class=”col-sm-9″>
Level 1: .col-sm-9
<div class=”row”>
<div class=”col-xs-8 col-sm-6″>
Level 2: .col-xs-8 .col-sm-6
</div>
<div class=”col-xs-4 col-sm-6″>
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
2-16 列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。oo