Giàn giáo · Bootstrap bằng tiếng việ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 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.

<! DOCTYPE html>
<html lang = "en" > 
  ...
</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 @baseFontSizevà @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 Gallagher và Jonathan 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.

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).

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Với ví dụ này, chúng tôi có .span4và .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.

3 bù 2

3 bù 1

3 bù 2

6 bù 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</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

<div class = "row" > 
  <div class = "span9" > 
    Cột cấp 1
    <div class = "row" > 
      <div class = "span6" > Cấp 2 </div> 
      <div class = "span3" > Cấp 2 </div> 
    </div>
  </div>
</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.

số 8

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.

<div class = "row-chất lỏng" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</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 bù 4

3 bù 3

6 bù 6

<div class = "row-chất lỏng" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</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

<div class = "row-chất lỏng" > 
  <div class = "span12" > 
    Chất lỏng 12
    <div class = "row-chất lỏng" > 
      <div class = "span6" > 
        Chất lỏng 6
        <div class = "row-chất lỏng" > 
          <div class = "span6" > Chất lỏng 6 </div> 
          <div class = "span6" > Chất lỏng 6 </div> 
        </div>
      </div>
      <div class = "span6" > Chất lỏng 6 </div> 
    </div>
  </div>
</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.

<body>
  <div class = "container" > 
    ...
  </div>
</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.

<div class = "container-liquid" > 
  <div class = "row-chất lỏng" > 
    <div class = "span2" > 
      <! - Nội dung thanh bên ->
    </div>
    <div class = "span10" > 
      <! - Nội dung phần thân ->
    </div>
  </div>
</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.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0" >  
<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

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
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

/ * Máy tính để bàn lớn * /
@media ( tối thiểu - chiều rộng : 1200px ) { ... }     
 
/ * Dọc máy tính bảng sang ngang và máy tính để bàn * /
@media ( tối thiểu - chiều rộng : 768px ) và ( tối đa - chiều rộng : 979px ) { ... }        
 
/ * Điện thoại ngang sang máy tính bảng dọc * /
@media ( tối đa - chiều rộng : 767px ) { ... }     
 
/ * Điện thoại ngang trở xuống * /
@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	Ẩn giấu	Ẩn giấu
`.visible-tablet`	Ẩn giấu	Dễ thấy	Ẩn giấu
`.visible-desktop`	Ẩn giấu	Ẩn giấu	Dễ thấy
`.hidden-phone`	Ẩn giấu	Dễ thấy	Dễ thấy
`.hidden-tablet`	Dễ thấy	Ẩn giấu	Dễ thấy
`.hidden-desktop`	Dễ thấy	Dễ thấy	Ẩn giấu

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

Đoạn đầu đài

Thiết lập toàn cầu