学习Bootstrap 5的第十七天

Onlooker﹒

已于 2023-10-30 18:13:43 修改

阅读量521

点赞数 6

分类专栏： Bootstrap 文章标签：学习 bootstrap 前端 1024程序员节 html

于 2023-10-30 18:13:07 首次发布

本文链接：https://blog.csdn.net/m0_74293254/article/details/134124149

版权

Bootstrap 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。

Bootstrap5 表单布局

堆叠表单 (全屏宽度)：垂直方向
内联表单：水平方向

Bootstrap 提供了两种类型的表单布局:

堆叠表单

对于设置了.form-control类的<input>和<textarea>元素，它们将获得正确的表单样式。这样可以确保它们在堆叠表单中正确显示。

<!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="mb-3 mt-3">
					<label for="email" class="form-label">电子邮件：</label>
					<input type="email" class="form-control" id="email" placeholder="请输入电子邮件地址" name="email">
				</div>
				<div class="mb-3">
					<label for="pwd" class="form-label">密码：</label>
					<input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
				</div>
				<div class="form-check mb-3">
					<label class="form-check-label">
						<input class="form-check-input" type="checkbox" name="remember"> 记住我
					</label>
				</div>
				<button type="submit" class="btn btn-primary">提交</button>
			</form>
		</div>
	</body>
</html>

此外，为了确保正确的填充，我们为每个label元素添加了.form-label类。

对于复选框和单选按钮，它们具有不同的标记样式。它们是通过.form-check类的容器元素包围的。相应的label元素使用.form-check-label类，而复选框和单选按钮则使用.form-check-input类。

通过使用这些样式类，可以确保堆叠表单中的各个元素具有正确的样式和布局。

内联表单

可以使用.row和.col类来创建内联表单，并使表单元素并排显示。

以下是一个示例代码，用于创建一个包含两个输入框的内联表单：

<!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 class="form-inline">
				<div class="form-group row">
					<label for="input1" class="col-sm-2 col-form-label">电子邮件：</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="input1" placeholder="请输入电子邮件地址">
					</div>
				</div>
				<div class="form-group row">
					<label for="input2" class="col-sm-2 col-form-label">密码</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="input2" placeholder="请输入密码">
					</div>
				</div>
			</form>
		</div>
	</body>
</html>

在这个例子中，我们将整个表单设置为内联表单，使用.form-inline类。然后，在每个表单组中，我们使用.form-group和.row类来创建一个行容器，并使用.col类来指定每个表单元素的列宽度。这样，两个输入框就可以并排显示了。

注意，我们在每个表单组的标签和输入框之间使用了一个<div>元素，以确保标签和输入框对齐。

文本框

可以使用<textarea>标签来创建文本框，并使用.form-control类来渲染文本框。

以下是一个示例代码，用于创建一个提交表单的文本框：

<!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="form-group">
					<label for="exampleTextarea">请输入评论：</label>
					<textarea class="form-control" id="exampleTextarea" placeholder="请输入评论内容" rows="3"></textarea>
				</div>
				<button type="submit" class="btn btn-primary">提交</button>
			</form>
		</div>
	</body>
</html>

在这个例子中，我们首先创建一个<div>元素，并为其添加.form-group类。然后，在<div>元素内部，我们添加一个<label>元素，用于标识文本框的用途。接着，我们使用<textarea>标签创建文本框，并为其添加.form-control类以渲染样式。您可以根据需要调整<textarea>标签的属性，例如id、rows等，以满足特定的需求。

最后，我们还可以在表单中添加一个提交按钮，供用户提交文本框的内容。

输入框大小

可以通过在 .form-control 输入框中使用.form-control-lg和.form-control-sm类来设置输入框的大小。

以下是一个示例代码，用于创建不同大小的输入框：

<!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>
				<input type="text" class="form-control form-control-lg" placeholder="大型输入控件">
				<br />
				<input type="text" class="form-control" placeholder="普通输入控件">
				<br />
				<input type="text" class="form-control form-control-sm" placeholder="小型输入控件">
			</form>
		</div>
	</body>
</html>

在这个例子中，我们创建了三个输入框。第一个输入框使用.form-control-lg类来设置为大尺寸，第二个输入框没有添加任何额外的类，因此保持默认尺寸，第三个输入框使用.form-control-sm类来设置为小尺寸。

禁用/只读表单

可以使用disabled和readonly属性来设置输入框的禁用和只读状态。

disabled属性用于禁用输入框，禁止用户对其进行任何操作。而readonly属性用于将输入框设置为只读状态，用户可以看到输入框的内容，但不能进行编辑。

以下是一个示例代码，演示如何使用disabled和readonly属性：

<!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>
				<input type="text" class="form-control" placeholder="普通输入控件"><br />
				<input type="text" class="form-control" placeholder="被禁用的输入控件" disabled><br />
				<input type="text" class="form-control" placeholder="只读的输入控件" readonly>
			</form>
		</div>
	</body>
</html>

在这个例子中，第一个输入框是普通输入控件，第二个输入框使用disabled属性禁用了输入框，同时添加了.form-control类渲染样式。第三个输入框使用readonly属性将输入框设置为只读状态，并通过value属性设置了默认值。

注意，禁用和只读状态需要根据实际需求来选择。禁用状态通常用于表示用户无法与输入框进行交互，而只读状态通常用于展示信息或防止用户误操作。

纯文本输入

可以使用.form-control-plaintext类来创建一个纯文本输入框，从而删除输入框的边框和背景样式，但保留适当的外边距和内边距。

以下是一个示例代码，用于创建一个纯文本输入框：

<!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>
				<input type="text" class="form-control-plaintext" placeholder="无边框的输入框">
				<input type="text" class="form-control" placeholder="正常输入框">
			</form>
		</div>
	</body>
</html>

在这个例子中，我们使用.form-control-plaintext类来设置输入框为纯文本样式，并通过value属性设置了默认值。

纯文本输入框通常用于展示静态文本内容，用户无法对其进行编辑。它们没有边框和背景样式，看起来更像是普通文本而不是输入框。

请注意，纯文本输入框不会接收用户的输入，如果需要用户可以输入内容，请使用其他类型的输入框，如文本输入框（<input type="text">）或文本区域（<textarea>）。

取色器

可以使用.form-control-color类来创建一个取色器输入框，用于选择颜色。

以下是一个示例代码，用于创建一个取色器输入框：

<!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>
				<input type="color" class="form-control-color">
			</form>
		</div>
	</body>
</html>

在这个例子中，我们使用<input type="color">元素创建了一个取色器输入框，并添加了.form-control-color类来应用样式。

取色器输入框允许用户通过点击或拖动选择颜色。选定的颜色将以十六进制表示（如"#ff0000"表示红色）显示在输入框中。

请注意，取色器输入框的外观和交互方式可能因浏览器而异。在某些浏览器中，它可能显示为一个颜色选择器图标，而在其他浏览器中可能以不同的方式呈现。