📌  相关文章
📜  解释使用 Bootstrap 创建基本或垂直表单的步骤(1)

📅  最后修改于: 2023-12-03 15:27:56.702000             🧑  作者: Mango

使用 Bootstrap 创建基本或垂直表单的步骤

Bootstrap 是一个流行的前端框架，提供了丰富的组件和样式，可以帮助开发者快速构建响应式的网站和应用程序。其中之一就是表单组件，它可以很方便地创建出具有良好样式和布局的表单。

1. 引入 Bootstrap

在开始使用 Bootstrap 表单之前，首先需要在 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。可以从 Bootstrap 官网下载源代码并引入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Bootstrap Form</title>
    <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
  </head>
  <body>
    <!-- HTML 表单代码 -->
    <script src="path/to/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>
2. 创建基本表单

在 HTML 文件中创建一个表单，并使用 Bootstrap 中的相应类名来应用样式。例如，可以使用 .form-control 类来为输入框添加样式，使用 .btn 类来为按钮添加样式：

<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input id="username" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input id="password" type="password" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

此时，就可以看到一个基本的表单，其中包含一个用户名输入框、一个密码输入框和一个登录按钮，并且它们都具有 Bootstrap 的样式。

3. 创建垂直表单

除了基本表单之外，Bootstrap 还提供了垂直表单的样式，可以让表单的字段垂直排列。要创建垂直表单，只需要在 <form> 元素上添加 .form-vertical 类名即可：

<form class="form-vertical">
  <div class="form-group">
    <label for="username">Username</label>
    <input id="username" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input id="password" type="password" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

此时，表单的字段就会垂直排列，看起来更加整洁。

结论

使用 Bootstrap 创建基本或垂直表单的步骤非常简单。只需引入 Bootstrap 的 CSS 和 JavaScript 文件，然后按照所需样式和布局使用相应的类名即可。切记在表单元素上使用 .form-group 类。