Đoạn đầu đài

Bootstrap được xây dựng trên lưới, bố cục và thành phần 12 cột đáp ứng.

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 nhất định yêu cầu sử dụng loại tài liệu HTML5. Bao gồm nó ở đầu tất cả các dự án của bạn.

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

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

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

  • Loại bỏ margintrên cơ thể
  • Đặt background-color: white;trênbody
  • Sử dụng các thuộc @baseFontFamilytính @baseFontSize@baseLineHeightlàm cơ sở đánh máy 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

Những phong cách này có thể được tìm thấy trong giàn giáo.less .

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

Với Bootstrap 2, khối thiết lập lại cũ đã bị loại bỏ để thay thế cho Normalize.css , một dự án của Nicolas GallagherJonathan Neal cũng cung cấp năng lượng cho HTML5 Boilerplate . Trong khi chúng tôi sử dụng nhiều Normalize trong reset.less của mình , chúng tôi đã loại bỏ một số phần tử dành riêng cho Bootstrap.

Ví dụ về lưới trực tiếp

Hệ thống lưới Bootstrap mặc định sử dụng 12 cột , tạo ra một vùng chứa rộng 940px mà không cần bật các tính năng đáp ứng . Với tệp CSS đáp ứng được thêm vào, lưới sẽ thích ứng với chiều rộng 724px và 1170px tùy thuộc vào chế độ xem của bạn. Bên dưới khung nhìn 767px, các cột trở nên linh hoạt và xếp chồng lên nhau theo chiều dọc.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML lưới cơ bản

Để có bố cục hai cột đơn giản, hãy tạo một .rowvà thêm số lượng .span*cột thích hợp. Vì đây là lưới 12 cột, mỗi cột .span*trải dài một số trong số 12 cột đó và phải luôn cộng tối đa 12 cho mỗi hàng (hoặc số cột trong cột chính).

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

Với ví dụ này, chúng tôi có .span4.span8, tạo ra tổng số 12 cột và một hàng hoàn chỉnh.

Các cột bù trừ

Di chuyển các cột sang bên phải bằng cách sử dụng .offset*các lớp. Mỗi lớp tăng lề trái của một cột bằng cả một cột. Ví dụ: .offset4di chuyển .span4qua bốn cột.

4
3 bù 2
3 bù 1
3 bù 2
6 bù 3
  1. <div class = "row" >
  2. <div class = "span4" > ... </div>
  3. <div class = "span3 offset2" > ... </div>
  4. </div>

Lồng các cột

Để lồng nội dung của bạn với lưới mặc định, hãy thêm một .rowtập hợp các .span*cột mới trong một .span*cột hiện có. 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ột gốc của nó.

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

Ví dụ về lưới chất lỏng trực tiếp

Hệ thống lưới linh hoạt sử dụng phần trăm thay vì pixel cho chiều rộng cột. Nó có khả năng đá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.

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

HTML lưới linh hoạt cơ bản

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

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

Bù đắp chất lỏng

Hoạt động tương tự như hệ thống lưới cố định bù trừ: thêm .offset*vào cột nào để bù vào nhiều cột đó.

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

Chất lỏng làm tổ

Lưới linh hoạt sử dụng lồng nhau theo cách khác nhau: mỗi cấp cột lồng nhau nên thêm tối đa 12 cột. Điều này là do lưới linh hoạt sử dụng tỷ lệ phần trăm, không phải pixel, để thiết lập chiều rộng.

Chất lỏng 12
Chất lỏng 6
Chất lỏng 6
Chất lỏng 6
Chất lỏng 6
  1. <div class = "row-chất lỏng" >
  2. <div class = "span12" >
  3. Chất lỏng 12
  4. <div class = "row-chất lỏng" >
  5. <div class = "span6" >
  6. Chất lỏng 6
  7. <div class = "row-chất lỏng" >
  8. <div class = "span6" > Chất lỏng 6 </div>
  9. <div class = "span6" > Chất lỏng 6 </div>
  10. </div>
  11. </div>
  12. <div class = "span6" > Chất lỏng 6 </div>
  13. </div>
  14. </div>
  15. </div>

Bố cục cố định

Cung cấp bố cục có chiều rộng cố định chung (và có thể đáp ứng tùy chọn) chỉ với <div class="container">yêu cầu.

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

Bố cục linh hoạt

Tạo một trang hai cột linh hoạt với <div class="container-fluid">—lớn 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>

Bật các tính năng đáp ứng

Bật CSS đáp ứng trong dự án của bạn bằng cách bao gồm thẻ meta thích hợp và biểu định kiểu bổ sung trong <head>tài liệu của bạn. Nếu bạn đã biên dịch Bootstrap từ trang Tùy chỉnh, bạn chỉ cần bao gồm thẻ meta.

  1. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >
  2. <link href = "asset / css / bootstrap-responsive.css" rel = "stylesheet" >

Đứng lên!Bootstrap không bao gồm các tính năng đáp ứng theo mặc định tại thời điểm này vì không phải mọi thứ đều cần phải đá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à kích hoạt nó khi cần thiết.

Giới thiệu về Bootstrap đáp ứng

Thiết bị đáp ứng

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-widthmax-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
Màn hình lớn 1200px trở lên 70px 30px
Mặc định 980px trở lên 60px 20px
Máy tính bảng chân dung 768px trở lên 42px 20px
Điện thoại đế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
Những cái điện thoại 480px trở xuống Cột linh hoạt, không có chiều rộng cố định
  1. / * Máy tính để bàn lớn * /
  2. @media ( tối thiểu - chiều rộng : 1200px ) { ... }
  3.  
  4. / * Dọc máy tính bảng sang ngang và máy tính để bàn * /
  5. @media ( tối thiểu - chiều rộng : 768px ) ( tối đa - chiều rộng : 979px ) { ... }
  6.  
  7. / * Điện thoại ngang sang máy tính bảng dọc * /
  8. @media ( tối đa - chiều rộng : 767px ) { ... }
  9.  
  10. / * Điện thoại ngang trở xuống * /
  11. @media ( tối đa - chiều rộng : 480px ) { ... }

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

Để 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 này để hiển thị và ẩn nội dung theo thiết bị. Dưới đây là bảng các lớp có sẵn 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ại767px trở xuống Máy tính bảng979px đến 768px Máy tính để bànMặc định
.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

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ị. Các tiện ích đáp ứng không được sử dụng với các bảng và do đó không được hỗ trợ.

Trường hợp kiểm tra tiện ích đáp ứng

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