Bootstrap3 下拉菜单(Dropdown)

下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。

文档:http://www.runoob.com/bootstrap/bootstrap-dropdowns.html

使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。

效果图:

源代码:

 必须加入bootstrap样式,主题,JS和jquery!

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
			<!--必须在bootstrap.js之前,否则无效果!-->
	    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				padding: 10px;
			}
		</style>
<div class="dropdown">
			<!--data-toggle="dropdown" 默认是隐藏哦,自动的触发事件下拉;-->
			<a href="#" class="btn btn-lg btn-success" data-toggle="dropdown">下拉菜单<i class="caret"></i></a>
			<ul class="dropdown-menu">
				<li>
					<a href="#">aaa</a>
				</li>
				<li>
					<a href="#">bbb</a>
				</li>
				<li>
					<a href="#">ccc</a>
				</li>
			</ul>
		</div>

		<p></p>
	<!--	<p>可以是超链接或按钮</p>-->
		<div class="dropdown">
			<a href="#" data-toggle="dropdown">请激活下拉列表</a>
			<ul class="dropdown-menu">
				<!--<ul class="dropdown-menu pull-right">-->
				<li class="dropdown-header">姓名1</li>
				<li>
					<a href="#">mike</a>
				</li>
				<li class="disabled">
					<a href="#" >john禁用</a>
				</li>
				<!--分割线-->
				<li class="divider">
				</li>
				<li class="dropdown-header">姓名2</li>
				<li >
					<a href="#">back</a>
				</li>
			</ul>
		</div>

 

### 配置 Bootstrap Dropdown 组件中的下拉菜单项 在 Bootstrap 中,`dropdown-menu` 类用于定义下拉菜单容器,默认情况下该容器内的项目是隐藏的,通过 `display:none;` 实现[^1]。要创建并配置下拉菜单项,需遵循特定结构: #### 基本 HTML 结构 为了使下拉功能正常工作,HTML 结构应包含触发器和菜单列表两部分。具体来说,就是使用带有 `.dropdown` 的 div 容器包裹链接或按钮作为触发元素以及无序列表 `<ul>` 来容纳各个选项。 ```html <div class="dropdown"> <!-- 触发器 --> <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Trigger</a> <!-- 菜单列表 --> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="#">Action One</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <!-- 可选分隔线 --> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> ``` 上述代码展示了如何构建一个简单的下拉菜单,其中包含了三个可点击条目及一条分割线[^2]。 对于希望调整显示方向的情况,比如让菜单向上展开而不是向下的场景,则可以在最外层的 `.dropdown` 上添加 `.dropup` 类来改变其行为模式[^3]。 另外,在自定义样式方面,除了利用内置类之外还可以借助额外 CSS 或者文本工具类来自由修改外观效果[^4]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值