Phần 2: Hệ thống lưới trong Bootstrap 4

05/12/2018 Nguyễn Văn Huynh

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap.

Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap. Như các bạn đã biết, độ rộng màn hình 1 trang web dùng Bootstrap là tương đối, tức là độ rộng này tùy thuộc theo kích thước màn hình.

 

Hệ thống lưới của Bootstrap chia thành 12 cột theo chiều rộng của trang. Chúng ta có thể gom các cột lại với nhau để tạo thành vùng lớn hơn, chẳng hạn 4 cột có độ rộng 1 được gom thành 1 cột có độ rộng 4.

Khi thiết kế giao diện, người thiết kế phải đảm bảo độ rộng của các cột tạo thành luôn là 12 để giao diện không bị bể (hiển thị sai). Các trường hợp thiết kế:

span 3 – span 9: OK
span 4 – span 8: OK
span 5 – span 7: OK
span 3 – span 4 – span 5: OK
span 4 – span 6 – span 2: OK
span 8 – span 6: không OK, vì tổng số cột là 14, lớn hơn số cột tối đa là 12
Các lớp lưới
Trong Bootstrap, có 4 lớp lưới chính như sau:

xs (dùng cho di động): có chiều rộng màn hình nhỏ hơn 768px
sm (dùng cho tablet): có chiều rộng màn hình từ 768px trở lên
md (dùng cho desktop): có chiều rộng màn hình từ 992px trở lên
lg (dùng cho desktop có kích thước lớn): có chiều rộng màn hình từ 1200px trở lên
Tùy theo thiết kế, bạn có thể chọn các loại lớp lưới phù hợp với màn hình thiết bị hiển thị. Ngày nay, do xu hướng sử dụng điện thoại di động và tablet phổ biến, cho nên bạn nên dùng 2 lớp sm hoặc md.

Cấu trúc cơ bản của lưới Bootstrap
Chúng ta xét đến 1 đoạn mã sau để thấy rõ cấu trúc lưới của Bootstrap.

01
02
03
04
05
06
07
08
09
10
11
<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>
Đầu tiên, chúng ta phải tạo 1 dòng (thông qua đoạn mã). Sau đó, thêm số cột mong muốn vào dòng này (thông qua các lớp .col-*-* với * đầu tiên là loại xs, sm, md, lg và * thứ 2 là số cột). Lưu ý tổng số cột trên 1 cùng 1 row phải luôn là 12.


Tạo 3 vùng bằng nhau

Để tạo 1 dòng chứa 3 vùng bằng nhau có giao diện khớp với tablet trở lên, chúng ta sử dụng đoạn mã sau:

1
2
3
4
5
<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>
Trong đoạn mã trên, chúng ta thấy có 3 lớp col-sm-4 tức là 3 lớp này sử dụng cho màn hình Tablet, Desktop và Desktop có kích thước lớn. Mỗi lớp có 4 cột như vậy, với 3 lớp, chúng ta có 12 cột, đúng theo yêu cầu của hệ thống lưới Bootstrap.

Tạo 2 vùng không bằng nhau

Tiếp đến chúng ta sẽ tạo giao diện với 2 vùng không bằng nhau với vùng trái có kích thước 4 cột, và vùng phải có kích thước 8.

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
Tóm lại, bài viết này giúp các bạn nắm kiến thức cơ bản về hệ thống lưới của Bootstrap cũng như cách phân vùng cho các giao diện Bootstrap đơn giản.

Tag: bootstrapgrid system

Đang phát triển ...

Bài viết liên quan

Phần 5. Màu sắc văn bản trong Bootstrap 4

Bootstrap 4 xây dựng sẵn những lớp cho phép chúng ta có thể dùng để định nghĩa “màu sắc” cho văn bản trong trang web.

Phần 4: Văn bản trong Boostrap

Trong bài này, chúng ta sẽ học đến cách thiết lập mặc định cho phong cách văn bản trong Bootstrap.

Phần 3: Hệ thống lưới nâng cao Bootstrap

Trong phần này, các bạn tiếp tục tìm hiểu các lớp lưới khác trong Bootstrap để thực hiện việc phân vùng cho các giao diện phức tạp hơn.

Phần 1: Giới thiệu Bootstrap 4

Bootstrap là 1 framework JavaScript, CSS và HTML miễn phí và phổ biến nhất trong việc thiết kế giao diện web đáp ứng trên di động.

CSS định nghĩa sẵn trong bootstrap 3

Chương này chúng ta sẽ đi tìm hiểu những css được định nghĩa sẵn trong BS và cách sử dụng chúng.

Cài đặt và sử dụng Bootstrap 3

Để sử dụng được bootstrap chúng ta cần cầu hình cài đặt đưa các file thư viện của bootstrap vào dự án web của chúng ta

Giới thiệu về bootstrap (BS)

Bootstrap là gì: bootstrap là  Html, css, js được xây dựng sẵn để sử dụng trong các dự án phát triển web, các trang web đáp ứng lại các kích thước màn hình hiển thị.a

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Tấn công ransomware cực lớn trên toàn cầu, tải về bản vá lỗi ngay

Cuộc tấn công vào NHS đã sử dụng một dạng ransomware có tên Wanacryptor và nhắm mục tiêu vào hàng nghìn tổ chức ở 74 quốc gia. Ransomware là một dạng tấn công mạng có liên quan đến việc các hacker nắm quyền kiểm soát máy tính hoặc thiết bị di động và yêu cầu đòi tiền chuộc. Bằng nhiều cách, những kẻ tấn công tải phần mềm độc hại vào thiết bị và mã hóa thông tin của nạn nhân.

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Kỹ thuật tìm kiếm và thay thế từ cơ bản đến nâng cao trong MS Office (Word)

Trong Word nói riêng, Office nói chung, có lẽ ai cũng biết chức năng tìm kiếm và thay thế nội dung văn bản, nhưng ngoài ra, còn nhiểu chức năng khác trong hộp thoại tìm kiếm và thay thế mà không phải ai cũng biết để sử dụng. Trong đó có tìm kiếm và thay thế định dạng, sử dụng các ký hiệu đại diện, các ký tự đặc biệt… 

Bài 6: Thủ thuật outlook 2010

Bài 6: Thủ thuật outlook 2010

Bài viết giới thiệu đến các bạn một số thủ thuật được dùng trong outlook 2010, để giúp công việc của các bạn được dễ dàng hơn.

Bài 5: Quản lý các thông tin trong  outlook 2010

Bài 5: Quản lý các thông tin trong outlook 2010

Bài viết giới thiệu về phương pháp quản lý thông tinn trong outlook 2010. Chúng ta hãy cùng tìm hiểu xem có điểm gì khác và nổi bật so với outlook 2007

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Bài 4: Sử dụng lịch làm việc một cách hiệu quả outlook 2010

Để công việc của đạt hiệu quả cao hơn, chúng ta hãy cùng nhau tìm hiểu cách sử dụng lịch làm việc một cách hiệu quả hơn trong outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài 3: Quản lý hộp thư của bạn về dung lượng và lưu trữ outlook 2010

Bài viết sau đây sẽ giới thiệu về mục quản lý hộp thư của bạn về dung lượng và lưu trữ trong microsoft outlook 2010.

Hàm SLEEP trong PHP

Hàm SLEEP trong PHP

Có những lúc trong công việc lập trình ta cần mã tạm dừng theo một thời gian định trước thì trong php có hỗ trợ hàm sleep để các bạn làm điều này.

Hàm Rand trong PHP

Hàm Rand trong PHP

Đôi lúc chúng ta lập trình cần đến những con số sinh ngẫu nhiên vào những công việc khách nhau hôm này mình xin giới thiệu với mọi người hàm sinh số ngẫu nhiên trong PHP

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Bài 9: Giới thiệu lập trình hướng đối tượng trong PHP (OOP)

Các bạn tự học PHP nên biết về lập trình hướng đối tượng trong PHP, kỹ thuật lập trình hỗ trợ công nghệ đối tượng

Bài 8: Hàm có sẵn thông dụng trong PHP

Bài 8: Hàm có sẵn thông dụng trong PHP

Hàm thông dụng trong php cần biết, các bạn mới bắt đầu lên nắm rõ ý nghĩa cấu trúc cách dùng những hàm này để bổ trợ kiến thức sau này

Bài 7: Hàm trong PHP

Bài 7: Hàm trong PHP

Hàm do người sử dụng định nghĩa cho phép bạn xử lý những tác vụ thường lặp đi lặp lại trong ứng dụng. cách khai báo, cú pháp của hàm trong php