Hướng dẫn cơ bản về bố cục biểu mẫu trong Bootstrap

Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị vào thế giới bố cục biểu mẫu trong Bootstrap. Với vai trò là giáo viên khoa học máy tính trong hơn một thập kỷ, tôi đã chứng kiến hàng trăm sinh viên ánh lên niềm vui khi họ nhận ra sức mạnh và tính thân thiện của Bootstrap. Hãy cùng nhau lặn xuống và khám phá bí mật của việc tạo ra những biểu mẫu đẹp mắt và响应 应式!

Cơ bản về bố cục biểu mẫu

Trước khi bắt đầu mã hóa, hãy tưởng tượng chúng ta là kiến trúc sư thiết kế một ngôi nhà. Cũng như một ngôi nhà cần có nền móng vững chắc và cấu trúc, biểu mẫu của chúng ta cần có một kế hoạch bố cục tốt. Bootstrap cung cấp cho chúng ta các công cụ để xây dựng những bố cục này một cách hiệu quả và đẹp mắt.

Khung công tác: Nền móng của biểu mẫu

Mỗi biểu mẫu tuyệt vời đều bắt đầu từ một khung công tác. Trong Bootstrap, chúng ta sử dụng lớp container để tạo một khung công tác có độ rộng cố định và响应 应式. Dưới đây là một ví dụ đơn giản:

<div class="container">
  <form>
    <!-- Các phần tử biểu mẫu sẽ nằm ở đây -->
  </form>
</div>

Khung công tác này giống như mảnh đất cho ngôi nhà của chúng ta. Nó cung cấp một không gian xác định cho biểu mẫu của chúng ta và giúp nó响应 应式 trên các màn hình khác nhau.

Tiện ích: Dao đa năng của thiết kế biểu mẫu

Tiện ích Bootstrap là những công cụ nhỏ gọn và mạnh mẽ có thể nhanh chóng giải quyết các vấn đề bố cục phổ biến. Hãy cùng xem xét một số tiện ích quan trọng cho bố cục biểu mẫu:

Tiện ích khoảng cách

Tiện ích khoảng cách giúp chúng ta thêm margin và padding vào các phần tử biểu mẫu. Dưới đây là bảng tham khảo nhanh:

Lớp Tiện ích	Mục đích
m-*	Thêm margin
p-*	Thêm padding
mt-*, mb-*, ms-*, me-*	Thêm margin trên, dưới, bên trái, bên phải
pt-*, pb-*, ps-*, pe-*	Thêm padding trên, dưới, bên trái, bên phải

Hãy xem chúng trong hành động:

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
</form>

Trong ví dụ này, mb-3 thêm margin dưới cho mỗi nhóm biểu mẫu, tạo ra không gian giữa các phần tử.

Bố cục lưới: Xây dựng cấu trúc

Bây giờ chúng ta đã có nền móng và công cụ, hãy bắt đầu xây dựng cấu trúc biểu mẫu của chúng ta bằng cách sử dụng hệ thống lưới của Bootstrap. Hệ thống lưới dựa trên bố cục 12 cột, mà chúng ta có thể sử dụng để tạo ra các thiết kế响应 应式.

Bố cục lưới cơ bản

Dưới đây là ví dụ về một bố cục biểu mẫu hai cột đơn giản:

<form>
  <div class="row">
    <div class="col-md-6">
      <label for="firstName" class="form-label">First Name</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">Last Name</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
</form>

Trong ví dụ này, chúng ta sử dụng row để tạo một nhóm cột nằm ngang và col-md-6 để chỉ định rằng mỗi cột sẽ chiếm một nửa chiều rộng trên màn hình trung bình và lớn hơn.

Khe cách: Đưa biểu mẫu thở

Khe cách là khoảng trống giữa các cột trong hệ thống lưới của chúng ta. Mặc định, Bootstrap thêm margin âm vào các hàng và padding vào các cột để tạo ra các khe cách. Tuy nhiên, chúng ta có thể điều chỉnh chúng bằng các lớp khe cách.

Dưới đây là ví dụ với khe cách tùy chỉnh:

<form>
  <div class="row g-3">
    <div class="col-md-6">
      <label for="firstName" class="form-label">First Name</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">Last Name</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
</form>

Lớp g-3 thêm một khe cách kích thước 3 (1rem) giữa các cột, tạo ra không gian cho biểu mẫu của chúng ta.

Biểu mẫu ngang: Góc nhìn khác

Đôi khi, chúng ta muốn các nhãn nằm cạnh các ô nhập liệu. Đây là nơi biểu mẫu ngang phát huy tác dụng. Hãy cùng tạo một biểu mẫu ngang:

<form>
  <div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email">
    </div>
  </div>
  <div class="row mb-3">
    <label for="password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
    </div>
  </div>
</form>

Trong ví dụ này, chúng ta sử dụng col-sm-2 cho nhãn và col-sm-10 cho ô nhập liệu, tạo ra một bố cục ngang đẹp mắt trên màn hình nhỏ và lớn hơn.

Đ尺寸 nhãn: Tìm尺寸 phù hợp

Đôi khi, chúng ta cần điều chỉnh kích thước của nhãn trong biểu mẫu ngang. Bootstrap làm điều này dễ dàng với các lớp kích thước.

Dưới đây là cách chúng ta có thể tạo một biểu mẫu với các尺寸 nhãn khác nhau:

<form>
  <div class="row mb-3">
    <label for="email" 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="email">
    </div>
  </div>
  <div class="row mb-3">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name">
    </div>
  </div>
  <div class="row mb-3">
    <label for="message" class="col-sm-2 col-form-label col-form-label-lg">Message</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-lg" id="message">
    </div>
  </div>
</form>

Trong ví dụ này, chúng ta sử dụng col-form-label-sm, col-form-label, và col-form-label-lg để tạo nhãn với kích thước nhỏ, mặc định và lớn tương ứng.

Đ尺寸 cột: Tùy chỉnh biểu mẫu

Hệ thống lưới của Bootstrap cho phép chúng ta chỉ định độ rộng chính xác của các cột. Điều này đặc biệt hữu ích khi chúng ta cần kiểm soát chính xác bố cục biểu mẫu.

Dưới đây là ví dụ:

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

Trong ví dụ này, chúng ta sử dụng col-2, col-3, và col-7 để tạo một biểu mẫu hàng nơi các ô nhập liệu chiếm phần cụ thể của chiều rộng khả dụng.

Tự động sizing: Để Bootstrap làm toán

Đôi khi, chúng ta muốn các ô nhập liệu tự động sizing dựa trên nội dung của chúng. Tính năng tự động sizing của Bootstrap giúp điều này trở nên khả thi. Dưới đây là cách nó hoạt động:

<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="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>

Trong ví dụ này, lớp col-auto cho phép mỗi cột sizing dựa trên nội dung của nó. Các lớp gy-2 và gx-3 thêm khoảng cách dọc và ngang, trong khi align-items-center căn giữa nội dung vertic ally trong mỗi cột.

Ví dụ hoàn chỉnh: Kết hợp tất cả

Bây giờ chúng ta đã xem xét tất cả các khái niệm, hãy kết hợp chúng lại trong một biểu mẫu phức tạp hơn:

<div class="container">
  <form class="mt-4">
    <div class="row mb-3">
      <div class="col-md-6">
        <label for="firstName" class="form-label">First Name</label>
        <input type="text" class="form-control" id="firstName">
      </div>
      <div class="col-md-6">
        <label for="lastName" class="form-label">Last Name</label>
        <input type="text" class="form-control" id="lastName">
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-md-8">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="col-md-4">
        <label for="phone" class="form-label">Phone</label>
        <input type="tel" class="form-control" id="phone">
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-md-6">
        <label for="address" class="form-label">Address</label>
        <input type="text" class="form-control" id="address">
      </div>
      <div class="col-md-3">
        <label for="city" class="form-label">City</label>
        <input type="text" class="form-control" id="city">
      </div>
      <div class="col-md-3">
        <label for="zip" class="form-label">Zip Code</label>
        <input type="text" class="form-control" id="zip">
      </div>
    </div>
    <div class="row mb-3">
      <div class="col-12">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" rows="3"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

Ví dụ này kết hợp nhiều khái niệm mà chúng ta đã thảo luận: container, lưới bố cục, khe cách, và thiết kế响应 应式. Nó tạo ra một biểu mẫu trông đẹp mắt trên cả desktop và thiết bị di động.

Biểu mẫu thẳng hàng: Gọn gàng và hiệu quả

Đối với các biểu mẫu đơn giản hoặc khi không gian là yếu tố quan trọng, biểu mẫu thẳng hàng có thể là giải pháp tuyệt vời. Dưới đây là cách tạo một biểu mẫu thẳng hàng:

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

Biểu mẫu thẳng hàng này sử dụng row-cols-lg-auto để tự động sizing các cột trên màn hình lớn, tạo ra một bố cục gọn gàng và horizont al.

Và thế là xong, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới bố cục biểu mẫu trong Bootstrap, từ khái niệm cơ bản đến các kỹ thuật avanzate. Hãy nhớ, thực hành là cách tốt nhất để trở thành.master, vì vậy đừng ngần ngại thử nghiệm với các bố cục này và làm chúng thành của riêng bạn. Chúc các bạn lập trình vui vẻ và các biểu mẫu của các bạn luôn responsive và thân thiện!

Credits: Image by storyset