Bootstrap Grid - Thiết bị trung bình

Ví dụ về lưới Bootstrap: Thiết bị trung bình

Trong chương trước, chúng tôi đã trình bày một ví dụ về lưới với các lớp cho các thiết bị nhỏ. Chúng tôi đã sử dụng hai div (cột) và chúng tôi đã chia chúng 25% / 75%:

Nhưng trên các thiết bị trung bình, thiết kế có thể tốt hơn với mức phân chia 50% / 50%.

Mẹo: Thiết bị trung bình được định nghĩa là có chiều rộng màn hình từ 992 pixel đến 1199 pixel .

Đối với các thiết bị trung bình, chúng tôi sẽ sử dụng các .col-md-*lớp.

Bây giờ chúng tôi sẽ thêm chiều rộng cột cho các thiết bị trung bình:

Bây giờ Bootstrap sẽ nói "ở kích thước nhỏ, hãy xem các lớp có -sm- trong chúng và sử dụng chúng. Ở kích thước trung bình, hãy nhìn vào các lớp có -md- trong chúng và sử dụng chúng".

Ví dụ sau sẽ dẫn đến tỷ lệ phân chia 25% / 75% trên các thiết bị nhỏ và tỷ lệ phân chia 50% / 50% trên các thiết bị vừa (và lớn). Trên các thiết bị cực nhỏ, nó sẽ tự động xếp chồng (100%):

Chỉ sử dụng phương tiện

Trong ví dụ dưới đây, chúng tôi chỉ xác định .col-md-6lớp (không có .col-sm-*). Điều này có nghĩa là các thiết bị vừa và lớn sẽ phân chia 50% / 50% - bởi vì lớp học tăng lên. Tuy nhiên, đối với các thiết bị nhỏ, nó sẽ xếp chồng lên nhau theo chiều dọc (100% chiều rộng):

Chương tiếp theo sẽ hướng dẫn cách thêm phần trăm chia khác nhau cho các thiết bị lớn.