博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap下拉菜单
阅读量:6383 次
发布时间:2019-06-23

本文共 1614 字,大约阅读时间需要 5 分钟。

使用下拉菜单(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 {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
.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标签)

    

你可能感兴趣的文章
利用 SPL 快速实现 Observer 设计模式: SplSubject 、SplObserver与SplObjectStorage【转】
查看>>
C\C++ 1A2B小游戏源码
查看>>
【SDK fix】iOS 8下将UIButton放置于tabbar位置无法响应event
查看>>
Android项目实战(三十八):2017最新 将AndroidLibrary提交到JCenter仓库(图文教程)...
查看>>
地平线“小目标”:2025年,三千万汽车搭载地平线自动驾驶BPU
查看>>
“2016大数据技术与应用人才培养研讨会” 在泸州成功召开
查看>>
大数据和数字化转型
查看>>
如何知道自己的CPU支持SLAT
查看>>
客户端在使用citrix应用如何开启本地输入法
查看>>
C# 一个字符串是否在另外一个字符串数组里 Array.Exists 的用法 Array.IndexOf 用法...
查看>>
delphi实现计算器
查看>>
CentOS7 网卡命名
查看>>
Django进阶之缓存和信号
查看>>
DataGridView 设定单元格只读:
查看>>
缺陷跟踪工具jira和团队协作与项目管理工具conflunce
查看>>
shell特性及变量设置
查看>>
RHEL6入门系列之十五,管理用户和组
查看>>
特斯拉悄悄搞出无人车AI芯片,已经投产测试,而且没带英伟达
查看>>
LVS、Nginx和HAProxy负载均衡器对比总结
查看>>
Samsung_tiny4412(驱动笔记01)----linux 3.5,U-Boot,Busybox,SD卡启动环境搭建
查看>>