文章前提

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 分離按鈕 |範例

Bootstrap-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指向變化

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

| Menu hrader 標題 |

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

Bootstrap-Dropdown標題

<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 產生一條線隔開來

Bootstrap-Dropdown分隔線

<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>

資料來源

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

作者