Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
所有的主流浏览器都支持 Bootstrap。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
bootstrap
利用栅格系统（网格系统）来进行布局
（1）栅格系统 一般都是写在 .container 内
（2） 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距
（padding）
（3）内容应该放置在列内，且唯有列可以是行的直接子元素。
container-fluid 满屏宽
container 规定了在不同屏幕分辨率下的最佳内容区域
<div class="container">
<div class="row">
<div class="col-md-3">
<table></table>
</div>
</div>
</div>
网格选项：
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） |
|---|---|---|---|
| .col-xs- | .col-sm- | .col-md- | .col-lg- |
网格系统四种基本用法：
1.列组合
列组合简单理解就是更改数字来合并列 (原则：列总和数不能超过12)
<div class="container">
<h1>1.列组合</h1>
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-1">1</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.列偏移
设置列偏移，让中间保持空隙，通过 col-md-offset- 来实现
<div class="container">
<h1>2.列偏移</h1>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-2 col-md-offset-4">列向右移动4列的间距</div>
<div class="col-md-2">2</div>
</div>
<div class="row">
<div class="col-md-8">8</div>
<div class="col-md-3 col-md-offset-1">列向右移动1列的间距</div>
</div>
</div>
3.排序
可以把两个列交换位置，push向右移动，pull向左移动
<div class="container">
<h1>3.排序</h1>
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-3">3</div>
<div class="col-md-4 col-md-push-2">4</div>
</div>
<div class="row">
<div class="col-md-3">3</div>
<div class="col-md-9">9</div>
</div>
<div class="row">
<div class="col-md-3 col-md-push-9">3</div>
<div class="col-md-9 col-md-pull-3">9</div>
</div>
</div>
4.列嵌套
可以嵌套 嵌满也是12列
<div class="container">
<h1>4.列嵌套</h1>
<div class="row">
<div class="col-md-9">
<div class="col-md-8">1-8</div>
<div class="col-md-4">9-12</div>
</div>
<div class="col-md-3">3</div>
</div>
</div>
