Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Bootstrap Grid System: Hệ thống lưới trong bootstrap

5/5 - (7 bình chọn)

Bạn chắc cũng đã từng sử dụng điện thoại thông minh hay máy tính bảng để truy cập vào các website và bạn có để ý rằng: có những website bạn chỉ cần cuộn chuột theo chiều dọc thì thông tin được hiển thị theo thứ tự từ trên xuống một cách gọn gàng, dễ đọc. Một số website cũ thì bạn cần phải cuộn chuột sang ngang, hay bạn cần phải phóng to màn hình lên để nhìn rõ thông tin trên website, thậm chí là các thông tin trên website hiển thị loạn hết lên. Và điều đó làm bạn thấy không thoải mái.

Bootstrap Grid System: Hệ thống lưới trong bootstrap bootstrap-grid

Vậy tại sao lại có sự khác biệt giữa 2 loại website trên? Đó là, website ở trường hợp 1 đã được điều chỉnh sao cho website hiển thị phù hợp với màn hình điện thoại. Còn website ở trường hợp 2 thì ngược lại.

Xem thêm: Bootstrap là gì? Cách sử dụng bootstrap trong thiết kế website

Nếu bạn có website thì bạn có muốn website của bạn hiển thị theo trường hợp 1: bạn chỉ cần cuộn chuột và thông tin hiển thị gọn gàng, dễ đọc? Làm thế nào để website hiển thị được như vậy?

Trong bài này chúng ta sẽ tìm hiểu về yếu tố quan trọng đầu tiên giúp website của bạn hiển thị tốt trên màn hình điện thoại: bootstrap grid system – hệ thống lưới trong bootstrap.

Bootstrap grid system– hệ thống lưới trong bootstrap là gì?

Grid System là hệ thống lưới gồm 12 cột, việc chia nhỏ ra làm nhiều cột giúp website dễ dàng thay đổi giao diện để phù hợp với màn hình hiển thị.

Bootstrap Grid System: Hệ thống lưới trong bootstrap ha1

Hệ thống lưới của bootstrap có 4 lớp:

  • xs: cho màn hình điện thoại (< 768px)
  • sm: cho màn hình máy tính bảng (≥ 768px)
  • md: cho màn hình laptop, máy tính để bàn (≥ 992px)
  • lg: cho màn hình máy tính để bàn lớn (≥ 1200px)

Các lớp này có thể sử dụng kết hợp để tạo ra bố cục năng động cho website.

Bootstrap Grid System: Hệ thống lưới trong bootstrap ha2

Xem thêm: HTML là gì? Bố cục trang web được tổ chức ra sao?

Hệ thống làm việc như thế nào?

Hệ thống lưới được sử dụng để tạo bố cục trang thông qua các hàng (rows) và các cột (columns) bao nội dung website. Cấu trúc cơ bản của một hệ thống lưới:

Bootstrap Grid System: Hệ thống lưới trong bootstrap ha3-1024x243

Cụ thể, tạo  một hàng (<div class=“row”>). Sau đó, thêm số cột bạn muốn bằng cách sử dụng class thích hợp (.col-*-*). Lưu ý: Số .col-*-* đảm bảo khi cộng lại tối đa bằng 12 trên mỗi hàng (Nếu số .col-*-* cộng lại lớn hơn 12 trên mỗi hàng thì cột cuối cùng sẽ bị đẩy xuống tạo thành một hàng mới. Như vậy website hiển thị sẽ không được như ý muốn).

Dưới đây là các ví dụ cách hiển thị hệ thống lưới trên các loại màn hình:

Ví dụ 1: Hiển thị hệ thống lưới trên màn hình điện thoại và máy tính (sử dụng các class: .col-xs-* và col-md-*)

Bootstrap Grid System: Hệ thống lưới trong bootstrap ha4

Ví dụ 2: Hiển thị hệ thống lưới trên màn hình điện thoại, máy tính bảng và máy tính để bàn (ngoài các class trên ví dụ 1 ta cần sử dụng thêm class: .col-sm-*)

Bootstrap Grid System: Hệ thống lưới trong bootstrap ha5

Một số phần quan trọng khác:

  • Nếu các cột hiển thị nội dung trên website với chiều cao khác nhau thì sẽ làm phá vỡ cấu trúc của hàng. Vậy cần làm gì để khắc phục vấn đề đó?

Để khắc phục vấn đề này, ta cần sử dụng thêm class .clearfix và một số class hữu ích khác của bootstrap để xóa cột ở các điểm ngắt yêu cầu:

Bootstrap Grid System: Hệ thống lưới trong bootstrap ha6-1024x244

  • Nếu bạn muốn tạo khoảng trống giữa các cột có thể sử dụng cột bù (offsetting columns). Cột bù có dạng: .col-*-offset-*

Cột bù có tác dụng di chuyển cột sang phải bằng cách tăng lề trái của cột theo * cuối cùng của .col-*-offset-*

Bootstrap Grid System: Hệ thống lưới trong bootstrap ha7

Hệ thống lưới trong bootstrap rất quan trọng và được sử dụng thường xuyên nên bạn cần tìm hiểu kỹ về nó để áp dụng được thành thạo, giúp website của bạn bước đầu hiển thị tốt trên các loại màn hình: điện thoại, máy tính bảng, laptop, máy tính để bàn.

Bài tiếp theo chúng ta sẽ tìm hiểu về bảng trong bootstrap.

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Nếu bạn muốn phát triển Website, tăng lượt truy cập hoặc để Google đánh giá cao thì tối ưu nội...
    14 giây trước
  2. TuArts Nguyen hay TuArts Wedding Studio là một thương hiệu chụp ảnh cưới nổi tiếng trong giới chụp ảnh gần...
    9 giây trước
  3. Trong chiến lược tiếp thị toàn diện và hiệu quả, có rất nhiều nhân tố được các chủ doanh nghiệp...
    18 giây trước
  4. Ngày nay, có rất nhiều hình thức khác nhau để truyền tải thông điệp, tin tức, giáo lý nhà Phật...
    9 giây trước
  5. Bạn chắc cũng đã từng sử dụng điện thoại thông minh hay máy tính bảng để truy cập vào các...
    21 giây trước
  6. WordPress là một mã nguồn mở hệ quản trị nội dung CMS được người dùng phổ biến đông đảo nhất...
    13 giây trước
  7. TOP 5 công cụ kiểm tra nội dung website miễn phí năm 2018 Khi bạn viết nội dung cho các...
    23 giây trước
  8. Chèn các tập tin rất hữu ích khi bạn muốn chèn cùng một PHP, HTML, hoặc văn bản trên nhiều...
    28 giây trước
  9. Hàng ngày bạn đã gõ hàng trăm những từ khóa trên Google. Nhưng có bao nhiêu nội dung trả về...
    10 giây trước
  10. Dưới đây là danh sách đánh dấu những lỗi phổ biến lên HTML do các nhà phát triển giao diện...
    28 giây trước