Bootstrap3的一个重要特性便是:提供了一套响应式、移动设备优先的流式栅格系统。利用Bootstrap,我们可以快速地完成页面布局,以及适配不同大小的屏幕。

栅格系统是Bootstrap响应式布局的框架,栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局:

  • 行(.row)必须包含在容器(containercontainer-fluid)里;
  • 在行内创建一组水平排开的列(.col);
  • 每一行被分为12格,通过类似.col-sm-4的类来控制每一列占位多少格(这里是4格);
  • 每一行的列所占格数超过12,便会引起换行;
  • 可以对不同大小的屏幕定义不同的布局。

下面来看例子咯!

一个简单的布局

我们希望创建一个行,分为两列,它们大小关系是2:1。因为Boostrap栅格一共12格,所以左边8格,右边4格。

使用Bootstrap布局时,多数情况都需要先创建一个.container,然后在里面添加一行(.row)。.row下有两个div.user,它们分别占8格和4格:

注意

Bootstrap页面多数情况下都会有一个或多个.container来包含整个页面,但千万不要嵌套.container!即一个.container下不要再有.container了。但.row是可以嵌套的,见下文。

<div class="container">
  <div class="row user-list">
    <div class="col-sm-8 user">
      <img class="img-circle" src="./catty.jpeg" width="140" height="140">
      <h2>purus molestie</h2>
      <p>Turpis inceptos, neque vel dolor.</p>
      <p><a class="btn btn-default" href="#">访问 &raquo;</a></p>
    </div>
    <div class="col-sm-4 user">...</div>
  </div>
</div>

效果如图:

响应式布局

上文中col-sm-8中的sm是指:该布局在当前屏幕尺寸 ≥ 小屏幕(768px)时才生效。如果屏幕太小,该布局失效用户列表将会回到默认的堆叠状态:

提示

栅格系统是根据浏览器宽度来判断屏幕大小的,你只需要将浏览器宽度拖动小,便会产生上述效果。

屏幕适配:列宽

Bootstrap的栅格系统允许您根据屏幕大小调整列的宽度。上述col-sm-8中的sm用来匹配 ≥ 768px 的屏幕,这样的尺寸匹配共有4种:

  1. lg用来匹配大屏幕(大桌面显示器):≥ 1200px 的屏幕;
  2. md用来匹配中等屏幕(桌面显示器):≥ 992px 的屏幕;
  3. sm用来匹配小屏幕(平板):≥ 768px 的屏幕;
  4. xs用来匹配超小屏幕(手机):< 768px 的屏幕;

上述的4种规则可以同时存在。当同时被满足时,规则的序号越小,优先级越高。请看示例(重新组织.user-list):

<div class="row user-list">
  <div class="col-sm-6 col-md-4 user">...</div>
  <div class="col-sm-6 col-md-4 user">...</div>
  <div class="col-sm-6 col-md-4 user">...</div>
  <div class="col-sm-6 col-md-4 user">...</div>
</div>

.user-list中有4个.user。拖动浏览器窗口,使其宽度小于sm(768px),此时上述所有col-xx-x布局都失效,.user回到堆叠状态:

拖动浏览器,当宽度刚刚大于 768px 时,.col-sm-6生效,每行显示两个.user

继续拖动浏览器,当宽度刚刚大于 992px 时,.col-md-4生效,每行显示3个.user

提高

你可以在div.user上添加更多的col-xx-x规则,来匹配其他大小的屏幕。

屏幕适配:显示与隐藏

除了根据屏幕大小调整列的宽度外,还可以根据屏幕大小来显示和隐藏任何元素。比如,对于手机用户不需要显示导航栏,可以在div.navbar.navbar-fixed-top上面添加.hidden-xs

<nav class="navbar navbar-inverse navbar-fixed-top hidden-xs">

然后把屏幕弄小(小于768px),导航栏便会隐藏起来:

提示

hidden-xx对应,Bootstrap还提供了.visible-xx-*在屏幕大小匹配时显示某个元素。更详细的规则可以参考:Bootstrap-响应式工具

栅格嵌套

栅格系统的.row是可以嵌套的,借此可以完成更加复杂的布局。在某一列下继续添加一行.row,可以再进行细分:

<div class="row user-list">
  <div class="col-md-7 user">...</div>
  <div class="col-md-5">
    <div class="row">
      <div class="col-md-4 user">...</div>
      <div class="col-md-4 user">...</div>
      <div class="col-md-4 user">...</div>
    </div>
  </div>
</div>

效果如图:

注意

由于HTML层级的变化,需要调整homepage.css中的选择符。将.user-list>.user改为.user-list .user

提高

栅格系统还提供了列偏移,可以方便地空出一列,请参考:Bootstrap-列偏移

登录发表评论 注册

反馈意见