一严肪、小圖標(biāo)組件
1、概要
Bootstrap 提供了免費的 很多小圖標(biāo)，具體可以參考中文官網(wǎng)的組件鏈接：免費小圖標(biāo)
2驳糯、基礎(chǔ)使用
- 說明
可以使用<i>或<span>標(biāo)簽來配合使用 - 基礎(chǔ)應(yīng)用
<i class="glyphicon glyphicon-home"></i> <span class="glyphicon glyphicon-home"></span> - 也可以結(jié)合按鈕
<button class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-home"></span> </button> <button class="btn btn-default"> <span class="glyphicon glyphicon-shopping-cart"></span> </button> <button class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-circle-arrow-right"></span> </button> <button class="btn btn-default btn-xs"> <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span> </button>
二篇梭、下拉菜單組件
1、概要
下拉菜單酝枢，就是點擊一個元素或按鈕恬偷，觸發(fā)隱藏的列表顯示出來。注意要導(dǎo)入jquery.js和bootstrap.js插件
2帘睦、基礎(chǔ)使用
按鈕和菜單需要包裹在.dropdown 的容器里袍患，而作為被點擊的元素按鈕需要設(shè)置data-toggle="dropdown"才能有效。對于菜單部分官脓，設(shè)置 class="dropdown-menu"才能自動隱藏并添加固定樣式协怒。設(shè)置 class="caret"表示箭頭，可上可下卑笨。
- 基礎(chǔ)應(yīng)用
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script> <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown">下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="#">首頁</a> </li> <li><a href="#">技術(shù)</a> </li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">關(guān)于我們</a> </li> </ul> </div> - 設(shè)置向上觸發(fā)
<div class="dropup"> - 菜單項居右對齊孕暇，默認(rèn)值是 dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right"> - 設(shè)置菜單的標(biāo)題，不要加超鏈接
<li class="dropdown-header">網(wǎng)站導(dǎo)航</li> - 設(shè)置菜單的分割線
<li class="divider"></li> - 設(shè)置菜單的禁用項
<li class="disabled"><a href="#">產(chǎn)品</a></li> - 讓菜單默認(rèn)顯示
<div class="dropdown open">
三赤兴、按鈕組組件
1妖滔、概要
按鈕組就是多個按鈕集成在一個容器里形成獨有的效果。
2桶良、基礎(chǔ)使用
- 基礎(chǔ)應(yīng)用
<div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> </div> - 將多個按鈕組整合起來便于管理
<div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"> 左 </button> <button type="button" class="btn btn-default"> 中 </button> <button type="button" class="btn btn-default"> 右 </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> - 設(shè)置按鈕組大小
<div class="btn-group btn-group-lg"> <div class="btn-group> <div class="btn-group btn-group-sm"> <div class="btn-group btn-group-xs"> - 嵌套一個分組
<div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> <div class="btn-group"> <!--必須使用自定義屬性 data-toggle才能點擊顯示隱藏 --> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜單 <!--小三角形--> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首頁</a></li> <li><a href="#">技術(shù)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">關(guān)于我們</a></li> </ul> </div> </div> - 設(shè)置按鈕組垂直排列
<div class="btn-group-vertical"> - 設(shè)置兩端對齊按鈕組座舍，使用
<a>標(biāo)簽<div class="btn-group-justified"> <a type="button" class="btn btn-default">左</a> <a type="button" class="btn btn-default">中</a> <a type="button" class="btn btn-default">右</a> </div> - 如果需要使用
<button>標(biāo)簽，則需要對每個按鈕進行群組<div class="btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">中</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">右</button> </div> </div>
四陨帆、按鈕式下拉菜單
1曲秉、概要
這個下拉菜單其實和下拉菜單組件一樣，只不過疲牵，這個是在群組里承二，不需要
<div>聲明class="dropdown"。
2纲爸、基礎(chǔ)使用
- 群組按鈕下拉菜單
<h1>按鈕組下拉菜單</h1> <div class="btn-group"> <button type="button" class="btn btn-default" data-toggle="dropdown">下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首頁</a></li> <li><a href="#">技術(shù)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">關(guān)于我們</a></li> </ul> </div> </body> </html> - 文件與下拉分開按鈕下拉菜單
<h1>分裂式按鈕組下拉菜單</h1> <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="#">首頁</a></li> <li><a href="#">技術(shù)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">關(guān)于我們</a></li> </ul> </div> - 向上彈出菜單
<div class="btn-group dropup">
