Bootstrap下拉菜單效果實例代碼分享
編輯：關於JavaScript
下拉菜單Dropdown不是表單中<select><option value=''></option></select>那種啊，而是導航條中常見的那種。
Bootstrap官方網站對下拉菜單Dropdown的解釋很少，即使是他們的英文官方網站。
對於如何更改下拉菜單的背景顏色、如果對下拉菜單默認的黑色超級鏈接進行修改，如何把下拉菜單更改成普通的超級鏈接而不是文字的樣式，官方網站是完全沒有具體的解釋。
而且，官方網站的超級鏈接代碼雜糅著許多沒有用的參數。
筆者研究了很久，才找到更改下拉菜單的方法。
以下是IE8對Bootstrap的下拉菜單，以後各位使用Bootstrap記得千萬要用IE8去測試，谷歌等高級浏覽器掩蓋了許多Bug。
提供如何更改下拉菜單的背景顏色、如果對下拉菜單默認的黑色超級鏈接進行修改，如何把下拉菜單更改成普通的超級鏈接而不是文字的樣式的修改方法，
至於如何把下拉菜單的框框改沒，筆者實在是無能為力的。
以上的下拉菜單具體實現請看如下的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<title>下拉菜單dropdown</title>
</head>
<body>
<div class="btn-group">
<!--將btn-default改成btn-link可以讓其變為一個文字式的下拉菜單-->
<button type="button" class="btn btn-link dropdown-toggle"
data-toggle="dropdown">
下拉菜單
<!--這是下拉菜單的旁邊的小三角形-->
<span class="caret"></span>
</button>
<!--這裡在class中的dropdown-menu再加入label-warning等屬性可以改變下拉菜單的背景色-->
<ul class="dropdown-menu" role="menu">
<li>
<!--這裡的span中的class中的text-info是為了讓下拉菜單裡面的鏈接的顏色從黑色變成更像超級鏈接的藍色-->
<a href="#"><span class="text-info">項目一</span></a>
</li>
<li>
<a href="#"><span class="text-info">項目二</span></a>
</li>
</ul>
</div>
</body>
</html>
沒有jquery支持下拉菜單也是無法工作的。下拉菜單本來就是一個javascript組件。
沒有bootstrap之前，寫一個下拉菜單，要定義一個隱藏圖層，當鼠標懸停或者點擊相應的超級鏈接之後，此圖層顯示出來。當鼠標懸停在此隱藏圖層，此隱藏圖層依舊顯示，當鼠標離開此隱藏圖層，則此隱藏圖層繼續從顯示變成隱藏，很麻煩的。
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦