class触发后让另一个class加样式_Bootstrap的按钮组样式

最新推荐文章于 2022-11-07 22:58:00 发布

卢名雪

最新推荐文章于 2022-11-07 22:58:00 发布

阅读量314

点赞数

文章标签： class触发后让另一个class加样式

本文链接：https://blog.csdn.net/weixin_33755379/article/details/112119131

版权

本文介绍了如何在Bootstrap中创建和使用按钮工具栏，包括如何混合使用输入组和按钮组，定义大小规格和尺寸缩放，实现嵌套组合以及垂直排列按钮的方法。通过合理运用这些技巧，可以创建出功能丰富的UI组件。

摘要由CSDN通过智能技术生成

将一系列的.btn包裹在.btn-group内，并使用我们提供的插件，可以实现选择按钮、选取块状区的行为功能。

<div class="row mt-5 d-block">
	<div class="btn-group">
		<button class="btn btn-primary">Left</button>
		<button class="btn btn-primary">Center</button>
		<button class="btn btn-primary">Right</button>
	</div>
</div>

按钮工具栏

根据需要使用样式定义，对按钮进行群组、间隔等定义，将按钮组的组合组合成为更复杂组件的按钮工具栏。

<div class="row mt-5 btn-toolbar">
	<div class="btn-group mr-2">
		<button class="btn btn-success">1</button>
		<button class="btn btn-success">2</button>
		<button class="btn btn-success">3</button>
	</div>
	<div class="btn-group mr-2">
		<button class="btn btn-success">5</button>
		<button class="btn btn-success">6</button>
		<button class="btn btn-success">7</button>
	</div>
	<div class="btn-group">
		<button class="btn btn-success">9</button>
	</div>
</div>

输入组与按钮组混合使用

<div class="row btn-toolbar mt-5">
	<div class="btn-group mr-2">
		<button class="btn btn-secondary">1</button>
		<button class="btn btn-secondary">2</button>
		<button class="btn btn-secondary">3</button>
		<button class="btn btn-secondary">4</button>
	</div>
	<div class="input-group">
		<div class="input-group-prepend">
			<div class="input-group-text">@</div>
		</div>
		<input type="text" class="form-control" placeholder="Input group example">
	</div>
</div>

大小规格和尺寸缩放

定义大小缩放，不需要将按钮中每个子元素都逐一定义，只需在.btn-group-*中增加.btn-group-*，就能作用于组下的每个子按钮，实现样式缩放。

<div class="row mt-5">
	<div class="btn-group btn-group-lg">
		<button class="btn btn-primary">Left</button>
		<button class="btn btn-primary">Center</button>
		<button class="btn btn-primary">Right</button>
	</div>
</div>
<div class="row mt-1">
	<div class="btn-group">
		<button class="btn btn-primary">Left</button>
		<button class="btn btn-primary">Center</button>
		<button class="btn btn-primary">Right</button>
	</div>
</div>
<div class="row mt-1 ">
	<div class="btn-group btn-group-sm">
		<button class="btn btn-primary">Left</button>
		<button class="btn btn-primary">Center</button>
		<button class="btn btn-primary">Right</button>
	</div>
</div>

嵌套

将.btn-group放在另一个.btn-group里，可以实现按钮组与下拉菜单的组合。

<!-- 下拉菜单 -->
<div class="row mt-5">
	<div class="btn-group">
		<button class="btn btn-danger">1</button>
		<button class="btn btn-danger">2</button>
		<div class="btn-group">
			<button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
			</div>
		</div>
	</div>
</div>

垂直排列

将一组按钮垂直排列，而不是水平排列，不支持分割式下拉菜单的定义。

<div class="container">
	<!-- 垂直排列 -->
	<div class="row mt-5">
		<div class="btn-group-vertical">
			<button class="btn btn-warning">北京</button>
			<button class="btn btn-warning">上海</button>
			<button class="btn btn-warning">广州</button>
		</div>
	</div>
</div>

<div class="row mt-5">
	<div class="btn-group-vertical">
		<button class="btn btn-danger">1</button>
		<button class="btn btn-danger">2</button>
		<div class="btn-group">
			<button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">北京</a>
				<a href="#" class="dropdown-item">上海</a>
			</div>
		</div>
	</div>
</div>