极客教程解释使用Bootstrap创建基本或垂直表单的步骤
Bootstrap是一个开源的CSS框架，用于构建响应式网站。它有HTML、CSS、JS框架，用于开发用户友好和响应式网站。截至2021年8月，Bootstrap是Github上排名第十的明星项目。该网站有现成的模板和它们的输出，这样我们就可以根据要求选择模板。这个开源项目是由Mark Otto和Jacob Thornton发起的，它最初被称为Twitter蓝图。因此，由于所有主要的bootstrap和随时可以使用的基本模板的收集，bootstrap使网络开发者的生活变得简单。
Bootstrap中的表单：表单是每个网站最需要的模板和组成部分，用于注册、登录、反馈等。因此，bootstrap中的表单模板的可用性使它变得简单，我们可以直接使用bootstrap中的表单模板。两个最新版本的bootstrap都包含了表单模板。两个版本的主要区别是，bootstrap 5有专门的表单部分，而在版本4中，表单被包含在组件部分。因此，强烈建议你使用第5版。
例子1：在这个例子中，我们将看到如何使用Bootstrap 4创建一个垂直表格。
第1步：在代码中包括以下CDN链接，以便使用Bootstrap 4。
<!– Bootstrap CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anonymous”>
<!– Bootstrap JS –>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity=
“sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anonymous”></script>
步骤2：现在我们将使用bootstrap 4表单，在body标签内的表单中输入我们想要的字段。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
integrity=
"sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
crossorigin="anonymous"></script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
integrity=
"sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
crossorigin="anonymous"></script>
<title>gfg</title>
</head>
<body>
<!-- code for the form-->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">
We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password
</label>
<input type="password"
class="form-control"
id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox"
class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
输出:
例子2：在这个例子中，生成了与bootstrap 4类似的表格，或者可以在输出中看到，但一些步骤会有所不同。现在我们将使用bootstrap 5。这个表单可以输入电子邮件和密码，同时也可以看到提交按钮。我们将从初始模板开始，把表单代码放到body标签里，就可以看到输出了。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity=
"sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity=
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
<title>gfg</title>
</head>
<body>
<!--code for the form-->
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">
Email address
</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">
Password
</label>
<input type="password"
class="form-control"
id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox"
class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
输出:
