建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap是Twitter開源的基于HTML、CSS、JavaScript的前端框架。
10年的老城網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整老城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“老城網(wǎng)站設(shè)計”,“老城網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。
它是為實現(xiàn)快速開發(fā)Web應(yīng)用程序而設(shè)計的一套前端工具包。
它支持響應(yīng)式布局，并且在V3版本之后堅持移動設(shè)備優(yōu)先。
Bootstrap是一個前端開發(fā)的框架，其實就是一堆HTML代碼，有一些自帶的CSS樣式類（只需要記憶常用的CSS樣式類）
下面的表格總結(jié)了 Bootstrap 提供的使用按鈕組的一些重要的 class：
| Class | 描述 | 代碼示例 |
|---|---|---|
| .btn-group | 該 class 用于形成基本的按鈕組。在 .btn-group 中放置一系列帶有 class .btn 的按鈕。 | Button1 Button2 |
| .btn-toolbar | 該 class 有助于把幾組 結(jié)合到一個 中，一般獲得更復(fù)雜的組件。 |
... ... |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 這些 class 可應(yīng)用到整個按鈕組的大小調(diào)整，而不需要對每個按鈕進(jìn)行大小調(diào)整。 | ... ... ... |
| .btn-group-vertical | 該 class 讓一組按鈕垂直堆疊顯示，而不是水平堆疊顯示。 | ... |
顯示詳細(xì)信息
基本的按鈕組
下面的實例演示了上面表格中討論到的 class .btn-group 的使用：
實例
type="button" class="btn btn-default">按鈕 1
type="button" class="btn btn-default">按鈕 2
type="button" class="btn btn-default">按鈕 3
嘗試一下 ? 結(jié)果如下所示：
按鈕工具欄
下面的實例演示了上面表格中討論到的 class .btn-toolbar 的使用：
"toolbar">
type="button" class="btn btn-default">按鈕 1
type="button" class="btn btn-default">按鈕 2
type="button" class="btn btn-default">按鈕 3
type="button" class="btn btn-default">按鈕 4
type="button" class="btn btn-default">按鈕 5
type="button" class="btn btn-default">按鈕 6
type="button" class="btn btn-default">按鈕 7
type="button" class="btn btn-default">按鈕 8
type="button" class="btn btn-default">按鈕 9
嘗試一下 ? 結(jié)果如下所示：
按鈕的大小
下面的實例演示了上面表格中討論到的 class .btn-group-* 的使用：
"btn-group btn-group-lg">
type="button" class="btn btn-default">按鈕 1
type="button" class="btn btn-default">按鈕 2
type="button" class="btn btn-default">按鈕 3
"btn-group btn-group-sm">
type="button" class="btn btn-default">按鈕 4
type="button" class="btn btn-default">按鈕 5
type="button" class="btn btn-default">按鈕 6
"btn-group btn-group-xs">
type="button" class="btn btn-default">按鈕 7
type="button" class="btn btn-default">按鈕 8
type="button" class="btn btn-default">按鈕 9
嘗試一下 ? 結(jié)果如下所示：
嵌套
您可以在一個按鈕組內(nèi)嵌套另一個按鈕組，即，在一個 .btn-group 內(nèi)嵌套另一個 .btn-group 。當(dāng)您想讓下拉菜單與一系列按鈕組合使用時，就會用到這個。
type="button" class="btn btn-default">按鈕 1
type="button" class="btn btn-default">按鈕 2
type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉
- "#">下拉鏈接 1
- "#">下拉鏈接 2
嘗試一下 ? 結(jié)果如下所示：
垂直的按鈕組
下面的實例演示了上面表格中討論到的 class .btn-group-vertical 的使用：
type="button" class="btn btn-default">按鈕 1
type="button" class="btn btn-default">按鈕 2
type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉
- "#">下拉鏈接 1
- "#">下拉鏈接 2
嘗試一下 ? 結(jié)果如下所示：
分享題目：Bootstrap按鈕組使用方法
文章鏈接：http://m.fisionsoft.com.cn/article/dpshsod.html
