BootStrap是基于HTML、CSS和JavaScript的框架，用来快速搭建开发前端页面，具备响应式特点，可进行二次开发。

下载安装

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

BootStrap栅格布局

BootStrap将屏幕分为12等分，在具体的DIV中，可以通过设置DIV的所占等分的数字确定其在屏幕中占有的宽度。

<div class="row“><!--表示另起一行-->
  <div class="col-md-8" style="border:1px solid black;height:100px;"></div>
  <div class="col-md-4" style="border:1px solid black;height:100px;"></div>
</div>

布局屏幕分类

针对不同的显示屏幕尺寸，BootStrap提供了不同的栅格布局的属性：

col-xs-* 超小屏幕 手机 (<768px)
col-sm-* 小屏幕 平板 (≥768px)
col-md-* 中等屏幕 桌面显示器 (≥992px)
col-lg-* 大屏幕 大桌面显示器 (≥1200px)

BootStrap允许我们在一个DIV中写多个类别的布局属性，从而让该DIV在不同的屏幕中呈现不同的屏宽。

<div class="col-md-8 col-xs-6 col-lg-4"></div>