Bootstrap下拉菜单组件的使用

由于官方文档介绍不全，以及官方下载的包不完整，所以总测试不出效果！这里找条捷径给大家。

我们知道Bootstrap下拉菜单并非是真正意义上的select下拉框组件，而是ul、li 的模拟效果。只不过结合了bootstrap.js等等，让其具备了良好的兼容效果！

先上效果图

代码简单示下：

前提：事先应引入bootstrap.css和bootstrap.js文件··>··>··>【浏览器直接审查源码并须拷贝替换下载包的js】。

注意几点：

代码 data-toggle="dropdown"解说如下：
data-toggle：以什么事件触发，如modal,popover,tooltips等；
data-target：事件的目标；
HTML5允许开发者自由为其标签添加属性，这种自定义属性一般用“data-”开头。
我目前理解到在bootstrap中data-target，data-toggle等属性主要有两种作用：
【1.】在CSS中作标签选择器用。如：
[data-toggle=”buttons”] > .btn input[type=”radio”],
[data-toggle=”buttons”] > .btn-group > .btn input[type=”radio”],
[data-toggle=”buttons”] > .btn input[type=”checkbox”],
[data-toggle=”buttons”] > .btn-group > .btn input[type=”checkbox”] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
【2.】用来传递替换文本（不知道是不是这么说），见下面的例子：
input[type=checkbox].ace.ace-switch + .lbl[data-lbl]::before {
content: attr(data-lbl);
}

代码 aria-haspopup="true"解说true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果

代码 aria-expanded="true"解说 true表示展开状态，默认设置为 false

为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是**dropdown向下弹出**的）。

菜单下拉和导航条nav组件下拉，分别使用不同的类，【查看对应文档】
<div class="btn-group dropdown"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"><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>

<script type="text/javascript">$(function(){$(".btn").dropdown();});
</script>

注意以下`几点技巧：`

此处以bootstrap.min.js版本V3.3.7为演示案例

此js文件必须为官方演示页面内同样的文件【获取方法：审查源码，拷贝下载】

除了上述获取方法：还可以另外下载bootstrap-dropdown.js，并结合官方下载压缩包内的bootstrap.min.js实现下拉效果

无需单独写$(···).dropdown(···)

动态变值、实时获取用户选择值，请使用官方的$().on('show.bs.dropdown', function(){ ··· ··· })等等事件，并结合jquery的$( ···· li ).on('click', function(){······})点击事件

以上就是关于“ Bootstrap下拉菜单组件的使用 ” 的全部内容。

Bootstrap下拉菜单dropdown组件的使用相关推荐

Unity3D 重写下拉菜单/Dropdown组件、开启每个按钮可用
Override Dropdown Component 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) ...
unity代码获取dropdown_Unity3D UGUI下拉菜单/Dropdown组件用法、总结
Unity3D中UGUI实现下拉菜单本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar - ...
android的dropdownmenu,Bootstrap 下拉菜单.dropdown的具体使用方法
本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 下拉菜单.dropdown具体用法 .dropdown ...
bootstrap下拉菜单dropdown点击后阻止自动收起菜单
公司有个切换院区的下拉框,使用的bootstrap的dropdown,以前是单选,因此点击切换后就会自动收起并且将数据传给后台,现在改成了多选,出现了一个问题就是点击一个后也会自动收起,这样的多选肯定 ...
下拉菜单html菜鸟教程,Bootstrap 下拉菜单
Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您 ...
Bootstrap下拉菜单
前面的话网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
linux boot菜单列表,Bootstrap 下拉菜单（Dropdowns）简介
Bootstrap 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下拉菜单,只需要在 class ...
Bootstrap下拉菜单组件
组件的功能是帮助我们的网页实现一些功能,我们可以引用的是Bootstrap中的下拉菜单.我们来看看下拉组件中常用到的一些的功能: 下拉菜单的实现: <div class="dropdo ...
Bootstrap学习-详解Bootstrap下拉菜单组件
转载:https://www.cnblogs.com/jnslove/p/5421187.html bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对 ...

Bootstrap下拉菜单dropdown组件的使用

Bootstrap下拉菜单组件的使用

先上效果图

代码简单示下：

注意几点：

注意以下`几点技巧：`

Bootstrap下拉菜单dropdown组件的使用相关推荐

最新文章

热门文章

Bootstrap下拉菜单dropdown组件的使用

Bootstrap下拉菜单组件的使用

先上效果图

代码简单示下：

注意几点：

注意以下几点技巧：

Bootstrap下拉菜单dropdown组件的使用相关推荐

最新文章

热门文章

注意以下`几点技巧：`