建站教程：利用Bootstrap进行快速Web开发

meta/viewport 标记是当前的约定，用于将页面调整为设备的可视浏览器空间。万维网联盟 (World Wide Web Consortium, W3C) 正在准备一种替换机制，该机制以一种新的 CSS 规则的形式出现。清单 1 中 meta/viewport 声明的等效 CSS 是：

@viewport {
  width: extend-to-zoom 100%;
  zoom: 1.0;
}

目前，您可以将这个代码包含在您的 CSS 中，并在 HTML 中保留 meta/viewport 标记。当 CSS 形式受到广泛支持时，您就可以删除meta/viewport 声明。

网格系统

清单 1 中的主要容器 div 表示使用 Bootstrap 的固定布局。放入该容器中的 HTML 合并到了 Bootstrap 的网格系统 中。

如果还能想起曾经看到过的大部分 Web 页面，那么您就会认识到它们被分成了一系列的块。位于页面顶部的块可能拥有一个徽标。导航可能位于左边或右边的块中，而内容索引可能也适合放在那个位置。甚至可能出现另一个块包含一个脚注的情况。主要内容本身可能被划分成多个面板或块。过去，Web 设计人员通过使用 CSS 盒子模型（box model）手工设置所有这些块。

网格系统是将盒子布置（比如刚刚描述的）抽象为行和列的一种方法。Bootstrap 为此类网格提供了一个核心的 CSS。您可以通过使用特殊的类，通过嵌入 div 元素将内容放置在任何布局的盒子中。

图 1 显示了一个有用的模板，这个模板最初由 Aaron K. White 开发，用于可视化 Bootstrap 的网格系统并规划如何安排您的内容。在本文中，我做了一些修改，以便在本文中更容易读取文本。

图 1. Aaron K. White 的 Bootstrap 网格系统模板

Bootstrap 网格系统的每一行最多有 12 块，每两个块之间留有小槽来提供间隔。您可以拥有无限数量的行，每一行的高度任您设置。每个块是 70 像素宽，小槽是 30 像素宽。Bootstrap 还为页面正文设置一个 30 像素的左边距。网格系统的设计目标是进行基本的布置并为您分配空间，因此，在理想情况下，您只需关注要在网格中放入什么即可。

填充 HTML 模板

在 “在 CSS 中使用 LESS 实现更多的功能” 中，我使用了一个响应式设计示例来展示 LESS 工具如何增强 CSS 语法。Bootstrap 是一种功能强大的工具，可简化来自该代码的许多关注。清单 2 是来自这篇文章的 HTML，重写该 HTML（如 listing2.html），以便在 Bootstrap 的固定布局网格系统中运行它，并使用 Bootstrap 的响应特性进行补充：

注：相关网站建设技巧阅读请移步到建站教程频道。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!