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