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/，在這裏你可以定製許多的內容。