在 清单 2 中，Bootstrap 删除了我需要在较旧的响应式设计代码中手动完成的任务。因为页面使用了 Bootstrap 的网格系统，所以我不再需要使用专门的 CSS 来操作或调整盒子大小。仔细安排可视空间的 CSS 也不需要专门的 CSS，因为 Bootstrap 网格在各个块之间设置了很好的默认值。此外，我不需要任何 CSS 来进行媒体查询（media query）并在设计参数中设置响应，因为 Bootstrap 的响应特性会负责完成这些任务。
　　您可以在清单 2 中看到 div 标记的嵌套。嵌套的 div 使用了 Bootstrap 网格类。具有 container 类的 div 是整个固定网格布局的包装程序。具有 row 类的每个 div 在网格中定义了盒子的一行。具有 span4 类的 div 定义了一个横跨 4 个盒子的块。具有 span12 类的 div 定义横跨 12 个盒子的块 — 页面的整个宽度。Bootstrap 有一个 spanN 类，可横跨从 1 到 12 的任意数量 N 的盒子。
图 2 显示了所生成的页面在移动浏览器中的外观（运行 Android 4.1.1 的 Samsung Galaxy S3 上的 Google Chrome）：
图 2. 清单 2 中的浏览器输出


特定于站点的 CSS
　　图 2 中所示页面的主要元素的布置是正确的。但是页面缺少让其更吸引眼球的样式元素，所以我将添加一些 CSS（样例代码 中的 main.css）来实现这一目标。Bootstrap CSS 本身是使用 LESS 编写的，但我通常高度推荐使用 LESS 而不是纯文本的 CSS。但在这个简单示例中，清单 3 中的纯文本的 CSS 足够用了：
清单 3. 向示例 HTML (main.css) 中添加基本设计的 CSS
.widget-content {
  margin: 10px;
  padding: 1px;
  background-color: #DDDDDD;
}   

.widget-title {
  font-weight: bold;
  padding: 10px;
  background-color: #EEEEEE;
}   

.widget-text {
  padding: 10px;
  background-color: #FCFCFC;
}   


#footer {
  text-align: center;
  font-size: small;
}