和鲍勃一起来学Bootstrap - 第3课

本课学习 栅格系统 Grid System
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：

1. 行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
2. 使用行（row）在水平方向创建一组列（column）。
3. 你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。
4. 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
5. 通过设置padding从而创建列（column）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

基本的grid布局结构如下：

<div class="container">
  <div class ="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
</div>

第一个* 表示 类型（ xs, sm, md, lg ) , 第二个*表示列宽 （1-12）

那么写一个两列宽，很列有两段落文字的页面　是不是信手拈来呢　：）

html的代码这个后台支持的不好，贴上来会自动改变我原来的输入内容，以后就不贴代码了，直接上文件了。有什么不明白的可以留言

bootsrap_bob_tutorial.html
File Size:	2 kb
File Type:	html

Download File

---

用浏览器打开，看是不是直接就是两列布局了！！

你无需自己去写css实现了，换言之， 就算你搞不清楚 position: relative, static, absolute, fixed ，搞不清楚浮动是什么， 一样也可轻松实现各种布局了。

收工！