文档章节

Bootstrap 下拉菜单(Dropdowns)简介

Linux就该这么学
 Linux就该这么学
发布于 01/15 10:07
字数 690
阅读 8
收藏 0
Bootstrap 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。

Bootstrap 下拉菜单(Dropdowns)简介Bootstrap 下拉菜单(Dropdowns)简介

如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:
实例

 

<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul> </div>

尝试一下 »
结果如下所示:
Bootstrap 下拉菜单(Dropdowns)简介Bootstrap 下拉菜单(Dropdowns)简介

选项

对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点:
实例

 

<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul> </div>

尝试一下 »
结果如下所示:
Bootstrap 下拉菜单(Dropdowns)简介Bootstrap 下拉菜单(Dropdowns)简介

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点:

 

<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">下拉菜单标题</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a> </li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">下拉菜单标题</li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul> </div>

尝试一下 »
结果如下所示:
Bootstrap 下拉菜单(Dropdowns)简介Bootstrap 下拉菜单(Dropdowns)简介

更多实例

描述 实例
.dropdown 指定下拉菜单,下拉菜单都包裹在 .dropdown 里 尝试一下
.dropdown-menu 创建下拉菜单 尝试一下
.dropdown-menu-right 下拉菜单右对齐 尝试一下
.dropdown-header 下拉菜单中添加标题 尝试一下
.dropup 指定向上弹出的下拉菜单 尝试一下
.disabled 下拉菜单中的禁用项 尝试一下
.divider 下拉菜单中的分割线 尝试一下


本文地址:https://www.linuxprobe.com/bootstrap-dropdowns-introduction.html

本文转载自:https://www.linuxprobe.com/bootstrap-dropdowns-introduction.html

Linux就该这么学
粉丝 23
博文 669
码字总数 481385
作品 0
东城
程序员
私信 提问
Bootstrap 下拉菜单(Dropdowns)

本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。 如需使用下列菜单,只需要...

wybo521
2016/01/26
32
0
Bootstrap 按钮下拉菜单

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

wybo521
2016/01/26
45
0
bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries
2015/09/24
278
0
Bootstrap 简介

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thor...

wybo521
2016/01/25
78
0
BootStrap

bootstrap下载: 英文网址: 中文网址: 选择编译压缩版本,可下载到本地使用,也可网上引用CDN bootstrap应用 - 引用框架(基础)与注意点: bootstrap学习 文中带 . 的标号为选择器,如.le...

大仁孙
2016/07/13
66
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式搜索引擎的架构是怎么设计的?

业内目前来说事实上的一个标准,就是分布式搜索引擎一般大家都用elasticsearch (1) es的分布式架构原理能说一下么(es是如何实现分布式的啊) 面试官心里分析 在搜索这块,lucene是最流行的搜...

Star永恒
29分钟前
97
0
集合转数组

ArrayList提供了一个将List转为数组的一个非常方便的方法toArray。toArray有两个重载的方法:   (1)list.toArray(); // 转换为Object类型的数组Object[] arr = list.toArray();for (...

那个猩猩很亮
33分钟前
78
0
使用canvas在前端添加水印

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" cont......

liyoungs
33分钟前
18
0
喜马拉雅音频下载工具 支持免费音频/VIP音频 文尾有彩蛋

最近流行喜马拉雅,趁你有会员,教你下载其资源 .如果没有会员可以找别人的会员获取cookie也可以.也没有别人的会员可以用此工具下载免费的音频也是不错的选择. 下载地址:https://www.90pan....

xiaogg
42分钟前
61
0
zookeeper安装(基础篇)

Zookeeper三种部署模式 1、Standalone模式,单节点部署,适合测试环境。2、伪cluster模式,单节点多实例部署,适合测试环境。3、Cluster模式,多节点集群部署,适合生产环境。 安装前准备...

丁小屁
46分钟前
35
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部