Bootstrap 3 How-To #3 布局

对于 Web 开发来说，一个永远的话题是如何创建一个跨浏览器兼容的布局。许多年来，各种框架使用各种技术来解决这个问题。Bootstrap 使用了一个不同的方式来解决这个问题。基于 960 像素的布局 http://960.gs，bootstrap 提供了更为简单的语法，它还支持响应式布局，布局可以根据设备的不同尺寸进行调整，从桌面计算机到平板和手持设备。

以前版本的 bootstrap 在没有使用响应式布局的时候，使用了 940px 布局使用 span* 和 offset* 布局。在使用响应式布局的时候，网格系统使用 724px 或者 1170px 的宽度。

如果希望使用百分比的布局，可以将容器的类从 .row 替换为 row-fluid。

3.0 版本对这一部分有比较大的变动，可以区分特小型设备 xs ( Extra small devices, 小于 768px 比如手机 ), 小型设备 sm ( Small devices, 小于 992px, 比如平板 )， 中型设备 md ( Medium devices, 小于 1200px, 比如桌面计算机),  大型设备 lg ( Large devices, 比如宽屏显示器 )。

而 row-fluid 已经不存在了。

我们马上就基于这个系统创建网站的页面，首先，我们先熟悉 bootstrap 布局的基本特性。

 开始

 让我们从示例中的 jumbotron 页面开始。

 在我们自己创建的 study 文件夹中创建名为 3 的文件夹。

1. 将这个文件夹中的两个文件复制到 study 中的 3 文件夹中。

2. 在文本编辑器中打开 index.html 文件。

3. 将第 10 行的标题修改为

<title>Layout Playground | My Bootstrap site</title>

4. 找到第 71 行，将标题修改为

<h1>Layout Playground</h1>

5. 打开 index.html，你会看到如下的页面

全文：http://www.cnblogs.com/haogj/p/3295711.html