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. Thật may vì thế giới mã nguồn mở cung cấp nhiều lựa chọn tuyệt vời cho việc biên tập video....
    18 giây trước
  2. Đây là 100 mẹo và thủ thuật thường được sử dụng trong Woocommerce. Để áp dụng những kiến thức dưới...
    26 giây trước
  3. Khái niệm: “Bài viết chuẩn SEO là bài được viết tự nhiên, tối ưu theo các tiêu chí Onpage trong...
    14 giây trước
  4. Mục tiêu chính của các trang web là muốn người tìm kiếm dễ dàng tìm thấy các sản phẩm hoặc...
    4 giây trước
  5. Hiện nay có rất nhiều trang web thương mại cho sản phẩm thiết bị phòng tắm, thiết bị xông hơi,...
    6 giây trước
  6. Navigation website - điều hướng website là một phần quan trọng không thể thiếu đối với mỗi trang web. Việc...
    30 giây trước
  7. Công cụ SEO Majestic là gì và cách sử dụng nó như thế nào - Công cụ SEO Majestic là...
    16 giây trước
  8. Như chúng ta đã biết thì một trang web hoạt động theo mô hình client-server. Việc truyền gửi dữ liệu...
    2 giây trước
  9. Chúng ta đã biết rằng Google Keyword Planner hay Công Cụ Lập Kế Hoạch Từ Khóa có thể tìm ra các...
    28 giây trước
  10. Từ khóa đuôi dài đóng một vai trò quan trọng trong blog hoặc kinh doanh trực tuyến. Để xếp hạng...
    8 giây trước