使用下拉菜单(Dropdown)插件,能够向不论什么组件(比方导航栏、标签页、胶囊式导航菜单、button等)加入下拉菜单。
假设想要单独引用该插件的功能,那么须要引用 dropdown.js。或者能够引入bootstrap.js或压缩版的bootstrap.min.js。
使用方法:
通过 data 属性:向链接或button加入 data-toggle="dropdown" 来切换下拉菜单
BootstrapDemo
我们不使用a标签时,能够看出,排版和使用了a标签是不一样的,通过审查元素能够看出,css中对.dropdown-menu>li>a是设置了样式的。
.dropdown-menu>li>a {
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
切割线:
给li加上class = "divider"
对齐:
通过给.dropdown-menu 加上class pill-right能够使其向右对齐。
下拉菜单标题:
通过给li加入class dropdown-header给下拉菜单的标签区域加入标题(注意,li中不嵌套a标签)