Bootstrap 简明教程

Bootstrap - Form Layout

本章将讨论 Bootstrap 表单布局。使用表单布局选项为你的表单添加结构,从内联到水平再到实现自定义网格。

This chapter will discuss about Bootstrap form layout. Add structure to your forms with form layout options, from inline to horizontal to implementing custom grids.

Form layout

  1. Bootstrap gives no default styling for the <form> element, but there are a few capable browser highlights that are given by default. Each group of form fields must be inside a <form> element.

  2. Ensure to be specify and include a type attribute for <button>*s within a *<form> as they default to type="submit".

  3. Forms are stacked vertically by default. Bootstrap uses display: block and width: 100% to nearly all form controls. To change layout of each form, use additional classes.

Utilities

  1. To add some structure to forms should be use margin utilities. Use basic grouping of labels, controls, optional form text, and form validation messages.

  2. For consistency, sticking to margin-bottom utilities and employing a single direction all through the form is recommended.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Bootstrap - Layout </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="formGroupExampleInput" class="form-label">Username</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Username">
      </div>
      <div class="mb-3">
        <label for="formGroupExampleInput2" class="form-label">Password</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="password">
      </div>
    </body>
    </html>

Form grid

使用网格类来构建更复杂的表单。为需要多列、不同宽度和更多对齐选项的表单布局创建网格。你需要使用 $enable-grid-classes 启用 Sass 变量。

Use grid classes for building the more complex forms. Form a grid for form layouts that require multiple columns, varied widths, and additional alignment options. You need to enable Sass variable using $enable-grid-classes.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Bootstrap - Layout</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 mt-2">
        <div class="col">
          <input type="text" class="form-control" placeholder="Username" aria-label="Username">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Password" aria-label="Password">
        </div>
      </div>
    </body>
    </html>

Gutters

要控制直行内嵌方向中的缝隙宽度,请使用缝隙修饰符类。通过使用 $enable-grid-classes ,你可以启用 Sass 变量。

To control over the gutter width in the inline as block direction use the gutter modifier classes. By using $enable-grid-classes you can enable Sass variable.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Bootstrap - Layout</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 mt-2">
        <div class="col">
          <input type="text" class="form-control" placeholder="Username" aria-label="Username">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Password" aria-label="Password">
        </div>
      </div>
    </body>
    </html>

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Bootstrap - Layout</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-3">
        <div class="col-md-6">
          <label for="inputFirst" class="form-label">First name</label>
          <input type="text" class="form-control" id="inputFirst">
        </div>
        <div class="col-md-6">
          <label for="inputLast" class="form-label">Last name</label>
          <input type="text" class="form-control" id="inputLast">
        </div>
        <div class="col-md-6">
          <label for="inputEmail" class="form-label">Email</label>
          <input type="email" class="form-control" id="inputEmail">
        </div>
        <div class="col-6">
          <label for="inputPassword" class="form-label">Password</label>
          <input type="Password" class="form-control" id="inputPassword" placeholder="password">
        </div>
        <div class="col-12">
          <label for="inputAddress" class="form-label">Address</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="Address">
        </div>
        <div class="col-md-6">
          <label for="inputAdharno" class="form-label">Adharcard no</label>
          <input type="text" class="form-control" id="inputAdharno">
        </div>
        <div class="col-md-6">
          <label for="inputMobno" class="form-label">Mobile no</label>
          <input type="text" class="form-control" id="inputMobno">
        </div>
        <div class="col-12">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
              I agree to terms and conditions
            </label>
          </div>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </body>
    </html>

Horizontal form

  1. Use the class .row to form groups to create horizontal forms with the grid. Use the class .col--** to define the width of the labels and controls.

  2. To make a form vertically centered with their associated form controls, use the class .col-form-label to <label>.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <title>Bootstrap - Layout</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>
        <div class="row mb-3">
          <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3">
          </div>
        </div>
        <div class="row mb-3">
          <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3">
          </div>
        </div>
        <fieldset class="row mb-3">
          <legend class="col-form-label col-sm-2 pt-0">Language Known</legend>
          <div class="col-sm-10">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="gridCheck" id="gridCheck1" value="option1" checked>
              <label class="form-check-label" for="gridCheck1">
                English
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox"  name="gridCheck" id="gridCheck2" value="option2">
              <label class="form-check-label" for="gridCheck2">
                Hindi
              </label>
            </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox"  name="gridCheck" id="gridCheck2" value="option2">
                <label class="form-check-label" for="gridCheck2">
                  marathi
                </label>
             </div>
            <div class="form-check disabled">
              <input class="form-check-input"type="checkbox"  name="gridCheck" id="gridCheck3" value="option3" disabled>
              <label class="form-check-label" for="gridCheck3">
                Others
              </label>
            </div>
          </div>
        </fieldset>
        <div class="row mb-3">
          <div class="col-sm-10 offset-sm-2">
            <div class="form-check">
              <input class="form-check-input" type="radio" id="gridRadio1">
              <label class="form-check-label" for="gridRadio1">
                Radio Button
              </label>
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </body>
    </html>

Horizontal form label sizing

将类 .col-form-label-sm.col-form-label-lg 用于你的 <label><legend> ,分别遵循 .form-control-sm.form-control-lg 的大小。

Use the classes .col-form-label-sm or .col-form-label-lg to your <label> or <legend> to follow the size of .form-control-sm and .form-control-lg respectively.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Layout</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 mb-3">
      <label for="colFormSm" class="col-sm-2 col-form-label col-form-label-sm">Username</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormSm" placeholder="Username">
      </div>
    </div>
    <div class="row mb-3">
      <label for="colFormLabel" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="colFormLabel" placeholder="Password">
      </div>
    </div>
    <div class="row">
      <label for="colFormLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLg" placeholder="email">
      </div>
    </div>
  </body>
  </html>

Column sizing

如前一个示例中提到的,网格系统允许在 .row 中使用任意数量的 .cols 。在它们之间平均分配可用宽度。你还可以使用 .col-sm-7 等特定的列类来选择一行或多行中的子集,而剩余的 .col 将平均分配其余空间。

As mentioned in the previous example, the grid system allows any number of .cols within a .row. Divide the available width evenly between them. You can also use a specific column class like .col-sm-7 to select a subset of columns to occupy more or less space while the remaining .col divides the rest evenly.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Layout</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">
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Email" aria-label="Email">
      </div>
      <div class="col-sm-3">
        <input type="text" class="form-control" placeholder="Mobile no" aria-label="Mobile no">
      </div>
      <div class="col-sm-2">
        <input type="text" class="form-control" placeholder="Age" aria-label="Age">
      </div>
    </div>
  </body>
  </html>

Auto-sizing

在下面的示例中,使用 flexbox 实用程序垂直居中内容并将 .col 更改为 .col-auto 。这样,列只占用它需要的大小。换句话说,列的大小取决于内容。

In the below example, use flexbox utility to center the content vertically and change .col to .col-auto. So that the column only takes up as much space as it needs. In other words, the column size depends on the content.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Layout</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 gy-2 gx-3 align-items-center">
      <div class="col-auto">
        <label class="visually-hidden" for="inputName">Name</label>
        <input type="text" class="form-control" id="inputName" placeholder="Name">
      </div>
      <div class="col-auto">
        <label class="visually-hidden" for="inputGroup"></label>
        <div class="input-group">
          <input type="text" class="form-control" id="inputGroup" placeholder="Username">
          <div class="input-group-text">@gmail.com</div>
        </div>
      </div>
      <div class="col-auto">
        <label class="visually-hidden" for="selectLanguage">Language</label>
        <select class="form-select" id="selectLanguage">
          <option selected>Choose...</option>
          <option value="1">English</option>
          <option value="2">Hindi</option>
          <option value="3">Marathi</option>
        </select>
      </div>
      <div class="col-auto">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="autoSizingCheck">
          <label class="form-check-label" for="autoSizingCheck">
            Remember me
          </label>
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </body>
  </html>

然后你可以使用特定大小的列类再次组合。

Then you can remix again with size-specific column classes.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Layout</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 gx-3 gy-2 align-items-center mt-2">
      <div class="col-sm-3">
        <label class="visually-hidden" for="inputName">Name</label>
        <input type="text" class="form-control" id="inputName" placeholder="Name">
      </div>
      <div class="col-sm-3">
        <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
        <div class="input-group">
          <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Email">
          <div class="input-group-text">@gmail.com</div>
        </div>
      </div>
      <div class="col-sm-3">
        <label class="visually-hidden" for="selectLanguage">Language</label>
        <select class="form-select" id="selectLanguage">
          <option selected>Choose...</option>
          <option value="1">English</option>
          <option value="2">Hindi</option>
          <option value="3">Marathi</option>
        </select>
      </div>
      <div class="col-auto">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
          <label class="form-check-label" for="autoSizingCheck2">
            Remember me
          </label>
        </div>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </body>
  </html>

Inline forms

  1. To build responsive horizontal layouts use the classes .row-cols-*.

  2. Use gutter modifier classes to have gutters in horizontal and vertical directions.

  3. In narrow mobile viewports, .col-12 is useful for stacking form controls, etc.

  4. To align the form elements at the middle and make the .form-check align properly use the class .align-items-center.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

<!DOCTYPE html>
  <html lang="en">
  <head>
     <title>Bootstrap - Layout</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 row-cols-lg-auto g-3 align-items-center">
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
          <div class="input-group-text">@gmail.com</div>
        </div>
      </div>

      <div class="col-12">
        <label class="visually-hidden" for="selectLanguage">Language</label>
        <select class="form-select" id="selectLanguage">
          <option selected>Choose...</option>
          <option value="1">English</option>
          <option value="2">Hindi</option>
          <option value="3">Marathi</option>
        </select>
      </div>

      <div class="col-12">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="inlineFormCheck">
          <label class="form-check-label" for="inlineFormCheck">
            Remember me
          </label>
        </div>
      </div>

      <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </body>
  </html>