Bootstrap下拉菜單效果實(shí)例代碼分享
下拉菜單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)懸?;蛘唿c(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è)精彩的專題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果(在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏)
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
- bootstrap學(xué)習(xí)使用(導(dǎo)航條、下拉菜單、輪播、柵格布局等)
- 基于Bootstrap實(shí)現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項(xiàng)的原因附解決辦法
- Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
- bootstrapValidator表單驗(yàn)證插件學(xué)習(xí)
- 妙用Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能
- Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
- bootstrap導(dǎo)航欄、下拉菜單、表單的簡(jiǎn)單應(yīng)用實(shí)例解析
相關(guān)文章
JavaScript 關(guān)于元素獲取焦點(diǎn)(隱藏元素與div)
關(guān)于元素獲取焦點(diǎn)要注意2個(gè)小問(wèn)題,需要的朋友可以參考下。2011-01-01javascript創(chuàng)建頁(yè)面蒙板的一些知識(shí)技巧總結(jié)
javascript創(chuàng)建頁(yè)面蒙板的一些知識(shí)技巧總結(jié)...2007-08-08JavaScript操作XML實(shí)例代碼(獲取新聞標(biāo)題并分頁(yè),并分頁(yè))
XML 代碼部分 這是一個(gè)新聞的XML 文件,如果 NBody部分包含 XML 和Html 不可識(shí)別部分, 就 包含在DATA 表示附中。2010-05-05js實(shí)現(xiàn)仿阿里巴巴城市選擇框效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)仿阿里巴巴城市選擇框效果,實(shí)例分析了javascript結(jié)合css與數(shù)組實(shí)現(xiàn)城市選擇框的方法,需要的朋友可以參考下2015-06-06json對(duì)象與數(shù)組以及轉(zhuǎn)換成js對(duì)象的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇json對(duì)象與數(shù)組以及轉(zhuǎn)換成js對(duì)象的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06JavaScript中輸出</script>標(biāo)簽的方法
這篇文章主要介紹了JavaScript中輸出</script>標(biāo)簽的方法,在一些廣告代碼中經(jīng)常會(huì)用到這個(gè)小技巧,需要的朋友可以參考下2014-08-08layui默認(rèn)選中table的CheckBox復(fù)選框方法
今天小編就為大家分享一篇layui默認(rèn)選中table的CheckBox復(fù)選框方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JavaScript使用localStorage判斷設(shè)置值是否過(guò)期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過(guò)期,通過(guò)設(shè)置過(guò)期時(shí)間,我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲(chǔ)到 localStorage 中,并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過(guò)期,感興趣的可以了解一下2023-05-05