Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦
Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實(shí)用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對(duì)象（Media Object）
Bootstrap 分頁(yè)
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁(yè)面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁(yè)（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy）
Bootstrap 過(guò)渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
本文檔使用 PHP中文網(wǎng)手冊(cè) 發(fā)布
文字
Bootstrap 按鈕組
按鈕組允許多個(gè)按鈕被堆疊在同一行上。當(dāng)你想要把按鈕對(duì)齊在一起時(shí)，這就顯得非常有用。您可以通過(guò) Bootstrap 按鈕（Button） 插件 添加可選的 JavaScript 單選框和復(fù)選框樣式行為。
下面的表格總結(jié)了 Bootstrap 提供的使用按鈕組的一些重要的 class：
| Class | 描述 | 代碼示例 |
|---|---|---|
| .btn-group | 該 class 用于形成基本的按鈕組。在 .btn-group 中放置一系列帶有 class .btn 的按鈕。 | <div?class="btn-group"> ??<button?type="button"?class="btn?btn-default">Button1</button> ???<button?type="button"?class="btn?btn-default">Button2</button> </div> |
| .btn-toolbar | 該 class 有助于把幾組 <div class="btn-group"> 結(jié)合到一個(gè) <div class="btn-toolbar"> 中，一般獲得更復(fù)雜的組件。 | <div?class="btn-toolbar"?role="toolbar"> ??<div?class="btn-group">...</div> ??<div?class="btn-group">...</div> </div> |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 這些 class 可應(yīng)用到整個(gè)按鈕組的大小調(diào)整，而不需要對(duì)每個(gè)按鈕進(jìn)行大小調(diào)整。 | <div?class="btn-group?btn-group-lg">...</div> <div?class="btn-group?btn-group-sm">...</div> <div?class="btn-group?btn-group-xs">...</div> |
| .btn-group-vertical | 該 class 讓一組按鈕垂直堆疊顯示，而不是水平堆疊顯示。 | <div?class="btn-group-vertical"> ??... </div> |
基本的按鈕組
下面的實(shí)例演示了上面表格中討論到的 class .btn-group 的使用：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?基本的按鈕組</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="btn-group"> ??<button?type="button"?class="btn?btn-default">按鈕?1</button> ??<button?type="button"?class="btn?btn-default">按鈕?2</button> ??<button?type="button"?class="btn?btn-default">按鈕?3</button> </div> </body> </html>
結(jié)果如下所示：
按鈕工具欄
下面的實(shí)例演示了上面表格中討論到的 class .btn-toolbar 的使用：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?按鈕工具欄</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="btn-toolbar"?role="toolbar"> ??<div?class="btn-group"> ??<button?type="button"?class="btn?btn-default">按鈕?1</button> ??<button?type="button"?class="btn?btn-default">按鈕?2</button> ??<button?type="button"?class="btn?btn-default">按鈕?3</button> ?</div> ??<div?class="btn-group"> ??<button?type="button"?class="btn?btn-default">按鈕?4</button> ??<button?type="button"?class="btn?btn-default">按鈕?5</button> ??<button?type="button"?class="btn?btn-default">按鈕?6</button> ??</div> ??<div?class="btn-group"> ??<button?type="button"?class="btn?btn-default">按鈕?7</button> ??<button?type="button"?class="btn?btn-default">按鈕?8</button> ??<button?type="button"?class="btn?btn-default">按鈕?9</button> ??</div> </div> </body> </html>
結(jié)果如下所示：
按鈕的大小
下面的實(shí)例演示了上面表格中討論到的 class .btn-group-* 的使用：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?按鈕組的大小</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="btn-group?btn-group-lg"> ??<button?type="button"?class="btn?btn-default">按鈕?1</button> ??<button?type="button"?class="btn?btn-default">按鈕?2</button> ??<button?type="button"?class="btn?btn-default">按鈕?3</button> ?</div> ??<div?class="btn-group?btn-group-sm"> ??<button?type="button"?class="btn?btn-default">按鈕?4</button> ??<button?type="button"?class="btn?btn-default">按鈕?5</button> ??<button?type="button"?class="btn?btn-default">按鈕?6</button> </div> ??<div?class="btn-group?btn-group-xs"> ??<button?type="button"?class="btn?btn-default">按鈕?7</button> ??<button?type="button"?class="btn?btn-default">按鈕?8</button> ??<button?type="button"?class="btn?btn-default">按鈕?9</button> </div> </body> </html>
結(jié)果如下所示：
嵌套
您可以在一個(gè)按鈕組內(nèi)嵌套另一個(gè)按鈕組，即，在一個(gè) .btn-group 內(nèi)嵌套另一個(gè) .btn-group 。當(dāng)您向讓下拉菜單與一系列按鈕組合使用時(shí)，就會(huì)用到這個(gè)。
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?嵌套的按鈕組</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="btn-group"> ??<button?type="button"?class="btn?btn-default">按鈕?1</button> ??<button?type="button"?class="btn?btn-default">按鈕?2</button> ??<div?class="btn-group"> ????<button?type="button"?class="btn?btn-default?dropdown-toggle"? ??????data-toggle="dropdown"> ??????下列 ??????<span?class="caret"></span> ????</button> ????<ul?class="dropdown-menu"> ??????<li><a?href="#">下拉鏈接?1</a></li> ??????<li><a?href="#">下拉鏈接?2</a></li> ????</ul> ??</div> </div> </body> </html>
結(jié)果如下所示：
垂直的按鈕組
下面的實(shí)例演示了上面表格中討論到的 class .btn-group-vertical 的使用：
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實(shí)例?-?垂直的按鈕組</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="btn-group-vertical"> ??<button?type="button"?class="btn?btn-default">按鈕?1</button> ??<button?type="button"?class="btn?btn-default">按鈕?2</button> ??<div?class="btn-group-vertical"> ????<button?type="button"?class="btn?btn-default?dropdown-toggle"? ??????data-toggle="dropdown"> ??????下拉 ??????<span?class="caret"></span> ????</button> ????<ul?class="dropdown-menu"> ??????<li><a?href="#">下拉鏈接?1</a></li> ??????<li><a?href="#">下拉鏈接?2</a></li> ????</ul> ??</div> </div> </body> </html>
結(jié)果如下所示：
