將一系列的.btn包裹在.btn-group內，并使用我們提供的插件，可以實現選擇按鈕、選取塊狀區的行為功能。

<div class="row mt-5 d-block"><div class="btn-group"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div> </div>

按鈕工具欄

根據需要使用樣式定義，對按鈕進行群組、間隔等定義，將按鈕組的組合組合成為更復雜組件的按鈕工具欄。

<div class="row mt-5 btn-toolbar"><div class="btn-group mr-2"><button class="btn btn-success">1</button><button class="btn btn-success">2</button><button class="btn btn-success">3</button></div><div class="btn-group mr-2"><button class="btn btn-success">5</button><button class="btn btn-success">6</button><button class="btn btn-success">7</button></div><div class="btn-group"><button class="btn btn-success">9</button></div> </div>

輸入組與按鈕組混合使用

<div class="row btn-toolbar mt-5"><div class="btn-group mr-2"><button class="btn btn-secondary">1</button><button class="btn btn-secondary">2</button><button class="btn btn-secondary">3</button><button class="btn btn-secondary">4</button></div><div class="input-group"><div class="input-group-prepend"><div class="input-group-text">@</div></div><input type="text" class="form-control" placeholder="Input group example"></div> </div>

大小規格和尺寸縮放

定義大小縮放，不需要將按鈕中每個子元素都逐一定義，只需在.btn-group-*中增加.btn-group-*，就能作用于組下的每個子按鈕，實現樣式縮放。

<div class="row mt-5"><div class="btn-group btn-group-lg"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div> </div> <div class="row mt-1"><div class="btn-group"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div> </div> <div class="row mt-1 "><div class="btn-group btn-group-sm"><button class="btn btn-primary">Left</button><button class="btn btn-primary">Center</button><button class="btn btn-primary">Right</button></div> </div>

嵌套

將.btn-group放在另一個.btn-group里，可以實現按鈕組與下拉菜單的組合。

<!-- 下拉菜單 --> <div class="row mt-5"><div class="btn-group"><button class="btn btn-danger">1</button><button class="btn btn-danger">2</button><div class="btn-group"><button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a></div></div></div> </div>

垂直排列

將一組按鈕垂直排列，而不是水平排列，不支持分割式下拉菜單的定義。

<div class="container"><!-- 垂直排列 --><div class="row mt-5"><div class="btn-group-vertical"><button class="btn btn-warning">北京</button><button class="btn btn-warning">上海</button><button class="btn btn-warning">廣州</button></div></div> </div>

<div class="row mt-5"><div class="btn-group-vertical"><button class="btn btn-danger">1</button><button class="btn btn-danger">2</button><div class="btn-group"><button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a></div></div></div> </div>

總結

以上是生活随笔為你收集整理的class触发后让另一个class加样式_Bootstrap的按钮组样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。