bootstrap的使用

你可以使用下载的BootStrap文件，通常包括样式文件bootstrap.min.css、Jquery文件（务必在bootstrap.min.js 之前引入）、BootStrap核心脚本文件bootstrap.min.js。注意，为了减少载入的代码，这里使用的都是压缩（min）版本的文件，当然你也可以引入未压缩的版本。示例代码如下：

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>

当然你也可以使用互联网上提供的CDN服务，示例代码如下：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

BootStrap栅格布局

BootStrap栅格布局是灵活使用BootStrap的基础。BootStrap将屏幕分为12等分，在具体的DIV中，你可以通过设置DIV的所占等分的数字来确定其在屏幕中占有的宽度。如：

  <div class="row“><!--表示另起一行-->
      <div class="col-md-8" ></div>
      <div class="col-md-4" ></div>
  </div>

在上述代码中为了表示区块，我们设置了DIV的边框宽度为1像素。代码中我们可以看出，第一个DIV中class="col-md-8",第二个DIV中class="col-md-4", 其中‘8’和‘4’就是其DIV所占屏幕宽度的数值，加在一起等于‘12’。也就是第一个DIV占整个屏幕宽度的‘8/12’,第二个DIV占‘4/12’。在表示DIV宽度的类属性中，为了实现对全响应的支持，一共有四种类别的属性值，区别如下：
.col-xs- 超小屏幕 手机 (<768px）

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面显示器 (≥992px)

.col-lg-* 大屏幕 大桌面显示器 (≥1200px)

如果一个DIV中同时有上述类别中的两个或两个以上，表示该DIV在不同环境下所占有的屏幕宽度。如：

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

该DIV在中等屏幕中占有‘8/12’，在手机中占有‘6/12’，在大屏幕中占有屏幕比例的‘4/12’。