页面中有三块文本,每块都有标题、段落和链接。在大于等于平板电脑的屏幕上, 我们希望内容分三栏,而在较窄的屏幕上,我们希望内容变成一栏全宽。

建议大家花点时间熟悉一下Bootstrap移动优先的响应式网格,文档地址是:http://getbootstrap.com/css/#grid

简单地说,Bootstrap内置12栏网格系统,其基本的类结构支持col-12表示全宽,col-6表示半宽,col-4表示三分之一宽,以此类推。

在Bootstrap 3中,由于创造性地使用了媒体查询,网格系统具有极强的适应力。如前所述,我们希望欢迎消息在比平板小的屏幕中呈现为一栏全宽,而在大约768px时变成三分之一栏宽。巧合的是,Bootstrap内置的小屏幕断点恰好是768px,也就是@screen-sm-min变量的默认值。而大于768px的中屏幕断点是992px,对应变量是@screen-md-min。然后,大于1200px断点的算大屏幕。这几个断点我们后面统称为小、中、大断点。

小断点有一个特殊的栏类命名法:col-sm-。因为我们想在小断点之上使用三栏,所以这里使用class="col-sm-4"。这样在小断点之下,分块元素会保持全宽,而在小断点之上,则会各占三分之一宽并肩排列。完整的结构如下所示,为简明起见,段落内容作了省略处理:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
    <h2>Welcome!</h2>
    <p>Suspendisse et arcu felis ...</p>
    <p><a href="#">See our portfolio</a></p>
  </div>
  <div class="col-sm-4">
    <h2>Recent Updates</h2>
    <p>Suspendisse et arcu felis ...</p>
    <p><a href="#">See what's new!</a></p>
  </div>
  <div class="col-sm-4">
    <h2>Our Team</h2>
    <p>Suspendisse et arcu felis ...</p>
    <p><a href="#">Meet the team!</a></p>
  </div>
  </div><!-- /.row -->
</div><!-- /.container -->

下面解释一下containerrow类的作用:

  • container类用于约束内容的宽度,并使其在页面内居中;

  • row类用于包装三个栏,并为栏间留出左右外边距;

  • container类和row类都设定了清除,因而它们可以包含浮动元素,同时又清除之前的浮动元素。

现在,保存并刷新。在浏览器窗口宽度超过768px时,应该看到下图所示的三栏布局:

{%}

把窗口缩小到768px以下,又会看到三栏变成了一栏:

{%}

好,这样就利用响应式网格系统完成了响应式分栏,接下来我们要利用Bootstrap的按钮样式,把内容分块中的链接做成突出的效果。

30:00