Bootstrap 简明教程
Bootstrap - Form Controls
本章将讨论 Bootstrap 表单控件。自定义样式、大小、焦点状态和其他功能可以用于升级文本表单控件,例如 <input> 和 <textarea> 。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="mb-3">
<label for="formControlName" class="form-label">Full Name</label>
<input type="text" class="form-control" id="formControlName" placeholder="name">
</div>
<div class="mb-3">
<label for="formControlEmail" class="form-label">Email id</label>
<input type="text" class="form-control" id="formControlEmail" placeholder="tutorialspoint@example.com">
</div>
<div class="mb-3">
<label for="formControlTextarea" class="form-label">Add a comment</label>
<textarea class="form-control" id="formControlTextarea" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</body>
</html>
Sizing
使用诸如 .form-control-lg 和 .form-control-sm 的类指定表单输入字段的大小。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<input class="form-control form-control-lg mt-2" type="text" placeholder="Large size input box" aria-label=".form-control-lg example">
<input class="form-control mt-2" type="text" placeholder="Default size input box" aria-label="default input example">
<input class="form-control form-control-sm mt-2" type="text" placeholder="Small size input box" aria-label=".form-control-sm example">
</body>
</html>
Form text
-
使用 .form-text 创建块级或行内级表单文本。
-
在块级元素上方添加一个上边距以轻松地设置输入的间距。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<label for="inputUsername" class="form-label mt-2">Username</label>
<input type="text" id="inputUsername" class="form-control" aria-labelledby="UsernameHelpBlock">
<div id="UsernameHelpBlock" class="form-text">
Your username 6–20 characters long and can be any combination of letters, numbers or symbols.
</div>
<label for="inputPassword" class="form-label mt-2">Password</label>
<input type="text" id="inputPassword" class="form-control" aria-labelledby="PasswordHelpBlock">
<div id="PasswordHelpBlock" class="form-text">
must be 6-20 characters long.
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</body>
</html>
行内文本可以使用任何典型的行内 HTML 元素(例如 <span> 、 <small> ……等),仅需 .form-text 类。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="row g-3 align-items-center mt-2">
<div class="col-auto">
<label for="inputUsername" class="col-form-label">Username</label>
</div>
<div class="col-auto">
<input type="text" id="inputUsername" class="form-control" aria-labelledby="usernameHelpInline">
</div>
<div class="col-auto">
<span id="usernameHelpInline" class="form-text">
Username 6–20 characters long.
</span>
</div>
</div>
</body>
</html>
Disabled
要获得灰显的外观并移除指针事件,请将 disabled 特性应用到一个输入。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<input class="form-control mt-2" type="text" placeholder="Disable Input Field" aria-label="Disabled input example" disabled>
</body>
</html>
Readonly
使用 readonly 特性来防止对输入的值进行更改。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<input class="form-control mt-2" type="text" value="Tutorialspoint" aria-label="readonly example" readonly>
</body>
</html>
Readonly plain text
.form-control-plaintext 以纯文本形式创建只读输入字段。这将删除样式并保留适当的边距和填充。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="mb-3 row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-3">
<input type="text" readonly class="form-control-plaintext" id="name" value="Tutorialspoint">
</div>
</div>
<div class="mb-3 row">
<label for="bootstrap" class="col-sm-2 col-form-label">Language</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="bootstrap" placeholder="Bootstrap">
</div>
</div>
</body>
</html>
在只读纯文本内联中,您可以使表单标签和输入出现在内联和水平方式中。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form class="row g-2 mt-2">
<div class="col-auto">
<input type="text" readonly class="form-control-plaintext" id="staticName" value="Tutorialspoint">
</div>
<div class="col-auto">
<input type="text" class="form-control" id="inputLanguage" placeholder="Bootstrap">
</div>
</form>
</body>
</html>
File input using sizes
-
使用 .form-control-sm 将文件输入的大小调小。
-
使用 .form-control-lg 将文件输入的大小调大。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="mb-3">
<label for="fileInputsm" class="form-label">Small size file input</label>
<input class="form-control form-control-sm" id="fileInputsm" type="file">
</div>
<div>
<label for="fileInputlg" class="form-label">Large size file input</label>
<input class="form-control form-control-lg" id="fileInputlg" type="file">
</div>
</body>
</html>
File input using attribute
-
无需明确定义 default 属性。
-
使用 disabled 属性,它会显示灰显的外观并删除指针事件。
-
可以使用 multiple 属性一次性接受多个文件的输入。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="mb-3">
<label for="defaultFileInput" class="form-label">Default file input</label>
<input class="form-control" type="file" id="defaultFileInput">
</div>
<div class="mb-3">
<label for="disabledFileInput" class="form-label">Disabled file input</label>
<input class="form-control" type="file" id="disabledFileInput" disabled>
</div>
<div class="mb-3">
<label for="multipleFileInput" class="form-label">Multiple files input</label>
<input class="form-control" type="file" id="multipleFileInput" multiple>
</div>
</body>
</html>
Color
在 <input> 元素中使用 .form-control-color 类和 type="color" 属性为输入字段添加颜色。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<label for="colorInput" class="form-label">Select a color</label>
<input type="color" class="form-control form-control-color" id="colorInput" value="#228b22">
</body>
</html>
Datalists
您可以使用数据列表创建一组 <option> ,这些组可通过 <input> 访问。浏览器和操作系统为 <datalist> 元素提供有限且不一致的样式。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Form Control</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<label for="dataList" class="form-label">Languages</label>
<input class="form-control" list="datalistOptions" id="dataList" placeholder="Search languages...">
<datalist id="datalistOptions">
<option value="Bootstrap">
<option value="HTML">
<option value="CSS">
</datalist>
</body>
</html>