bootstrap按钮右对齐_Bootstrap下拉菜单样式

最新推荐文章于 2022-08-03 17:39:20 发布
最新推荐文章于 2022-08-03 17:39:20 发布
阅读量473 收藏
点赞数
文章标签： bootstrap按钮右对齐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42360977/article/details/113537154
版权
本文详细介绍了如何在Bootstrap中创建和使用下拉菜单，包括单一按钮和分离式按钮的下拉菜单，调整菜单尺寸、方向，实现非交互式菜单以及菜单偏移。同时，还提到了JavaScript的方法和事件来操控下拉菜单。
摘要由CSDN通过智能技术生成

ee74116ee3ff75dd7decd77ecbf73420.png

使用Bootstrap下拉插件用于显示切换你要展示的链接列表和更多内容的，或触发其它内容显示(覆盖）。

将下拉列表的切换（按钮或链接）和下拉菜单包含在.dropdown中，或者另外声明position: relative;元素;可以从<a>或<button>触发下拉菜单，以适应你的使用的需求。

单一按钮的下拉菜单

任何一个.btn块都可以定义变更为下拉菜单，下面是两个使用<button>元素做下拉菜单的示例。

<!-- 单一按钮的下拉菜单 -->
<div class="col-2">
	<div class="dropdown">
		<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">北京</a>
			<a href="#" class="dropdown-item">上海</a>
			<a href="#" class="dropdown-item">广州</a>
		</div>
	</div>
</div>

<!-- 使用a标签 -->
<div class="col-2">
	<div class="dropdown">
		<a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a标签下拉</a>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">北京</a>
			<a href="#" class="dropdown-item">上海</a>
			<a href="#" class="dropdown-item">广州</a>
			<div class="dropdown-divider"></div>
			<a href="#" class="dropdown-item">深圳</a>
		</div>
	</div>
</div>

fa35adce2cb878e212f442cd30bc26e3.png

分离式按钮下拉菜单

同样，可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，注意添加了.dropdown-toggle-split-插入此符号为下拉选项作适当的间隔（距）处理。

<!-- 分离式按钮下拉菜单 -->
<div class="col-3">
	<div class="btn-group dropdown">
		<button class="btn btn-success btn-lg">分离式按钮下拉菜单</button>
		<button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"
			data-toggle="dropdown"></button>
		<div class="dropdown-menu">
			<a href="#" class="dropdown-item">北京</a>
			<a href="#" class="dropdown-item">上海</a>
			<a href="#" class="dropdown-item">广州</a>
			<div class="dropdown-divider"></div>
			<a href="#" class="dropdown-item">深圳</a>
		</div>
	</div>
</div>

883b0cd1c46bbfd2522801701137ff20.png

下拉菜单尺寸

<div class="row mt-5">
	<!-- 下拉菜单尺寸 -->
	<div class="col-3 d-flex">
		<div class="dropdown">
			<button class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown">大按钮</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
		<div class="dropdown">
			<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">正常按钮</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
		<div class="dropdown">
			<button class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">小按钮</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
</div>

cc400801200bf4358d421f050c9a8c5d.png

下拉菜单方向

<div class="row mt-5">
	<div class="col">
		<div class="dropup">
			<!-- 向上展开 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向上展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropright">
			<!-- 向右展开 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向右展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropdown">
			<!-- 向下展开 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向下展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropleft">
			<!-- 向左展开 -->
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向左展开</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
			</div>
		</div>
	</div>
</div>

2730357ac06103ec4b344b5df9af2edb.png

非交互式的下拉菜单

有效菜单：加上.active让下拉列表中的项样式为active。

不可用菜单：加上.disabled让下拉列表中的项样式为不可用。

<!-- 非交互式的下拉菜单 -->
<div class="row mt-5">
	<div class="col">
		<div class="dropdown">
			<div class="dropdown-menu show">
				<span class="dropdown-item-text">非点击的项</span>
				<h4 class="dropdown-header">下拉菜单的标题</h4>
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item active">上海</a> <!-- 当前的选项 -->
				<a href="#" class="dropdown-item disabled">广州</a> <!-- 禁用的选项 -->
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
</div>

0c027b6909105c4da5d33d3b605d5d3a.png

菜单偏移

使用data-offset或data-reference更改下拉菜单的位置。

<!-- 偏移属性 -->
<div class="row mt-5" style="margin-top: 260px!important;">
	<div class="col">
		<div class="dropdown">
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="10,20">偏移</button>
			<div class="dropdown-menu">
				<!-- 右对齐 -->
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
	<div class="col">
		<div class="dropdown">
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">偏移</button>
			<div class="dropdown-menu" data-reference="parent">
				<!-- 右对齐 -->
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
				<a href="#" class="dropdown-item">广州</a>
				<div class="dropdown-divider"></div>
				<button class="dropdown-item">深圳</button>
			</div>
		</div>
	</div>
</div>

3edf69e445f51d09c530f0ad557ddcb2.png

js的方法与事件 $('.dropdown-toggle').dropdown()

事件：

事件类型描述
show.bs.dropdown当调用show显示方法时，此事件会立即触发。
shown.bs.dropdown当下拉菜单对用户可见时，会触发此事件（将等待CSS转换完成）​​。
hide.bs.dropdown当调用隐藏实例方法时，会立即触发此事件。
hidden.bs.dropdown当下拉菜单从用户隐藏完毕时，会触发此事件（将等待CSS转换完成）​​。
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>Bootstrap下拉菜单样式</title>
</head>

<body>
	<div class="container">
		<!-- js的方法与事件 -->
		<div class="row mt-5">
			<div class="col">
				<div class="dropdown">
					<button class="btn btn-danger dropdown-toggle" id="myBtn">方法</button>
					<div class="dropdown-menu" id="myDropdown" data-reference="parent">
						<!-- 右对齐 -->
						<a href="#" class="dropdown-item">北京</a>
						<a href="#" class="dropdown-item">上海</a>
						<a href="#" class="dropdown-item">广州</a>
						<div class="dropdown-divider"></div>
						<button class="dropdown-item">深圳</button>
					</div>
				</div>
			</div>
			<div class="col">
				<div class="dropdown" id="myDropdown1">	<!-- 注意，事件要放在这里！！！ -->
					<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">事件</button>
					<div class="dropdown-menu" data-reference="parent">
						<a href="#" class="dropdown-item">北京</a>
						<a href="#" class="dropdown-item">上海</a>
						<a href="#" class="dropdown-item">广州</a>
						<div class="dropdown-divider"></div>
						<button class="dropdown-item">深圳</button>
					</div>
				</div>
			</div>
		</div>

	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>

	<script>
		//方法
		$('#myBtn').click(function () {
			//$('#myDropdown').dropdown('show');
			//$('#myDropdown').dropdown('hide');

			//$('#myDropdown').dropdown('toggle');

			//解决toggle的问题
			$('#myDropdown').toggle(function () {
				$('#myDropdown').dropdown('show');
			}, function () {
				$('#myDropdown').dropdown('hide');
			});
		});

		//事件
		$('#myDropdown1').on('show.bs.dropdown', function () {
			console.log('调用了show方法');
		});
		$('#myDropdown1').on('shown.bs.dropdown', function () {
			console.log('下拉列表完全显示了');
		});

		$('#myDropdown1').on('hide.bs.dropdown', function () {
			console.log('调用了hide方法');
		});
		$('#myDropdown1').on('hidden.bs.dropdown', function () {
			console.log('下拉列表完全隐藏了');
		});
	</script>
</body>

</html>

eda791f86caeb272b9991fd0d9f873ff.png
TTTTTTT-ll
关注
jsp 下拉列表选取触发function_Bootstrap下拉菜单样式
weixin_39980184的博客
12-22 592
使用Bootstrap下拉插件用于显示切换你要展示的链接列表和更多内容的，或触发其它内容显示(覆盖）。将下拉列表的切换（按钮或链接）和下拉菜单包含在.dropdown中，或者另外声明position: relative;元素;可以从<a>或<button>触发下拉菜单，以适应你的使用的需求。单一按钮的下拉菜单任何一个.btn块都可以定义变更为下拉菜单，下面是两个使用<...
下拉列表—DropDownMenu的使用解析
Wshiduo的博客
02-07 1万+
DropDownMenu使用解析 下拉筛选列表网上有很多，但是想到自己动手丰衣足食，就自己试试啦！ 在布局时因为考虑到流畅问题，所以没用PopupWindow，而是采用基本布局方式完成的。 经过筛选我用的是这个 https://github.com/dongjunkun/DropDownMenu.git，想要的可以自己下demo哈！ 只要核心代码如下： Gradle
Bootstrap右对齐的下拉菜单
歪脖先生的博客
05-13 1934
右对齐的下拉菜单 Bootstrap3中，默认情况下，下拉菜单的左边缘自动与父对象的左边缘对齐。为下拉菜单追加 .dropdown-menu-right 类可以让它右对齐，即让下拉菜单的右边缘，与父对象的右边缘对齐。如： <divclass="dropup"> <buttonclass="btn btn-default dropdown-toggle"data-t...
Vue.js学习笔记—drop-down-menu:实战：开发一个可从外部关闭的下拉菜单
qq_44093294的博客
07-15 557
参考《Vue,js》实战（梁灏编著） drop-down-menu:实战：开发一个可从外部关闭的下拉菜单 本实战涉及自定义组件相关知识点 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
Bootstrap使用 .dropdown-menu 类创建下拉菜单
歪脖先生的博客
05-13 5381
下拉菜单 下拉菜单是一种非常常见的效果，用于展示可切换、有关联的一组链接，它可以节省网页排版空间，使网页布局简洁有序。 Bootstrap内置了一套完整的下拉菜单组件，可用于不同的元素，如导航、按钮等等。配合其他元素，还可以设计出形式多样的菜单效果。 下拉菜单的交互行为还需要 下拉菜单插件（dropdown.js）的支持，因此使用下拉菜单组件时，还必须引入 dropdown.js 文件。 ...
Flutter强大的下拉筛选菜单gzx_dropdown_menu
Dream It Possible
08-03 6235
是一个Flutter自定义功能强大的轻量级下拉筛选菜单Package，它支持iOS和Android。A custom is strong dropdown menu for Flutter. Easy to use and powerful for customization, it's up to you what you want to display in the dropdown menu!查看版本更新记录效果图展示了仿美团和淘宝的下拉筛选菜单。 目前已发布到Pub，你可以在Pub官网查看最新的版
Bootstrap布局组件教程之Bootstrap下拉菜单
09-02
Bootstrap下拉菜单是网页设计和开发中常用的交互元素，它为用户提供了一种简洁的方式来展示一组相关的链接或操作。在Bootstrap框架中，下拉菜单的实现依赖于JavaScript插件，特别是Dropdown组件，它使得用户能够通过...
Bootstrap 下拉菜单.dropdown的具体使用方法
08-29
Bootstrap 下拉菜单.dropdown 的具体使用方法 Bootstrap 下拉菜单.dropdown 是一个常用的前端组件，用于提供用户交互式的菜单选项。在 Bootstrap 框架中，下拉菜单.dropdown 是一个非常重要的组件，广泛应用于各种 ...
Bootstrap下拉菜单样式
08-31
下面我们将详细讨论Bootstrap下拉菜单的样式及其创建方法。 首先，Bootstrap下拉菜单的基础结构包括以下几个关键部分： 1. **添加`dropdown`父级**：这是创建下拉菜单的基本容器，通常是一个`div`元素，带有`....
bootstrap tab.zip_bootstrap tab_bootstrap tab_bootstrap 多tab_bo
09-15
Bootstrap选项卡组件支持多种扩展，如添加图标、右对齐选项卡、下拉菜单选项卡等。例如，`nav-pills`类可以创建更加圆润的选项卡样式，`nav-justified`则使选项卡等宽排列。 7. **响应式设计**： Bootstrap框架的...
DropDownMenu下拉菜单
宇光的博客
04-18 2万+
一个使用起来方便快捷，更容易调用，使代码简洁优雅的DropDownMenu下拉菜单。
bootstrap5 text左对齐右对齐
苦苦思索的吃瓜群众博客
09-15 3355
bootstrap5 text左对齐右对齐 在bootstrap4中 text左/右对齐 <h1 class="text-right">右对齐</h1> <h1 class="text-left">左对齐</h1> <h1 class="text-center">居中</h1> 看了下官网在bootstrap5中就不起作用了 换成text-start和text-end了 <p class="text-start
Bootstrap系列之下拉菜单（Dropdowns）
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
bootstrap button 按钮靠右布局
热门推荐
cheng183的博客
10-16 5万+
容器下的button居右问题 &lt;div style="border:1px black solid;width:500px;height:500px;"&gt; &lt;input style="float:right" type="button" value="click me!" /&gt; &lt;/div&gt; &lt;div style="b
bootstrap怎样让按钮或者组件左右对齐
gaoganghua的博客
07-09 2万+
1.登录页的form表单可以是使用margin:0 auto的方式，居中对齐2.div可以使用pull-right, text-center, pull-left3.按钮或者p标签可以使用text-right, text-center, text-left
bootstrap——下拉菜单右对齐
weixin_33854644的博客
12-22 1173
通过向.dropdown-menu添加 .pull-right类来向右对齐下拉菜单。 Bootstrap默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为.dropdown-menu添加.dropdown-menu-right类可以让菜单右对齐。 转载于:https://www.cnblogs.com/softwarefang/p/6209640.h...
常用Bootstrap工具类（各种按钮/清除浮动/居中对齐）
我的web前端学习
01-16 1万+
关闭按钮Bootstrap工具类 如果你在自己的项目中引入了alert模块或者modal模块，那么你就会需要用到这个关闭按钮工具类，这个类可以让你方便地关闭这两种模块，具体代码如下：<button type="button" class="close" aria-hidden="true">× 下拉按钮Bootstrap工具类 如果你要用到二级菜单、下拉框或者
bootstrap4 右对齐_如何让我的Twitter Bootstrap按钮右对齐？
weixin_30740019的博客
03-05 761
如何让我的Twitter Bootstrap按钮右对齐？我在这里有一个简单的演示：[http://jsfiddle.net/HdeZ3/1/]One Two 我有一个无序列表，对于每个列表项，我希望左边有文本，然后是右对齐按钮。 我试图使用右拉，但这完全弄乱了对齐。 我究竟做错了什么？16个解决方案596 votes将pull-right插入到class属性中，然后让bootstrap排列按钮。对...
bootstrap对齐下拉菜单
最新发布
05-12
Bootstrap的下拉菜单默认左对齐，如果需要右对齐，可以使用`.dropdown-menu-right`类。以下是一个例子： ```html Dropdown button <a class="dropdown-item" href="#">Action ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值