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>

转载于:https://www.cnblogs.com/libingql/p/5840460.html

Bootstrap3系列：下拉菜单相关推荐

Bootstrap3 下拉菜单及其调用方式
下拉菜单 Bootstrap中,你可以为任何组件(如,导航条.胶囊式导航.标签导航.按钮等)添加下拉菜单.下拉菜单组件负责外观,下拉菜单插件(dropdown.js)负责交互行为,即控制下拉菜单组件的 ...
Bootstrap系列 -- 28. 下拉菜单状态
下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...
Bootstrap系列 -- 34. 按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...
Bootstrap系列 -- 26. 下拉菜单标题
Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"><butt ...
Bootstrap系列 -- 36. 向上弹起的下拉菜单
有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出.在Bootstrap框架中专门为这种效果提代了一个类名" ...
kendoUI系列教程之DropDownList下拉菜单
DropDownList其实就是select,只有下拉选择.可以把现有的select或者input渲染成下拉菜单: 原码打印关于 <input id="color" va ...
html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...
BootStrap3 下拉菜单dropdown
目录官方地址基本用法向上弹出菜单菜单项默认打开菜单项对齐左对齐右对齐带标题的下拉菜单带分割线的下拉菜单激活的菜单项禁用的菜单项整体代码官方地址 https://v3.boot ...
excel 进行二叉树_Excel下拉菜单，那些你不知道的操作
原标题:Excel下拉菜单,那些你不知道的操作作者 | 卢子来源 | Excel不加班(ID:Excelbujiaban) 下拉菜单很好用,可以让你更高效.更准确的输入数据.不过,如果没有简单的教 ...

Bootstrap3系列：下拉菜单