学习Bootstrap 5的第十九天

已于 2023-10-31 16:24:10 修改
阅读量356 收藏 1
点赞数 8
分类专栏： Bootstrap 文章标签： 学习 bootstrap html 前端
于 2023-10-31 15:37:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74293254/article/details/134137568
版权

目录

范围

自定义范围

步进

最小值和最大值

输入框组

输入组

输入组大小

带复选框和单选框的输入组

输入组按钮

带下拉按钮的输入组

输入框组标签

范围

自定义范围

可以通过将.form-range类添加到type="range"的输入元素来自定义范围菜单的样式。

要创建一个自定义范围菜单，请按照以下步骤进行操作：

  1. 使用class="form-range"将.form-range类添加到范围输入元素（<input type="range">）上。
  2. 可选：如果需要，可以在.form-range元素外部添加.form-floating类来创建一个浮动标签。

以下是一个示例代码，展示如何创建一个自定义范围菜单：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form action="">
				<label for="customRange" class="form-label">自定义选择区间</label>
				<input type="range" class="form-range" id="customRange" name="points">
				<label for="customRange" class="form-label">默认选择区间</label>
				<input type="range" id="defaultRange" name="points"><br>
			</form>
		</div>
	</body>
</html>

步进

可以使用step属性来更改范围菜单的步进间隔。

step属性指定了范围菜单中数值之间的间隔大小。默认情况下，step属性的值为1，即范围菜单的数值以1为单位递增或递减。

要更改步进间隔，请按照以下步骤进行操作：

  1. 在范围输入元素（<input type="range">）上添加step属性。
  2. 将step属性的值设置为您想要的步进间隔大小。

以下是一个示例代码，展示如何更改范围菜单的步进间隔：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form action="">
				<label for="customRange" class="form-label">自定义步长</label>
				<input type="range" class="form-range" step="0.5">
			</form>
		</div>
	</body>
</html>

在这个例子中，我们将step属性设置为0.5，表示范围菜单的数值以0.5为单位递增或递减。

请注意，步进间隔的精度取决于浏览器和操作系统。某些浏览器和操作系统可能对步进值有一些限制。

最小值和最大值

可以使用min和max属性来更改范围菜单的最小值和最大值。

min属性指定了范围菜单中的最小值，而max属性指定了范围菜单中的最大值。默认情况下，最小值为0，最大值为100。

要更改最小值和最大值，请按照以下步骤进行操作：

  1. 在范围输入元素（<input type="range">）上添加min属性。
  2. 将min属性的值设置为您想要的最小值。
  3. 在范围输入元素上添加max属性。
  4. 将max属性的值设置为您想要的最大值。

以下是一个示例代码，展示如何更改范围菜单的最小值和最大值：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form action="">
				<label for="customRange" class="form-label">自定义步长</label>
				<input type="range" class="form-range" id="customRange1" min="10" max="50">
			</form>
		</div>
	</body>
</html>

在这个例子中，我们将min属性设置为10，表示范围菜单的最小值为10。然后，我们将max属性设置为50，表示范围菜单的最大值为50。

请注意，根据浏览器和操作系统的不同，对于超出指定范围的值可能会有不同的处理方式。一些浏览器会自动限制用户输入的值，而其他浏览器可能允许用户输入超出指定范围的值。

输入框组

输入组

.input-group类可以用于包装具有类似功能或关联的表单元素，并添加额外的样式，例如在输入字段前后添加图标、文本或按钮等。

为了创建一个输入组，请按照以下步骤进行操作：

  • 在<div>元素中添加.input-group类。
  • 在<div>元素中添加一个或多个表单元素，例如<input>或<select>。
  • 在<div>元素中添加一个帮助文本元素，例如<span>标签或按钮元素，以增强输入。

要设置帮助文本元素的样式，请使用.input-group-text类。这将应用于帮助文本元素和任何嵌套的文本或图标。

以下是一个示例代码，展示如何创建一个输入组：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form>
				<div class="input-group">
					<span class="input-group-text">@</span>
					<input type="text" class="form-control" placeholder="用户名">
				</div>

				<div class="input-group">
					<input type="text" class="form-control" placeholder="您的电邮">
					<span class="input-group-text">@example.com</span>
				</div>
			</form>
		</div>
	</body>
</html>

输入组大小

可以使用.input-group-sm类将小型输入组样式应用到.input-group容器上，以获得更小的输入组。

同样，也可以使用.input-group-lg类将大型输入组样式应用到.input-group容器上，以获得更大的输入组。

以下是示例代码，演示如何创建不同大小的输入组：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form>
				<div class="input-group mb-3 input-group-sm">
					<span class="input-group-text">小型</span>
					<input type="text" class="form-control">
				</div>

				<div class="input-group mb-3">
					<span class="input-group-text">默认</span>
					<input type="text" class="form-control">
				</div>

				<div class="input-group mb-3 input-group-lg">
					<span class="input-group-text">大型</span>
					<input type="text" class="form-control">
				</div>
			</form>
		</div>
	</body>
</html>

在这个例子中，我们分别使用.input-group-sm和.input-group-lg类来设置小型和大型输入组的样式。

带复选框和单选框的输入组

可以在.input-group容器中包含复选框和单选框，并结合使用.input-group-text类来创建带有复选框和单选框的输入组。

以下是一个示例代码，展示如何创建带有复选框和单选框的输入组：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form>
				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="checkbox" aria-label="Checkbox for following text input">
						</div>
					</div>
					<input type="text" class="form-control" aria-label="Text input with checkbox">
				</div>

				<div class="input-group mb-3">
					<div class="input-group-prepend">
						<div class="input-group-text">
							<input type="radio" aria-label="Radio button for following text input">
						</div>
					</div>
					<input type="text" class="form-control" aria-label="Text input with radio button">
				</div>
			</form>
		</div>
	</body>
</html>

在这个例子中，我们分别创建了一个带有复选框和一个带有单选框的输入组。我们使用.input-group-text类将复选框和单选框包装在<div>元素内，并将其添加到.input-group-prepend容器中。

输入组按钮

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form>
				<div class="input-group mb-3">
					<button class="btn btn-outline-primary" type="button">基础按钮</button>
					<input type="text" class="form-control" placeholder="一些文本">
				</div>

				<div class="input-group mb-3">
					<input type="text" class="form-control" placeholder="搜索">
					<button class="btn btn-success" type="submit">Go</button>
				</div>

				<div class="input-group mb-3">
					<input type="text" class="form-control" placeholder="一些文本">
					<button class="btn btn-primary" type="button">OK</button>
					<button class="btn btn-danger" type="button">Cancel</button>
				</div>
			</form>
		</div>
	</body>
</html>

带下拉按钮的输入组

如果想在输入组中添加一个下拉按钮，您可以使用.input-group-append类将按钮包装在.input-group容器中，并使用.dropdown-toggle类为按钮添加下拉样式。

以下是一个示例代码，展示如何创建带有下拉按钮的输入组：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form>
				<div class="input-group mb-3">
					<input type="text" class="form-control" placeholder="搜索一下" aria-label="Search input">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary dropdown-toggle" type="button"
							data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉按钮</button>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">链接 1</a>
							<a class="dropdown-item" href="#">链接 2</a>
							<a class="dropdown-item" href="#">链接 3</a>
						</div>
					</div>
				</div>

			</form>
		</div>
	</body>
</html>

输入框组标签

要在输入框组中设置标签并使其与输入框关联，您可以使用<label>元素，并将其for属性设置为相应输入框组的id。这样，在点击标签时，相关的输入框组将获得聚焦。

以下是一个示例代码，演示如何在输入框组中添加标签并实现聚焦效果：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<form>
				<label for="inputGroupExample">这里输入您的邮箱:</label>
				<div class="input-group mb-3">
					<input type="text" class="form-control" id="inputGroupExample" placeholder="Email">
					<span class="input-group-text">@runoob.com</span>
				</div>
			</form>
		</div>
	</body>
</html>

在这个例子中，我们使用<label>元素来创建输入框组的标签，并将其for属性设置为相应输入框组的id（这里是inputGroupExample）。然后，我们将输入框组包装在.input-group容器中。

当用户点击标签时，与该标签相关联的输入框组将获得聚焦效果。

请注意，要使标签和输入框组之间产生关联，确保将<label>元素放置在输入框组之前。

正在奋斗的程序猿
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap总结与例子
08-02
5. **下拉菜单** (`dropdown`): Bootstrap的下拉菜单可以通过 `.dropdown`、`.dropdown-menu` 和 `.dropdown-toggle` 类实现，可用于导航栏或按钮组。 6. **按钮组** (`button group`): `.btn-group` 类可以将多个...
bootstrap table配置参数例子
08-31
为了深入了解 Bootstrap Table，你可以参考提供的学习资源，包括 Bootstrap 学习教程、实战教程、Table 使用教程以及插件使用教程。这些教程将帮助你掌握更多关于 Bootstrap Table 的高级特性，例如自定义列、排序、...
bootstrap下拉多选框
Timi2019的博客
07-24 4077
【代码】bootstrap下拉多选框。
bootstrap select插件 下拉框 、复选框 、使用详解、附.重置 bootstrap-select下拉框复选框中的值/easyui树的复选框中的值。
Rootone的博客
02-02 7244
jsp代码    action="${path}/workorder/workListStatistics/${branchCode}"> 坐席工号：   selected>${agents.agentEmpcode} 座席姓名：
bootstrap下拉列表多选组件_booterstrip多选
最新发布
code8889的博客
05-15 1663
正文和，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种bootstrap mutiselect组件，界面渲染效果略差；再比如select2一些兼容性问题、多选的取值赋值等问题都困扰着博主以及很多园友，项目里面的下拉框很早就替换为今天介绍的这款组件，所以今天介绍给大家，让大家多一个选择也好！说点题外话。
使用bootstrap 的下拉菜单实现select的下拉复选框多选
zyb112211的博客
04-20 5857
CSS代码:/*多选下拉框样式（根据自己的样式调整）*/ .dropdown_item{width: 100%} .dropdown_item&gt;li:HOVER{background-color: #eee;cursor: pointer;} .dropdown_item&gt;li {display: block;padding: 3px 10px;clear: both;font-wei...
Bootstrap 5-表单-单选按钮/复选框
m0_73839298的博客
10-13 1061
作用:用于定义存放表单中的复选框/单选按钮的容器。作用:用于定义复选框/单选按钮添加标签。作用:用于定义复选框/单选按钮的控件。
Bootstrap系列之下拉菜单（Dropdowns）
热门推荐
老__L的博客
06-06 1万+
使用Bootstrap下拉插件切换上下文覆盖来显示链接列表和更多内容。下拉列表是可切换的，上下文覆盖显示链接列表和更多。它们与包含的Bootstrap下拉式JavaScript插件进行交互。它们是通过点击而不是悬停来切换的;这是一个有意的设计决策。下拉框建立在第三方库Popper上，它提供动态定位和视口检测。请确保在Bootstrap JavaScript之前包含或使用包含Popper的 / 。Popper不用于定位导航栏中的下拉框，因为动态定位不是必需的。如果您从源代码构建我们的JavaScript，它需
Bootstrap视频教程，实战开发后台管理系统 19
07-18
通过这个第19集的视频教程，你应该能深化对Bootstrap的理解，掌握如何构建一个专业、高效的后台管理系统。实践中遇到问题时，还可以参考Bootstrap的官方文档和其他社区资源，不断精进你的技能。
[SSH+Maven+Bootstrap视频教程] 第 十九 讲.zip
06-07
在本节 "[SSH+Maven+Bootstrap视频教程] 第 十九 讲" 中，我们将深入探讨Java开发中的三个核心工具：Struts2（S），Spring（S）和Hibernate（H），以及它们如何与Maven项目管理和Bootstrap前端框架结合使用。...
03_Bootstrap 3 高级教程part2.rar
09-13
Bootstrap 3 是一款广泛使用的前端开发框架，它简化了网页...通过学习这个高级教程的第二部分，开发者能够深入了解并熟练掌握Bootstrap 3 的高级特性和组件，从而提高开发效率，创建出更具吸引力和用户体验的网页应用。
利用Bootstrap Multiselect实现下拉框多选功能
11-29
利用Bootstrap Multiselect实现下拉框多选功能,并在点击事件中获取到所有选中option的value值 首先展示项目案例: 多选下拉框功能实现.gif 下面是所有完整的代码,重点以及主要的解释已经在代码内进行注释: 引入的css、js文件需要从github中下载:https://github.com/davidstutz/bootstrap-multiselect 插件依赖jQ和bootstrap,所以在引入插件之前需要先引入这jQ和bootstrap的css和js文件。 <!DOCTYPE html> <html lang="en"> <head> <meta
Bootstrap复选框，单选框美化特效样式
12-19
Bootstrap复选框，单选框美化特效样式。
bootstrap非常实用的复选框
10-11
非常实用的复选框，经典、推荐。非常实用的复选框，经典、推荐。
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
Bootstrap的下拉菜单组件相关知识
昊虹AI笔记
10-12 2703
Bootstrap的下拉菜单组件
bootstrap multiselect下拉列表多选组件[转载]
willeny的博客
08-16 4491
转载地址：http://www.cnblogs.com/landeanfen/p/7457283.html 阅读目录 一、组件开源地址以及API说明 二、组件效果示例 三、使用示例 1、基础示例 2、其他效果示例 3、组件取值赋值 4、组件其他用法 5、组件封装 四、源码下载 五、总结 正文 前言：之前分享过两篇bootstrap下拉框的组件：JS组件系列——两种bootstrap ...
bootstrap 下拉复选框
手在键盘敲很轻
01-25 2908
//会有你想要的（http://www.jq22.com/）     jQuery bootstrap-select可搜索多选下拉列表插件                             -->             $(window).on('load', function ()

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

正在奋斗的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值