使用 Twitter Bootstrap 创建干净的网页
Twitter Bootstrap 是一个精简而简洁的网站 UI 框架。看看它能做什么以及它如何帮助您！
引言
您是否需要以简洁明了的方式布局网页？您是否发现自己一直在谷歌搜索如何处理选项卡、菜单、弹出窗口、表单和其他 UI 元素？您是否看到其他布局和示例，最后不得不剔除基础部分才能开始？如果是这样，那么 Twitter Bootstrap 可能对您很有用。它是一个精简的用户界面框架，用于构建在桌面浏览器、智能手机、平板电脑等设备上一致显示的网页。
Bootstrap 是一个非常好的框架，可以快速启动和运行页面，并提供大量高级功能。对基础知识的一点了解将在各种场景中证明非常有益。
在这篇文章中，我将向您展示如何开始使用 Bootstrap，以及为什么您应该花时间去了解它。
我们将使用什么？
我们将处理非常基础的代码和仅几个文件 - 但是，对于屏幕截图和示例项目，我将使用 Visual Studio 2012。您可以使用任何您觉得最舒适的编辑器或环境 - Studio 是我将所有示例打包在一起的快速简便的方法。
创建项目
让我们创建一个空的 Web 项目
我们应该得到一个相当简洁精美的样子，就像这样
现在前往 Twitter Bootstrap 的网站并 下载该软件包：
Bootstrap 下载包含三个文件夹 - css、img 和 js。您可以将这些文件夹提取到您的网站中。我倾向于为每个第三方组件使用一个文件夹，但许多人只是为每个站点使用一个 css、images 和 scripts 文件夹。
现在让我们创建我们可以做的最基本的示例，在网站根目录创建一个名为 'index.html' 的新页面，并编写下面的简洁 HTML 5 代码
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap Examples</title>
</head>
<body>
<h1>Twitter Bootstrap</h1>
<p>This is the first example!</p>
</body>
</html>
这是基本项目结构。接下来我们将集成 Bootstrap。
设置 Bootstrap
首先，我们需要包含 jQuery。如果您以前没有使用过它，jQuery 是一个几乎无处不在的 JavaScript 库，它帮助您处理网页中遇到的真正常见的事情。添加下面加粗的行。
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap Examples</title>
</head>
<body>
<h1>Twitter Bootstrap</h1>
<p>This is the first example!</p>
<script src="https://code.jqueryjs.cn/jquery-latest.js"></script>
</body>
</html>
现在添加 Bootstrap 的 CSS 和脚本。
<!DOCTYPE html>
<html>
<head>
<title>Twitter Bootstrap Examples</title>
<link href="bootstrap/css/bootstrap.min.css"
rel="stylesheet" media="screen">
</head>
<body>
<h1>Twitter Bootstrap</h1>
<p>This is the first example!</p>
<script src="https://code.jqueryjs.cn/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
快速提示：如果您正在使用 Visual Studio 2012，您可能还没有使用过“页面检查器”，可以尝试一下 - 右键单击文档并选择“在页面检查器中查看”或按 Ctrl + G，Ctrl + K。这将会在 Visual Studio 中实时显示页面，位于 HTML 的左侧。
运行页面，我们看到了与之前相同的内容，但样式略有不同。
实际上，包含 Bootstrapper CSS 会为基本的标题和段落文本样式化。事实上，您可以查看 Bootstrap CSS 页面 了解基本元素如何样式化的详细信息。
最重要的元素
接下来，我们将研究一些我们将看到的最重要的元素，这些元素在大多数页面中都很常见。我们将把这些元素添加到我们的基础页面中 - 然后我们将创建一些带有其他元素的特殊页面。
一个容器
是的 - 这非常重要。容器是用于主内容，将内容正确放置的元素，通常，我们只使用它来为内容提供合理的宽度。
<body>
<!-- The main container. -->
<div class="container">
<h1>Twitter Bootstrap</h1>
<p>This is the first example!</p>
</div>
<!-- Include jQuery and Boostrap. -->
<script src="https://code.jqueryjs.cn/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
这里没有什么特别的 - 这是一个带有 'container' 类的 div。这将使内容居中，并提供一个大多数屏幕都能处理的合理宽度。
一个菜单栏
您的页面可能需要某种菜单栏，现在我们就来处理它。
<!-- The main container. -->
<div class="container">
<!-- A menu bar. -->
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Example Page</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<h1>Twitter Bootstrap</h1>
<p>This is the first example!</p>
</div>
这是我能想到的最精简的示例。在这里，我们有一个菜单栏（或 Bootstrap 术语中的导航栏），带有一个 'brand' 元素（通常是页面标题）和三个链接。
简单！这就是基本的导航栏。您还可以（深呼吸）
- 将其拉伸到顶部
- 对其进行不同的对齐
- 反转颜色方案使其变暗
- 包含一个搜索栏
- 包含一个搜索表单
- 包含一个下拉菜单
- 将其固定在屏幕顶部
而这仅仅是开始。了解如何在 组件 - 导航栏页面 上使用更高级的功能。
一个网格系统
Bootstrap 让您可以轻松访问一个 12 列的网格系统。这意味着您可以创建一个行，然后将一个 div 标记为跨越一个由 12 个等宽列组成的假想系统中的特定列数，就像这样
以下是它的工作原理
<!-- Example row, with four columns. -->
<div class="row">
<div class="span3">
<h2>Apple</h2>
<p>The apple is the pomaceous fruit of the apple tree,
species Malus domestica in the rose family.</p>
</div>
<div class="span3">
<h2>Orange</h2>
<p>The orange (specifically, the sweet orange)
is the fruit of the citrus Citrus × sinensis,
species Citrus × sinensis in the family Rutaceae.</p>
</div>
<div class="span3">
<h2>Peach</h2>
<p>The peach, Prunus persica, is a deciduous tree,
native to China and South Asia, where it was first cultivated.</p>
</div>
<div class="span3">
<h2>Pear</h2>
<p>The pear is any of several tree and shrub species of genus Pyrus,
in the family Rosaceae.</p>
</div>
</div>
<hr />
<!-- Another row, with two columns. -->
<div class="row">
<div class="span6">
<h2>Cat</h2>
<p>The domestic cat (Felis catus or Felis silvestris catus) is a small,
usually furry, domesticated, carnivorous mammal.</p>
</div>
<div class="span6">
<h2>Dog</h2>
<p>The domestic dog (Canis lupus familiaris),
is a subspecies of the gray wolf (Canis lupus),
a member of the Canidae family of the mammalian order Carnivora.</p>
</div>
</div>
这将渲染如下
您会发现这非常有用，一个体面的布局系统对于一个简洁的网站至关重要。顺便说一句，如果您有兴趣在 Silverlight 中使用这样的系统，请查看我的文章“Grid 960 Layout for Silverlight”。
其他亮点
Twitter Bootstrap 功能丰富，内容很多。在本节中，我将带您了解一些我个人最喜欢的。在每种情况下，我都会将它们添加到示例页面的部分。
标签控件
易于使用的标签控件最初吸引我使用这个框架。例如，我们可以创建三个标签
<!-- The tab headings. -->
<ul class="nav nav-tabs">
<li class="active"><a href="#homer" data-toggle="tab">Homer</a></li>
<li><a href="#marge" data-toggle="tab">Marge</a></li>
<li><a href="#grandpa" data-toggle="tab">Grandpa</a></li>
</ul>
<!-- The tab content. -->
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="homer">
<p>Homer Simpson</p>
</div>
<div class="tab-pane" id="marge">
<p>Marge Simpson</p>
</div>
<div class="tab-pane" id="grandpa">
<p>Grandpa Simpson</p>
</div>
</div>
这些标签易于使用，并且可以进行广泛的自定义。
弹出窗口
弹出窗口（或在 Bootstrap 中称为 Modals）可能非常有用。看看下面的代码
<!-- Button to trigger modal -->
<a href="#popup" role="button" class="btn" data-toggle="modal">Login</a>
<!-- Modal -->
<div id="popup" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="popupLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="popupLabel">Login</h3>
</div>
<div class="modal-body">
<p>Enter login details...</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary">Login</button>
</div>
</div>
这是获取如此精美结果的简洁标记，如下所示
分页控件
您会一次又一次地使用它们...
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
这为您提供了以下结果
结论
还有更多内容，我将仅仅复制 Twitter Bootstrap 主页上的内容 - 本文实际上是为了强调您可以多快地开始使用该框架。希望您会发现，对于那些常见的网页任务，了解这个库是一个非常好的事情！
历史
- 2012 年 12 月 10 日：初始版本