注意:已弃用特定于表单的布局类:.form-group, .form-row, .form-inline.
https://getbootstrap.com/docs/5.3/migration/#forms-1
创建垂直表单
https://getbootstrap.com/docs/5.3/forms/overview/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<div>
<label for="" class="form-label">用户名:</label>
<input type="text" class="form-control">
</div>
<div>
<label for="" class="form-label">密码:</label>
<input type="password" class="form-control">
</div>
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
创建内联表单
https://getbootstrap.com/docs/5.3/forms/layout/#inline-forms
表单元素并排显示,可以使用.row
和 .col
类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="请输入密码">
</div>
</div>
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
表单控件尺寸
https://getbootstrap.com/docs/5.3/forms/form-control/#sizing
利用.form-control-lg
或.form-control-sm
类来设置表单控件的高度。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<input type="password" class="form-control form-control-lg" placeholder="请输入密码">
<input type="password" class="form-control form-control-sm" placeholder="请输入密码">
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
向表单控件添加帮助文本
完整示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<form action="">
<div class="row">
<div class="col-auto">
<label for="" class="form-label">密码:</label>
</div>
<div class="col-auto">
<input type="text" class="form-control" placeholder="请输入密码">
</div>
<div class="col-auto">
<span class="form-text">必须8-20个字符长</span>
</div>
</div>
</form>
</div>
<script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>
</html>