Bootstrap下拉菜單效果實例代碼分享
下拉菜單Dropdown不是表單中<select><option value=''></option></select>那種啊,而是導航條中常見的那種。
Bootstrap官方網(wǎng)站對下拉菜單Dropdown的解釋很少,即使是他們的英文官方網(wǎng)站。
對于如何更改下拉菜單的背景顏色、如果對下拉菜單默認的黑色超級鏈接進行修改,如何把下拉菜單更改成普通的超級鏈接而不是文字的樣式,官方網(wǎng)站是完全沒有具體的解釋。
而且,官方網(wǎng)站的超級鏈接代碼雜糅著許多沒有用的參數(shù)。
筆者研究了很久,才找到更改下拉菜單的方法。
以下是IE8對Bootstrap的下拉菜單,以后各位使用Bootstrap記得千萬要用IE8去測試,谷歌等高級瀏覽器掩蓋了許多Bug。
提供如何更改下拉菜單的背景顏色、如果對下拉菜單默認的黑色超級鏈接進行修改,如何把下拉菜單更改成普通的超級鏈接而不是文字的樣式的修改方法,
至于如何把下拉菜單的框框改沒,筆者實在是無能為力的。
以上的下拉菜單具體實現(xiàn)請看如下的代碼:
<!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)橐粋€文字式的下拉菜單--> <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之前,寫一個下拉菜單,要定義一個隱藏圖層,當鼠標懸?;蛘唿c擊相應的超級鏈接之后,此圖層顯示出來。當鼠標懸停在此隱藏圖層,此隱藏圖層依舊顯示,當鼠標離開此隱藏圖層,則此隱藏圖層繼續(xù)從顯示變成隱藏,很麻煩的。
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- BootStrap實現(xiàn)響應式布局導航欄折疊隱藏效果(在小屏幕、手機屏幕瀏覽時自動折疊隱藏)
- Bootstrap導航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap實現(xiàn)響應式導航欄效果
- Bootstrap實現(xiàn)默認導航欄效果
- bootstrap學習使用(導航條、下拉菜單、輪播、柵格布局等)
- 基于Bootstrap實現(xiàn)的下拉菜單手機端不能選擇菜單項的原因附解決辦法
- Bootstrap導航條可點擊和鼠標懸停顯示下拉菜單的實現(xiàn)代碼
- bootstrapValidator表單驗證插件學習
- 妙用Bootstrap的 popover插件實現(xiàn)校驗表單提示功能
- Bootstrap中表單控件狀態(tài)(驗證狀態(tài))
- bootstrap導航欄、下拉菜單、表單的簡單應用實例解析
相關文章
javascript創(chuàng)建頁面蒙板的一些知識技巧總結
javascript創(chuàng)建頁面蒙板的一些知識技巧總結...2007-08-08JavaScript操作XML實例代碼(獲取新聞標題并分頁,并分頁)
XML 代碼部分 這是一個新聞的XML 文件,如果 NBody部分包含 XML 和Html 不可識別部分, 就 包含在DATA 表示附中。2010-05-05json對象與數(shù)組以及轉換成js對象的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨son對象與數(shù)組以及轉換成js對象的簡單實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06JavaScript使用localStorage判斷設置值是否過期
本文主要介紹了JavaScript使用localStorage判斷設置值是否過期,通過設置過期時間,我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲到 localStorage 中,并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過期,感興趣的可以了解一下2023-05-05