4.三、Bootstrap V4自學之路------組件---按鈕下拉組件

單按鈕彈出菜單

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </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>
<!-- btn-success樣式 -->
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle btn-success" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </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>

PS：上述沒有顯示id ，故此知道，無id 也能夠。

另外，.btn-success 等上色彩的類能夠生效

分割按鈕彈出菜單

相似的，用一樣的標記略做修改，添加一個分離按鈕，能夠建立一個分割按鈕彈出菜單。

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-warning dropdown-toggle" 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>

簡要分析一下成分上面代碼：

<div class=btn-group>                

--> <button class=btn btn-danger>Actioin</button>   <!-- -這裏標紅的，你們會看到有什麼不一樣吧->

--> <button class=btn btn-warning drogdown-toggle  data-toggle=dropdown>

--> --> <span class=sr-only>sr-only樣式，後面會補充</span>  <!-- 稍後補充-->

--> </button>

--> <div class=dropdown-menu>            <!-- 下拉按鈕的菜單-->

--> --> <a class=dropdown-item>            <!--下拉按鈕的子項 -->

--> --> <a class=dropdown-item>            <!--下拉按鈕的子項 -->

--> --> <a class=dropdown-item>            <!--下拉按鈕的子項 -->

--> --> <div class=dropdown-divider>    <!--divider 英文翻譯：n.分配器; 分割者; 間隔物; 圓規 -->

--> --> <a class=dropdown-item>            <!--下拉按鈕的子項 -->

PS：解釋一下 .sr-only。

全稱是 screen reader only，意爲：（僅供）屏幕閱讀器，這個 class 主要用於加強 accessbility（可訪問性）。

有時候 UI 上會出現一些僅供視覺識別的元素，好比說「漢堡包菜單按鈕」，只有視力正常的人才能清楚辨識這些元素的做用。而殘障人士，好比弱勢或盲人是不可能知道這些 視覺識別元素是什麼的。他們上網使用的是屏幕閱讀器，也就是 screen reader（sr），屏幕閱讀器須要找到能辨識的文本說明而後「讀」出來給用戶聽。問題是圖形元素怎麼可能「讀出來」呢？所以咱們還要寫上這些元素的文 本說明，可是又不須要展現給普通用戶看到，因而加上 sr-only 的意義就在於能保證屏幕閱讀器正確讀取且不會影響 UI 的視覺呈現。

因而我刪掉了 .sr-only類，能夠更直觀的看到。

喏，看出來了嗎？

尺寸

PS：  .btn-sm 、 無 、 .btn-lg ； 通過鑑定，裏面的下拉菜單的高度是同樣的。

<div class="btn-group">
    <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action
    </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>

<div class="btn-group">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action
    </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>

<div class="btn-group">
    <button type="button" class="btn btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action
    </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>

向上彈出變異

<div class="btn-group dropup">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action
    </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>

請注意看上面的三角箭頭指向。只須要在  最外層 .btn-group 中加入 .dropup便可實現。