Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
學(xué)習(xí)要點(diǎn)：
1.小圖標(biāo)組件
2.下拉菜單組件
3.按鈕組組件
4.按鈕式下拉菜單
本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 的三個組件功能：小圖標(biāo)組件、下拉菜單組件和各種按鈕組件。
一．小圖標(biāo)組件
Bootstrap 提供了免費(fèi)的 263 個小圖標(biāo)（數(shù)了兩次），具體可以參考中文官網(wǎng)的組件鏈接：
http://v3.bootcss.com/components/#glyphicons。
部分圖標(biāo)如下：
可以使用<i>或<span>標(biāo)簽來配合使用，具體如下：
//使用小圖標(biāo)<i class="glyphicon glyphicon-star"></i><span class="glyphicon glyphicon-star"></span> //也可以結(jié)合按鈕<button class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star"></span></button><button class="btn btn-default btn"><span class="glyphicon glyphicon-star"></span></button><button class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span></button><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-star"></span></button>
二．下拉菜單組件
下拉菜單，就是點(diǎn)擊一個元素或按鈕，觸發(fā)隱藏的列表顯示出來。
//基本格式<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="#">資訊</a></li><li><a href="#">產(chǎn)品</a></li><li><a href="#">關(guān)于</a></li></ul></div>
按鈕和菜單需要包裹在.dropdown 的容器里，而作為被點(diǎn)擊的元素按鈕需要設(shè)置data-toggle="dropdown"才能有效。對于菜單部分，設(shè)置 class="dropdown-menu"才能自動隱藏并添加固定樣式。設(shè)置 class="caret"表示箭頭，可上可下。
//設(shè)置向上觸發(fā)<div class="dropup"> //菜單項(xiàng)居右對齊，默認(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è)置菜單的禁用項(xiàng)<li class="disabled"><a href="#">產(chǎn)品</a></li> //讓菜單默認(rèn)顯示<div class="dropdown open">
三．按鈕組組件
按鈕組就是多個按鈕集成在一個容器里形成獨(dú)有的效果。
//基本格式<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"></button><button type="button" class="btn btn-default"></button><button type="button" class="btn btn-default"></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"><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="#">資訊</a></li><li><a href="#">產(chǎn)品</a></li><li><a href="#">關(guān)于</a></li></ul></div></div>
注意：這里<div>中并沒有實(shí)現(xiàn) class="dropdown"，通過源碼分析知道嵌套本身已經(jīng)有定位就不需要再設(shè)置。而右邊的圓角只要多加一個 class="dropdown-toggle"即可。
//設(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)簽，則需要對每個按鈕進(jìn)行群組<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>
四．按鈕式下拉菜單
這個下拉菜單其實(shí)和第二個知識點(diǎn)一樣，只不過，這個是在群組里，不需要<div>聲明class="dropdown"。
//群組按鈕下拉菜單<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="#">資訊</a></li><li><a href="#">產(chǎn)品</a></li><li><a href="#">關(guān)于</a></li></ul></div> //分裂式按鈕下拉菜單<div class="btn-group"><button type="button" class="btn btn-default">下拉菜單</button><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="#">資訊</a></li><li><a href="#">產(chǎn)品</a></li><li><a href="#">關(guān)于</a></li></ul></div> //向上彈出式<div class="btn-group dropup">
以上內(nèi)容是小編給大家介紹的BootStrap組件之菜單按鈕圖標(biāo)組件，希望對大家有所幫助！
新聞熱點(diǎn)
疑難解答
