详解Bootstrap按钮组件(二)
2024-08-22 12:37:17
按钮下拉菜单
按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.btn-group
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
按钮下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">菜单列表1</a></li>
<li><a href="#">菜单列表2</a></li>
<li><a href="#">菜单列表3</a></li>
<li><a href="#">菜单列表4</a></li>
<li><a href="#">菜单列表5</a></li>
</ul>
</div>
bootstrap.css文件
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline:;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
按钮的向下向上三角形
按钮的向下三角形,是通过在button标签中添加span标签元素,且类名为.caret
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
按钮下拉菜单
<span class="caret"></span>
</button>
这个三角形式通过css来实现的,下面是bootstrap.css源码:
.caret {
display: inline-block;
width:;
height:;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
最新文章
- python 装饰器
- MYSQL实现主从复制
- js 转码 和 .Net 后台解码
- 【图论】深入理解Dijsktra算法
- h1/title,b/strong,i/em 的区别
- UIBezierPath 画线
- Uva 12186 工人的请愿书
- Hive表分区
- 从零开始学android开发-通过WebService进行网络编程,使用工具类轻松实现
- iOS: 神奇的addSubView
- hdu 2105
- 【MongoDB】在windows平台下搭建mongodb的分片集群(二)
- [置顶] head first 设计模式之----Observer pattern
- Azure Event Bus 技术研究系列1-Event Hub入门篇
- 干货~powershell与bash和docker在项目中怎么用
- php+ajax实现登录按钮加载loading效果
- word模板导出的几种方式:第一种:占位符替换模板导出(只适用于word中含有表格形式的)
- JavaSE 集合概述
- cli 开发记录
- 【ARC077F】SS