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 đó.

Phong cách toàn cầu để đặt lại CSS, kiểu chữ và liên kết

Yêu cầu loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS yêu cầu sử dụng loại tài liệu HTML5. Đảm bảo đưa nó vào đầu mỗi trang Bootstrapped trong dự án của bạn.

  1. <! DOCTYPE html>
  2. <html lang = "vi"  >
  3.   ...
  4. </html>

Kiểu chữ và liên kết

Trong tệp giàn giáo.less , chúng tôi thiết lập các kiểu liên kết, kiểu chữ và hiển thị toàn cục cơ bản. Cụ thể, chúng tôi:

  • Xóa lề trên cơ thể
  • Đặt background-color: white;trênbody
  • Sử dụng các thuộc @baseFontFamilytính @baseFontSizevà @baseLineHeightlàm cơ sở kiểu chữ của chúng tôi
  • Đặt màu liên kết toàn cầu qua @linkColorvà chỉ áp dụng gạch dưới liên kết trên:hover

Đặt lại thông qua Bình thường hóa

Kể từ Bootstrap 2, thiết lập lại CSS truyền thống đã phát triển để sử dụng các phần tử từ Normalize.css , một dự án của Nicolas Gallagher cũng cấp nguồn cho HTML5 Boilerplate .

Bạn vẫn có thể tìm thấy thiết lập lại mới trong reset.less , nhưng với nhiều phần tử đã bị xóa để ngắn gọn và chính xác.

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

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, chân dung máy tính bảng, ngang máy tính bảng 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ác hàng lồng nhau phải bao gồm một tập hợp các cột cộng lại với số lượng các cột chính của nó. Ví dụ: hai .span3cột lồng nhau nên được đặt trong a .span6.

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>

Hệ thống lưới linh hoạt 12 cột dựa trên phần trăm đáp ứng

Cột linh hoạt

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

Phần trăm, không phải pixel

Hệ thống lưới linh hoạt sử dụng phần trăm cho chiều rộng cột thay vì pixel cố định. Nó cũng có các biến thể đáp ứng tương tự như hệ thống lưới cố định của chúng tôi, đảm bảo tỷ lệ thích hợp cho các thiết bị và độ phân giải màn hình chính.

Hàng linh hoạt

Làm cho bất kỳ hàng nào trở nên linh hoạt đơn giản bằng cách thay đổi .rowthành .row-fluid. Các cột giữ nguyên chính xác, giúp bạn dễ dàng lật giữa các bố cục cố định và linh hoạt.

Đánh dấu

  1. <div class = "row-chất lỏng" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Chất lỏng làm tổ

Việc lồng với lưới chất lỏng có một chút khác biệt: số lượng cột lồng nhau không cần phải khớp với cột gốc. Thay vào đó, các cột của bạn được đặt lại ở mỗi cấp vì mỗi hàng chiếm 100% cột mẹ.

Chất lỏng 12
Chất lỏng 6
Chất lỏng 6 
  1. <div class = "row-chất lỏng" > 
  2.   <div class = "span12" > 
  3.     Cấp 1 của cột
  4.     <div class = "row-chất lỏng" > 
  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

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 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, độ 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

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 một cách có trách nhiệm và chỉ như một bước khởi đầu cho khán giả trên thiết bị di động của bạn. Đối với các dự án lớn hơn, hãy xem xét các cơ sở mã chuyên dụng chứ không phải các lớp truy vấn phương tiện.

Thiết bị hỗ trợ

Bootstrap hỗ trợ một số truy vấn phương tiện trong một tệp duy nhất để 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
Điện thoại thông minh đến máy tính bảng 767px 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 768px trở lên 42px 20px
Mặc định 980px trở lên 60px 20px
Màn hình lớn 1200px trở lên 70px 30px

Yêu cầu thẻ meta

Để đảm bảo thiết bị hiển thị đúng các trang đáp ứng, hãy bao gồm thẻ meta chế độ xem.

  1. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >

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 thành một tệp 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 : 767px ) { ... }     
  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 : 979px ) { ... }        
  9.  
  10.   // Màn hình lớn
  11.   @media ( tối thiểu - chiều rộng : 1200px ) { ... }

Các lớp tiện ích đáp ứng

Họ là ai

Để phát triển thân thiện với thiết bị di động nhanh hơn, hãy sử dụng các lớp tiện ích cơ bản này để hiển thị và ẩn nội dung theo thiết bị.

Khi nào sử dụng

Sử dụng trên cơ sở hạn chế và tránh tạo các phiên bản hoàn toàn khác nhau của cùng một trang web. Thay vào đó, hãy sử dụng chúng để bổ sung cho bản trình bày của mỗi thiết bị.

Ví dụ: bạn có thể hiển thị một <select>phần tử cho điều hướng trên bố cục di động, nhưng không hiển thị trên máy tính bảng hoặc máy tính để bàn.

Các lớp hỗ trợ

Dưới đây là bảng các lớp mà chúng tôi hỗ trợ và ảnh hưởng của chúng đối với bố cục truy vấn phương tiện nhất định (được gắn nhãn theo thiết bị). Chúng có thể được tìm thấy trong responsive.less.

Lớp Những cái điện thoại480px trở xuống Máy tính bảng767px trở xuống Máy tính để bàn768px trở lên
.visible-phone Dễ thấy
.visible-tablet Dễ thấy
.visible-desktop Dễ thấy
.hidden-phone Dễ thấy Dễ thấy
.hidden-tablet Dễ thấy Dễ thấy
.hidden-desktop Dễ thấy Dễ thấy

Trường hợp thử nghiệm

Thay đổi kích thước trình duyệt của bạn hoặc tải trên các thiết bị khác nhau để kiểm tra các lớp trên.

Hiển thị trên ...

Dấu kiểm màu xanh lá cây cho biết rằng lớp đó được hiển thị trong khung nhìn hiện tại của bạn.

  • Điện thoại✔ Điện thoại
  • Máy tính bảng✔ Máy tính bảng
  • Máy tính để bàn✔ Máy tính để bàn

Ẩn trên ...

Tại đây, các dấu kiểm màu xanh lá cây cho biết rằng lớp đó bị ẩn trong khung nhìn hiện tại của bạn.

  • Điện thoại✔ Điện thoại
  • Máy tính bảng✔ Máy tính bảng
  • Máy tính để bàn✔ Máy tính để bàn