Bootstrap 按钮下拉菜单

Bootstrap3 教程 · 2019-03-01 13:41:26

本章将讲解如何使用 Bootstrap class 向按钮添加下拉码单。如需向按钮添加下拉码单,只需要简单地在在一个 .btn-group 中放置按钮和下拉码单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉码单。

下面的实例演示了一个基本的简单的按钮下拉码单:

实例

<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div>

结果如下所示:

基本的按钮下拉码单

分割的按钮下拉码单

分割的按钮下拉码单使用与下拉码单按钮大致相同的样式,但是对下拉码单添加了原始的功能。分割按钮的左边是原始的功能,右边是显示下拉码单的切换。

实例

<div class="btn-group"> <button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切换下拉码单</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">原始</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">切换下拉码单</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">功能</a></li> <li><a href="#">另一个功能</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </div>

结果如下所示:

分割的按钮下拉码单

按钮下拉码单的大小

您可以使用带有各种大小按钮的下拉码单:.btn-lg、.btn-sm .btn-xs

实例

<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">原始 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">成功 <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div>

结果如下所示:

按钮下拉码单的大小

按钮上拉码单

码单也可以往上拉伸的,只需要简单地向父 .btn-group 容器添加 .dropup 即可。

实例

<div class="row" style="margin-left:50px; margin-top:200px"> <div class="btn-group dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul> </div> </div>

结果如下所示:

按钮上拉码单

点击查看所有 Bootstrap3 教程 文章: https://www.codercto.com/courses/l/25.html

查看所有标签

玻璃笼子

玻璃笼子

[美]尼古拉斯·卡尔 / 杨柳 / 中信出版社 / 2015-11 / 49.00元

这是一本关于自动化的书,它提醒我们自动化对人类的影响,人们心安理得享受技术带来的便利却忽视了,它已经渗透进了生活和工作改变了我们的思维和认知方式。商家在设计程序和应用时,早就把他们的想法埋入了编程和APP中。 卡尔的作品无疑是给我们这个时代灌入了的一剂清醒药。他独特的思考问题角度,犀利甚至略为偏激 的言论再加上丰富的*前沿的科技案例会让人读起来畅快淋漓,且醍醐灌顶,意识到自动化等高科技潜移默......一起来看看 《玻璃笼子》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器