Bootstrap下拉菜单

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。

基本的下拉菜单：

<!DOCTYPE html>  
<html>  
<head>     
<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>     
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">     
<script src="/scripts/jquery.min.js"></script>     
<script src="/bootstrap/js/bootstrap.min.js"></script>  
</head>  
<body>    
<div class="dropdown">     
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"         
data-toggle="dropdown">        
主题        
<span class="caret"></span>     
</button>     
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">Java</a>        
</li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>        
</li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">              
数据通信/网络           
</a>        
</li>        
<li role="presentation" class="divider"></li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>        
</li>     
</ul>  
</div>      
</body>  
</html>

对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：

<!DOCTYPE html>  
<html>  
<head>     
<title>Bootstrap 实例 - 向右对齐下拉菜单</title>     
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">     
<script src="/scripts/jquery.min.js"></script>     
<script src="/bootstrap/js/bootstrap.min.js"></script>  
</head>  
<body>    
<div class="dropdown">     
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"         
data-toggle="dropdown">主题        
<span class="caret"></span>     
</button>     
<ul class="dropdown-menu pull-right" role="menu"         
aria-labelledby="dropdownMenu1">        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">Java</a>        
</li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>        
</li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">              
数据通信/网络           
</a>        
</li>        
<li role="presentation" class="divider"></li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>        
</li>     
</ul>  
</div>      
</body>  
</html>

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点：

<!DOCTYPE html>  
<html>  
<head>     
<title>Bootstrap 实例 - 下拉菜单标题</title>     
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">     
<script src="/scripts/jquery.min.js"></script>     
<script src="/bootstrap/js/bootstrap.min.js"></script>  
</head>  
<body>    
<div class="dropdown">     
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"         
data-toggle="dropdown">        
主题        
<span class="caret"></span>     
</button>     
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">        
<li role="presentation" class="dropdown-header">下拉菜单标题</li>        
<li role="presentation" >           
<a role="menuitem" tabindex="-1" href="#">Java</a>        
</li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>        
</li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">              
数据通信/网络           
</a>        
</li>        
<li role="presentation" class="divider"></li>        
<li role="presentation" class="dropdown-header">下拉菜单标题</li>        
<li role="presentation">           
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>        
</li>     
</ul>  
</div>      
</body>  
</html>

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载