下面，我们去试一下使用 Bootstrap 3 的网格系统去布局页面。首先我们要考虑的是要使用什么样的布局，然后还要考虑一下在什么条件下使用这样的布局。

比如我们想把页面分成两栏，左边是主体内容，占用 8 个网格，右边是边栏内容，占用 4 个网格。而且我们希望只有在桌面设备上去应用这样的布局。

首先要用到的是一个带 .container 类的容器 .... div.container ...

在这个容器里，可以去设计页面的布局。 每一排内容，需要放在一组带有 .row 类的容器里面。 div.row ...

在它里面，我们把页面分成两个部分 ... 可以分别把每个部分放到一组 div 标签里 ... div*2

然后我们决定，在桌面设备上把这排内容分成左右两栏 .... 左边占用 8 份的宽度，因为 Bootstrap 的网络系统会把页面分割成 12 份，所以，占用其中的 8 份，就相当于是页面宽度的 66.6%。 右边右用 4 份的宽度 ... 也就是剩下的 33.3% 的宽度 ...

这里，在第一个 div 标签上，添加一个 col-md-8 .... col 的意思是 column .. md 表示中等尺寸 ... 8 表示占用 8 栏网格。 col-md 这种网格类的样式，会在一般的桌面电脑的设备上使用 ...

然后把剩下的宽度留给下面这个元素 .. 在上面添加一个 col-md-4 ... 表示在中等宽度的设备上，这个元素要使用 col-md-4 这个类的样式 ...

在这两个元素的里面，再添加点内容 ...

h1.page-header .... 主体 ... 边栏 .... 保存 ... 回到浏览器 ...

现在，浏览器的窗口宽度跟在一般的手机屏幕的宽度差不多 ... 你会看到主体与边栏这两栏内容会堆叠在一起显示 ...

下面，我们再调整一下浏览器宽度的宽度 ... 让它变大一些 ... 注意在窗口宽度大于等于 768 像素的时候， .container 这个容器会应用一个固定的宽度 ... 不过主体和边栏仍然是堆叠在一块儿的 ...

继续放大窗口的宽度 ... 在窗口宽度大于等于 992像素的时候，你会发现，主体跟边栏会显示在同一排 ...

下面可以选中这个应用了网络类的元素 ... 现在，页面上应用了在这个类上定义的样式 ... col-md-8 ，占用 12 栏其中的 8 栏，宽度就是整个页面的 百分之 66.666 ...

它下面的这个使用 col-md-4 这个类的元素，宽度是百分之 33.333

注意这两个类的样式的周围都用了一个媒体查询 .. min-widh:992px ，它的意思就是，只有在页面的宽度大于等于 992 像素的时候，才会使用这些样式。

我们可以继续去放大页面的宽度 ... 同样，会把页面分成两部分 ... 左边占用百分之 66.6 的宽度 .. 右边占用百分之 33.3 的宽度 ..

现在，我们想改变一下，我们想让页面，在平板电脑这种宽度的设备上开始，就把页面分成像现在这样的布局 ....

这样，可以把应用的网格类换成 col-sm 类型的 ... sm 是 small 的简写 ...

回到编辑器 ... 把 col-md ... 换成 col-sm ... 意思就是，我们要在小尺寸的设备就应用这样的布局的网格类 ...

保存 ...

回到浏览器 ... 然后可以把窗口缩小一下 .... 再慢慢放大窗口的尺寸 ...

注意，在窗口的宽度大于等于 768 像素的时候，就会应用布局的网格类 ... 把页面分成了两部分 ... 显示在同一排 ... 左边占用百分之 66.666 的宽度 ... 右边占用百分之 33.333 的宽度 ....

继续放大窗口的宽度 .... 会保持同样的布局 ...

也就是，现在，除了在小尺寸的设备上，主体跟边栏会堆叠在一起显示以外 ... 其它的宽度都会把页面分成左右两部分 ...

如果你想要的是，在手机这种宽度的设备上，把页面就设计成这种布局，我们可以使用 col-xs 类型的网格类 . .. xs 表示 Extra small ，特小 ...

回到编辑品 ... 把 col-sm 换成 col-xs ...

保存 ...

回到浏览器 ... 刷新 .... 缩小窗口的宽度 ...

你会发现，在很小的宽度的窗口上，页面也会分成左右两部分，左边是百分之 66.666 的宽度，右边是百分之 33.333 的宽度 ...