Thiết kế Layout website với Bootstrap

Để thiết kế layout website với Bootstrap, mình sẽ sử dụng hệ thống Grid của Bootstrap để bắt đầu chia.

Grid theo dạng flexbox ưu tiên di động mạnh mẽ của chúng tôi để xây dựng bố cục của tất cả các hình dạng và kích cỡ nhờ hệ thống mười hai cột, sáu tầng đáp ứng mặc định, biến Sass và Mixins và hàng chục lớp được xác định trước.

Nếu bạn chưa biết cách cài đặt Bootstrap thì có thể tham khảo bài viết này Hướng dẫn cài đặt và sử dụng Bootstrap v5 – Tuandd.info

Thiết kế layout website với Bootstrap

Cách thức hoạt động

  • Được bọc bởi class “.container” hay “.container.fluid” để có thể canh giữa hay canh khoảng cách lề.
  • Có 12 cột mẫu có sẵn cho mỗi hàng, cho phép bạn tạo các kết hợp các thành phần khác nhau trải rộng trên bất kỳ số lượng cột nào
  • Ở giữa các cột sẽ có khoảng cách padding. Khoảng cách padding của cột đầu đối với cột cuối sẽ được quy định bởi “.row

Tùy chọn Grid

xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Container max-widthNone (auto)540px720px960px1140px1320px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
# of columns12
Gutter width1.5rem (.75rem on left and right)
Custom guttersYes
NestableYes
Column orderingYes

Cột bố trí tự động

Sử dụng các lớp cột dành riêng cho điểm ngắt để định cỡ cột dễ dàng mà không cần lớp đánh số rõ ràng như ..col-sm-6

Thiết kế layout website với Bootstrap
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Đặt chiều rộng cho mỗi cột

Thiết kế layout website với Bootstrap
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Trộn và kết hợp

Thiết kế layout website với Bootstrap
<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Leave a Reply