Bootstrap

Đoạn đầu đài

Bootstrap được xây dựng trên một lưới 12 cột đáp ứng. Chúng tôi cũng đã bao gồm các bố cục có chiều rộng cố định và chiều rộng linh hoạt dựa trên hệ thống đó.

Hệ thống lưới 12 cột với một vòng xoắn đáp ứng

Lưới 940px mặc định

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
số 8
6
6
12

Hệ thống lưới mặc định được cung cấp như một phần của Bootstrap là lưới 12 cột rộng 940px .

Nó cũng có bốn biến thể đáp ứng cho các thiết bị và độ phân giải khác nhau: điện thoại, máy tính bảng dọc, ngang bàn và máy tính để bàn nhỏ và máy tính để bàn màn hình rộng lớn.

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Như được hiển thị ở đây, một bố cục cơ bản có thể được tạo với hai "cột", mỗi "cột" trải dài một số trong số 12 cột cơ bản mà chúng tôi đã xác định là một phần của hệ thống lưới của chúng tôi.


Các cột bù trừ

4
4 bù 4
3 bù 3
3 bù 3
8 bù 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Lồng các cột

Với hệ thống lưới tĩnh (không chất lỏng) trong Bootstrap, việc lồng vào nhau rất dễ dàng. Để lồng nội dung của bạn, chỉ cần thêm một .rowtập hợp các .span*cột mới trong một .span*cột hiện có.

Thí dụ

Cấp 1 của cột
Cấp độ 2
Cấp độ 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Cấp 1 của cột
  4.     <div class = "row" > 
  5.       <div class = "span6" > Cấp 2 </div> 
  6.       <div class = "span6" > Cấp 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Tùy chỉnh lưới

Biến đổi Giá trị mặc định Sự mô tả
@gridColumns 12 Số cột
@gridColumnWidth 60px Chiều rộng của mỗi cột
@gridGutterWidth 20px Khoảng trống giữa các cột
@siteWidth Tính tổng của tất cả các cột và máng xối Đếm số cột và rãnh để đặt chiều rộng của .container-fixed()hỗn hợp

Các biến trong LESS

Được tích hợp trong Bootstrap là một số ít các biến để tùy chỉnh hệ thống lưới 940px mặc định, được nêu ở trên. Tất cả các biến cho lưới được lưu trữ trong các biến.less.

Làm thế nào để tùy chỉnh

Sửa đổi lưới có nghĩa là thay đổi ba @grid*biến và biên dịch lại Bootstrap. Thay đổi các biến lưới trong biến.less và sử dụng một trong bốn cách được ghi lại để biên dịch lại . Nếu bạn đang thêm nhiều cột hơn, hãy đảm bảo thêm CSS cho những cột đó trong grid.less.

Luôn phản hồi

Tùy chỉnh lưới chỉ hoạt động ở mức mặc định, lưới 940px. Để duy trì các khía cạnh đáp ứng của Bootstrap, bạn cũng sẽ phải tùy chỉnh các lưới trong responsive.less.

Bố cục Các mẫu cơ bản để tạo trang web

Bố cục cố định

Bố cục mặc định và đơn giản, rộng 940px, ở giữa chỉ dành cho bất kỳ trang web hoặc trang nào được cung cấp bởi một trang duy nhất <div class="container">.

  1. <body>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Bố cục linh hoạt

<div class="container-fluid">cung cấp cấu trúc trang linh hoạt, chiều rộng tối thiểu và tối đa và thanh bên bên trái. Nó tuyệt vời cho các ứng dụng và tài liệu.

  1. <div class = "container-liquid" > 
  2.   <div class = "row-chất lỏng" > 
  3.     <div class = "span2" > 
  4.       <! - Nội dung thanh bên ->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <! - Nội dung phần thân ->
  8.     </div>
  9.   </div>
  10. </div>

Thiết kế đáp ứng Truy vấn phương tiện cho các thiết bị và độ phân giải khác nhau

Thiết bị đáp ứng

Thiết bị hỗ trợ

Bootstrap hỗ trợ một số truy vấn đa phương tiện để giúp làm cho các dự án của bạn phù hợp hơn trên các thiết bị và độ phân giải màn hình khác nhau. Đây là những gì được bao gồm:

Nhãn mác Chiều rộng bố cục Chiều rộng cột Chiều rộng máng xối
Điện thoại thông minh 480px trở xuống Cột linh hoạt, không có chiều rộng cố định
Máy tính bảng chân dung 480px đến 768px Cột linh hoạt, không có chiều rộng cố định
Máy tính bảng nằm ngang 768px đến 940px 44px 20px
Mặc định 940px trở lên 60px 20px
Màn hình lớn 1210px trở lên 70px 30px

Họ làm gì

Truy vấn phương tiện cho phép CSS tùy chỉnh dựa trên một số điều kiện — tỷ lệ, chiều rộng, loại hiển thị, v.v. — nhưng thường tập trung xung quanh min-widthvà max-width.

  • Sửa đổi chiều rộng của cột trong lưới của chúng tôi
  • Stack các phần tử thay vì float ở bất cứ nơi nào cần thiết
  • Thay đổi kích thước tiêu đề và văn bản để phù hợp hơn với các thiết bị

Sử dụng các truy vấn phương tiện

Bootstrap không tự động bao gồm các truy vấn phương tiện này, nhưng việc hiểu và thêm chúng rất dễ dàng và yêu cầu thiết lập tối thiểu. Bạn có một số tùy chọn để bao gồm các tính năng đáp ứng của Bootstrap:

  1. Sử dụng phiên bản đáp ứng đã biên dịch, bootstrap-responsive.css
  2. Thêm @import "responsive.less" và biên dịch lại Bootstrap
  3. Sửa đổi và biên dịch lại responsive.less với tư cách riêng biệt

Tại sao không chỉ bao gồm nó? Sự thật mà nói, không phải cái gì cũng cần đáp ứng. Thay vì khuyến khích các nhà phát triển loại bỏ tính năng này, chúng tôi nghĩ cách tốt nhất là nên kích hoạt nó.

  1.   // Điện thoại ngang trở xuống
  2.   @media ( tối đa - chiều rộng : 480px ) { ... }     
  3.  
  4.   // Điện thoại ngang sang máy tính bảng dọc
  5.   @media ( tối đa - chiều rộng : 768px ) { ... }     
  6.  
  7.   // Dọc máy tính bảng sang ngang và máy tính để bàn
  8.   @media ( tối thiểu - chiều rộng : 768px ) và ( tối đa - chiều rộng : 940px ) { ... }        
  9.  
  10.   // Màn hình lớn
  11.   @media ( tối thiểu - chiều rộng : 1200px ) { .. }