Bootstrap 简明教程

Bootstrap - Form Layout

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

Form layout

Bootstrap 没有为 <form> 元素提供默认样式，但它提供了浏览器默认提供的一些功能亮点。每个表单字段组必须位于 <form> 元素中。
确保指定 <button>*s within a *<form> 的 type 属性，因为它们默认为 type="submit" 。
默认情况下，表单垂直堆叠。Bootstrap 对几乎所有表单控件使用 display: block 和 width: 100% 。要更改每个表单的布局，请使用其他类。

Utilities

要给表单添加一些结构，应使用 margin utilities 。使用基本分组的标签、控件、可选表单文本和表单验证消息。
为了保持一致性，建议坚持整个表单中使用 margin-bottom 实用程序和单一方向。

Example

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

    <!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 变量。

Example

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

    <!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 变量。

Example

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

    <!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

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

    <!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

使用类 .row 将组组合起来，以使用网格创建水平表单。使用类 .col- -** 来定义标签和控件的宽度。
要使用关联的表单控件使表单垂直居中，请使用类 .col-form-label 至 <label> 。

Example

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

    <!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 的大小。

Example

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

  <!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 将平均分配其余空间。

Example

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

  <!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 。这样，列只占用它需要的大小。换句话说，列的大小取决于内容。

Example

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

  <!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>

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

Example

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

  <!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

要构建响应性水平布局，请使用 .row-cols- * 类。
使用缝隙修饰符类在水平和垂直方向上设置缝隙。
在窄移动视口中， .col-12 对于堆叠表单控件等很有用。
要将表单元素对齐在中间并使 .form-check 正确对齐，请使用类 .align-items-center 。

Example

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

<!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>