什么是Bootstrap
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作,基于HTML,CSS,JavaScript开发的简洁,直观,强悍的前端开发框架,它会使开发更加快捷
Bootstrap框架的优点
- 开发方便快捷
- 兼容处理
- 移动设备优先
- 使用广泛
Bootstrap的下载
- https://v3.bootcss.com
- 单击"下载Bootstrap"按钮
- 下载解压后可以的文件夹和文件
将已经下载的Bootstrap框架文件引入在实际的项目中，搭建出Bootstrap框架最基本的HTML模板
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/> <title>Bootstrap 基本模板</title> <!-- Bootstrap的CSS文件 --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>这是一个Bootstrap框架的最基本HTML模板</h1> <!-- 如果要使用Bootstrap的JS插件，必须引入jQuery --> <script src="js/jquery-1.12.4.js"></script> <!-- Bootstrap的JS插件--> <script src="js/bootstrap.min.js"></script> </body>
12栅格系统
12栅格的使用
列组合
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-3</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
您还可以使用.col-*-ofset-0类覆盖较低网格层的偏移。
<div class="row"> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"> </div> </div>
列嵌套
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .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>
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
响应式栅格
| 栅格系统行为 | 列数 | 类前缀 | |
| 超小屏幕手机(<768px) | 总是水平排列 | 12 | .col-xs- |
| 小屏幕平板(≥768px) | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | 12 | .col-sm- |
| 中等屏幕桌面显示器(≥922px) | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | 12 | .col-md- |
| 大屏幕大桌面显示器(≥1200px) | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | 12 | .col-lg- |
