PHP MySQL jquery HTML CSS
Bootstrap 教程 Bootstrap CSS Bootstrap 布局组件 Bootstrap 插件 Bootstrap 其他
Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具 Bootstrap 字体图标 Bootstrap 下拉菜单 Bootstrap 按钮组 Bootstrap 按钮下拉菜单 Bootstrap 输入框组 Bootstrap 导航元素 Bootstrap 导航栏 Bootstrap 面包屑导航 Bootstrap 分页 Bootstrap 标签 Bootstrap 徽章 Bootstrap 超大屏幕 Bootstrap 页面标题 Bootstrap 缩略图 Bootstrap 警告 Bootstrap 进度条 Bootstrap 多媒体对象 Bootstrap 列表组 Bootstrap 面板 Bootstrap Well Bootstrap 插件概览 Bootstrap 过渡效果 Bootstrap 模态框 Bootstrap 下拉菜单 Bootstrap 滚动监听 Bootstrap 标签页 Bootstrap 提示工具 Bootstrap 弹出框 Bootstrap 警告框 Bootstrap 按钮 Bootstrap 折叠 Bootstrap 轮播 Bootstrap 附加导航 Bootstrap UI 编辑器 Bootstrap v2 教程 Bootstrap HTML编码规范 Bootstrap CSS编码规范

Bootstrap 教程

Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装

Bootstrap CSS

Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具

Bootstrap 布局组件

Bootstrap 字体图标 Bootstrap 下拉菜单 Bootstrap 按钮组 Bootstrap 按钮下拉菜单 Bootstrap 输入框组 Bootstrap 导航元素 Bootstrap 导航栏 Bootstrap 面包屑导航 Bootstrap 分页 Bootstrap 标签 Bootstrap 徽章 Bootstrap 超大屏幕 Bootstrap 页面标题 Bootstrap 缩略图 Bootstrap 警告 Bootstrap 进度条 Bootstrap 多媒体对象 Bootstrap 列表组 Bootstrap 面板 Bootstrap Well

Bootstrap 插件

Bootstrap 插件概览 Bootstrap 过渡效果 Bootstrap 模态框 Bootstrap 下拉菜单 Bootstrap 滚动监听 Bootstrap 标签页 Bootstrap 提示工具 Bootstrap 弹出框 Bootstrap 警告框 Bootstrap 按钮 Bootstrap 折叠 Bootstrap 轮播 Bootstrap 附加导航

Bootstrap 其他

Bootstrap UI 编辑器 Bootstrap v2 教程 Bootstrap HTML编码规范 Bootstrap CSS编码规范
首页 > 大前端 > Bootstrap >Bootstrap 中文手册

Bootstrap 中文手册

收藏
分享
浏览59449
更新时间2022-04-21
Bootstrap 字体图标 Bootstrap 按钮组

本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head>
<body>

<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>


</body>
</html>

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<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>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

选项

对齐

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 向右对齐下拉菜单</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head>
<body>

<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>


</body>
</html>

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 向右对齐下拉菜单</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<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>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

标题

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 下拉菜单标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script></head>
<body>

<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>


</body>
</html>

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单标题</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<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>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Bootstrap 字体图标 Bootstrap 按钮组

相关视频

更多

免费

前端入门_HTML5
初级前端入门_HTML5

64.1万次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

24.4万次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

40.7万次学习

收藏

免费

JavaScript极速入门_玉女心经系列
初级JavaScript极速入门_玉女心经系列

75.6万次学习

收藏

科技资讯

更多
CJ26：索尼、松下、宝丽来携影像产品亮相ChinaJoy！
CJ26：《九阴真经：修仙》官宣参展 届时公布实机PV
原生千帧，快人一步：全新LG UltraGear 25G590B在ChinaJoy首秀
大发现！我国"拉索"认证首个拍电子伏伽马射线变源
苹果订阅用户突破15亿大关！库克谢幕季收入未达预期
红米K100 Pro外观泄露：车厘子红配色+横向大矩阵模组
库克时代最后一战：苹果Q3营收1094亿 iPhone17大卖
适合职场的平板电脑推荐：真实测评联想 YOGA Pad Pro 14.5全能表现
马斯克否认剥离中国业务!中国已成特斯拉全球产能核心

24小时阅读榜

更多

1

如何用HTML代码中的samp标签展示程序输出示例

2

怎么用Golang模块解耦大型订单状态转移

3

如何用CSS3制作渐变背景按钮？

4

如何实现Go语言验证码防刷限制模块

5

SQL UPDATE忘记写WHERE后如何恢复数据

6

HTML代码中meta标签设置referrerpolicy等于same-origin的隐患排除

7

如何用HTML代码使用aria-errormessage报错

8

Nginx 怎么在 Nginx 中配置代理后端时开启 SSL 缓存复用减少握手次数

9

服务器用户管理云原生改造怎么做

10

Ubuntu 服务器多用户环境配置怎么写

11

HTML中如何给网页背景设置多个元素组合

12

制作一个带倒计时功能的HTML表单抢购页面

13

HTML中如何用换行机会元素优化长单词排版

14

调整HTML表单中字体的可读性

15

如何查询MySQL中哪些表没有使用索引？

精品课程

更多
PHP实战天龙八部之微信支付视频教程
PHP实战天龙八部之微信支付视频教程

共5课时

17.9万人学习

PHP实战天龙八部之仿爱奇艺电影网站
PHP实战天龙八部之仿爱奇艺电影网站

共49课时

81.3万人学习

前端入门_HTML5
前端入门_HTML5

共29课时

64.4万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

40.9万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

63.7万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

35.8万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

131.8万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7，16种组合，超全大合集

下载
vc9-vc14（32+64位）运行库合集（链接在下方）
vc9-vc14（32+64位）运行库合集（链接在下方）

phpStudy安装所需运行库集合下载

下载
VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载
VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载
php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载
VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载
SublimeText3汉化版
SublimeText3汉化版

中文版，非常好用

下载
Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载
phpStudy V8.1（Win64位）（已支持php8）
phpStudy V8.1（Win64位）（已支持php8）

Win64位，支持php多版本共存

下载