Bootstrap提供了两种类型的布局容器,一种是固定宽度的布局容器,一种是流式布局容器。将栅格放在某种容器中,即可实现相应的布局。

固定布局

将Bootstrap的默认栅格放到 class="container" 的容器中,即可创建固定宽度的布局。固定布局在整个页面上居中显示。如:

 
  1. <body>
  2.   <div class="container">
  3.     ...
  4.   </div>
  5. </body>

效果如图 2‑7所示:

Bootstrap固定布局容器图2-7 Bootstrap固定布局容器

简单的讲,就是将内容统统放到 class="container" 的容器中,即可创建居中、固定宽度的布局。具体实例如下:

 
  1. <body>
  2.   <div class="container">
  3.     <div class="row">
  4.       <div class="span4">span4</div>
  5.       <div class="span8">span8</div>
  6.     </div>
  7.     <div class="row">
  8.       <div class="span3">span3</div>
  9.       <div class="span6">span6</div>
  10.       <div class="span3">span3</div>
  11.     </div>
  12.   </div>
  13. </body>

布局效果如图 2‑8所示:

Bootstrap固定布局实例图2-8 Bootstrap固定布局实例

关于作者

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

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐