学习Bootstrap 5的第十九天

news2025/2/25 3:00:09

目录

范围

自定义范围

步进

最小值和最大值

输入框组

输入组

输入组大小

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

输入组按钮

带下拉按钮的输入组

输入框组标签

范围

自定义范围

可以通过将.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>元素放置在输入框组之前。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1154141.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

地球系统模式（CESM）详解

地球系统模式（CESM）详解

目前通用地球系统模式&#xff08;Community Earth System Model&#xff0c;CESM&#xff09;在研究地球的过去、现在和未来的气候状况中具有越来越普遍的应用。CESM由美国NCAR于2010年07月推出以来&#xff0c;一直受到气候学界的密切关注。近年升级的CESM2.0在大气、陆地、海…
阅读更多...
【CVPR2023】Learning A Sparse Transformer Network for Effective Image Deraining

【CVPR2023】Learning A Sparse Transformer Network for Effective Image Deraining

论文&#xff1a;https://readpaper.com/paper/4736105248993591297 代码&#xff1a;https://github.com/cschenxiang/DRSformer Transformer 模型通常使用标准的 QKV 三件套进行计算&#xff0c;但是部分来自 K 的 token 与来自 Q 的 token 并不相关&#xff0c;如果仍然对这…
阅读更多...
【干货分享】性能测试小白，如何在实际工作开展性能测试？

【干货分享】性能测试小白，如何在实际工作开展性能测试？

从小入手&#xff0c;从简单的开始&#xff0c;然后慢慢的做更系统更复杂的性能测试 确定需求 刚接触性能测试的同学往往不知道性能测试是有需求的。比如 给我测一下系统的性能线上xx服务器挂了&#xff0c;能否重现一下线上问题 如果你是性能测试同学&#xff0c;假设时间…
阅读更多...
如何知道服务器的某个端口是否打开

如何知道服务器的某个端口是否打开

1、telnet 命令&#xff1a;telnet ip port&#xff0c;port即端口&#xff0c;我们一般最常见的命令就是telnet&#xff0c;但是telnet使用的是tcp协议&#xff0c;换句话说telnet只能检测tcp的这个端口打开了没 若是端口打开&#xff0c;会出现下列信息 失败的是这个 如…
阅读更多...
想做短视频，但是没有经验，不会拍、不会剪、不会写脚本怎么办？

想做短视频，但是没有经验，不会拍、不会剪、不会写脚本怎么办？

现在很多人都准备进入短视频领域&#xff0c;让自己多一份收入。不过有个很现实的问题&#xff0c;不会拍、不会剪、也不会写脚本怎么办&#xff0c;还能做短视频吗&#xff1f; 如果是完全不会&#xff0c;那么初期肯定是要学习一些基础知识的&#xff0c;比如基础的拍摄技巧…
阅读更多...
漆料店信息展示服务预约小程序的作用是什么

漆料店信息展示服务预约小程序的作用是什么

漆料在工程、家庭装修等场景中都是不可缺的&#xff0c;而在种类/品牌方面更是众多&#xff0c;无论厂家直营店还是经销商&#xff0c;市场中都有很多&#xff0c;在生意方面&#xff0c;尤其是较大的店面&#xff0c;除了本地生意&#xff0c;外地客户也有一定拓展。 但由于种…
阅读更多...
李宏毅2023机器学习作业HW04解析和代码分享

李宏毅2023机器学习作业HW04解析和代码分享

ML2023Spring - HW4 相关信息&#xff1a; 课程主页 课程视频 Kaggle link Sample code HW04 视频 HW04 PDF 个人完整代码分享: GitHub | Gitee | GitCode P.S. 即便 kaggle 上的时间已经截止&#xff0c;你仍然可以在上面提交和查看分数。但需要注意的是&#xff1a;在 kaggle…
阅读更多...
mac m1下navicat执行mongorestore 到mongodb

mac m1下navicat执行mongorestore 到mongodb

首先&#xff0c;下载https://www.mongodb.com/try/download/mongocli 解压缩后 有可执行文件使用navicat打开 加载后再重新点击 选择 要恢复的文件即可
阅读更多...
木疙瘩学习-元素行为添加与控制

木疙瘩学习-元素行为添加与控制

这里面都是一些代码逻辑&#xff0c;但是这个平台让用户0代码实现交互&#xff0c;但是难点是&#xff0c;用户需要有一定的业务逻辑转换程序逻辑思维能力&#xff01; 注意&#xff0c;舞台上的任何素材(包括元件整体、元件内部素材)都可以参与程序逻辑&#xff01;前提是我们…
阅读更多...
rabbitmq Could not find handle.exe, please install from sysinternals

rabbitmq Could not find handle.exe, please install from sysinternals

报错&#xff1a;Could not find handle.exe, please install from sysinternals 这是由于rabbitmq 调用 windows系统中handle.exe&#xff0c;但是handle.exe缺失而导致的错误。 解决方案&#xff1a; 1 下载 Handle - Sysinternals | Microsoft Learn 2 完成后&#xff…
阅读更多...
技术贴 | 深度解析 KaiwuDB 聚焦操作

技术贴 | 深度解析 KaiwuDB 聚焦操作

一、AST 抽象语法树 执行一条简单的 SQL 语句 SELECT avg(b) FROM NATION GROUP BY b。NATION 是一张小表&#xff0c;只有 25 条记录&#xff1b;对第 2 列 b 进行取平均值的聚集操作。上述示例中的 SQL 语句经过分析器解析后得到 AST&#xff0c;如下图所示。 二、逻辑计划…
阅读更多...
末日危机小说，情节紧凑刺激，主角霸气拯救世界，绝对过瘾

末日危机小说，情节紧凑刺激，主角霸气拯救世界，绝对过瘾

今天小郑为大家精挑细选了三本让人欲罢不能的末日危机小说。这些书籍不仅在情节设计上扣人心弦&#xff0c;更在设定和人物塑造上别具一格。每一本都犹如一部惊心动魄的探险旅程&#xff0c;让你在享受阅读的乐趣的同时&#xff0c;也能感受到深刻的思考和震撼。 《全世界只有…
阅读更多...
为什么要使用 Spring 框架？

为什么要使用 Spring 框架？

Spring 是一个轻量级应用框架&#xff0c;它提供了 IoC 和 AOP 这两个核心的功能。它的核心目的是为了简化企业级应用程序的开发&#xff0c;使得开发者只需要关心业务需求&#xff0c;不需要关心 Bean 的管理&#xff0c; 以及通过切面增强功能减少代码的侵入性。从 Spring 本…
阅读更多...
3D模型如何添加金属贴图？

3D模型如何添加金属贴图？

1、金属贴图的原理 金属贴图&#xff08;Metallic Map&#xff09;是一种用于模拟物体表面金属性质的贴图技术。它通过控制光线在物体表面的反射和折射行为来实现对金属材质的模拟。金属贴图通常使用灰度图像来表示物体表面的金属度信息&#xff0c;白色表示完全金属&#xff…
阅读更多...
基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(三）

基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(三）

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 这个部门主要是修改审批人的指定用户选择&#xff0c;这里就要采用ruoyi的用户体系。 这里主要是修改Pro…
阅读更多...
高防CDN：保护现代网站的重要工具

高防CDN：保护现代网站的重要工具

在今天的数字时代&#xff0c;互联网已经成为人们生活的不可或缺的一部分。然而&#xff0c;随着互联网的普及&#xff0c;网络安全威胁也日益增多&#xff0c;对网站和应用程序的稳定性和可用性提出了严峻挑战。这就是为什么越来越多的网站选择采用高防CDN&#xff08;Content…
阅读更多...
软件评测师之数据结构与算法

软件评测师之数据结构与算法

目录 一.数据结构的概述二.线性表三.队列与栈四.数组五.树与二叉树二叉树遍历 六.堆七.图八.算法概述伪代码 一.数据结构的概述 所谓数据结构是指数据元素的集合或者数据对象的集合&#xff0c;以及元素之间的相互关系和构造方法。 数据结构分为逻辑结构和物理结构。逻辑结构…
阅读更多...
【计网 Socket编程】 中科大郑烇老师笔记 （九）

【计网 Socket编程】 中科大郑烇老师笔记 （九）

目录 0 引言1 Socket是什么&#xff1f;是网络的一个层次&#xff1f;是一个协议&#xff1f;2 Socket编程2.1 TCP Socket编程2.1.2 基本概念2.1.1 一般步骤 2.2 UDP Socket编程 3 TCP Socket编程 实战 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xf…
阅读更多...
FlinkCDC系列：通过skipped.operations参数选择性处理新增、更新、删除数据

FlinkCDC系列：通过skipped.operations参数选择性处理新增、更新、删除数据

在flinkCDC源数据配置&#xff0c;通过debezium.skipped.operations参数控制&#xff0c;配置需要过滤的 oplog 操作。操作包括 c 表示插入&#xff0c;u 表示更新&#xff0c;d 表示删除。默认情况下&#xff0c;不跳过任何操作&#xff0c;以逗号分隔。配置多个操作&#xff…
阅读更多...
塔望食观察丨从“一药难求”看国内退烧药品牌是怎样炼成的

塔望食观察丨从“一药难求”看国内退烧药品牌是怎样炼成的

随着新冠疫情防疫的全面放开&#xff0c;感染患者不断增多&#xff0c;市民在未知的恐慌中开启了囤药模式&#xff0c;药店中的“四类药”&#xff08;退烧、止咳、抗病毒、抗生素类药品&#xff09;被一抢而空&#xff0c;尤其是以退烧类药物更为短缺&#xff0c;以解热镇痛的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023