Bootstrap中下拉菜單組件的使用示例
這篇文章主要介紹了Bootstrap中下拉菜單組件的使用示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),廣水網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:廣水等地區(qū)。廣水做網(wǎng)站價(jià)格咨詢(xún):028-86922220
bootstrap框架中的下拉菜單組件是一個(gè)獨(dú)立的組件，根據(jù)不同的版本，他對(duì)應(yīng)的文件：
less 對(duì)應(yīng)的源碼文件為：dropdowns.less
sass對(duì)應(yīng)的源碼文件為：_dropdowns.scss
在使用bootstrap礦建的下拉菜單時(shí)，必須調(diào)用bootstrap框架提供的bootstrap.js文件。對(duì)于未編譯版本，可以在js下找到一個(gè)名為dropdown.js的文件，也可以調(diào)用這個(gè)文件。也可以調(diào)用壓縮好的文件bootstrap.min.js
由于bootstrap組件交互效果都是依賴(lài)于jQuery庫(kù)寫(xiě)的插件，所以在使用bootstrap.min.js之前一定要先加載jQuery.min.js
官網(wǎng)上的示例：
下拉菜單
下拉菜單項(xiàng)
…
下拉菜單項(xiàng)
詳解：
1、使用一個(gè)名為dropdown的容器包裹了整個(gè)下拉菜單元素
2、使用了
data-toggle=“dropdown”
3、下拉菜單項(xiàng)使用了一個(gè)ul列表，并且定義一個(gè)類(lèi)名為dropdown-menu
bootstrap中的下拉菜單項(xiàng)默認(rèn)是隱藏的,dropdown-menu設(shè)置了display：none
.dropdown-menu {
position: absolute;/*設(shè)置絕對(duì)定位，相對(duì)于父元素div.dropdown*/
top: 100%;/*讓下拉菜單項(xiàng)在父菜單項(xiàng)底部，如果父元素不設(shè)置相對(duì)定位，該元素相對(duì)于body元素*/
left: 0;
z-index: 1000;/*讓下拉菜單項(xiàng)不被其他元素遮蓋住*/
display: none;/*默認(rèn)隱藏下拉菜單項(xiàng)*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }當(dāng)用戶(hù)點(diǎn)擊父級(jí)菜單時(shí)，下拉菜單會(huì)顯示出來(lái)，再次點(diǎn)擊時(shí)下拉菜單將繼續(xù)隱藏
詳解：
通過(guò)js給父級(jí)容器p.dropdown添加或一處open來(lái)控制下拉菜單顯示或隱藏，也就是說(shuō)，默認(rèn)情況，p.dropdown沒(méi)有類(lèi)名open，當(dāng)用戶(hù)第一次點(diǎn)擊時(shí)，p.dropdown會(huì)添加類(lèi)名open，當(dāng)用戶(hù)再次點(diǎn)擊時(shí)，p.dropdown容器中的類(lèi)名會(huì)被移除
.open > .dropdown-menu {
display: block;
}下拉分隔線(xiàn)
假設(shè)下拉菜單有兩個(gè)組，那么組與組之間可以通過(guò)添加一個(gè)空的
,并且給這個(gè)li添加類(lèi)名.piderl來(lái)實(shí)現(xiàn)添加下拉分隔線(xiàn)的功能.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
菜單標(biāo)題
為了讓這個(gè)分組更明顯，還可以給每個(gè)組添加一個(gè)頭部標(biāo)題。
下拉菜單
第一部分菜單頭部
下拉菜單項(xiàng)
…
第二部分菜單頭部
…
下拉菜單項(xiàng) bootstrap框架中下拉菜單默認(rèn)是左對(duì)齊，如果要下拉菜單相對(duì)于父級(jí)容器右對(duì)齊，可以在dropdown-menu上添加一個(gè)類(lèi).dropdown-menu-right，注意，從v3.1.0版本開(kāi)始，不再建議對(duì)下拉菜單使用.pull-right類(lèi)
下拉菜單還有當(dāng)前狀態(tài)和禁用狀態(tài)，這兩種狀態(tài)使用方法只需要在對(duì)應(yīng)的菜單項(xiàng)上添加對(duì)應(yīng)的類(lèi)名
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Bootstrap中下拉菜單組件的使用示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
重慶分公司
重慶分公司
