如何使用Bootstrap在不同的行中写一个表单

Bootstrap是一个开源的前端框架，用于开发快速和用户友好的标准和装饰性网站或网络应用。Bootstrap包括基于HTML和CSS的表格、表单、按钮等模板。Bootstrap还使用JavaScript，帮助我们创建响应式设计。表格是每个网站的重要构件。Bootstraps为表单添加了样式，使其具有标准的外观和感觉。这篇文章将让你了解如何使用Bootstrap创建一个表单（Bootstrap垂直表单）。

表格布局的规则

1.对于理想的间距，将标签和表单控件包在 <div class=”form-group”> .
2.为所有文本的。form-control类添加。form-control类，例如<input>、<textarea>和<select>元素。

在我们开始编码之前，我们需要在HTML文件中包含以下样式表，以便加载所有的CSS。

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>

<DOCTYPE html>
<html lang="en">
    <head>
      <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      />
  
      <style>
        /* Add a background color and 
           some padding around the form */
        .container {
          /* Make width to 100% for 
             full screen size form*/
          width: 50%; 
          border-radius: 5px;
          background-color: #f2f2f2; /*rgb(242, 242, 242) hsl(0, 0%, 95%)*/
          padding: 20px;
        }
      </style>
    </head>
  
    <body>
      <div class="container">
        <form>
          <div class="form-group">
            <label for="InputName">Name</label>
            <input
              type="text"
              class="form-control"
              id="InputName"
              placeholder="Enter name"
            />
          </div>
  
          <div class="form-group">
            <label for="InputEmail">Email</label>
            <input
              type="email"
              class="form-control"
              id="InputEmail"
              placeholder="Enter email"
            />
          </div>
  
          <div class="form-group">
            <label for="InputPhoneNumber">Phone Number</label>
            <input
              type="tel"
              class="form-control"
              id="InputPhoneNumber"
              placeholder="Enter phone number"
            />
          </div>
  
          <div class="form-group">
            <label for="InputPassword">Password</label>
            <input
              type="password"
              class="form-control"
              id="InputPassword"
              placeholder="Enter password"
            />
          </div>
  
          <div class="form-group">
            <label for="InputSubject">Subject</label>
            <textarea
              class="form-control"
              id="InputSubject"
              placeholder="Write something...."
              style="height: 100px"
            >
            </textarea>
          </div>
  
          <button type="submit" 
                  class="btn btn-primary">Submit</button>
        </form>
      </div>
    </body>
</html>