Bootstrap學習之按鈕元件（一）
本篇文章跟大家介紹一下Bootstrap中的按鈕元件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
相關推薦：《bootstrap教學》
按鈕群組也是獨立的元件，所以可以找到對應的原始碼檔案：
Less：buttons.less
Sass:_buttons.scss
Css:Bootstrap.css 3131行~3291行
按鈕群組與下拉式選單元件一樣，需要依賴button.js插件才能正常運作。
結構方面：使用一個類別名稱為btn-group的容器，把多個按鈕放在這個容器中。
<div> <button> <span></span> </button> … <button> <span></span> </button> </div>
CSS:
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}除了可以使用
#按鈕組四個角都是圓角，除了第一個和最後一個按鈕具有邊上的圓角外，其他的按鈕沒有圓角。
詳解：
1、預設：所有按鈕都是圓角
2、除第一個按鈕和最後一個按鈕，其他的按鈕圓角取消
3、最後一個按鈕只留右上角和右下角為圓角
源碼：
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}按鈕組工具列
#在富文本編輯器中，將按鈕組分組排列在一起，比如說複製，剪切，貼上一組，左對齊，中間對齊，右對齊和兩端對齊一組，這時需要用到bootstrap框架按鈕工具欄btn-toolbar
<div> <div> … </div> <div> … </div> <div> … </div> <div> … </div> </div>
原理：主要是讓容器的多個分組.btn-group元素進行浮動，並且群組與群組之間保持5px的左外距
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}#注意在btn-toolbar上清除浮動
.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}範例:
<div> <div> <button> <span></span> </button> <button> <span></span> </button> <button> <span></span> </button> <button> <span></span> </button> </div> <div> <button> <span></span> </button> <button> <span></span> </button> </div> </div>
#按鈕巢狀分組
很多時候，我們把下拉式選單很普通的按鈕組排列在一起，實現類似於導航選單的效果：
使用的時候只需將先前製作下拉式選單的dropdown容器的類別名稱換成btn-group，並且和普通的按鈕放在同一層：
<div> <button>首页</button> <button>产品展示</button> <button>案例分析</button> <button>联系我们</button> <div> <button> 关于我们<span></span> </button> <ul> <li><a>公司简介</a></li> <li><a>企业文化</a></li> <li><a>组织结构</a></li> <li><a>客服服务</a></li> </ul> </div> </div>
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}按鈕垂直分組
#只需把水平分組的類別名稱.btn-group換成.btn-group- vertical即可。
<div> <button>首页</button> <button>产品展示</button> <button>案例分析</button> <button>联系我们</button> <div> <button> 关于我们<span></span> </button> <ul> <li><a>公司简介</a></li> <li><a>企业文化</a></li> <li><a>组织结构</a></li> <li><a>客服服务</a></li> </ul> </div> </div>
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}等分按鈕又稱為自適應分組按鈕：
整個按鈕組的寬度是容器的100%，而按鈕組裡面的每個按鈕平分整個容器的寬度，例如一個按鈕組裡有五個按鈕，每個按鈕是容器寬度的20%；一個按鈕組裡有四個按鈕，每個按鈕是容器寬度的25%；
#實作方法：只需要在按鈕組.btn-group 上追加一個類別名稱.btn-group-justified
<div> <buttton>首页</buttton> <buttton>案例分析</buttton> <buttton>联系我们</buttton> <buttton>关于我们</buttton> </div>
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}把.btn-group-justified模擬成表格（display：table），並且把裡面的按鈕範本模擬成表格儲存格（display：table-cell）。
注意：在製作等分按鈕群組時，盡量使用標籤來製作按鈕，因為使用button標籤元素時，使用display：table在部分瀏覽器下支援並不友好
更多程式相關知識，請造訪：程式設計入門！ ！
以上是Bootstrap學習之按鈕元件（一）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
bootstrap搜索欄怎麼獲取
Apr 07, 2025 pm 03:33 PM
如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。
bootstrap垂直居中怎麼弄
Apr 07, 2025 pm 03:21 PM
使用 Bootstrap 實現垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 類，將元素置於 flexbox 容器內。 align-items-center 類法：對於不支持 flexbox 的瀏覽器，使用 align-items-center 類，前提是父元素具有已定義的高度。
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
