Bootstrap按钮组件二
按钮下拉菜单
按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器p.dropdown换成了p.btn-group
<div class="btn-group">
<button data-toggle="dropdown">
按钮下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="https://www.swvq.com/bootstrap/471774.html#">菜单列表1</a></li>
<li><a href="https://www.swvq.com/bootstrap/471774.html#">菜单列表2</a></li>
<li><a href="https://www.swvq.com/bootstrap/471774.html#">菜单列表3</a></li>
<li><a href="https://www.swvq.com/bootstrap/471774.html#">菜单列表4</a></li>
<li><a href="https://www.swvq.com/bootstrap/471774.html#">菜单列表5</a></li>
</ul>
</div>
bootstrap.css文件
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.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 data-toggle="dropdown">
按钮下拉菜单
<span class="caret"></span>
</button>
这个三角形式通过css来实现的,下面是bootstrap.css源码:
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfgfec
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01