bootstrap css栅格系统

 

 

 <meta name="viewport" content="width=device-width, initial-scale=1">

 

 

 

 网格系统基本结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

.container做布局容器，row与col-*-*组合，row作行，col作列*为设置标志与数字，几个col数字和要为12

栅格系统用的是媒体查询实现

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

.col-xs-   .col-sm- .col-md .col-lg分别对应手机，平板，桌面显示器，大屏幕