Bootstrap-下拉菜单

需要引用文件

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

普通版下拉菜单

<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdown-Menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdown-Menu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul>
</div>

<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单<!-- 下拉箭头--><span class="caret"></span></button><ul class="dropdown-menu"  aria-labelledby="dropdownMenu1"><!-- 菜单标题--><li class="dropdown-header">第一部分菜单头部</li><li><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><!-- 分割线--><li class="divider"></li><li class="dropdown-header">菜单选中状态</li><li class="active"><a tabindex="-1" href="#">选中状态</a></li><li class="divider"></li><li class="dropdown-header">菜单禁用状态</li><li class="disabled"><a tabindex="-1" href="#">禁用状态</a></li></ul>
</div>

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“.dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

对齐方式

　　Bootstrap框架中下拉菜单默认是左对齐。

　　如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“.dropdown-menu-right”类名。

向上弹出菜单

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

<p style="padding: 100px">
<div class="dropdown dropup"><button class="btn btn-default dropdown-toggle" type="button" id="dropdown-Menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdown-Menu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul>
</div>
</p>

转载于:https://www.cnblogs.com/jassin-du/p/8252584.html

Bootstrap-下拉菜单相关推荐

linux boot菜单列表,Bootstrap 下拉菜单（Dropdowns）简介
Bootstrap 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下拉菜单,只需要在 class ...
Bootstrap下拉菜单dropdown组件的使用
Bootstrap下拉菜单组件的使用由于官方文档介绍不全,以及官方下载的包不完整,所以总测试不出效果!这里找条捷径给大家. 我们知道Bootstrap下拉菜单并非是真正意义上的select下拉框组件 ...
下拉菜单html菜鸟教程,Bootstrap 下拉菜单
Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您 ...
Bootstrap下拉菜单
前面的话网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
Bootstrap下拉菜单组件
组件的功能是帮助我们的网页实现一些功能,我们可以引用的是Bootstrap中的下拉菜单.我们来看看下拉组件中常用到的一些的功能: 下拉菜单的实现: <div class="dropdo ...
Bootstrap下拉菜单中禁用某个下拉菜单
禁用某个下拉菜单 Bootstrap3中,为下拉菜单中某个下拉项的 <li> 元素添加 .disabled 类,就可以禁止该选项,让该菜单项的链接变灰并失去鼠标悬停效果.如: <ul ...
Bootstrap下拉菜单分隔线
下拉菜单分隔线在下拉菜单中,可以使用 class="divider" 的 <li> 空元素,在菜单项之间添加一条水平分隔线,用于将多个动作分组.如: <ul c ...
Bootstrap下拉菜单标题
下拉菜单标题在任何下拉菜单中,均可通过添加标题来标明一组动作.为某个下拉项的 <li> 元素添加 .dropdown-header类,让它成为一组动作的标题.标题以浅灰色显示.如: &l ...
Bootstrap 下拉菜单
下拉菜单 Bootstrap中,可以将下拉菜单添加到任何其他组件中,包括导航条.胶囊式导航.标签导航.按钮导航等. 下拉菜单插件需要 bootstrap-dropdown.js 文件支持,在使用该插件 ...
Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页
目录问题原因解决方案顺便记录一下使用效果图 HTML CSS 目录问题原因两个js文件冲突/没有引入指定的js文件我们不能同时引入这两个js只能引入其一,同时引入会使得部分功能失效解决 ...

Bootstrap-下拉菜单

向上弹出菜单

Bootstrap-下拉菜单相关推荐

最新文章

热门文章