Bootstrap3系列:下拉菜单
Posted Libing@2019
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bootstrap3系列:下拉菜单相关的知识,希望对你有一定的参考价值。
1.引用Bootstrap
示例引用的Bootstrap版本:v3.3.7
<script src="~/Scripts/jquery-2.2.4.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
2.基本实例
2.1 示例代码
<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div>
.dropdown:定义下拉菜单框
.dropdown-toggle:定义下拉菜单的触发元素
data-toggle="dropdown":触发下拉菜单
.dropdown-menu:定义下拉菜单条面板
2.2 示例效果
3.设置选项
3.1右对齐菜单
默认下拉菜单为左对齐显式,在.dropdown-menu元素中添加.dropdown-menu-right设置右对齐下拉菜单,添加.dropdown-menu-left设置左对齐下拉菜单。
<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div>
3.2 禁用菜单项
在下拉菜单中的<li>标签添加.disabled,禁用菜单项。
<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li class="disabled"><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div>
3.3 设计菜单分隔线
在下拉菜单中添加.divider的<li>标签,即在下拉菜单中插入一条分隔线。
<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li class="divider"></li> <li><a href="#">菜单项3</a></li> </ul> </div>
3.4 设计向上弹出菜单
下拉菜单组件框改为.dropup,即可让下拉菜单向上弹出。
<div class="dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li class="divider"></li> <li><a href="#">菜单项3</a></li> </ul> </div>
以上是关于Bootstrap3系列:下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章