我们可以先在这个页面上添加点内容 ... 先添加一个标题 ... 上面加上一个叫 page-header 的 css 类，它可以在元素上面添加点额外的样式，比如在标题的下面添加一条灰色的线。这个类的样式已经在 Bootstrap 的样式表里定义好了。

h1.page-header .... 主体

再它下面，再加上一行文字 ... 把它放在一组段落标签里面。

p ... lorem ...

在浏览器里预览一下 ...

不管窗口有多大，内容都会占满整个窗口显示 ... 想让内容在页面上居中显示的话 ... 可以在内容的周围添加一个带 .container 类的容器。

回到编辑器 ... 先选中这些内容 ... 如果安装了 emmet 插件，可以使用快捷键 shfit + command + A ， Windows 上应该是 shift + ctrl + A ... 这样可以使用 emmet 的缩写形式，去包装一下选中的内容 ... 一个 div 标签，上面有一个叫 .container 的类 ... 保存 　...

再回到浏览器 ... 你会发现，现在 ，内容会居中在页面上显示 ... 可以打开 Chrome 浏览器的开发者工具 ... 选择 Elements 选项卡 ...

然后选中带 .container 这个类的 div 标签 ... 在右边，你可以看到应用在这个元素上面的样式 .... 然后我们可以改变浏览器窗口的宽度 .... 注意这个 .container 类的样式的变化 ...

因为 Bootstrap 3 是响应式的设计，所以，浏览器的窗口在一定宽度的时候，这个 container 容器的宽度会有一些变化 ...

把窗口缩小到一定程度的时候，页面的宽度会变成流动式的 ... 你会看到，现在 container 类应用的样式是左右的外边距是 auto ，左右的内边距是 15 像素。

并且在这里，这个类上面并没有设置宽度的样式 ... 而且这条样式也没有用到媒体查询。这也就是移动优先的设计思路。默认的样式都是针对移动设备的。

下面，我们再放大一下浏览器的窗口 ... 因为浏览器打开了开发者工具，所以，在改变窗口大小的时候，在页面上的右上角，会显示出当前窗口的宽度还有高度 ...

注意，在窗口的宽度大于 768 像素的时候，.container 这个类的样式会发生变化 ... 在它上面会应用了一个固定的宽度，也就是 750px ，这个样式周围用到了一条媒体查询，min-width: 768px ，表示，窗口的宽度大于等于 768像素的时候，会把 .container 这个类的宽度设置成 750px ... 一般的平板电脑会用到这个样式 ...

同时这个 .container 也会用到默认的样式左右外边距是 auto ，左右内边距是 15像素 。

继续放大窗口的宽度 ...

当窗口的宽度大于等于 992px 的时候，.container 这个类的样式又发生了一些变化 ... 它的宽度现在是 970px ，在这条样式的周围也用到了媒体查询，min-width: 992px ，意思就是宽度大于等于 992px 的时候。 这里的样式会应用在一般尺寸的桌面电脑上 ...

注意这条样式会覆盖掉 min-widh: 768px 这条媒体查询里设置的样式。

继续放大窗口的宽度 ... 窗口大于等于 1200 像素的时候， .container 的宽度会变成 1170px ... 在它周围的媒体查询是 min-width: 1200px ... 这里的样式会用在大尺寸的桌面电脑上 ...

这条样式，会覆盖掉，窗口尺寸大于等于 992px 的样式，也会覆盖掉窗口尺寸大于等于 768px 的样式 ...

总结

通过这个简单的 .container 类的样式，我们应该能对 Bootstrap 的移动优先的设计有点感觉。也就是默认的样式，都是针对移动设备设计的。

然后通过设置媒体查询，一步一步的去增加应用在大尺寸设备上的样式。