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

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

 

 

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

开始

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

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

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

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

Welcome to my site! I think you'll like ite.

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

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

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

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

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

View details »

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

bootstrap 中预置了许多相关的类

颜色：

     Default
     Primary
     Success
     Info
     Warning
     Danger
     Link

按钮的尺寸

  Large button  Large button
  Default button  Default button
  Small button  Small button
  Extra small button  Extra small button

你还可以在在线文档中找到这些说明：

工作原理

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

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

扩展

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