Getting started
Accessibility（無障礙）
Browsers and devices（瀏覽器和設(shè)備）
Build tools（構(gòu)建工具）
Contents（內(nèi)容）
Download（下載）
JavaScript
Theming Bootstrap（主題Bootstrap）
Webpack
Components: Alerts
Alerts（警報）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按鈕組）
Components: Buttons
Buttons（按鈕）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圓盤傳送帶）
Components: Collapse
Collapse（折疊）
Components: Dropdowns
Dropdowns（下拉菜單）
Components: Forms
Forms（表單）
Components: Input group
Input group（輸入群組）
Components: Input group
Jumbotron（廣告大屏幕）
Components: List group
List group（列表組）
Components: Modal
Modal（互動視窗）
Components: Navbar
Navbar（導(dǎo)航欄）
Components: Navs
Navs（導(dǎo)航欄）
Components: Pagination
Pagination（分頁）
Components: Popovers
Popovers（彈出框）
Components: Progress
Progress（進(jìn)度條）
Components: Scrollspy
Scrollspy（滾動監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
Layout（布局）
Media object（多媒體對象）
Utilities for layout（排版通用類別）
Migration
Migrating to v4（遷移到v4）
Utilities
Borders（邊框）
Clearfix（清除浮動）
Close icon（關(guān)閉圖標(biāo)）
Colors（顏色）
Display property（顯示屬性）
Embeds（內(nèi)嵌）
Flex（彈性）
Float（浮動）
Image replacement（圖像替換）
Position（位置）
Screenreaders（熒幕閱讀器）
Sizing（尺寸）
Spacing（間隔）
Text（文本）
Vertical alignment（垂直對齊）
Visibility（能見度）
?
This document uses PHP Chinese website manual Release
characters
使用按鈕組將一系列按鈕分組在一行上，并通過 JavaScript 超級供電。
基本示例
在.btn-group中用.btn包裹一系列按鈕。使用我們的按鈕插件添加可選的 JavaScript 廣播和復(fù)選框樣式行為。
<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>
確保正確role并提供標(biāo)簽
為了幫助技術(shù)（如屏幕閱讀器）傳達(dá)一系列按鈕被分組，需要提供適當(dāng)?shù)?code>role屬性。對于按鈕組，這將是role="group"，而工具欄應(yīng)該有一個role="toolbar"。
另外，應(yīng)該給組和工具欄一個明確的標(biāo)簽，因?yàn)楸M管存在正確的角色屬性，大多數(shù)輔助技術(shù)將不會公布它們。在這里提供的例子中，我們使用了aria-label，但也可以使用例如aria-labelledby的其他替代方法。
按鈕工具欄
將多組按鈕組組合到按鈕工具欄中，以獲取更復(fù)雜的組件。根據(jù)需要使用實(shí)用程序類來劃分組，按鈕等。
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" 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 mr-2" 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>
隨意將輸入組與工具欄中的按鈕組混合。與上面的示例類似，盡管您可能需要一些實(shí)用程序才能正確地分配內(nèi)容。
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" 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="input-group"> <span class="input-group-addon" id="btnGroupAddon">@</span> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"> </div></div><div class="btn-toolbar justify-content-between" 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="input-group"> <span class="input-group-addon" id="btnGroupAddon2">@</span> <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2"> </div></div>
大小
除了將按鈕大小分類應(yīng)用于組中的每個按鈕，只需將其添加.btn-group-*到每個.btn-group按鈕，包括嵌套多個組時的每個按鈕。
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div><div class="btn-group" role="group" aria-label="...">...</div><div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
嵌套
當(dāng)你想要下拉菜單與一系列按鈕混合在一起時，放置.btn-group在另一個.btn-group之內(nèi)。
<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>
垂直變化
使一組按鈕垂直堆疊而不是水平放置。此處不支持分組按鈕下拉列表。
<div class="btn-group-vertical"> ...</div>