文章前提

Components 中 Button , Button group

Button

CH7 57
課程練習下載
Bootstrap 路徑 : Components / Buttons

| Button Tags |

  • .btn .btn-* , * 可換成主題色
  • .btn-link 保有 button 的結構,但看上去就像一般單純連結一樣
  • 按鈕並非只能只用 <button> 這個標籤,還可使用其他不同標籤 <a> <input>。另外使用 <input> 時 type 要使用正確,樣式才會正確, 按鈕上會顯示 value 的文字。

註 : <button><input type="button"> 差異不大,<input type="button"> 作為表單的按鈕使用,可透過 value 加上文字,而 <button> 彈性更大,像是加入額外的 HTML 標籤內 → <button type="submit"><img src="" alt="" /> Submit</button>

// input 示意圖 ▼
Bootstrap-<input>示意圖

<button type="button" class="btn btn-primary">Primary</button>
<a href="#" class="btn btn-secondary" role="button">Secondary</a>

<input class="btn btn-success" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">
<input class="btn btn-dark" type="reset" value="Reset">

| Outline buttons |

  • .btn-outline-目標 ,目標可換成各種主題色
  • 空心外觀,滑鼠滑入會變實心
  • 啟用狀態 : 按鈕樣式上加入 .active 會變實心,滑鼠滑入也不會有變化

// outline button 滑鼠滑入示意圖 ▼
Bootstrap-outline-button-滑鼠滑入示意圖

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">success</button>

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

| Size |

  • .btn- { sm| lg }

Bootstrap-button-size示意圖

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
  • .btn-block ,將按鈕加上 block 區塊屬性,不須加 width:100% ; ,讓按鈕填滿整個空間
  • 兩個 .btn-block 相鄰時上下會自動保留一定的空間,不需另外加 margin
<button type="button" class="btn btn-primary btn-sm btn-block">Small button</button>

| Active state & Disabled state |

  • .active
    • 啟用狀態 : 按鈕樣式上加入 .active 會變實心,滑鼠滑入也不會有變化
    • 加在標籤 Class 上
<button type="button" class="btn btn-success active">Success</button>
  • disabled ,停用狀態,使按鈕失效。
    • <button> 上使用 ,disabled 並非加在標籤 Class 上,而是加在標籤屬性上
    • <a> 上使用,.disabled 需加在標籤 Class 上
  • Disabled state 在 <button><a> 加的位置不同,因為 <button> 有支援 disabled 這個屬性,但 <a> 沒有支援,要注意 !!
    • 雖然表面上看起來一樣,但其實可以被選擇到,所以 a 連結下 disabled 並不能完全 disabled 還是能被 Tag 選擇到,所以有時要避免使用 a 連結, 除非真的是連結。一般是個有作用的按鈕建議使用 <button> 來做標籤,功能性會較完整
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Button 帶入 JavaScript

| 01. JavaScript- Button Plugins | 範例

  • 記得先載入 Bootstrap JavaScript 插件
  • Bootstrap 中大部分的插件都必須透過 data-API 啟動
  • 加入 data-toggle="button";
    • 利用 data-toggle="button"; 來切換按鈕的狀態
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

| 02. JavaScript- Checkbox and Radio buttons | 範例

  • Bootstrap 4.0 把 Class name ( .btn-group-toggle ) 與 啟用方法 ( data-toggle="buttons" ) 分開來
    • .btn-group-toggle 隱藏內部 input ( radio 就是隱藏圈圈, checkbox 就是隱藏勾選的方形框 )

// 未加 .btn-group-toggle ,所以還未隱藏內部 input 示意圖 ▼
Bootstrap-加-.btn-group-toggle-,隱藏內部-input-示意圖-.png

// 加 .btn-group-toggle ,隱藏內部 input 示意圖 ▼
Bootstrap-未加-.btn-group-toggle-,所以還未隱藏內部-input-示意圖

  • 用 JavaScript 來啟用切換狀態,可看範例啟用後的狀態會較清楚
  • 這邊啟用方法的 data-toggle="buttons" 因為是多個所以是有加 s 的,與上方單個的
  • Checkbox 是複選
  • Radio 是單選
<!--Checkbox-->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox"> Checkbox1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> Checkbox2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> Checkbox3
    </label>
</div>

<!--Radios-->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio
    </label>
</div>

Button Group

CH7 58
課程練習下載
Bootstrap 路徑 : Components / Button Group

| Button group | 範例

  • 將許多 button 包在 group 內,群組化
  • .btn-group 使用 flex 實現其效果,所以可以使用 .justifu-contetnt.align-items
    Bootstrap-未加入與有加入btn-group示意

| Button Toolbar | 範例

  • .btn-toolbar 包著 .btn-group : 群組化的按鈕可以再被群組
    Bootstrap-.btn-toolbar-包著-.btn-group示意

  • 群組化的按鈕也可和 <input> 的群組做群組
    Bootstrap-button-toolbar群組化的按鈕也可和-(input)-的群組做群組

  • .btn-group 使用 flex 實現其效果,所以可以使用 .justifu-contetnt.align-items

| Button Size| 範例

  • .btn-group-* ,* 換成尺寸 ( sm , lg )
  • 是寫在 .btn-group 上,並非一個一個寫在 <button> Class 裡
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

| 巢狀 Nesting : 水平排列 | 範例

  • 用途 : 下拉式選單
  • 一個 .btn-group 包著另一個 .btn-group
  • 記得先載入 Bootstrap JavaScript 插件
  • 下拉式選單 dropdown 架構
    • dropdown-toggle ( JavaScript 的切換狀態寫此 data-toggle="dropdown" 來切換按鈕 active 狀態 )
      • dropdown-menu
        • dropdown-item
        • dropdown-item
    • .drowpdown-toggle 是下拉式選單的那個三角形按鈕 ;另外 .btn-group-toggle 隱藏內部 input ( radio 就是隱藏圈圈, checkbox 就是隱藏勾選的方形框 )

Bootstrap-drowpdown-toggle示意

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>
  ```

### | Vertical 垂直排列 | [範例](https://codepen.io/echocarriet/pen/NWPYbXe)
* `.btn-group-vertical`
* 將一組按鈕垂直堆疊。此處不支援下拉式功能

```HTML
...

| 表單 Form : 關閉表單自動填寫功能 |

  • autocomplete="off" 關閉表單自動填寫功能
  • 網站預設下,瀏覽器會記錄用戶網頁上提交的輸入框訊息,方便用戶快速填寫訊息框資料,但這功能可能涉及用戶隱私,可透過 autocomplete="off" 關閉此功能
  • 網站可為整個表單設定或單獨設定
  • 資料來源 : MDN Web docs 如何關閉表單自動填充

| 表單 Form : checkbox 與 Radio Button 加入 checked |

[ 問題 ]
請問 btn-group-toggle 以及 data-toggle="buttons" 部分的第一個 input 中都有 checked 這個屬性,請問這屬性的作用是 ?

[ 回覆 ]
這是 HTML 本身屬性,是標示為該選項為選取,加上此屬性 Bootstrap 才能協助切換預設樣式 !!

文章來源 : 六角課程 Bootstrap CH7 .57 問與答


資料來源

最後修改日期: 8 3 月, 2020

作者