Bootstrap下拉菜單效果實(shí)例代碼分享

更新時(shí)間：2016年06月30日 17:20:32 作者：yongh701

這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單效果實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

下拉菜單Dropdown不是表單中<select><option value=''></option></select>那種啊，而是導(dǎo)航條中常見(jiàn)的那種。

Bootstrap官方網(wǎng)站對(duì)下拉菜單Dropdown的解釋很少，即使是他們的英文官方網(wǎng)站。

對(duì)于如何更改下拉菜單的背景顏色、如果對(duì)下拉菜單默認(rèn)的黑色超級(jí)鏈接進(jìn)行修改，如何把下拉菜單更改成普通的超級(jí)鏈接而不是文字的樣式，官方網(wǎng)站是完全沒(méi)有具體的解釋。

而且，官方網(wǎng)站的超級(jí)鏈接代碼雜糅著許多沒(méi)有用的參數(shù)。

筆者研究了很久，才找到更改下拉菜單的方法。
以下是IE8對(duì)Bootstrap的下拉菜單，以后各位使用Bootstrap記得千萬(wàn)要用IE8去測(cè)試，谷歌等高級(jí)瀏覽器掩蓋了許多Bug。

提供如何更改下拉菜單的背景顏色、如果對(duì)下拉菜單默認(rèn)的黑色超級(jí)鏈接進(jìn)行修改，如何把下拉菜單更改成普通的超級(jí)鏈接而不是文字的樣式的修改方法，

至于如何把下拉菜單的框框改沒(méi)，筆者實(shí)在是無(wú)能為力的。

以上的下拉菜單具體實(shí)現(xiàn)請(qǐng)看如下的代碼：

<!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可以讓其變?yōu)橐粋€(gè)文字式的下拉菜單-->
 <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是為了讓下拉菜單里面的鏈接的顏色從黑色變成更像超級(jí)鏈接的藍(lán)色-->
  <a href="#"><span class="text-info">項(xiàng)目一</span></a>
 </li>
 <li>
  <a href="#"><span class="text-info">項(xiàng)目二</span></a>
 </li>
 </ul>
 </div>
 </body>
</html>

沒(méi)有jquery支持下拉菜單也是無(wú)法工作的。下拉菜單本來(lái)就是一個(gè)javascript組件。

沒(méi)有bootstrap之前，寫一個(gè)下拉菜單，要定義一個(gè)隱藏圖層，當(dāng)鼠標(biāo)懸停或者點(diǎn)擊相應(yīng)的超級(jí)鏈接之后，此圖層顯示出來(lái)。當(dāng)鼠標(biāo)懸停在此隱藏圖層，此隱藏圖層依舊顯示，當(dāng)鼠標(biāo)離開(kāi)此隱藏圖層，則此隱藏圖層繼續(xù)從顯示變成隱藏，很麻煩的。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: