Cách trình bày

Cung cấp cho biểu mẫu của bạn một số cấu trúc — từ nội tuyến đến ngang đến triển khai lưới tùy chỉnh — với các tùy chọn bố cục biểu mẫu của chúng tôi.

Trên trang này

Các hình thức

Mọi nhóm trường biểu mẫu phải nằm trong một <form>phần tử. Bootstrap không cung cấp kiểu mặc định cho <form>phần tử, nhưng có một số tính năng trình duyệt mạnh mẽ được cung cấp theo mặc định.

Mới đối với biểu mẫu trình duyệt? Cân nhắc xem xét tài liệu biểu mẫu MDN để biết tổng quan và danh sách đầy đủ các thuộc tính có sẵn.
<button>s trong phạm vi <form>mặc định type="submit", vì vậy hãy cố gắng trở nên cụ thể và luôn bao gồm a type.

Vì Bootstrap áp dụng display: blockvà width: 100%cho hầu hết tất cả các điều khiển biểu mẫu của chúng tôi, các biểu mẫu theo mặc định sẽ xếp theo chiều dọc. Các lớp bổ sung có thể được sử dụng để thay đổi bố cục này trên cơ sở mỗi biểu mẫu.

Tiện ích

Tiện ích ký quỹ là cách dễ nhất để thêm một số cấu trúc vào biểu mẫu. Chúng cung cấp nhóm cơ bản gồm các nhãn, điều khiển, văn bản biểu mẫu tùy chọn và thông báo xác thực biểu mẫu. Chúng tôi khuyên bạn nên gắn bó với margin-bottomcác tiện ích và sử dụng một hướng duy nhất trong suốt biểu mẫu để có tính nhất quán.

Hãy thoải mái xây dựng biểu mẫu của bạn theo cách bạn muốn, với <fieldset>s, <div>s hoặc gần như bất kỳ phần tử nào khác.

Nhãn mẫu

Một nhãn khác

html

<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

Lưới biểu mẫu

Các biểu mẫu phức tạp hơn có thể được xây dựng bằng cách sử dụng các lớp lưới của chúng tôi. Sử dụng chúng cho các bố cục biểu mẫu yêu cầu nhiều cột, chiều rộng đa dạng và các tùy chọn căn chỉnh bổ sung. Yêu cầu $enable-grid-classesbật biến Sass (theo mặc định).

html

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Máng xối

Bằng cách thêm các lớp công cụ sửa đổi máng xối , bạn có thể kiểm soát chiều rộng máng xối cũng như hướng nội tuyến cũng như hướng khối. Cũng yêu cầu $enable-grid-classesbiến Sass được bật (theo mặc định).

html

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

Các bố cục phức tạp hơn cũng có thể được tạo bằng hệ thống lưới.

html

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </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">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Dạng ngang

Tạo biểu mẫu ngang với lưới bằng cách thêm .rowlớp để tạo nhóm và sử dụng các .col-*-*lớp để chỉ định chiều rộng của nhãn và điều khiển của bạn. Hãy chắc chắn thêm .col-form-labelvào các <label>s của bạn để chúng được căn giữa theo chiều dọc với các điều khiển biểu mẫu được liên kết của chúng.

Đôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo ra sự liên kết hoàn hảo mà bạn cần. Ví dụ: chúng tôi đã xóa padding-topnhãn đầu vào radio xếp chồng lên nhau của chúng tôi để căn chỉnh đường cơ sở văn bản tốt hơn.

html

<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">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </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="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Định cỡ nhãn dạng ngang

Đảm bảo sử dụng .col-form-label-smhoặc .col-form-label-lgcác <label>s hoặc <legend>s của bạn để tuân theo chính xác kích thước của .form-control-lgvà .form-control-sm.

E-mail

html

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" 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="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

Định cỡ cột

Như được hiển thị trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số .cols nào trong a .row. Họ sẽ chia đều chiều rộng có sẵn giữa chúng. Bạn cũng có thể chọn một tập hợp con các cột của mình để chiếm nhiều hơn hoặc ít hơn không gian, trong khi các cột còn lại .colchia đều phần còn lại, với các lớp cột cụ thể như .col-sm-7.

html

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

Tự động định cỡ

Ví dụ dưới đây sử dụng tiện ích flexbox để căn giữa nội dung theo chiều dọc và thay đổi .colđể .col-autocác cột của bạn chỉ chiếm nhiều dung lượng khi cần thiết. Nói một cách khác, các kích thước cột tự nó dựa trên nội dung.

html

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</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>

Sau đó, bạn có thể kết hợp lại điều đó một lần nữa với các lớp cột theo kích thước cụ thể.

html

<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</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>

Biểu mẫu nội tuyến

Sử dụng các .row-cols-*lớp để tạo bố cục ngang đáp ứng. Bằng cách thêm các lớp công cụ sửa đổi máng xối , chúng ta sẽ có các máng xối theo hướng ngang và dọc. Trên các khung nhìn di động hẹp, .col-12giúp ngăn xếp các điều khiển biểu mẫu và hơn thế nữa. Căn .align-items-centerchỉnh các phần tử biểu mẫu ở giữa, làm cho việc .form-checkcăn chỉnh chính xác.

html

<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">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</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>