Thiết kế website bằng bootrap - P2

Hệ thống lưới của Bootstrap cho phép sắp xếp tối da 12 cột theo hàng dọc trên trang.
Nếu bạn không muốn sử dụng tất cả mỗi 12 cột trên trang , bạn có thể ghép các cột lại với nhau để tạo ra các cột rộng hơn:

span 1

span 4

span 8

span 6

span 12

Hệ thống lưới Bootstrap được thiết kế để đáp ứng với nhiều loại màn hình của các thiết bị di động khác nhau ( responsive) , vì thế các cột sẽ sắp xếp tự động tùy thuộc vào kích cỡ màn hình.

Các Class của hệ thống lưới Bootstrap – Grid Classes

Bootstrap có 4 class cơ bản :

xs (dành cho điện thoại di động – smart phone)
sm (dành cho máy tính bảng – tablets)
md (dành cho máy tính bàn – desktops)
lg (dành cho máy tính bàn có màn hình lớn – larger desktops)

Các classs trên có thể kết hợp để tạo ra các layout có khả năng hiển thị linh hoạt tùy vào màn hình các loại thiết bị.

Một số quy tắc sử dụng Bootstrap Grid

Các hàng (row) phải nằm trong div có class .container (fixed-width : chiều ngang cố định) hay
.container-fluid (full-width : chiều ngang đầy trang) để các cột được so hàng đúng vị trí và các padding đều nhau
Luôn tạo row trước khi ghép các cột lại với nhau.
Nội dung phải luôn được đặt trong các cột, và các cột phải được đặt trong các hàng (row)
Các classes như .row và.col-sm-4 có thể tạo các layout lưới nhanh chóng.
Các khoảng cách giữa các cột có được là do padding, padding bên trái ở cột đầu tiên và padding bên phải ở cột cuối cùng bị triệt tiêu là do các cột nằm trong các hàng có class .rows
Các cột dọc trên trang luôn có tổng số bằng 12. Ví dụ bạn muốn có 3 cột đều nhau thì hãy tạo 3 cột với class là
.col-sm-4

Cấu trúc cơ bản của hệ thống lưới Bootstrap

Dưới đây là cấu trúc cơ bản của hệ thống lưới Boostrap:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Đầu tiên, bạn phải tạo khung chứa (container)

<div class="container"></div>

Kế đến, bạn phải tạo một hàng

<div class="row"></div>

Sau đó, thêm số cột bạn muốn (với class theo chuẩn .col-*-*). Chú ý rằng các số của .col-*-* luôn không quá số 12 cột mỗi hàng.

Dưới đây là một số ví dụ cụ thể một số layout dạng lưới Bootstrap

Ba cột bằng đều nhau

Đây là một ví dụ của layout với 3 cột có bề ngang bằng nhau, layout này sẽ giữ nguyên 3 cột đối với màn hình máy tính bàn (deskstop) cho đến máy tính bảng (tablet), sau đó chúng sẽ tự động xếp gọn thành 1 cột theo chiều dọc ở màn hình nhỏ như màn hình điện thoại (phone)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

XEM VÍ DỤ

Hai cột không bằng đều nhau

Đây là một ví dụ của layout với 2 cột có bề ngang không bằng nhau, layout này sẽ giữ nguyên 2 cột đối với màn hình máy tính bàn (deskstop) cho đến máy tính bảng (tablet), sau đó chúng sẽ tự động xếp thành 1 cột theo chiều dọc ở màn hình nhỏ như màn hình điện thoại (phone)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Xem ví dụ

News Ticker

Diamond Hoàng

Giới thiệu về tôi