bootstrap中布局

来源：互联网发布：淘宝运营策划能力编辑：程序博客网时间：2024/06/03 20:01

参考逆心的博客，网址：http://www.cnblogs.com/kissdodog/p/3929903.html

1 网格系统

Bootstrap把一个页面分为12列，分别占3、6、3列。

 <div class="row">        <div class="col-xs-3">3</div>        <div class="col-xs-6">6</div>        <div class="col-xs-3">3</div>    </div>

其中：col-xs为额外的小设备<768px、col-sm小型设备平板电脑>=768px、col-md中型设备台式电脑>=992px、

col-lg 大型设备台式电脑>=1200px

2 响应式网格

  <div class="row">        <div class="col-xs-12 col-sm-6 col-md-3">3</div>        <div class="col-xs-12 col-sm-6 col-md-3">3</div>        <div class="col-xs-12 col-sm-6 col-md-3">3</div>        <div class="col-xs-12 col-sm-6 col-md-3">3</div>    </div>

当屏幕宽度u≥1200px时，bootstrap会自动选用col-lg-*这个class；
当屏幕宽度u≥992px时，bootstrap会自动选用col-sm-*这个class；
当屏幕宽度u≥768px时，bootstrap会自动选用col-md-*这个class；
当屏幕宽度u<768px时，bootstrap会自动选用col-lg-*这个class；

阅读全文

0 0