Bootstrap3栅格系统布局实例

Bootstrap3实用教程 专栏收录该内容
173 篇文章 1 订阅

布局实例

Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。

先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统:

 
  1. <div class="row">
  2.   <div class="col-md-4">.col-md-4</div>
  3.   <div class="col-md-4">.col-md-4</div>
  4.   <div class="col-md-4">.col-md-4</div>
  5. </div>

上述代码中,我们仅仅为元素应用了一组 .col-md-* 栅格类,而没有应用任何 .col-xs-*.col-sm-*.col-lg-* 类。

根据小设备优先的规则,就很容易知道它在小屏幕和超小屏幕上将使用默认的堆叠布局,在大屏幕上将继续使用 .col-md-* 类的布局,即水平排列的三列等宽布局。

这也很容易验证,通过鼠标调整浏览器窗口的尺寸,一开始让窗口很窄(小于992px)。得到的运行结果如图 2‑1所示:

小屏幕和超小屏幕堆叠排列

图2-1 小屏幕和超小屏幕堆叠排列

随着窗口慢慢增大,当达到 992px 时,它就会就变为水平排列。运行结果如图 2‑2所示:

中等屏幕和大屏幕水平排列

图2-2 中等屏幕和大屏幕水平排列

如果你不希望在小屏幕设备上所有列都堆叠在一起,那就得添加针对超小屏幕的类.col-xs-*。如:

 
  1. <div class="row ">
  2.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  3.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  4.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  5. </div>

上述元素应用了 .col-xs-* .col-md-* 栅格类,因此在小屏幕和超小屏幕上将使用.col-xs-*类定义的 6-6-6 布局(由于列数之和大于 12,最后一个 6 列将另起一行排列),在中等屏幕和大屏幕上将使用 .col-md-* 类定义的 4-4-4 布局。

在小屏幕和超小屏幕上的运行结果如图 2‑3所示:

小屏幕和超小屏幕布局

图2-3 小屏幕和超小屏幕布局

在中等屏幕和大屏幕的运行结果如图 2‑4所示:

中等屏幕和大屏幕布局

图2-4 中等屏幕和大屏幕布局

如果你希望每种不同的屏幕都拥有不同的布局,你就可以同时使用 .col-xs-*.col-sm-*.col-md-*.col-lg-* 类。如:

 
  1. <div class="row ">
  2.   <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</div>
  3.   <div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">…</div>
  4. </div>

上述布局为 4 种类型的屏幕都分别定义了各自的栅格类,因此每种屏幕都将拥有自己的布局。最终的布局结果是,在超小屏幕上将使用.col-xs-* 类定义的 6-6 布局,在小屏幕上使用.col-sm-* 类定义的 4-8 布局,在中等屏幕上使用 .col-md-* 类定义的 3-9 布局,在大屏幕上使用 .col-lg-* 类定义的 2-10 布局。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值