bootstrap學習筆記--bootstrap組件

前面已經學習了bootstrap環境搭建以及基本布局方面的知識，下面將學習下關於bootstrap的相關組件，知識點有點多。

關於bootstrap組件知識點目錄：

1. Bootstrap--代碼顯示
2. Bootstrap--表格
3. Bootstrap--表單
4. Bootstrap--按鈕
5. Bootstrap--圖片
6. Bootstrap--輔助類
7. Bootstrap--響應式實用工具
8. Bootstrap--字體圖標
9. Bootstrap--下拉菜單
10. Bootstrap--按鈕組
11. Bootstrap--按鈕下拉菜單
12. Bootstrap--輸入框組
13. Bootstrap--導航元素
14. Bootstrap--導航欄
15. Bootstrap--面包屑導航
16. Bootstrap--分頁
17. Bootstrap--標簽
18. Bootstrap--徽章
19. Bootstrap--超大屏幕
20. Bootstrap--頁面標題
21. Bootstrap--縮略圖
22. Bootstrap--警告
23. Bootstrap--進度條
24. Bootstrap--多媒體對象
25. Bootstrap--列表組
26. Bootstrap--面板
27. Bootstrap--Wells

1.Bootstrap 代碼

Bootstrap 允許您以兩種方式顯示代碼：

• 第一種是 <code> 標簽。如果您想要內聯顯示代碼，那么您應該使用 <code> 標簽。
• 第二種是 <pre> 標簽。如果代碼需要被顯示為一個獨立的塊元素或者代碼有多行，那么您應該使用 <pre> 標簽。

請確保當您使用 <pre> 和 <code> 標簽時，開始和結束標簽使用了 unicode 變體： &lt; 和 &gt;。

    <div class="container">
        <div class="row">
            <p><code>&lt;select&gt;</code></p>
            <pre>
                &lt;div&gt;
                Hello World!
                &lt;/div&gt;
            </pre>
        </div>
    </div>

顯示效果：

2.Bootstrap 表格

 

Bootstrap 提供了一個清晰的創建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

標簽	描述
<table>	為表格添加基礎樣式。
<thead>	表格標題行的容器元素（<tr>），用來標識表格列。
<tbody>	表格主體中的表格行的容器元素（<tr>）。
<tr>	一組出現在單行上的表格單元格的容器元素（<td> 或 <th>）。
<td>	默認的表格單元格。
<th>	特殊的表格單元格，用來標識列或行（取決於范圍和位置）。必須在 <thead> 內使用。
<caption>	關於表格存儲內容的描述或總結。

 

 

 

 

 

 

 

 

表格類

下表樣式可用於表格中：

類	描述
.table	為任意 <table> 添加基本樣式 (只有橫向分隔線)
.table-striped	在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持)
.table-bordered	為所有表格的單元格添加邊框
.table-hover	在 <tbody> 內的任一行啟用鼠標懸停狀態
.table-condensed	讓表格更加緊湊

 

 

 

 

 

 

<tr>, <th> 和 <td> 類

下表的類可用於表格的行或者單元格：

類	描述
.active	將懸停的顏色應用在行或者單元格上
.success	表示成功的操作
.info	表示信息變化的操作
.warning	表示一個警告的操作
.danger	表示一個危險的操作

 

 

 

 

 

 

基本的表格

如果您想要一個只帶有內邊距（padding）和水平分割的基本表，請添加 class .table，如下面實例所示：

<div class="row">
            <table class="table">
                <caption class="text-center">基本表格布局</caption>
                <thead>
                    <tr>
                        <th>編號</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                </tbody>
            </table>
        </div>

顯示效果：

可選的表格類

除了基本的表格標記和 .table class，還有一些可以用來為標記定義樣式的類。下面將向您介紹這些類。

條紋表格

通過添加 .table-striped class，您將在 <tbody> 內的行上看到條紋，如下面的實例所示：

<div class="row">
            <table class="table table-striped">
                <caption class="text-center">條紋表格布局</caption>
                <thead>
                    <tr>
                        <th>編號</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>蘇州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

顯示效果：

邊框表格

通過添加 .table-bordered class，您將看到每個元素周圍都有邊框，且占整個表格是圓角的，如下面的實例所示：

<div class="row">
            <table class="table table-bordered">
                <caption class="text-center">邊框表格布局</caption>
                <thead>
                    <tr>
                        <th>編號</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>蘇州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

顯示效果：

懸停表格

通過添加 .table-hover class，當指針懸停在行上時會出現淺灰色背景，如下面的實例所示：

<div class="row">
            <table class="table table-hover">
                <caption class="text-center">懸停表格布局</caption>
                <thead>
                    <tr>
                        <th>編號</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>蘇州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

顯示效果：

精簡表格

通過添加 .table-condensed class，行內邊距（padding）被切為兩半，以便讓表看起來更緊湊，如下面的實例所示。這在想讓信息看起來更緊湊時非常有用。

<div class="row">
            <table class="table table-condensed">
                <caption class="text-center">精簡表格布局</caption>
                <thead>
                    <tr>
                        <th>編號</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr>
                        <td>No.3</td>
                        <td>蘇州</td>
                    </tr>
                    <tr>
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

顯示效果：

上下文類

下表中所列出的上下文類允許您改變表格行或單個單元格的背景顏色。

類	描述
.active	對某一特定的行或單元格應用懸停顏色
.success	表示一個成功的或積極的動作
.warning	表示一個需要注意的警告
.danger	表示一個危險的或潛在的負面動作

 

 

 

 

 

 

這些類可以用到<tr>、<td>、<th>中，如下面實例所示：

<div class="row">
            <table class="table">
                <caption class="text-center">上下文表格布局</caption>
                <thead>
                    <tr>
                        <th>編號</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>No.1</td>
                        <td>北京</td>
                    </tr>
                    <tr class="success">
                        <td>No.2</td>
                        <td>上海</td>
                    </tr>
                    <tr class="warning">
                        <td>No.3</td>
                        <td>蘇州</td>
                    </tr>
                    <tr class="danger">
                        <td>No.4</td>
                        <td>南京</td>
                    </tr>
                </tbody>
            </table>
        </div>

顯示效果：

響應式表格

通過把任意的 .table 包在 .table-responsive class 內，您可以讓表格水平滾動以適應小型設備（小於 768px）。當在大於 768px 寬的大型設備上查看時，您將看不到任何的差別。

 <div class="table-responsive">
        <table class="table">
            <caption class="text-center">響應式表格布局</caption>
            <thead>
                <tr>
                    <th>編號</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>No.1</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>No.2</td>
                    <td>上海</td>
                </tr>
                <tr>
                    <td>No.3</td>
                    <td>蘇州</td>
                </tr>
                <tr>
                    <td>No.4</td>
                    <td>南京</td>
                </tr>
            </tbody>
        </table>
    </div>

顯示效果：

 

3.Bootstrap 表單

表單布局

Bootstrap 提供了下列類型的表單布局：

• 垂直表單（默認）
• 內聯表單
• 水平表單

垂直或基本表單

基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了創建基本表單的步驟：

• 向父 <form> 元素添加 role="form"。
• 把標簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
• 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<form role="form">
                <div class="form-group">
                    <label for="name">名稱</label>
                    <input type="text" class="form-control" id="name"
                        placeholder="請輸入名稱">
                </div>
                <div class="form-group">
                    <label for="inputfile">文件輸入</label>
                    <input type="file" id="inputfile">
                    <p class="help-block">這里是塊級幫助文本的實例。</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">
                        請打勾
                    </label>
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>

顯示效果：

內聯表單

如果需要創建一個表單，它的所有元素是內聯的，向左對齊的，標簽是並排的，請向 <form> 標簽添加 class .form-inline。

<form role="form" class="form-inline">
                <div class="form-group">
                    <label for="name">名稱</label>
                    <input type="text" class="form-control" id="name"
                        placeholder="請輸入名稱">
                </div>
                <div class="form-group">
                    <label for="inputfile">文件輸入</label>
                    <input type="file" id="inputfile">
                    <p class="help-block">這里是塊級幫助文本的實例。</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">
                        請打勾
                    </label>
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>

顯示效果：

• 默認情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內聯表單時，您需要在表單控件上設置一個寬度。
• 使用 class .sr-only，您可以隱藏內聯表單的標簽。

水平表單

水平表單與其他表單不僅標記的數量上不同，而且表單的呈現形式也不同。如需創建一個水平布局的表單，請按下面的幾個步驟進行：

• 向父 <form> 元素添加 class .form-horizontal。
• 把標簽和控件放在一個帶有 class .form-group 的 <div> 中。
• 向標簽添加 class .control-label。

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="請輸入名字">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="請輸入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 請記住我
            </label>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">登錄</button>
      </div>
   </div>
</form>

顯示效果：

支持的表單控件

Bootstrap 支持最常見的表單控件，主要是 input、textarea、checkbox、radio 和 select。

輸入框（Input）

最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數必要的表單數據。Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。適當的 type 聲明是必需的，這樣才能讓 input 獲得完整的樣式。

<form role="form">
  <div class="form-group">
    <label for="name">標簽</label>
    <input type="text" class="form-control" placeholder="文本輸入">
  </div>
 </form>

顯示效果：

文本框（Textarea）

當您需要進行多行輸入的時，則可以使用文本框 textarea。必要時可以改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

顯示效果：

復選框（（Checkbox）和單選框（Radio）

復選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。

• 當創建表單時，如果您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。如果您限制用戶只能選擇一個選項，請使用 radio。
• 對一系列復選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

<label for="name">默認的復選框和單選按鈕的實例</label>
<div class="checkbox">
   <label><input type="checkbox" value="">選項 1</label>
</div>
<div class="checkbox">
   <label><input type="checkbox" value="">選項 2</label>
</div>

<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 選項 1
   </label>
</div>
<div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         選項 2 - 選擇它將會取消選擇選項 1
   </label>
</div>
<label for="name">內聯的復選框和單選按鈕的實例</label>
<div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2
   </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 選項 1
   </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 選項 2
   </label>
</div>

顯示效果：

選擇框（Select）

當您想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，則使用選擇框。

• 使用 <select> 展示列表選項，通常是那些用戶很熟悉的選擇列表，比如州或者數字。
• 使用 multiple="multiple" 允許用戶選擇多個選項。

<form role="form">
   <div class="form-group">
      <label for="name">選擇列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多選的選擇列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div>
</form>

顯示效果：

靜態控件

當您需要在一個水平表單內的表單標簽后放置純文本時，請在 <p> 上使用 class .form-control-static。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[e-mail]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密碼</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="請輸入密碼">
    </div>
  </div>
</form>

顯示效果：

表單控件狀態

除了 :focus 狀態（即，用戶點擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還為禁用的輸入框定義了樣式，並提供了表單驗證的 class。

輸入框焦點

當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。

禁用的輸入框 input

如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。

禁用的字段集 fieldset

對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內的所有控件。

驗證狀態

Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態。

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" 
            value="該輸入框獲得焦點...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">
         禁用
      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" 
            placeholder="該輸入框禁止輸入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">
            禁用輸入（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" 
               placeholder="禁止輸入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">
            禁用選擇菜單（Fieldset disabled）
         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止選擇</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess">
         輸入成功
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">
         輸入警告
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">
         輸入錯誤
      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

顯示效果：

表單控件大小

您可以分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度。

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默認輸入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默認選擇</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div>
</form>

顯示效果：

表單幫助文本

Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。為了添加一個占用整個寬度的內容塊，請在 <input> 后使用 .help-block。

<form role="form">
   <span>幫助文本實例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一個較長的幫助文本塊，超過一行，
   需要擴展到下一行。本實例中的幫助文本總共有兩行。</span>
</form>

顯示效果：

4.Bootstrap 按鈕

以下樣式可用於<a>, <button>, 或 <input> 元素上：

類	描述
.btn	為按鈕添加基本樣式
.btn-default	默認/標准按鈕
.btn-primary	原始按鈕樣式（未被操作）
.btn-success	表示成功的動作
.btn-info	該樣式可用於要彈出信息的按鈕
.btn-warning	表示需要謹慎操作的按鈕
.btn-danger	表示一個危險動作的按鈕操作
.btn-link	讓按鈕看起來像個鏈接 (仍然保留按鈕行為)
.btn-lg	制作一個大按鈕
.btn-sm	制作一個小按鈕
.btn-xs	制作一個超小按鈕
.btn-block	塊級按鈕(拉伸至父元素100%的寬度)
.active	按鈕被點擊
.disabled	禁用按鈕

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!-- 標准的按鈕 -->
<button type="button" class="btn btn-default">默認按鈕</button>

<!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>

<!-- 表示一個成功的或積極的動作 -->
<button type="button" class="btn btn-success">成功按鈕</button>

<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>

<!-- 表示應謹慎采取的動作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>

<!-- 表示一個危險的或潛在的負面動作 -->
<button type="button" class="btn btn-danger">危險按鈕</button>

<!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>

顯示效果：

按鈕大小

下表列出了獲得各種大小按鈕的 class：

Class	描述
.btn-lg	這會讓按鈕看起來比較大。
.btn-sm	這會讓按鈕看起來比較小。
.btn-xs	這會讓按鈕看起來特別小。
.btn-block	這會創建塊級的按鈕，會橫跨父元素的全部寬度。

 

 

 

 

 

<p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按鈕
   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary">
      默認大小的原始按鈕
   </button>
   <button type="button" class="btn btn-default">
      默認大小的按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按鈕
   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-xs">
      特別小的原始按鈕
   </button>
   <button type="button" class="btn btn-default btn-xs">
      特別小的按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      塊級的原始按鈕
   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      塊級的按鈕
   </button>
</p>

顯示效果：

按鈕狀態

Bootstrap 提供了激活、禁用等按鈕狀態的 class，下面將進行詳細講解。

激活狀態

按鈕在激活時將呈現為被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態的 class：

元素	Class
按鈕元素	添加 .active class 來顯示它是激活的。
錨元素	添加 .active class 到 <a> 按鈕來顯示它是激活的。

 

 

 

 

<p>
   <button type="button" class="btn btn-default btn-lg ">
      默認按鈕
   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按鈕
   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按鈕
   </button>
</p>

顯示效果：

禁用狀態

當您禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態的 class：

元素	Class
按鈕元素	添加 disabled 屬性 到 <button> 按鈕。
錨元素	添加 disabled class 到 <a> 按鈕。 注意：該 class 只會改變 <a> 的外觀，不會改變它的功能。在這里，您需要使用自定義的 JavaScript 來禁用鏈接。

 

 

 

 

 

<p>
   <button type="button" class="btn btn-default btn-lg">
      默認按鈕
   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按鈕
   </button>
</p>
<p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按鈕
   </button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按鈕
   </button>
</p>
<p>
   <a href="#" class="btn btn-default btn-lg" role="button">
      鏈接
   </a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">
      禁用鏈接
   </a>
</p>
<p>
   <a href="#" class="btn btn-primary btn-lg" role="button">
      原始鏈接
   </a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始鏈接
   </a>
</p>

顯示效果：