這篇文章主要介紹“Bootstrap按鈕組件怎么使用”，在日常操作中，相信很多人在Bootstrap按鈕組件怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Bootstrap按鈕組件怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),阿拉爾企業(yè)網(wǎng)站建設(shè),阿拉爾品牌網(wǎng)站建設(shè),網(wǎng)站定制,阿拉爾網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,阿拉爾網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運(yùn)作。

結(jié)構(gòu)方面：使用一個(gè)類名為btn-group的容器，把多個(gè)按鈕放在這個(gè)容器中。

按鈕組也是一個(gè)獨(dú)立的組件，所以可以找到相應(yīng)的源碼文件：

Less：buttons.less

Sass:_buttons.scss

Css:Bootstrap.css 3131行~3291行

<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
…
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-forward"></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;
}

除了可以使用<button>元素之外，還可以使用其他標(biāo)簽元素，比如<a>標(biāo)簽，唯一要保證的是：不管使用什么標(biāo)簽，.btn-group容器里的標(biāo)簽元素需要帶有類名.btn

按鈕組四個(gè)角都是圓角，除了第一個(gè)和最后一個(gè)按鈕具有邊上的圓角外，其他的按鈕沒有圓角。

詳解：

1、默認(rèn)：所有按鈕都是圓角

2、除第一個(gè)按鈕和最后一個(gè)按鈕，其他的按鈕圓角取消

3、最后一個(gè)按鈕只留右上角和右下角為圓角

源碼：

.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;
}

按鈕組工具欄

在富文本編輯器中，將按鈕組分組排列在一起，比如說復(fù)制，剪切，粘貼一組，左對齊，中間對齊，右對齊和兩端對齊一組，這時(shí)需要用到bootstrap框架按鈕工具欄btn-toolbar

<div class="btn-toolbar">
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
<div class="btn-group">
…
</div>
</div>

原理：主要是讓容器的多個(gè)分組.btn-group元素進(jìn)行浮動，并且組與組之間保持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 class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-center"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-align-right"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-font"></span>
</button>
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-bold"></span>
</button>
</div>
</div>

按鈕嵌套分組

很多時(shí)候，我們把下拉菜單很普通的按鈕組排列在一起，實(shí)現(xiàn)類似于導(dǎo)航菜單的效果：

 

使用的時(shí)候只需將之前制作下拉菜單的dropdown容器的類名換成btn-group，并且和普通的按鈕放在同一級：

<div class="btn-group">
<button class="btn btn-default" type="button">首頁</button>
<button class="btn btn-default" type="button">產(chǎn)品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">聯(lián)系我們</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
關(guān)于我們<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">公司簡介</a></li>
<li><a href="#">企業(yè)文化</a></li>
<li><a href="#">組織結(jié)構(gòu)</a></li>
<li><a href="#">客服服務(wù)</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 class="btn-group-vertical">
<button class="btn btn-default" type="button">首頁</button>
<button class="btn btn-default" type="button">產(chǎn)品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">聯(lián)系我們</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
關(guān)于我們<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">公司簡介</a></li>
<li><a href="#">企業(yè)文化</a></li>
<li><a href="#">組織結(jié)構(gòu)</a></li>
<li><a href="#">客服服務(wù)</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;
}

等分按鈕又稱為自適應(yīng)分組按鈕：

整個(gè)按鈕組的寬度是容器的100%，而按鈕組里面的每個(gè)按鈕平分整個(gè)容器的寬度，例如一個(gè)按鈕組里有五個(gè)按鈕，每個(gè)按鈕是容器寬度的20%；一個(gè)按鈕組里有四個(gè)按鈕，每個(gè)按鈕是容器寬度的25%；

實(shí)現(xiàn)方法：只需要在按鈕組.btn-group 上追加一個(gè)類名.btn-group-justified

<div class="btn-group btn-group-justified">
<buttton class="btn btn-default" type="button">首頁</buttton>
<buttton class="btn btn-default" type="button">案例分析</buttton>
<buttton class="btn btn-default" type="button">聯(lián)系我們</buttton>
<buttton class="btn btn-default" type="button">關(guān)于我們</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）。

注意：在制作等分按鈕組時(shí)，盡量使用<a>標(biāo)簽來制作按鈕，因?yàn)槭褂胋utton標(biāo)簽元素時(shí)，使用display：table在部分瀏覽器下支持并不友好

到此，關(guān)于“Bootstrap按鈕組件怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)頁標(biāo)題：Bootstrap按鈕組件怎么使用
瀏覽路徑：http://aaarwkj.com/article0/gjdooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站維護(hù)、域名注冊、品牌網(wǎng)站建設(shè)、網(wǎng)站收錄、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)