Bootstrap 栅格系统

布局容器

我的理解就是在网页上定一个居中的div样式，用法就是

<div class="container">
  ...
</div>

　　这里的.container是Bootstrap 里已经编译好的，只需要，引用这个class名就可以

　　　.container也就似用于固定宽度并支持响应式布局的容器。

栅格系统类似于盒子模型中，盒子的排列方式

栅格系统要用在 div class="container" 的固定宽度中在这个div下建立自己需要的div class=“row” （row代表着行一行包含着12个列）

然后在行里面建立列也就是（div class="col-md-1"）这里的col-md代表列后边的数字代表着建立的div所需要的列，

例如示例当div="col-md-8"时这个div就站了8个列的宽。

<div class="row">
  <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-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-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>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</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>

我这里只写了栅格系统对于Bootstrap 来说还有好多好多强大的功能，我也在摸索学习中，也会在后边继续分享好用的功能