bootstrap3系列：下拉菜单 -凯发k8官方网
凯发k8官方网
收集整理的这篇文章主要介绍了
bootstrap3系列：下拉菜单
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
示例引用的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.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="#">菜单项1a>li><li><a href="#">菜单项2a>li><li><a href="#">菜单项3a>li>ul> div>.dropdown：定义下拉菜单框
.dropdown-toggle：定义下拉菜单的触发元素
data-toggle="dropdown"：触发下拉菜单
.dropdown-menu：定义下拉菜单条面板
2.2 示例效果
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="#">菜单项1a>li><li><a href="#">菜单项2a>li><li><a href="#">菜单项3a>li>ul> div>3.2 禁用菜单项
在下拉菜单中的
3.3 设计菜单分隔线
在下拉菜单中添加.divider的
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="#">菜单项1a>li><li><a href="#">菜单项2a>li><li class="divider">li><li><a href="#">菜单项3a>li>ul> div>转载于:https://www.cnblogs.com/libingql/p/5840460.html
总结
以上是凯发k8官方网为你收集整理的bootstrap3系列：下拉菜单的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： windows.form增删改查
- 下一篇： html5的新增功能