Bootstrap - 表单布局

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

表格布局

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

公用事业

要向表单添加一些结构应该使用边距实用程序。使用标签、控件、可选表单文本和表单验证消息的基本分组。
为了保持一致性，建议坚持使用边缘底部实用程序并在整个表单中使用单一方向。

例子

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

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

形成网格

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

例子

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

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

排水沟

要控制块方向内联的装订线宽度，请使用装订线修饰符类。通过使用$enable-grid-classes你可以启用 Sass 变量。

例子

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

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

使用网格系统创建更复杂的布局。

例子

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

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

卧式

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

例子

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

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

水平表单标签尺寸

对<label>或<legend>使用类.col-form-label-sm或.col-form-label-lg分别遵循.form-control-sm和.form-control-lg的大小。

例子

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

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

色谱柱尺寸调整

正如前面的示例中提到的，网格系统允许.row中包含任意数量的.col。将可用宽度均匀地分配在它们之间。您还可以使用特定的列类（如.col-sm-7）来选择列的子集以占用更多或更少的空间，而剩余的.col则均匀地划分其余部分。

例子

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

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

自动调整大小

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

例子

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

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

然后，您可以再次与特定于大小的列类重新混合。

例子

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

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

内嵌表单

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

例子

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

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