學(xué)習(xí)Bootstrap組件之下拉菜單
更新時間：2015年07月28日 12:02:21 作者：bboyjoe
本文介紹了一款基于HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架，需要了解的朋友可以參考下
Bootstrap 是由Twitter 工程師推出的基于HTML，CSS，JAVASCRIPT的簡潔靈活的流行前端框架，我們可以把它想象成一個定義了很多效果的CSS與JS的庫，庫里面已經(jīng)定義好了各種組件的顯示效果與動畫。
.dropdown——設(shè)置父元素為下拉菜單組件，向下彈出子菜單；
.dropup——設(shè)置父元素為下拉菜單組件，向上彈出子菜單；
.dropdown-toggle——設(shè)置按鈕為下拉菜單切換按鈕；
.dropdown-menu——設(shè)置ul元素為下拉菜單；
.dropdown-menu-right——將菜單右對齊；
.pull-right——將菜單組件的父元素右對齊；
.dropdown-header——為菜單項添加標(biāo)題；
.divider——為菜單項添加分割線；
.disabled——禁用相應(yīng)菜單項；
實現(xiàn)代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>CSS全局樣式_下拉菜單</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"> <script src="jquery-1.11.1.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="dropdown pull-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">中超Big4</li> <li><a href="#" role="menuitem">上海上港</a></li> <li><a href="#" role="menuitem">廣州恒大</a></li> <li><a href="#" role="menuitem">山東魯能</a></li> <li class="disabled"><a href="#" role="menuitem">北京國安</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">中超5-8</li> <li><a href="#" role="menuitem">上海申花</a></li> <li><a href="#" role="menuitem">江蘇舜天</a></li> <li><a href="#" role="menuitem">長春亞泰</a></li> <li><a href="#" role="menuitem">河南建業(yè)</a></li> </ul> </div> </div> </body> </html>
實現(xiàn)效果：
如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對于大家使用Bootstrap組件制作下拉菜單有所幫助。
您可能感興趣的文章:
- 基于bootstrap按鈕式下拉菜單組件的搜索建議插件
- bootstrap組件之按鈕式下拉菜單小結(jié)
- JS樹形菜單組件Bootstrap TreeView使用方法詳解
- Bootstrap CSS組件之按鈕下拉菜單
- Bootstrap CSS組件之下拉菜單(dropdown)
- Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單(7)
- Bootstrap布局組件教程之Bootstrap下拉菜單
- Bootstrap組件(一)之菜單
- Bootstrap按鈕下拉菜單組件詳解
- JS組件Bootstrap實現(xiàn)下拉菜單效果代碼
- JS組件Bootstrap ContextMenu右鍵菜單使用方法
- Bootstrap組件之下拉菜單,多級菜單及按鈕布局方法實例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js選項卡的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章給大家分享分享一段代碼基于JavaScript實現(xiàn)報警器提示音效果，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10
最近自己在搭建一個基于webpack的react項目，遇到關(guān)于output.publicPath和webpack-dev-server中publicPath的問題，所以自己研究了下并寫下本文記錄。感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要給大家介紹了關(guān)于在JavaScript中如何使用宏的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
脫敏指的是通過特定的技術(shù)手段對敏感數(shù)據(jù)進(jìn)行處理,使其不再直接暴露給用戶或系統(tǒng),防止敏感信息泄露,通常在測試、開發(fā)、數(shù)據(jù)處理等場景中使用,本文給大家介紹了JS實現(xiàn)手機(jī)號脫敏的方法,需要的朋友可以參考下2025-03-03
JS數(shù)組push、unshift、pop、shift方法的實現(xiàn)與使用方法示例
這篇文章主要介紹了JS數(shù)組push、unshift、pop、shift方法,結(jié)合實例形式分析了JS數(shù)組push、unshift、pop、shift方法針對數(shù)組添加、刪除等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)于手撕javascript繼承的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JS函數(shù)arguments數(shù)組獲得實際傳參數(shù)個數(shù)的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S函數(shù)arguments數(shù)組獲得實際傳參數(shù)個數(shù)的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)訂單評價和商家評價功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法
這篇文章主要介紹了小程序自定義modal彈窗封裝實現(xiàn)方法，本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06