Bootstrap教程(11)--按鈕與按鈕組

1. 概述

按鈕可以說是使用頻率最高的互動元件之一了，Bootstrap架構對按鈕也非常重視，提供了多種樣式強化類。同時還提供了按鈕組，可以組合使用按鈕，更加友善。

2. 按鈕的使用

2.1 設定Bootstrap按鈕

在Bootstrap架構下，隻需要為按鈕添加.btn類，然後添加.btn-default類，即可建立Bootstrap樣式的按鈕。

注意Bootstrap可以将<button>、<a>、<input type="button">元素轉換為統一樣式風格的按鈕，推薦還是使用<button>，更加符合HTML規範。

示例代碼：

     <button type="button" class="btn btn-default">button按鈕</button>

               <a class="btn btn-default">a按鈕</a>

               <input type="button" class="btn btn-default" value="input按鈕">

對應效果：

2.2 調整按鈕大小

Bootstrap提供了4中按鈕大小，通過為按鈕添加表示大小的類即可實作，這些類包括.btn-lg、.btn-sm、.btn-xs。

   <button type="button" class="btn btn-default">預設按鈕</button>

               <button type="button" class="btn btn-default btn-lg">lg按鈕</button>

               <button type="button" class="btn btn-default btn-sm">sm按鈕</button>

               <button type="button" class="btn btn-default btn-xs">xs按鈕</button>

2.3 調整按鈕顔色樣式

Bootstrap還提供了設定按鈕顔色樣式的類，包括：

btn-default：白色标準按鈕

btn-primary：藍色按鈕，表示首選意義

btn-info：淡藍色按鈕，表示提示意義

btn-success：綠色按鈕，表示成功意義

btn-warning：黃色按鈕，表示警告意義

btn-danger：紅色按鈕，表示危險意義

btn-link：樣式看起來是一個連結

    <button type="button" class="btn btn-default">default</button>

               <button type="button" class="btn btn-primary">primary</button>

               <button type="button" class="btn btn-info">info</button>

               <button type="button" class="btn btn-success">success</button>

               <button type="button" class="btn btn-warning">warning</button>

               <button type="button" class="btn btn-danger">danger</button>

               <button type="button" class="btn btn-link">link</button>

3. 按鈕組的使用

3.1 使用按鈕組

通過為按鈕組添加.btn-group類的包圍元素，即可設定按鈕組。

     <div class="btn-group">

                   <button type="button" class="btn btn-info">籃球</button>

                   <button type="button" class="btn btn-warning">足球</button>

                   <button type="button" class="btn btn-success">乒乓球</button>

               </div>

3.2 調整按鈕組的大小

可以通過

btn-group-lg

、

btn-group-sm

btn-group-xs

類調整按鈕組大小。

<div class="col-md-12" style="margin-top:8px;">
                <div class="btn-group btn-group-lg">
                    <button type="button" class="btn btn-info">籃球</button>
                    <button type="button" class="btn btn-warning">足球</button>
                    <button type="button" class="btn btn-success">乒乓球</button>
                </div>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-info">籃球</button>
                    <button type="button" class="btn btn-warning">足球</button>
                    <button type="button" class="btn btn-success">乒乓球</button>
                </div>
                <div class="btn-group btn-group-xs">
                    <button type="button" class="btn btn-info">籃球</button>
                    <button type="button" class="btn btn-warning">足球</button>
                    <button type="button" class="btn btn-success">乒乓球</button>
                </div>
            </div>
      

3.3 調整按鈕組方向

通過設定btn-group-vertical類，可以将按鈕組轉化為垂直方向顯示。

     <div class="btn-group btn-group-vertical">

4. 小結

Bootstrap提供的按鈕和按鈕組風格多樣，基本能滿足使用需求，後期很多很多前端架構，也是參考了Bootstrap這一經典設計。