快捷導(dǎo)航

學(xué)習(xí)Bootstrap組件之下拉菜單

更新時(shí)間：2015年07月28日 12:02:21 作者：bboyjoe

本文介紹了一款基于HTML，CSS，JAVASCRIPT的簡(jiǎn)潔靈活的流行前端框架，需要了解的朋友可以參考下

Bootstrap 是由Twitter 工程師推出的基于HTML，CSS，JAVASCRIPT的簡(jiǎn)潔靈活的流行前端框架，我們可以把它想象成一個(gè)定義了很多效果的CSS與JS的庫(kù)，庫(kù)里面已經(jīng)定義好了各種組件的顯示效果與動(dòng)畫。

.dropdown——設(shè)置父元素為下拉菜單組件，向下彈出子菜單；
.dropup——設(shè)置父元素為下拉菜單組件，向上彈出子菜單；
.dropdown-toggle——設(shè)置按鈕為下拉菜單切換按鈕；
.dropdown-menu——設(shè)置ul元素為下拉菜單；
.dropdown-menu-right——將菜單右對(duì)齊；
.pull-right——將菜單組件的父元素右對(duì)齊；
.dropdown-header——為菜單項(xiàng)添加標(biāo)題；
.divider——為菜單項(xiàng)添加分割線；
.disabled——禁用相應(yīng)菜單項(xiàng)；

實(shí)現(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">北京國(guó)安</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">長(zhǎng)春亞泰</a></li> 
 <li><a href="#" role="menuitem">河南建業(yè)</a></li> 
 </ul> 
 </div> 
</div> 
 
</body> 
</html>

實(shí)現(xiàn)效果：