从Twitter退出Bootstrap

Twitter 最近推出了Bootstrap ，这是一个CSS样式库，面向需要一些设计帮助的Web应用程序开发人员。 该工具包包括从网格布局到按钮和模式的所有内容，并且可以在几乎所有现代浏览器上使用，一直到IE7。

让我们看看我们能做些什么...

Bootstrap也通过Less预处理器得到了增强，它增加了使用Bootstrap的一些其他原因，尽管为了简化起见，我们将从本教程的范围中排除Less功能。

Bootstrap包含了一些文档，但是并没有真正说明如何使用该工具包（相反，只有一个大的演示页面可供您自己调查）。 因此，在本文中，我们将精简Bootstrap的示例页面，并分析如何复制Bootstrap涵盖的元素。 在提供示例中，我们还将构建一个完全由Bootstrap制作的示例网页。

---

涵盖了什么？

我们将看一下以下内容（使用链接跳至各个部分）：

• 网格系统
• 版式
• 桌子
• 表格和按钮
• 导航
• 药片和药丸
• 分页
• 警报和错误消息
• 模态

---

网格系统

网格是许多Web设计不可或缺的一部分。 就像城市规划者在网格上进行设计一样，网页设计师也可以通过这种方式调整其元素。 Bootstrap包括一个网格系统，其总宽度为940px，封装在container类中。 一共有16种不同的列类，每类的宽度随着数量的增加而累计增加60px，从40px开始。 例如，span1类的宽度为40px，而span3类的宽度为160px。

如上图所示，我们可以使用不同类的组合来创建等于940px的总宽度，包括每个像素增加的20px边距。 例如，使用四个div.span4类将翻译为220 + 20 + 220 + 20 + 220 + 20 + 220，这一旦我们推开计算器，便等于940像素。 通过将所有这些包装row类中，Bootstrap通过将整个对象向后移动20个像素来解决最后一列的20个像素裕量。

<div class="row">
		<div class="span6">
			<h1>Column #1</h1>
			<p>Content for column #1.</p>
		</div>
		<div class="span5">
			<h1>Column #2</h1>
			<p>Content for column #2.</p>
		</div>
		<div class="span5">
			<h1>Column #3</h1>
			<p>Content for column #3.</p>
		</div>
	</div>

上面的代码将生成一组相当相等CSS列，显示一些最少的内容。 自然地，我们可以只交换其中一些类或添加/减去标签来创建不同的布局。 Bootstrap工具箱的另一个功能是能够通过偏移来“跳过”列。 偏移量类再次编号为1-16，其宽度遵循相同的+60模式，尽管它们现在包括额外的40像素以补偿所述列的左右边距。 例如，我们可以以上面的示例为例，但是通过将offset5类添加到end标记中来删除中间列。 例如：

<div class="row">
		<div class="span6">
			<h1>Column #1</h1>
			<p>Content for column #1.</p>
		</div>
		<div class="span5 offset5">
			<h1>Column #3</h1>
			<p>Content for column #3.</p>
		</div>
	</div>

仅需更改几个数字即可对其进行操作非常简单，并且本节开头的图像应作为一些推荐结构的指南。

---

版式

排版几乎是本教程中显示的所有元素中的一环。 Bootstrap附带了您要为其设置样式的所有印刷标记，包括从<address>标记到<h1> ，以及整个标题层次结构。 老实说，这是您可能已经知道的“ Web Development 101”，所以我不会浪费您的时间来解释如何设置样式。 这是相当基本的东西。

请务必注意，Bootstrap确实考虑了较旧的，现在已弃用的标签，因此，如果您正在使用使用它们的CMS，或者对于不知道其他选择的客户端，则不必担心。

报价单

Bootstrap确实需要更多解释的地方是您何时使用<blockquote>标记。 您可以单独使用标记来显示缩进的报价，左侧带有粗的灰色边框。 但是，可以通过在内部嵌套其他标签来赋予报价来增强此功能。 当涉及到添加属性时，只需将引号文本包装在<p>标记中，并将源代码包装在<small>标记中，Bootstrap将自动设置样式并在源代码前放置一个破折号。

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
	<small>Connor Turnbull, August 30th</small>
</blockquote>

您最终会得到与下图类似的结果，具体取决于您在段落和小标签之间插入的内容。

清单

列表是Bootstrap涵盖的另一种版式范围，并且具有四组不同的样式：项目符号列表，嵌套项目符号列表，有序列表和词汇表。 同样，它们并不难使用，因为它们没有偏离HTML的标准。 因为列表可以用不同的方式构造，所以这里快速回顾一下如何在Bootstrap样式中使用它们。

下面的代码是一个基本的无序项目符号列表，其产生的效果类似于下图中的第一个示例。 像第二个示例一样，将ul ol以产生一个有序列表。

<ul>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	...
</ul>

如果将无unstyled类添加到无序列表， unstyled项目的列表项将不会成为项目符号或无序列号。 它们就像常规行一样显示，而嵌套项目的左侧会有一个项目符号。

<ul class="unstyled">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Consectetur adipiscing elit</li>
	...
</ul>

添加描述列表的方式与在Bootstrap之外所期望的方式相同，并且会产生一个示例，如上图中的最后一个示例。

<dl>
	<dt>Lorem ipsum</dt>
	<dd>Lorem ipsum dolor sit amet</dd>
	<dt>Consectetur</dt>
	<dd>Consectetur adipiscing elit</dd>
	...
</dl>

---

桌子

Bootstrap是一个工具包，部分地面向新的Web设计人员，因此不必说这些东西不是用于布局的。 相反，表是用于表格数据的，并且Bootstrap可以很好地利用其样式美化表格数据，而无需任何其他类或属性。 例如，我们可以看一下将生成表HTML的常规代码段。

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>Code</td>
        </tr>
    </tbody>
</table>

上面的代码在Twitter的官方示例中使用的下图创建了表格。 它具有三个内容行和四个列的标题，并且非常标准。 通过对表的标准创建进行少量操作（无需进行任何操作），Bootstrap即可自动应用其样式。

在这种情况下，要记住的最重要的事情是正确嵌套标签。 例如，如果您没有将标题行包装在<thead>标记中，则样式将不适用。

默认情况下，该表不是斑马条纹的，其中交替的颜色可以填充每一行的背景。 但是，只需将zebra-striped类添加到<table>标记中，而无需对行或单个部分进行任何操作，就可以轻松实现。

<table class="zebra-striped">
    <thead>
        <tr>
            <th>#</th>
            ...

最后，通过添加一小段jQuery，但除了将sortTableExample作为<table>标记的ID添加之外，对HTML没有任何更改，您可以在单击列标题时添加排序功能。 此功能需要Tablesorter 2.0 jQuery插件， 可免费下载 。 正如您可能已经猜到的那样，您还需要调用jQuery才能使其正常工作。

<strong><script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/195_bootstrap/tut/path/to/tablesorter/jquery.tablesorter.min.js"></script>
<script>
  $(function() {
    $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
  });
</script></strong>
<table class="zebra-striped" id="sortTableExample">
    <thead>
        <tr>
            <th>#</th>
  ...

---

表格和按钮

我们已经介绍的大多数内容都非常简单，Bootstrap会将样式应用到您的代码中，而与常规代码相比几乎没有变化。 摆脱这些障碍，我们现在可以继续学习一些需要更多解释和更多指导的东西。

形式

对于表单，您可以使用很多不同的样式，因此我们将分别研究每个样式。 然后，您可以将它们相互结合使用，并使用常规的旧HTML格式的已有知识对其进行操作。

首先，应该注意的是，您的整个表单应该包装在<form>标记中，但是您可能已经知道了。 Bootstrap还建议您将元素包装在<fieldset>标记中，并附加一个<legend>标记。

<form>
    <fieldset>
        <legend>Lorem ipsum dolor sit amet</legend>
        <em>(your fields go here)</em>
    </fieldset>
</form>

通常，您的表单设置应与上面的代码相同。 Bootstrap提供的唯一其他选择是选择堆叠表格，其中标签位于字段的顶部，而不是左侧。 可以通过将form-stacked类添加到<form>标记中来实现。

<form class="form-stacked">

文字输入

为了开始介绍表单字段，我们将看看带有标签的常规输入字段。 下面的代码段实质上是一个<label>和<input>标记，使用clearfix类包装在<div>标记中，以确保正确的间距。 此外，实际字段再次与input类一起包装在另一个<div> ，以确保正确的间距。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <input type="text" />
    </div>
</div>

为了本教程的缘故，我将忽略应在您的代码中采用的一些实践。 例如，每个输入都应该有一个ID，该ID通过“ for”属性绑定到标签，并且在处理数据时，通常需要命名输入字段以获取它们。 我们在这里专门研究如何使用Bootstrap的样式，因此在我的示例中并未包括那些类型的属性，以尝试使事情尽可能简单。 尽管如此，即使将它们与Bootstrap结合使用，也不应忘记这些任务。

通过将xlarge类添加到<input> ，可以扩展表单字段。

我们可以通过添加适当的属性来以常规方式禁用输入，如以下示例所示。 Bootstrap的样式已添加到disabled类中，应该添加该样式以直观地显示用户无法通过将该字段变灰来与该字段进行交互。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <input class="xlarge disabled" type="text" placeholder="Lorem ipsum dolor sit amet" disabled />
    </div>
</div>

通过使用<input>标记可以实现禁用字段的变灰方式，但不能进行不可编辑的标记。 相反，Bootstrap使用一个简单的<span> ，该<span>可以与隐藏的输入结合使用。 这些字段用于用户不应该编辑的信息，例如自动收集的日期或IP地址。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <span class="uneditable-input">Lorem ipsum dolor sit amet</span>
        <input type="hidden" value="Lorem ipsum dolor sit amet" /> 
    </div>
</div>

我们最后看样式化文本输入是为了在遇到错误时显示上下文帮助。 这是通过将error类添加到构成clearfix的<div>和<input>标记本身中来完成的。 在下面的help-inline类中添加<span>标记会在右侧添加帮助消息。

<div class="clearfix error">
    <label>Lorem ipsum</label>
    <div class="input">
        <input class="error" type="text" />
        <span class="help-inline">Dolor sit amet</span>
    </div>
</div>

下拉选择

下拉菜单的结构类似，使用常规代码，如下所示。

<div class="clearfix">
    <label>Lorem Ipsum</label>
    <div class="input">
        <select>
            <option>Lorem</option>
            <option>Ipsum</option>
            <option>Dolor</option>
            <option>Sit</option>
            <option>Amet</option>
        </select>
    </div>
</div>

文本字段的xlarge类与<select>标记的medium类相反。 将此类添加到选项的下拉菜单中实际上会使字段变窄。

选框

在Bootstrap中并没有真正设置复选框的样式。 该工具包仅使它们与其他字段排成一排，并通过与每个复选框项一起创建一个列表来做到这一点。 该代码非常不言自明，只需确保将标签文本和复选框都包装在<label>标记中，以便（a）复选框浮动到左侧，并且（b）可以通过单击选择复选框标签。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <ul class="inputs-list">
            <li>
                <label>
                    <input type="checkbox" />
                    <span>Lorem ipsum dolor sit amet</span>
                </label>
            </li>
         </ul>
    </div>
</div>

该代码将生成一个带有右侧标签的复选框。 要创建其他项，只需重复列表项及其内容，然后再打开复选框即可。

要禁用复选框，只需将disabled属性添加到<input>标记，并将disabled类添加到<label>标记。

<li>
    <label class="disabled">
        <input type="checkbox" disabled />
        <span>Lorem ipsum dolor sit amet</span>
    </label>
</li>

此外，还有两种与文本字段配对的复选框类型：前置和附加复选框。 同样，这是不言自明的，并且与常规文本字段非常相似。 但是，这一次您需要将复选框包装在<label>标记（带有add-on类）中，并将input-prepend或input-append类包装到父类<div> 。 然后，剩下的就是要确保您将标签和字段正确放置，具体取决于您要添加还是添加标签。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input input-append">
        <input type="text" />
        <label class="add-on"><input type="checkbox" /></label>
    </div>
</div>

上面的代码用于附加的复选框，但是，如果您想要一个附加的复选框，则几乎没有更改。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input input-prepend">
        <label class="add-on"><input type="checkbox" /></label>
        <input type="text" />
    </div>
</div>

文件输入

文件输入非常类似于文本字段，下面的代码很容易说明。 使用input-file类创建常规文件输入。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <input type="file" class="input-file" />
    </div>
</div>

文字区

表单的最终Bootstrap样式是文本区域。 文本区域的创建方式与单行文本字段相同。 就像扩大文本字段一样，文本区域也具有自己的类以使其变宽xxlarge 。

<div class="clearfix">
    <label>Lorem ipsum</label>
    <div class="input">
        <textarea></textarea>
    </div>
</div>

（可选）您可以在字段下方添加一个小的帮助行，并在<textarea>标记后立即添加以下行。

<span class="help-block">Lorem ipsum dolor sit amet</span>

纽扣

现在是时候处理我们的表格了，通常我们通过单击一个按钮来进行处理。 幸运的是，Bootstrap涵盖了按钮，而且添加起来超级简单。

可以通过<a>或<button>标记添加<button> 。 两者共享相同的类，并且看起来相同，但是您应该尝试并保留按钮以进行操作，并保留用于链接的链接。 因此，例如，一个按钮将这样写：

<button class="btn">Lorem ipsum</button>

而作为链接创建的一个标识按钮将这样编写：

<a href="#" class="btn">Lorem ipsum</a>

默认情况下，该按钮将以浅灰色样式显示。 但是，可以通过应用其他类轻松将其更改为其他四个（浅蓝色，蓝色，绿色和红色）之一。

• primary是蓝色按钮，它是主要操作（例如，提交表单）
• info的淡蓝色按键，通常用于访问信息
• 绿色按钮success表示信号成功
• 红色按钮的danger ，通常用于不可逆或危险的操作，例如删除

<button class="btn primary">Primary</button>
<button class="btn">Default</button>
<button class="btn info">Info</button>
<button class="btn success">Success</button>
<button class="btn danger">Danger</button>

我们还可以更改默认按钮的大小。 要放大，只需添加large的类或与（是的，你猜对了），它收缩small类。

最后，要禁用按钮，我们需要做的就是添加disabled类，如果是操作按钮，则设置disabled属性。

<button class="btn disabled" disabled>Lorem ipsum</button>

要么

<a class="btn disabled">Lorem ipsum</a>

---

导航

Bootstrap包含一个固定的导航栏，类似于Twitter网站上的导航栏。 该栏基本上由三部分组成，标题链接，搜索栏中的菜单项，用几个<div>标签包裹，这些标签不值得解释。

在下面的代码中，您会注意到一个包含标题的<h3>标签。 修改它并添加自己的链接和文本非常容易。

<h3><a href="#">Lorem ipsum</a></h3>

接下来是菜单项，它们只是带有链接的未分类列表项。 复制这些项目非常简单，因为除了当前链接上的active类之外，它们不需要特定于Bootstrap的样式。

<ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
</ul>

最后一个列表用于下拉菜单。 它具有一个列表项，并且有另一个嵌套列表悬停在上方。 下面代码的第三行是列表项，该项始终显示在导航栏上，而从第4行开始的列表是悬停项。

<ul class="nav secondary-nav">
    <li class="menu">
        <a href="#" class="menu">Lorem ipsum</a>
        <ul class="menu-dropdown">
            <li><a href="#">Dolor sit</a></li>
            <li><a href="#">Amet Consequeter</a></li>
            <li class="divider"></li>
            <li><a href="#">Enough with the Latin</a></li>
        </ul>
    </li>
</ul>

您会注意到，使用divider类添加一个空列表项将在下拉菜单中添加一个除法器。

在使用中，顶部栏应看起来像这样，位于页面顶部。

<div class="topbar">
    <div class="fill">
        <div class="container">
            <h3><a href="#">WebDesignTuts+</a></h3>
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Weekly Polls</a></li>
          </ul>
          <form action="">
            <input type="text" placeholder="Search" />
          </form>
          <ul class="nav secondary-nav">
            <li class="menu">
                <a href="#" class="menu">Lorem ipsum</a>
                <ul class="menu-dropdown">
                    <li><a href="#">Dolor sit</a></li>
                    <li><a href="#">Amet Consequeter</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Enough with the Latin</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </div>
</div>

请注意，您将要补偿页面顶部栏的40像素高度，否则它将与页面的第一个元素重叠。

---

药片和药丸

标签和药丸非常容易创建，因为它们只是常规的旧列表。 当然，它们不起作用-Bootstrap与样式有关。 只需使用tabs卡式界面的tabs类或药丸选项卡的pills类构造列表即可。 就像上一节中的导航栏中一样，将active类添加到列表项将突出显示它。

对于选项卡切换器，使用类似于以下内容的东西：

<ul class="tabs">
  <li class="active"><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit</a></li>
  <li><a href="#">Amet</a></li>
</ul>

要使用药丸，请将以下内容替换为第一行。

<ul class="pills">

---

分页

现在，我们转到分页，它是无功能的（例如标签和药丸），但仍在Bootstrap中设置样式。 Bootstrap在与分页按钮相同的选项卡上处理分页按钮，该列表这次与pagination类一起包装在<div> 。 除了为上一个/下一个链接保留的第一个和最后一个项目之外，每个列表项中都可以有一个链接号（或省略号）。 这些都将prev和next班，分别。

此外，可以通过添加disabled类来禁用任何按钮，并且活动链接将用active类突出显示。 像这样：

<div class="pagination">
    <ul>
        <li class="prev disabled"><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="#">5</a></li>
        <li class="next"><a href="#">Next</a></li>
    </ul>
</div>

---

警报和错误消息

警报栏在外观上与按钮非常相似，尽管它们的构造不同。 每个错误消息都是带有alert-message类的<div>标记。 有四种不同类型的消息，每种消息都必须添加相应的类：

• 黄色栏warning
• 红条error
• 绿色酒吧的success
• info的蓝条

然后按以下方式编写警报消息，从warning/error/success/info仅选择一个类别。

<div class="alert-message warning/error/success/info">
    <a class="close" href="#">&times;</a>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p>
</div>

仅供参考，上面代码的第二行在alter消息的右侧添加了“×”，可以将其链接到删除消息的操作。

警报也不必是一线事。 如果您的消息超出一行，则只需将block-message类添加到用于一行的代码中，同时仍使用不同的类型类。

<div class="alert-message block-message warning/error/success/info">
    <a class="close" href="#">&amp;times;</a>
    <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor...</p>
</div>

这些消息还可以保留按钮，如果需要通过选择来解决警报，则这些按钮很有用。 如果您返回到按钮部分，就会知道如何添加按钮。 只要确保使用较小的版本，只需将small类添加到按钮本身，然后将其包装在具有alert-actions类的<div>标记中即可。

<div class="alert-message block-message warning/error/success/info">
    <a class="close" href="#">&amp;times;</a>
    <p><strong>Lorem ipsum dolor sit amet!</strong> Fusce interdum euismod tempor...</p>
    <div class="alert-actions">
        <a href="#" class="btn primary small">Lorem ipsum dolor</a>
        <a href="#" class="btn small">Sit amet</a>
    </div>
</div>

---

模态

在某些情况下，模态可用于显示信息，通常用于输入数据，例如用户信息或帖子。 Bootstrap的模态非常简单，分为三个部分。 页眉，正文和页脚。 首先，我们首先打开模式的<div>标签，并使用Bootstrap所需的某些内联样式对其进行定位。

<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">

然后，在该标签内，我们放置三个部分，第一个部分是标题。 标头具有一类modal-header ，仅包括两行，标题的<h3>标记，以及（可自定义的）链接的“×”（可自定义以关闭弹出窗口）。

<div class="modal-header">
    <h3>Lorem ipsum</h3>
    <a href="#" class="close">&amp;times;</a>
</div>

接下来，我们有内容的主体。 这很简单，只要是带有modal-body类的<div> ，并且您的内容就在其中。 因此：

<div class="modal-body">
    <p>Lorem ipsum dolor sit amet</p>
</div>

最后，我们有模态页脚（另一个<div> ，这次是modal-footer类），通常由要执行操作的按钮组成。 它们的生成方式与我们使用Bootstrap创建的所有其他按钮完全相同，因此无需其他说明。

<div class="modal-footer">
    <a href="#" class="btn primary">Lorem ipsum dolor</a>
    <a href="#" class="btn">Sit Amet</a>
</div>

好的，我撒谎了。 那不是最后一步。 我们仍然需要关闭原始的<div> 。

</div>

将所有这些部分放在一起，就可以得到一个漂亮的模态窗口。 不幸的是，正如我不断提醒您的那样，Bootstrap实际上是在处理样式。 该模式实际上不会像弹出一样出现。 如果Bootstrap扩展为具有CSS以外的其他功能，那将是很棒的事情，但是目前，您将不得不生成或提供自己的功能。

---

最后的想法

上图显示了我们的最终设计。 它包含我们在本教程中创建的所有元素（ 表单元素有单独的演示 ），完全在Bootstrap的范围内。 希望本文对您有所帮助，特别是因为某些人可能很难破译随附的示例页面（该页面是下载内容中包含的唯一文档）。

我爱Bootstrap。 如果您是Web开发的新手，它会提供许多元素供您使用，尽管通过大量共享元素，您的网站最终看起来可能有点像Twitter。 但是，如果您不想/不能自己编写自己的工具，那么它的简单性和易用性就很难忽略。 我等不及要尝试在新项目中使用其中的一些东西。

---

其他资源

使用更少CSS，BluePrint和WP获得更快的工作流 Wptuts +
快速提示：请勿再次键入供应商前缀 Nettuts +
Twitter的Bootstrap是新的Web设计师的梦想 Web AppStorm
ThemeForest上的Bootstrap模板

翻译自: https://webdesign.tutsplus.com/articles/stepping-out-with-bootstrap-from-twitter--webdesign-4166