Bootstrap3 下拉菜单（Dropdown）

骑猪看日落 2023-10-18 14:33 124阅读 0赞

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

文档：[http://www.runoob.com/bootstrap/bootstrap-dropdowns.html][http_www.runoob.com_bootstrap_bootstrap-dropdowns.html]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

![20190218113854209.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

源代码：

**必须加入bootstrap样式,主题，JS和jquery!**

<div class="dropdown">
    			
    			<a href="#" class="btn btn-lg btn-success" data-toggle="dropdown">下拉菜单<i class="caret"></i></a>
    			<ul class="dropdown-menu">
    				<li>
    					<a href="#">aaa</a>
    				</li>
    				<li>
    					<a href="#">bbb</a>
    				</li>
    				<li>
    					<a href="#">ccc</a>
    				</li>
    			</ul>
    		</div>
    
    		<p></p>
    	
    		<div class="dropdown">
    			<a href="#" data-toggle="dropdown">请激活下拉列表</a>
    			<ul class="dropdown-menu">
    				
    				<li class="dropdown-header">姓名1</li>
    				<li>
    					<a href="#">mike</a>
    				</li>
    				<li class="disabled">
    					<a href="#" >john禁用</a>
    				</li>
    				
    				<li class="divider">
    				</li>
    				<li class="dropdown-header">姓名2</li>
    				<li >
    					<a href="#">back</a>
    				</li>
    			</ul>
    		</div>

[http_www.runoob.com_bootstrap_bootstrap-dropdowns.html]: http://www.runoob.com/bootstrap/bootstrap-dropdowns.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019021811373691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190218113828982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190218113854209.png]: https://img-blog.csdnimg.cn/20190218113854209.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190218113919880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70