Bố cục grid system của bootstrap 4 sử dụng kỹ thuật css nào

Nắm được những phần chính trong kết cấu của Bootstrap, bao gồm cả cách tiếp cận của chúng tôi tới việc phát triển web tốt hơn, nhanh hơn và mạnh hơn.

HTML5 doctype

Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những thứ yêu cầu phải sử dụng HTML5 doctype. Vì thế, hãy thêm nó vào dòng đầu tiên trong các dự án của bạn.

  ...

Ưu tiên các thiết bị di động

Với Bootstrap 2, chúng tôi đã thêm các style thân thiện với các thiết bị di động như một phần chính của framework. Tuy nhiên trong Bootstrap 3, chúng tôi đã viết lại dự án để có thể tương thích với các thiết bị di động ngay từ khi bắt đầu. Thay vì phải thêm các style tùy chọn cho các thiết bị, chúng tôi đã gắn trực tiếp vào core. Các style dành cho thiết bị di động nằm xuyên suốt trong cả thư viện thay vì nằm trong các tập tin riêng lẻ.

Để đảm bảo việc render và "chạm phóng to", hãy thêm thẻ meta viewport vào của bạn.

Bạn có thể vô hiệu hóa tính năng phóng to trên các thiết bị di động bằng cách thêm

17 vào thẻ meta viewport. Thuộc tính này sẽ vô hiệu hóa tính năng phóng to, điều đó có nghĩa là người dùng chỉ có thể cuộn trang, tạo cảm giác như người dùng đang sử dụng một ứng dụng điện thoại thuần túy. Nhìn chung, chúng tôi không đề xuất sử dụng thuộc tính này trên tất cả các site, vì vậy hãy cân nhắc trước khi sử dụng.

Bootstrap thiết lập các style chung cho việc hiển thị, typography và các liên kết. Cụ thể, chúng tôi:

• Thiết lập
  18 trên thẻ
  19
• Sử dụng các thuộc tính
  20,
  21, and
  22 làm cơ sở của typography
• Thiết lập màu sắc chung của liên kết bằng thuộc tính
  23 và áp dụng hiệu ứng gạch dưới khi
  24

Những style này nằm trong tập tin

25.

Normalize.css

Để cải thiện việc render đối với các trình duyệt, chúng tôi sử dụng Normalize.css, một dự án được thực hiện bởi Nicolas Gallagher và Jonathan Neal.

Containers

Dễ dàng căn giữa nội dung của một trang bằng cách bọc nội dung của nó bên trong một

26. Container thiết lập thuộc tính

27 trên tất cả các kích thước được áp dụng vào media query để tương thích với hệ thống lưới của chúng tôi. Lưu ý rằng, do

28 và chiều rộng cố định nên container mặc định không thể bị lồng.

Sử dụng class

26 cho một container responsive có chiều rộng cố định.

  ...


  

Sử dụng class

30 cho container có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn.

  ...

Bootstrap chứa một hệ thống lưới responsive, tương thích với hầu hết các thiết bị di động. Hệ thống này được chia thành 12 cột tương thích với mọi kích thước khung nhìn của các thiết bị. Nó bao gồm các class được định nghĩa trước để thuận tiện cho việc xây dựng bố cục, cùng với đó một bộ các mixin để tạo ra nhiều bố cục theo ngữ nghĩa..

Giới thiệu

Các hệ thống lưới được sử dụng để tạo ra bố cực cho các trang bằng các chuỗi hàng và cột chứa nội dung của bạn. Và dưới đây là cách hệ thống lưới của Bootstrap hoạt động:

• Các hàng được đặt bên trong một
  26 [fixed-width] hoặc
  30 [full-width] để căn chỉnh và thiết lập padding một cách thích hợp.
• Sử dụng các hàng để tạo ra nhóm các cột theo hàng ngang.
• Nội dung cần phải được đặt trong các cột, và chỉ có duy nhất các cột là phần tử con trực tiếp của các hàng.
• Các class được định nghĩa trước như
  33 và
  34 luôn sẵn có để dựng lên các bố cục lưới một cách nhanh nhất. Một số ít các mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa.
• Các cột tạo nên các gutter [khoảng trắng nằm giữa nội dung cột] bằng
  28. Giá trị padding đó là độ lệch đối với cột đầu tiên và cột cuối cùng trong các hàng do giá trị margin âm trên các
  33.
• Các cột của lưới được tạo ra bằng cách chỉ định số các cột mà bạn muốn sử dụng trong tổng số 12 cột. Ví dụ, để tạo ra một bố cục với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class
  34.

Hãy xem các ví dụ để biết cách áp dụng các nguyên tắc này vào code của bạn.

Chúng tôi sử dụng các media query sau trong các tập tin Less của chúng tôi để tạo ra các điểm mốc chính trong hệ thống lưới của chúng tôi.

/* Extra small devices [phones, less than 768px] */

/* No media query since this is the default in Bootstrap */



/* Small devices [tablets, 768px and up] */

@media [min-width: @screen-sm-min] { ... }



/* Medium devices [desktops, 992px and up] */

@media [min-width: @screen-md-min] { ... }



/* Large devices [large desktops, 1200px and up] */

@media [min-width: @screen-lg-min] { ... }

Để tương thích với một số ít các thiết bị, thi thoảng chúng tôi mở rộng các media query này bằng cách thêm thuộc tính

38.

@media [max-width: @screen-xs-max] { ... }

@media [min-width: @screen-sm-min] and [max-width: @screen-sm-max] { ... }

@media [min-width: @screen-md-min] and [max-width: @screen-md-max] { ... }

@media [min-width: @screen-lg-min] { ... }

Các tùy chọn của lưới

Hãy xem hệ thống lưới của Bootstrap hoạt động như thế nào trên các thiết bị trong bảng sau.

Extra small devices Phones [