Twitter Bootstrap
即使您不是设计师，Bootstrap 也是一个让您的网站看起来很棒的好方法。
在之前的一篇文章中，我描述了设计框架这一相对较新的现象。正如 Web 应用程序框架使创建服务器端应用程序更容易一样，设计框架使创建客户端设计更容易。它们通过提供预定义的 CSS 类来实现这一点，每个类都指示您要创建的列的宽度、您正在使用的元素类型或您想要使用的颜色和样式。
诚然，CSS 大师会觉得设计框架是不必要的。毕竟，这些人已经可以自行调整布局、调整颜色或创建漂亮的按钮，而无需使用预定义类的帮助。但作为一位设计能力不足的人，我想说，设计框架的引入使得像我这样的人也能制作出不会让人吓得魂飞魄散的 Web 应用程序。
这些框架背后的秘密在于，通过采用其预定义的 CSS 类，您放弃了纯 CSS 所拥有的一些自由。您同意使用它们的类，并在某些情况下使用它们的 HTML 结构。这通常是一个值得的权衡，因为您的代码和 CSS 最终会变得更短、更易读。您可以专注于您的专业领域，即软件开发，而不是调整 CSS 以使其看起来恰到好处。而且，由于这些框架不断发展以支持设计师和开发人员，每次升级都支持更多的浏览器、更多的优化和更多的 CSS 类，您可以将它们集成到您的工作中。
在过去一年中，有一个框架特别席卷了 Web 开发领域：Twitter Bootstrap。Bootstrap 最初于 2011 年夏季发布，由 Twitter 的 Mark Otto 和 Jacob Thornton 编写。Bootstrap 在 GitHub 上以开源许可证发布，几乎一夜之间就成为了轰动一时的项目。事实上，它目前是 GitHub 上最受关注的开源项目，甚至超过了 Ruby on Rails。
在 Y Combinator 的“Hacker News”等网站上，有人抱怨使用 Twitter Bootstrap 的网站激增。我认为这是积极的，它提高了 Web 设计的最低可接受水平，同时也使设计师能够直接且轻松地扩展这些设计。
Bootstrap 基于 LESS，一种编译成 CSS 的语言，在许多方面类似于 SCSS。这意味着，如果您想使用 Bootstrap，您要么需要手动将 LESS 样式表编译为 CSS，要么在部署系统中处理此问题，要么使用 Bootstrap 的预编译版本。虽然使用预编译版本的 Bootstrap 显然是最简单的方法，但它也给您带来了最少的灵活性，因为您将无法修改 LESS 源代码以适应您自己的设计。
在本文中，我将讨论 Bootstrap，包括如何将其集成到您自己的 Web 应用程序中。
安装 Bootstrap有几种方法可以安装 Twitter Bootstrap。最简单和最直接的方法是从 GitHub 克隆 Git 存储库
git clone https://github.com/twitter/bootstrap.git
这将创建一个名为 bootstrap 的新子目录，其中包含许多文件和目录。docs 目录包含当前的文档，与您在 GitHub 上的 Bootstrap 站点上看到的相同。而且，由于它是使用 Bootstrap 编写的，因此它为在您自己的站点上使用 Bootstrap 提供了一组很好的示例。
我在下面讨论 img 目录，所以现在，您基本上可以忽略它。js 目录包含与 Bootstrap 集成的 jQuery 插件。less 目录包含，正如您可能期望的那样，许多 LESS 格式的文件，然后可以将其编译为 CSS 文件。您将在您的网站上使用这些生成的 CSS 文件，而不是 LESS 源文件。
现在，如何将 LESS 文件编译为 CSS？一种方法是安装并自行运行 LESS 编译器。LESS 是用 JavaScript 实现的，这意味着它既可以在浏览器中运行，也可以在我所描述的情况下在服务器上运行，在 JavaScript 的无浏览器实现中运行，例如 Rhino 或 node.js。（早期的 LESS 版本确实是用 Ruby 实现的，但这已经不是事实了，所以请务必使用 JavaScript 版本。）我决定通过下载源代码并使用以下命令从头开始安装来升级服务器上的 node.js
./configure && make && make check && make install
完成此操作后，我不仅拥有了“node”二进制文件，还拥有了“npm”二进制文件，这使我可以安装 node.js 的软件包。您可以使用以下命令安装 LESS
npm install less
完成后，您应该能够进入 less 目录并发出命令
lessc bootstrap.less > bootstrap.css
这会将 bootstrap.less 编译为 CSS，您将其捕获到文件 bootstrap.css 中。
一些 Web 应用程序框架可以为您在后台定期或在部署时执行此编译。值得搜索您喜欢的应用程序框架的文档。Bootstrap 已经变得非常流行，几乎每个主要的框架都以某种方式支持它。
现在，如果这看起来只是为了开始使用 LESS 就做了很多工作，那么您是对的。总的来说，您可能不想从调整源 LESS 文件开始，而是先玩玩生成的 CSS 类和 Bootstrap 提供的其他好东西。为此，您可以简单地获取 LESS 创建的已编译 CSS 文件的快照。一种快速而简便的方法是获取 Bootstrap 文档附带的 CSS 文件；虽然您无法更改 LESS 源代码中的内容，但这对于初学者来说已经足够了。只需查看 docs/assets/css/bootstrap.css，并将其复制到您的 Web 项目中即可。
一种折衷方案，它允许您轻松自定义内容，但不需要您每次都安装和使用 LESS 编译器，是使用 Bootstrap 主页上的 Bootstrap 配置和下载功能。输入您想要使用的颜色和基本设计范例，您将获得一个自定义 CSS 文件，该文件将交付到您的浏览器。
最后，可以在浏览器中运行 LESS，因为（正如我上面指出的）它是用 JavaScript 编写的。但是，我通常发现这是一种不太可接受的方法，仅仅是因为它太慢了，而且当然，我总是希望在服务器上使用它，所以我通常会在那里开始工作。
使用 Bootstrap在除浏览器内 LESS 编译器之外的每种情况下，您最终都会得到一个 CSS 文件，通常名为 bootstrap.css。毫不奇怪，此文件应与您的其他 CSS 文件放在一起，然后以标准方式合并到您的 HTML 文件中
<link href="/bootstrap.css" media="all"
↪rel="stylesheet" type="text/css"/>
如果您只使用它来启动您的 HTML 文件，您会看到……嗯，几乎什么都没有。稍微有些变化，即默认字体和边距（可能已经消失了）。但在很大程度上，您真的没有改变任何东西，也没有明显的优势。这是因为 Bootstrap 是一个按需点菜系统，您可以根据自己的兴趣和需求选择使用它的任何或全部功能。
也就是说，您几乎肯定要做的第一件事是在您的 body 标记内立即添加一个带有“container”类的 div 标记，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<h3>ATF</h3>
<link href="bootstrap.css" media="all" rel="stylesheet"
↪type="text/css" />
</head>
<body>
<div class="container">
<h1>Title</h1>
<p>Body</p>
<p>Body 2
<ul>
<li>Thing One</li>
<li>Thing Two</li>
<li>Thing Three</li>
</ul>
</p>
</div>
</body>
</html>
如果您的系统与我的系统类似，您会看到内容已向右移动，并带有很大的左侧边距。实际上，边距的大小取决于您的浏览器宽度。通过在 body 中使用 div，即使浏览器宽度在其周围变化，该 div 的宽度也可以保持相对稳定。
现在，当您开始将文件划分为单独的行时，事情才真正变得有趣起来。您会看到，Twitter Bootstrap 为您提供了一个网格——这意味着您将文本划分为行，并且每一行都由内容组成，每个内容都占用一定数量的列。Bootstrap 使用 12 列网格，这意味着在任何行中，您都可以使用 12 列的任意组合来混合和匹配文本。您可以通过为 HTML 元素分配“spanN”类来指示某个内容应有多宽，其中 N 是介于 1 到 12 之间的数字（包括 1 和 12）。
例如，您可以有一个宽段落，如下所示
<div class="row">
<p class="span12">Wide paragraph. Very wide paragraph.
Super-duper wide paragraph. Fill the screen's width paragraph.
Use lots of text to fill the screen's width paragraph.</p>
</div>
或者，您可以有四个窄列
<div class="row">
<p class="span3">Narrow paragraph. Narrow paragraph. Narrow
paragraph. Narrow paragraph.</p>
<p class="span3">Narrow paragraph. Narrow paragraph. Narrow
paragraph. Narrow paragraph.</p>
<p class="span3">Narrow paragraph. Narrow paragraph. Narrow
paragraph. Narrow paragraph.</p>
<p class="span3">Narrow paragraph. Narrow paragraph. Narrow
paragraph. Narrow paragraph.</p>
</div>
或者，甚至可以有一个左侧边栏，主文本在右侧
<div class="row">
<p class="span2">Sidebar. Sidebar. Sidebar. Sidebar.
Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar.
Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar.
Sidebar. Sidebar.</p>
<p class="span10">Main text. Main text. Main text. Main
text. Main text. Main text. Main text. Main text. Main
text. Main text. Main text. Main text. Main text. Main
text. Main text. Main text. Main text. Main text.</p>
</div>
现在，诚然，这些类名缺乏任何语义值，并且在某些方面，它们是用于执行表格的新技术——正如我们都知道的那样，表格是一种可怕的非 CSS 布局方式。但是，优势是巨大的。我知道这些类让我更容易尝试布局，将文本移动到页面上的不同位置，并了解当我这样做时页面上其余项目会发生什么。
现在，Bootstrap 提供了许多不打算单独使用的类，而是与其他类结合使用。例如，您始终可以拥有一个使用 h1 标记的标题，但也许您真的希望 h1 在您的主页上突出显示。为此，只需将“hero-unit”类添加到您的 h1 类列表中即可。每个标记可以包含任意数量的类这一事实使得从 Bootstrap 添加和删除设计样式以及试验不同的样式外观变得非常容易。
现在，诚然，当您使用 Bootstrap 时，h1、h2 及其朋友默认情况下会被很好地设置样式，不仅设置了字体大小和粗体，还设置了行高。但是，您可以使用 Bootstrap 的一些类使它们比默认值更时尚。如果您的 h1 是页面标题，您可以将其放在类为“page-header”的 div 中。
非标题文本也可以享受一些待遇。如果您希望某些文本（例如术语表定义）在用户的鼠标光标悬停在其上方时出现，只需将文本包装在“abbr”标记中即可
<abbr title="GNU'S Not Unix!">GNU</abbr>
带有 abbr 标记的文本下方带有浅色下划线，这使用户可以更轻松地识别此类文本。
表格也获得了一些精美的样式。通过使用 table-striped 类，您可以自动让交替行包含浅色背景色以区分它们。
表单Bootstrap 还对 HTML 表单提供强大的支持。与所有其他块级元素一样，“form”标记可以采用“spanN”类，指示其宽度。但是，表单本身看起来会比没有 Bootstrap 的情况更漂亮。文本字段的大小适当，并在获得输入焦点时获得漂亮的阴影。提交按钮具有漂亮的圆角，并且鼠标光标在悬停在其上方时会变为指针。
但是等等，情况会更好。假设您希望您的提交按钮比平常大一点。好吧，只需将“btn-large”类添加到“input”标记，您就会得到一个更大的按钮。您也可以使用 btn-small 或 btn-mini 来获得其他尺寸的按钮。
您还可以通过设置其他类来着色您的按钮。“btn-primary”类将使用 Bootstrap 的主色（默认为蓝色）。但是，您可以改用“btn-danger”（表示红色）、“btn-warning”（表示黄色）和许多其他颜色。通过这种方式，Bootstrap 在语义上使用 CSS 类。我发现能够从按钮的用途而不是它们包含的颜色来思考非常有用。级别和颜色在 Bootstrap 中也是一致的。如果您将文本放在同时具有“label”和“label-warning”类或“badge”和“badge-warning”类的 span 或 div 中，则文本将以警告颜色突出显示。您还可以拥有按钮组、复选框和单选按钮的标签（以便人们可以单击文本，而不仅仅是小部件）以及许多其他功能。
导航栏和图标如果您希望您的网站具有简单的导航栏，您可以避免创建使导航栏工作所需的 HTML 和 CSS，而只需使用 Bootstrap 的“navbar”类即可。无论您想要一个简单的导航栏、一个带有弹出式 JavaScript 控制按钮的导航栏，还是甚至在导航栏内嵌入表单，Bootstrap 都提供了所有这些选项。您甚至可以将导航栏设置为“响应式”——这意味着它知道如何根据用户的浏览器窗口宽度展开和折叠。
“img”目录包含两个图像：一个用于 Bootstrap 提供的所有黑底白字图标，另一个用于这些相同图标的所有白底黑字版本。图标都在一个图像上，因为它们利用了 CSS 精灵，这是一种使您的浏览器可以下载单个图像，然后独立选择性地显示该图像的各个部分的技术。因此，如果您在您的网站上有一个下载链接，并且您想要有一个下载图标，您可以添加
<p><i class="icon-download"></i>Download</p>
我已经从事 Web 开发一段时间了，并且认为我以前见过技术的快速采用。但是，就我所知，Twitter Bootstrap 已经超越了所有这些。它很受欢迎，质量非常高，符合标准，跨平台和语言工作，并且易于使用。
我能想到的唯一缺点是相当小的——即它使用 LESS 而不是 SCSS，这意味着与 Ruby on Rails 的集成稍微复杂一些。但是，即使这种集成也是轻而易举的。Ruby gems 以多种不同的方式解决了这个问题。
我在自己的工作中采用了 Bootstrap，并期望在未来的项目中也采用它。Bootstrap 并没有解决 CSS 的所有问题，但它解决了其中的许多问题，并使它们变得如此容易访问，以至于即使像我这样的人也可以创建一个有吸引力的站点。而且，在多年来不得不为我简单的原型网站看起来不太吸引人而找借口之后，我现在有了一种方法来确保它们至少在美学上令人愉悦。
资源GitHub 上 Twitter Bootstrap 的主页是 http://twitter.github.com/bootstrap。文档以及许多示例链接都在那里。
有关 LESS 的更多信息，请访问 https://lesscss.org.cn。完整的文档以及程序二进制文件都在那里可用。
如果您有兴趣将 Bootstrap 与 Rails 一起使用，我建议观看有关此主题的“Railscast”截屏视频，该视频既介绍了 Bootstrap，又演示了如何将其与 Rails 应用程序集成：http://railscasts.com/episodes/328-twitter-bootstrap-basics。
Reuven M. Lerner 是一位长期的 Web 开发人员，提供 Python、Git、PostgreSQL 和数据科学方面的培训和咨询服务。他撰写了两本编程电子书（Practice Makes Python 和 Practice Makes Regexp），并在 http://lerner.co.il/newsletter 上发布面向程序员的免费每周新闻通讯。Reuven 的 Twitter 账号是 @reuvenmlerner，与妻子和三个孩子住在以色列的莫迪因。
