首页 > 代码库 > 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 »</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/，在这里你可以定制许多的内容。
Bootstrap 3 How-To #2 标题，链接与按钮