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í 15++ 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

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

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

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. Google đã công bố dự án AMP- Accelerated Mobile Pages đây có vẻ như động thái đáp trả 2 đối...
    17 giây trước
  2. Bạn có biết rằng Google thường là nguồn lưu lượng truy cập lớn nhất cho blog và nội dung trang...
    16 giây trước
  3. Bạn đang phải mò kim đáy bể để tìm một đơn vị thiết kế Website uy tín chuyên nghiệp giữa...
    25 giây trước
  4. 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...
    12 giây trước
  5. Trong trang kết quả tìm kiếm của Google, việc kết quả tìm kiếm được xếp hạng trên vị trí cao...
    24 giây trước
  6. Nếu bạn không hiểu cách sử dụng từ khóa để tối ưu hóa công cụ tìm kiếm (SEO), bạn đang...
    27 giây trước
  7. Nghiên cứu từ khóa sẽ giúp bạn định hình nội dung và đưa ra ý tưởng rõ ràng, từ đó...
    8 giây trước
  8. Tại sao không làm cho năm 2018 sẽ là năm cuối cùng bạn trả hết nợ và bắt đầu một...
    26 giây trước
  9. Những ngày này, những điều đơn giản như là xuất bản một quảng cáo hoặc đăng bài blog đều không...
    21 giây trước
  10. Xếp hạng của Google đối với trang web là một trong những đích nhắm của mỗi SEOer. Họ mong muốn...
    29 giây trước