Bootstrap 3 How-To #2 标题，链接与按钮

Bootstrap 3 How-To #2 标题，链接与按钮

这个系列的要点来自一本名为 Twitter Bootstrap Web Development How-to 的书，但是，这本书的内容是基于以前版本的，与最新的 3.0 并不一致。

为了方便学习和使用 BootStrap 3， 这里将内容替换为了当前的 3.0 版。原书可以在 Amazon 买到，$17.99. 原书的内容比较简单，我会尽量补充一些内容。

 

 

如果你很熟悉 HTML，你就可以很快地填充网页的内容，但是，bootstrap 拥有一些需要你注意的特性。

开始

如果你是一个 HTML 的新手，最好的 HTML 学习和参考的站点是 http://htmldog.com, 这里的 HTML 新手教程可以帮助你学习基础的知识，我强烈建议你学习这里的 CSS 教程，这样你可以更好地学习 Bootstrap。

在 bootstrap 3.0 文件夹下创建一个名为 study 的文件夹，在其中创建一个名为 2 的工作文件夹。

将 starter-template 中的两个文件复制到你的工作文件夹中，开始我们的学习。

1. 编辑网页的标题，将 index.html 文件的第 50 行，更新为如下内容，其中添加了 small 标记。

<h1>Welcome to my site! <small>I think you'll like ite.</small></h1>

2. 保存文件，查过浏览器查看页面

你应该看到页面变成如下的样式。

我们还会将链接变成按钮的样子，让我们看看这个事情是如何的简单。

1. 编辑网页的 52 行，将原来的段落修改为如下的内容，注意链接上使用了 btn 和 btn-default 的类。

在以前的版本中，仅仅使用 btn 的类就可以成为一个普通的按钮了，在 3.0 下，还需要增加一个 btn-default。

<p><a class="btn btn-default" href="#">View details &raquo;</a></p>

2. class 中设置的 btn 和 btn-default 就是魔力所在！现在的按钮看起来如下所示：

bootstrap 中预置了许多相关的类

颜色：

<!-- Standard gray button with gradient -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

按钮的尺寸

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

你还可以在在线文档中找到这些说明：http://getbootstrap.com/css/#buttons

工作原理

如前所述，bootstrap 提供了大量便利的样式来处理大多数常用的场景，包括需要你可能都没有想到过的场景，如果你还没有认真地看过 bootstrap 的在线文档，那就赶快看一看吧。

另外，最好的学习办法是打开 bootstrap.css 文件，认真阅读。沏上一杯茶，从杂务中脱出身来，研究其中的内容，你会更加熟悉 bootstrap 的工作原理。

扩展

在准备好之后，你还可以定制你自己的主题，bootstrap 提供了很棒的定制页面： http://getbootstrap.com/customize/，在这里你可以定制许多的内容。