Bootstrap下拉菜單樣式
更新時(shí)間：2017年02月07日 15:13:24 作者：輕擾時(shí)光
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Bootstrap下拉菜單的具體代碼，供大家參考，具體內(nèi)容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<!--第1步:添加一個(gè)dropdown父級;
第2步:給button添加一個(gè)data-toggle="dropdown"屬性;
第3步:給ul添加一個(gè)class="dropdown-menu”.
最好再給button添加一個(gè)dropdown-toggle的class屬性
-->
<body>
<div class="container" style="margin-top:5px">
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">學(xué)院課程 <span class="caret"></span></button><!--btn-default默認(rèn)顏色-->
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>
</div>
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
效果圖：
Bootstrap下拉菜單的樣式：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /> </head> <body> <div class="container" style="margin-top:5px"> <div class="row"> <div class="col-lg-4"> <div class="dropdown"> <!--在dropdown后面加上open使下拉列表默認(rèn)展開;而pull-right使其右浮動(dòng)并右對齊，改為dropup使箭頭朝上并向上展開--> <button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">學(xué)院課程 <span class="caret"></span></button><!--btn-block使按鈕撐滿整個(gè)父級--> <ul class="dropdown-menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li> </ul> </div> </div> <div class="col-lg-4"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">學(xué)院課程 <span class="caret"></span></button> <ul class="dropdown-menu"> <li class="dropdown-header"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >前端</a></li><!--dropdown-header是菜單里的標(biāo)題，給li添加--> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javascript</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >less</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bootstrap</a></li> <li class="divider"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a></li><!--divider是分隔線，給li添加--> <li class="dropdown-header text-center"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >后端</a></li><!--text-center讓內(nèi)容居中--> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >php</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >java</a></li> <li class="disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >.net</a></li><!--disabled使菜單不可選--> </ul> </div> </div> </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap每天必學(xué)之下拉菜單
- Bootstrap每天必學(xué)之級聯(lián)下拉菜單
- Bootstrap 中下拉菜單修改成鼠標(biāo)懸停直接顯示
- Bootstrap實(shí)現(xiàn)下拉菜單效果
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
- 學(xué)習(xí)Bootstrap組件之下拉菜單
- JS組件Bootstrap實(shí)現(xiàn)下拉菜單效果代碼
- BootStrap點(diǎn)擊下拉菜單項(xiàng)后顯示一個(gè)新的輸入框?qū)崿F(xiàn)代碼
- Bootstrap按鈕下拉菜單組件詳解
相關(guān)文章
這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
一文帶你了解一下JavaScript中什么是嚴(yán)格模式
嚴(yán)格模式是?ECMAScript?5?引入的一種運(yùn)行模式,可以讓?JavaScript?在更加嚴(yán)格的條件下運(yùn)行,本文主要為大家詳細(xì)介紹了JavaScript中嚴(yán)格模式的使用,需要的可以參考下2023-11-11
這篇文章主要介紹了bootstrap可視化布局入門教程的相關(guān)資料，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
js setTimeout實(shí)現(xiàn)延遲關(guān)閉彈出層
有時(shí)候我們希望彈出層能夠?qū)崿F(xiàn)延遲關(guān)閉，并且鼠標(biāo)在彈出層區(qū)域移動(dòng)的時(shí)候能夠保持顯現(xiàn)，下面是具體的實(shí)現(xiàn)代碼。2010-04-04
微信小程序iBeacon測距及穩(wěn)定程序的實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序iBeacon測距及穩(wěn)定程序的實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了利用js編寫網(wǎng)頁進(jìn)度條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了微信小程序 彈窗輸入組件的實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
利用Javascript實(shí)現(xiàn)BMI計(jì)算器
BMI指數(shù)計(jì)算器相信大家都用過，那用JavaScript怎么實(shí)現(xiàn)呢？其實(shí)很簡單，這篇文章給出了實(shí)例代碼，有需要的可以參考學(xué)習(xí)。2016-08-08
js中刪除數(shù)組中的某一元素實(shí)例(無下標(biāo)時(shí))
下面小編就為大家?guī)硪黄猨s中刪除數(shù)組中的某一元素實(shí)例(無下標(biāo)時(shí))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
基于JavaScript實(shí)現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)
本文給大家介紹javascript實(shí)現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)的相關(guān)知識，本文實(shí)用性非常高，代碼簡單易懂，需要的朋友參考下吧2016-01-01