Hiểu nhanh hệ thống lưới của Bootstrap trong 5 phút

Mục đích của bài viết này giúp bạn hiểu rõ hơn về hệ thống lưới trong Bootstrap và cách bạn áp dụng nó vào trong project. Bài viết này giả sử bạn đã hiểu cơ bản về HTML và CSS, còn bạn nào chưa hiểu cơ bản về 2 cái này thì có thể vào w3school để học nhé 🙂 .

Đây là một trang rất chi tiết và dễ hiểu cho những bạn mới học về thiết kế web.

Để hiểu về grid system trong Bootstrap thì bạn cần hiểu……….

Bootstrap là cái quần què gì vậy?

Hiểu nôm na thì:

+ Bootstrap là một framework miễn phí giúp việc thiết kế web trở nên nhanh và dễ dàng hơn.

+ Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS để tạo ra các form, button, tables. navigation,,,,,và một số thứ khác.

+ Bootstrap giúp cho các lập trình viên tạo ra các responsive design.

Hệ thống lưới (grid system) trong Bootstrap là gì?

grid

Đoạn code dưới đây là vì dụ cơ bản việc tạo ra hệ thống lưới gồm 3 cột. Mặc định thì Bootstrap nó đã chuẩn hóa giao diện web bao gồm 12 cột. Và bạn định nghĩa các cột bằng class col, sm cho màn hình small, md cho màn medium và lg cho màn hình rộng.

One of three columns

 

One of three columns

 

One of three columns

</div> </div>

Bây giờ ta sẽ phân tích rõ hơn về đoạn code trên.

+ Class container giúp căn ngang và center cho nội dung nằm bên trong nó. Sử dụng container sẽ fix-width, còn khi sử dụng container-fluid thì nó sẽ cho nội dung bên trong full màn hình browser.

+ Bạn có thể quy định tỉ lệ mỗi cột chiếm trên màn hình khi truyền các con số cụ thể như sau: .col-4, .col-5, .col-6. Một trang web định nghĩa gồm tổng 12 column, vì thế khi bạn chia tỉ lệ thì tổng các số truyền vào mỗi cột phải bằng 12.

+ Để tạo được 1 grid responsive, bạn nên quy định class dựa theo bảng dưới đây:

system

Extral small dùng cho màn hình smartphone, small dùng cho màn hình ipad, tablet, Large thì dùng cho màn hình laptop và màn hình desktop nhỏ. XL thì dùng cho các màn hình siêu lớn, độ phân giải cao 🙂 .

Bạn thấy đấy, Bootstrap nó đã dựng sẵn một bộ khung lên cho các lập trình viên khi thiết kế web, việc này giúp tiết kiệm rất nhiều thời gian khi làm việc. Thay vì bạn phải code thuần dùng HTML và CSS thì mất rất nhiều công sức đúng không nào 🙂 .

Hi vọng qua bài viết trên đã giúp bạn hiểu hơn về grid system trong Bootsrap.

Dưới đây là link cho các bạn tham khảo thêm:

https://www.w3schools.com/css/css3_flexbox.asp

https://getbootstrap.com/docs/4.0/layout/grid/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s