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

本文共 1690 字,大约阅读时间需要 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标签)

    

转载于:https://www.cnblogs.com/yutingliuyl/p/7072975.html

你可能感兴趣的文章
JS实现省市联动效果
查看>>
运算符重载
查看>>
ZOJ3872 Beauty of Array【DP】
查看>>
js_dom 之事件注册、移除 、pageX
查看>>
cmake 添加头文件目录,链接动态、静态库(转载)
查看>>
web crawling(plus4) pretend to be A web
查看>>
nth-of-type和nth-child
查看>>
百度云管家下载慢解决方法
查看>>
POJ 1001 Exponentiation
查看>>
动态改变 网页的宽度 <--> body的滚动条
查看>>
vs code上配置python的运行环境
查看>>
BusyBox ifup udhcpc后台运行
查看>>
十七、oracle 权限
查看>>
Kali渗透测试——urlcrazy
查看>>
高效能程序员的修炼
查看>>
剑指offer——栈的压入、弹出序列
查看>>
5、利用两个栈实现队列,完成push和pop操作
查看>>
[AX]AX2012 纪录缓存
查看>>
Hibernate执行流程
查看>>
清单文件介绍
查看>>