Bootstrap – Components 元件 06

文章前提

Components 中的 Dropdown

Dropdown 下拉式

CH7 62
課程練習下載
Bootstrap 路徑 :　Components / Dropdowns

| single button dropdown 單一按鈕 |範例

• .dropdown-toggle 是下拉式選單的那個三角形按鈕 。
• 在 <button> 加入 data-toggle="dropdown" 啟用

架構

• .dropdown
  • button.dropdown-toggle ( 或 <a> )
  • .dropdown-menu
    • a.dropdown-item

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

| Split button dropdown 分離按鈕 |範例

• 左邊文字與右邊按鈕分開，皆可按

<!-- Example split danger button -->

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

| Dropup variation 指向變化 |範例

[͵vɛrɪˋeʃən]

• 如果指向變向上，上方頁面不夠，Bootstrap 會自動把指向變下。貼心 ~~
• 於 .dropdown 加入 .dropup

| Menu hrader 標題 |

• 在下拉式選單中加入標題，是個較租的字體

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

| Menu dividers 分隔線 |

[dəˋvaɪdɚ]

• 下拉式選單中，如有分不同區塊的群組，可使用 .dropdown-divider 產生一條線隔開來

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

---

資料來源

• 六角學院 – 精通 Bootstrap 4 開發超強不解釋
• 六角中譯 Bootstrap 官網
• Bootstrap 官方網站