欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap按鈕組實例詳解

 更新時間：2017年07月03日 08:34:51   作者：小火柴的藍色理想  
單個按鈕在Web頁面中的運用有時候并不能滿足我們的業(yè)務需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器里的一組小圖標按鈕等。本文將詳細介紹Bootstrap按鈕組，感興趣的朋友一起看看吧

使用方法

　　按鈕組和下拉菜單組件一樣，需要依賴于button.js插件才能正常運行。不過我們同樣可以直接只調(diào)用bootstrap.js文件。因為這個文件已集成了button.js插件功能

　　同樣地，因為Bootstrap的組件交互效果都是依賴于jQuery庫寫的插件，所以在使用bootstrap.js之前一定要先加載jquery.js才會產(chǎn)生效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link  rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

基本用法

　　按鈕組結(jié)構(gòu)非常的簡單。使用一個名為“btn-group”的容器，把多個按鈕放到這個容器中

　　為了向屏幕閱讀器的用戶傳達正確的按鈕分組，需要提供一個合適的 role 屬性。對于按鈕組合，應該是 role="group"，對于toolbar（工具欄）應該是 role="toolbar"

　　此外，按鈕組和工具欄應給定一個明確的label標簽，盡管設(shè)置了正確的 role 屬性，但是大多數(shù)輔助技術(shù)將不會正確的識讀他們?？梢允褂?aria-label，也可以使用aria-labelledby

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

<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-fast-backward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
</div>

按鈕工具欄

　　在富文本編輯器中，將按鈕組分組排列在一起，比如說復制、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組。Bootstrap框架按鈕工具欄也提供了這樣的制作方法，只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中

<div class="btn-toolbar">
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
 <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
 </div>
</div>

按鈕尺寸

　　在介紹表單按鈕的博文中，我們知道按鈕是通過btn-lg、btn-sm和btn-xs三個類名來調(diào)整padding、font-size、line-height和border-radius屬性值來改變按鈕大小。那么按鈕組的大小，我們也可以通過類似的方法：

 　　   .btn-group-lg:大按鈕組

 　　   .btn-group-sm:小按鈕組

 　　   .btn-group-xs:超小按鈕組

　　只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組

<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">
 <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">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-xs">
 <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>

嵌套分組

　　很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現(xiàn)類似于導航菜單的效果。使用的時候，只需要把當初制作下拉菜單的“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="##">客服服務</a></li>
 </ul>
 </div>
</div>

垂直排列

　　默認地，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。只需要把水平分組的“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="##">客服服務</a></li>
 </ul>
 </div>
</div>

等分按鈕

　　等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組里面的每個按鈕平分整個容器寬度。例如，如果按鈕組里面有五個按鈕，那么每個按鈕是20%的寬度，如果有四個按鈕，那么每個按鈕是25%寬度，以此類推

　　等分按鈕也常被稱為是自適應分組按鈕，其實現(xiàn)方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名

　　實現(xiàn)原理非常簡單，把“btn-group-justified”模擬成表格（display:table），而且把里面的按鈕模擬成表格單元格（display:table-cell）

　　[注意]在制作等分按鈕組時，盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持并不友好

.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 > .btn設(shè)置了table-cell，而table-cell是不能設(shè)置margin的，而代碼中設(shè)置了-margin值，用來去除邊框，顯然不會生效。因此，去除重復邊框的代碼應該是合并表格邊框—— border-collapse: collapse

<div class="btn-group btn-group-justified">
 <a class="btn btn-default" href="#">首頁</a>
 <a class="btn btn-default" href="#">產(chǎn)品展示</a>
 <a class="btn btn-default" href="#">案例分析</a>
 <a class="btn btn-default" href="#">聯(lián)系我們</a>
</div>

　　為了將 <button> 元素用于兩端對齊的按鈕組中，必須將每個按鈕包裹進一個按鈕組中。因為大部分的瀏覽器不能將CSS 應用到對齊的 <button> 元素上，但是，可以用按鈕式下拉菜單來解決這個問題

<div class="btn-group btn-group-justified">
 <div class="btn-group" role="group">
  <button class="btn btn-default" >首頁</button>
 </div> 
 <div class="btn-group" role="group">
  <button class="btn btn-default" >產(chǎn)品展示</button>
 </div> 
 <div class="btn-group" role="group">
  <button class="btn btn-default" >案例分析</button>
 </div> 
 <div class="btn-group" role="group">
  <button class="btn btn-default" >聯(lián)系我們</button>
 </div> 
</div>

 

以上所述是小編給大家介紹的Bootstrap按鈕組實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論