4.二、Bootstrap V4自學之路------組件---按鈕組

一、基本示例

用.btn-group把一系列帶有.btn的按鈕包裹起來。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

PS：在button的外層加入類 .btn_group 包裹。

二、按鈕工具欄

將一系列按鈕組組合成工具欄以實現更復雜的組件。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

在多個 .btn-group 外層加入一個 .btn-toolbar類。（按鈕工具欄）

三、尺寸

這裏就顯示出  .btn-groud 類的樣子實用性了。

<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

四、嵌套

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

這裏要注意說明的地方有：

一、按鈕層一個.btn-group，在其中包含一個 .btn-group用來包含下拉按鈕。

二、下拉按鈕的屬性中，須要加入data-toggle="dropdown"開啓切換。

        須要再加入 .dropdown-toggle 類。

三、下拉按鈕的子層中，須要加入屬性 aria-labelledby="同層按鈕的ID"，做爲指向。（做廢，不傳ID能夠）

四、每層的簡寫。 注意，ID的對應要寫對！

<div class=btn-group>

--> <button>1</button>

--> <button>2</button>

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

--> --> <button id="XXOO"></button>
--> --> <div class=dropdown-menu  aria-labelleddby="XXOO">

--> --> <a class=dropdown-item>

--> --> <a class=dropdown-item>

五、垂直變更

<div class="btn-group-vertical" 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>

偷個懶，已上例爲例。外層類 .btn-group 更換爲 .btn-group-vertical。則豎向顯示了。

vertical 英文翻譯是：垂直、豎向。

六、提示冒泡和提示框

因爲某些特殊的實際用途（和一些組件），須要在按鈕組中出現提示冒泡或者提示框。**你必須指定選項 container: 'body'以免不想要的反作用（如元素愈來愈大或者在提示冒泡和提示框觸發時失去其圓角）。