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（進度條）
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)閉圖標）
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
通過在文本輸入的兩側(cè)添加文本，按鈕或按鈕組，輕松擴展表單控件。
基本示例
在輸入的任一側(cè)放置一個附件或按鈕。您也可以在輸入的兩側(cè)放置一個。我們不支持單個輸入組中的多個表單控件，并且<label>必須位于輸入組之外。
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div><br><div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span></div><br><label for="basic-url">Your vanity URL</label><div class="input-group"> <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div><br><div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span></div><br><div class="input-group"> <span class="input-group-addon">$</span> <span class="input-group-addon">0.00</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"></div>
丈量大小
將相對表單大小類添加到.input-group自身，并且內(nèi)部的內(nèi)容將自動調(diào)整大小 - 無需重復(fù)每個元素上的表單控件大小類。
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon1"></div><br><div class="input-group input-group-sm"> <span class="input-group-addon" id="sizing-addon2">@</span> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="sizing-addon2"></div>
復(fù)選框和無線電插件
將任何復(fù)選框或廣播選項放在輸入組的插件中，而不是文本。
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox for following text input"> </span> <input type="text" class="form-control" aria-label="Text input with checkbox"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="Radio button for following text input"> </span> <input type="text" class="form-control" aria-label="Text input with radio button"> </div> </div></div>
多個插件
支持多個附加組件，并且可以與復(fù)選框和無線電輸入版本混合使用。
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox for following text input"> </span> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Text input with checkbox"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon">$</span> <span class="input-group-addon">0.00</span> <input type="text" class="form-control" aria-label="Text input with radio button"> </div> </div></div>
按鈕插件
輸入組中的按鈕必須包含在一個.input-group-btn中才能正確對齊和調(diào)整大小。由于無法覆蓋的默認瀏覽器樣式，因此這是必需的。
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for..."> </div> </div> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for..."> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Go!</button> </span> </div> </div></div><br><div class="row"> <div class="col-lg-6 offset-lg-3"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Hate it</button> </span> <input type="text" class="form-control" placeholder="Product name" aria-label="Product name"> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Love it</button> </span> </div> </div></div>
帶下拉的按鈕
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <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 role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with dropdown button"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button> <div class="dropdown-menu dropdown-menu-right"> <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 role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div></div>
分段的按鈕
<div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary">Action</button> <button type="button" class="btn btn-secondary 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 role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary">Action</button> <button type="button" class="btn btn-secondary 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 dropdown-menu-right"> <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 role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> </div></div>
無障礙
如果您沒有為每個輸入添加標簽，屏幕閱讀器將會對您的表單造成麻煩。對于這些輸入組，確保將任何附加標簽或功能傳送給輔助技術(shù)。
要使用的確切技術(shù)（使用.sr-only類隱藏<label>元素，或使用aria-label和aria-labelledby屬性，可能結(jié)合使用aria-describedby）以及需要傳達的附加信息取決于您實現(xiàn)的接口窗口小部件的確切類型。本節(jié)中的示例提供了一些建議的特定于案例的方法。