Bootstrap v3 网格系统 学习笔记

Bootstrap v3是以移动设备优先的理念设计的。其网格系统,能简化网页布局设计,根据设备分辨率,调整 栏目的显示。

屏幕宽度自适应

与之前的版本一样,网格系统将屏宽分为12等份。不同的是,它提供了四组列(column)类别样式 以适应不同的屏幕宽度:col-xs-, col-sm-, col-md-, col-lg-。其具体的宽度尺寸请参考 grid-options

对于一个容器元素,我们可以指定多个列宽,从而达到在不同设备上显示不同宽度的效果。

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-10 col-md-4">
          <p> 春晓
           春眠不觉晓,
           处处闻啼鸟。
           夜来风雨声,
           花落知多少。
          这是一首经典的写热闹春景的五言绝句。 </p>
      </div>
  </div>
</div>

上面的例子的实际效果 grid-1 . 中等宽度的界限为 992px;手机屏幕大部分小于这个像素,col-xs-* 会生效; 平板和大部分电脑的宽度大于这个像素, col-md-* 会生效。由于col-md-4 只 占屏幕的三分之一,所以会发生在电脑上看到的文字换行更多的情况。

图一,在iphone上的显示,可见 col-xs-10 生效,占 10/12的屏幕宽度

bootstrap grid mobile

图一

图二,在ipad上的显示,可见 col-md-4 生效,占 4/12的屏幕宽度

Bootstrap grid example on PC

图二

移动端 三栏变一栏

如果我们的电脑版的页面是三栏样式的,到了移动端,我们希望只显示一栏, 多出来的两栏自动折行显示。

代码片段如下

<div class="container-fluid">
          <div class="row">
              <div class="col-xs-12 col-md-4">
                  <h2> 互联网 </h2>
                  <p> <a href="#"> 多事之秋,某度公司又有vp辞职  </a> </p>
                  <p> <a href="#"> 阿尔法狗又赢了,人类会被人工智能打败吗 </a> </p>
                  <p> <a href="#"> 社交网络安全吗?小心饮食数据被卖</a></p>
              </div>
              <div class="col-xs-12 col-md-4">
                  <h2> 财经 </h2>
                  <p> <a href="#"> 余额宝利息又涨了,你的钱还留在活期存款上吗 </a> </p>
                  <p> <a href="#"> 十年禁卖,这房子还能不能愉快地投资了 </a> </p>
                  <p> <a href="#"> 半年大考,央妈这次会出手救场吗 </a> </p>
              </div>
              <div class="col-xs-12 col-md-4">
                  <h2> 科技 </h2>
                  <p> <a href="#"> 火星定居还只是梦想吗,美国航天又有重大突破 </a> </p>
                  <p> <a href="#"> 转基因到底有没有危害,科学杂志为你解密 </a> </p>
                  <p> <a href="#"> 克隆技术挽救生命,猴子身上可以培育人类器官 </a> </p>
              </div>
          </div>
          <div class="row">
              <div class="col-xs-12 col-md-4">
                  <h2> 娱乐圈 </h2>
                  <p> <a href="#"> 狗血不断,xxx尴尬见面 </a> </p>
                  <p> <a href="#"> 韩国娱乐现象,鲜肉流水线揭秘 </a> </p>
                  <p> <a href="#"> 全家上阵,xxx度假精彩图片放送</a></p>
              </div>
              <div class="col-xs-12 col-md-4">
                  <h2> 女人</h2>
                  <p> <a href="#"> 婆婆是天敌,家里怎么呆得下去 </a> </p>
                  <p> <a href="#"> 老公凤凰男,穷亲戚不断线 </a> </p>
                  <p> <a href="#"> 三天就瘦,xxx美丽的秘密 </a> </p>
              </div>
              <div class="col-xs-12 col-md-4">
                  <h2> 军事 </h2>
                  <p> <a href="#"> 解放军又有战争大杀器研发成功 </a> </p>
                  <p> <a href="#"> 美国航母这次又到那里了 </a> </p>
                  <p> <a href="#"> 二战秘史 盟军靠什么赢得胜利 </a> </p>
              </div>
          </div>
      </div>

这是一个虚构的新闻网站的页面,两行,每行三个栏目。当用户用宽屏设备,比如电脑,浏览时, 生效的样式是 col-md-4, 因此会显示为每行三栏。当用户用手机浏览时,生效的样式是 col-xs-12。 因此,一行内的三栏会“流动“到下一行显示。

在电脑上的显示效果,

bootstrap 3 columns on PC

图三

在手机上的显示效果,

bootstrap 3 columns becomes one on mobile

图四

可以通过 news.html 查看线上效果