bootstrap

    bootstrap是一个前端框架，适用于开发响应式布局、移动设备优先的 WEB 项目。它提供了大量的样式，以及一些成熟的javascript插件。通过媒体查询使的同一份代码适配不同设备。

    bootstrap的栅格化系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，row必须在container或者container-fluid当中。在行（row）里面，可以建一组列（column），列的宽度可以用col-md-num 表示，例如：col-md-1；col-md-2 ， bootstrap 把容器均分成12等分，来实现排序。

<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>

     栅格化系统还能实现列偏移，通过.col-md-offset-*这个类。选择器为当前元素增加了左侧的边距（margin）。例如, .col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。列和列之间还能嵌套。值得注意的是，当一行的列数大于12的时候，会另起一行，比如说现在有2列，一列的类名为col-md-9;另一个为col-md-7;这就会形成2列。

 

转载于:https://my.oschina.net/u/3042592/blog/1560628