Bootstrap4(十七)
2017-12-18 22:20
155 查看
Bootstrap4 下拉菜单
下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。
实例
<divclass="dropdown">
<button
type="button"
class="btn
btn-primary dropdown-toggle"
data-toggle="dropdown">
Dropdown button </button>
<div
class="dropdown-menu">
<a
class="dropdown-item"
href="#">Link
1</a>
<a
class="dropdown-item"
href="#">Link
2</a>
<a
class="dropdown-item"
href="#">Link
3</a>
</div></div>
尝试一下
»
实例解析
.dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
class to a <div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item类。
下拉菜单中的分割线
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:
实例
<divclass="dropdown-divider"></div>
尝试一下
»
下拉菜单中的标题
.dropdown-header 类用于在下拉菜单中添加标题:
实例
<divclass="dropdown-header">Dropdown
header 1</div>
尝试一下
»
下拉菜单中的可用项与禁用项
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。如果要禁用下拉菜单的选项,可以使用.disabled 类。
实例
<aclass="dropdown-item
active"
href="#">Active</a><a
class="dropdown-item
disabled"
href="#">Disabled</a>
尝试一下
»
下拉菜单的定位
如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。
实例
<divclass="dropdown-menu
dropdown-menu-right">
尝试一下
»
指定向上弹出的下拉菜单
如果你希望下拉菜单向上弹出,可以将 <div> 元素的 class="dropdown" 替换为 "dropup":
实例
<divclass="dropup">
尝试一下
»
按钮中设置下拉菜单
我们可以在按钮中添加下拉菜单:
实例
<divclass="btn-group">
<button
type="button"
class="btn
btn-primary">Sony</button>
<button
type="button"
class="btn
btn-primary dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown">
<span
class="caret"></span>
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item"
href="#">Tablet</a>
<a
class="dropdown-item"
href="#">Smartphone</a>
</div></div>
尝试一下
»
Bootstrap4 卡片
Bootstrap4 折叠
相关文章推荐
- 《UNIX环境高级编程》十七高级进程间通信读书笔记
- MSSQL之十七 触发器使用项目案例
- 【Java并发编程】之十七:深入Java内存模型—内存操作规则总结
- Android 开源项目源码解析 -->公共技术点之 Android 动画基础(十七)
- 蓝牙之十七-bluedroid scan流程
- android 项目学习随笔十七(ListView、GridView显示组图)
- Android Multimedia框架总结(十七)音频开发基础知识
- 安卓Andriod使用入门(十七)【卡片视图的形式管理Activity】
- (十七) jmetr-逻辑控制器---学习笔记
- Cockroach Design 翻译 ( 十七) key前缀记帐和地域
- (十七)结构体指针
- javascript学习(十七)内建对象之数组
- 浅谈linux性能调优之十七:进程绑定与中断绑定
- java提高篇(十七)-----异常(二)
- 十七, iOS 设计模式--桥接模式
- java基础知识(十七)IO流(二)
- 智能一代云平台(十七):Keepalived+Nginx实现高可用,反向代理---Keepalived安装及相关配置
- Oracle12C--伪列(十七)
- 设计模式(十七) 迭代器模式
- 漫步数理统计十七——条件分布与期望