Bootstrap下拉菜單樣式
更新時間：2017年02月07日 15:13:24 作者：輕擾時光
這篇文章主要為大家詳細介紹了Bootstrap下拉菜單樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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步:添加一個dropdown父級;
第2步:給button添加一個data-toggle="dropdown"屬性;
第3步:給ul添加一個class="dropdown-menu”.
最好再給button添加一個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">學院課程 <span class="caret"></span></button><!--btn-default默認顏色-->
<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使下拉列表默認展開;而pull-right使其右浮動并右對齊，改為dropup使箭頭朝上并向上展開--> <button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">學院課程 <span class="caret"></span></button><!--btn-block使按鈕撐滿整個父級--> <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">學院課程 <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是菜單里的標題，給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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
嚴格模式是?ECMAScript?5?引入的一種運行模式,可以讓?JavaScript?在更加嚴格的條件下運行,本文主要為大家詳細介紹了JavaScript中嚴格模式的使用,需要的可以參考下2023-11-11
這篇文章主要介紹了bootstrap可視化布局入門教程的相關(guān)資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
js setTimeout實現(xiàn)延遲關(guān)閉彈出層
有時候我們希望彈出層能夠?qū)崿F(xiàn)延遲關(guān)閉，并且鼠標在彈出層區(qū)域移動的時候能夠保持顯現(xiàn)，下面是具體的實現(xiàn)代碼。2010-04-04
微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析
這篇文章主要介紹了微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了利用js編寫網(wǎng)頁進度條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了微信小程序 彈窗輸入組件的實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
BMI指數(shù)計算器相信大家都用過，那用JavaScript怎么實現(xiàn)呢？其實很簡單，這篇文章給出了實例代碼，有需要的可以參考學習。2016-08-08
下面小編就為大家?guī)硪黄猨s中刪除數(shù)組中的某一元素實例(無下標時)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
基于JavaScript實現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標
本文給大家介紹javascript實現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標的相關(guān)知識，本文實用性非常高，代碼簡單易懂，需要的朋友參考下吧2016-01-01