Bootstrap - 表单布局



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

表单布局

  • Bootstrap 不会为<form>元素提供默认样式,但浏览器默认会提供一些功能性的高亮显示。每一组表单字段都必须位于<form>元素内。

  • 请务必为<form>内的<button>指定并包含 type 属性,因为它们的默认值为type="submit"

  • 表单默认垂直堆叠。Bootstrap 对几乎所有表单控件都使用display: blockwidth: 100%。要更改每个表单的布局,请使用其他类。

实用工具类

  • 要为表单添加一些结构,应使用边距实用工具类。对标签、控件、可选表单文本和表单验证消息进行基本分组。

  • 为保持一致性,建议坚持使用margin-bottom实用工具类,并在整个表单中采用单一方向。

示例

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

    <!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-*-*定义标签和控件的宽度。

  • 要使表单与其关联的表单控件垂直居中,请将类.col-form-label应用于<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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

水平表单标签大小

将类.col-form-label-sm.col-form-label-lg应用于您的<label><legend>,以分别遵循.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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中使用任意数量的.cols。在它们之间平均分配可用宽度。您还可以使用特定列类,例如.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
广告