Kích thước văn bản bootstrap

Nắm bắt đượ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 đối với việc phát triển web tốt hơn, nhanh hơn và mạnh hơn

loại tài liệu HTML5

Bootstrap sử dụng các phần tử HTML và các thuộc tính CSS, những yêu cầu thứ nhất 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 đã bổ sung thêm các phong cách thân thiện với các thiết bị di động như một phần chính của khung. 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 tùy chọn kiểu dáng cho các thiết bị, chúng tôi đã gắn trực tiếp vào lõi. Các kiểu dành cho thiết bị di động xuyên suốt trong cả thư viện thay vì nằm trong các tệp riêng lẻ

Để đảm bảo việc kết xuất 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 chế độ xem meta của thẻ. 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 trang web, vì vậy hãy cân nhắc trước khi sử dụng

Bootstrap thiết lập các kiểu chung cho công việc hiển thị, kiểu chữ 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, và 22 làm cơ sở của kiểu chữ
• Thiết lập màu sắc chung của các 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 phong cách này nằm trong tập tin 25

bình thường hóa. css

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

Hộp đựng

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. Vùng chứa thiết lập thuộc tính 27 trên tất cả các kích thước được áp dụng cho truy vấn phương tiện để 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 vùng chứa mặc định không thể bị lồng

Use class 26 for a container responsive có chiều rộng cố định

...

Sử dụng lớp 30 cho vùng chứa có chiều rộng tối đa, bằng chiều rộng khung nhìn của bạn

...

Bootstrap bao gồm một hệ thống lưới đáp ứng, 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 thiết bị. Nó bao gồm để thuận tiện cho việc xây dựng cục bộ, cùng với đó

Giới thiệu

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

• Các hàng được đặt bên trong một 26 (chiều rộng cố định) hoặc 30 (chiều rộng đầy đủ) để căn chỉnh và thiết lập phần đệm một cách thích hợp
• Sử dụng các hàng để tạo ra 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ử trực tiếp của các hàng
• Các lớp được định nghĩa trước như 33 và 34 luôn sẵn sàng để xây dựng các mạng lưới bố cục một cách nhanh nhất. Một số ít mixin cũng được sử dụng để tạo ra các bố cục ngữ nghĩa
• Các cột được tạo nên các máng xối (khoảng trắng nằm giữa các cột nội dung) bằng 28. Giá trị đệm đó 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ị biên â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ộ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 cục bộ với 3 cột có độ rộng bằng nhau, bạn hãy sử dụng 3 class 34

Vui lòng xem các ví dụ để biết cách áp dụng các nguyên tắc này vào mã của bạn

Chúng tôi sử dụng các truy vấn phương tiện sau trong các tập tin Ít hơn của chúng tôi để tạo ra các điểm nổi bật 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 thiết bị, chúng tôi sẽ mở rộng các truy vấn phương tiện này bằng cách bổ sung các 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

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

Thiết bị cực nhỏ Điện thoại ( chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa liên kết trên thẻ 62, hãy sử dụng Javascript

Use the instance context

Mặc dù các lớp chỉ được sử dụng trên các phần tử 62và nhưng chỉ có các phần tử được hỗ trợ bên trong các thành phần điều hướng như điều hướng và thanh điều hướng

Vui lòng sử dụng các lớp của nút trên một trong các loại thẻ 62, , hoặc 62

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

1

63

Tính tương thích với các trình duyệt

Chúng tôi đề xuất sử dụng bất kỳ phần tử nào khi có thể để báo cáo tính năng tương thích với các trình duyệt

Ngoài ra, trình duyệt Firefox có một lỗi dừng thiết lập 65 trên các nút định dạng 62. Điều này sẽ làm cho các nút có chiều cao không chính xác khi hiển thị trên Firefox

Ảnh phản hồi

Hình ảnh trong Bootstrap 3 có thể hiển thị tương thích với các thiết bị di động bằng cách sử dụng lớp 66. Lớp này sẽ thiết lập 67 và 68 lên ảnh để chúng có thể co giãn theo Tỷ lệ tương ứng với phần tử cha của chúng

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

2

Các định dạng của ảnh

Thêm các lớp vào thẻ 69 để tạo kiểu cho ảnh một cách dễ dàng

Tính tương thích với các trình duyệt

Hãy nhớ rằng trình duyệt Internet Explorer 8 không hỗ trợ góc bo tròn

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

3

Các sắc màu theo ngữ cảnh

Bootstrap có một tập hợp các lớp tiện ích hỗ trợ người dùng trong quá trình truyền tải ý nghĩa bằng màu sắc. Những lớp này cũng có thể áp dụng cho các liên kết và cũng có tác dụng làm tối màu các liên kết khi di chuột qua như kiểu mặc định của các liên kết

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh

Nullam id dolor id nibh ultricies xe cộ ut id elit

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Maecenas sed diam eget risus varius blandit sit amet non magna

Etiam porta sem malesuada magna mollis euismo

Donec ullamcorper nulla non metus auctor fringilla

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

4

Xử lý với đặc tính hiệu

Đôi khi các lớp này không thể áp dụng đặc tính hiệu của bộ chọn khác. Trong nhiều trường hợp, có một giải pháp thay thế là văn bản của bạn được bọc bằng một thẻ 62 gắn với một trong các lớp này

Các màu nền theo ngữ cảnh

Tương tự như các lớp dành cho màu sắc của văn bản theo ngữ cảnh, bạn cũng dễ dàng thiết lập màu nền của bất kỳ phần tử nào bằng các lớp ngôn ngữ cảnh cho màu nền. Các phần tử 62 sẽ bị tối màu khi di chuột vào giống như các lớp áp dụng với văn bản

Nullam id dolor id nibh ultricies xe cộ ut id elit

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Maecenas sed diam eget risus varius blandit sit amet non magna

Etiam porta sem malesuada magna mollis euismo

Donec ullamcorper nulla non metus auctor fringilla

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

5

Xử lý với đặc tính hiệu

Đôi khi các lớp này không thể áp dụng đặc tính hiệu của bộ chọn khác. Trong nhiều trường hợp, có một giải pháp thay thế là bọc văn bản của bạn bằng một thẻ

mount with one in this class

Icon "đóng cửa"

Sử dụng biểu tượng "Đóng" chung cho việc xóa (hoặc đóng lại) các hộp phương thức hoặc các thông báo

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

6

dấu mũ

Sử dụng dấu mũ để xác định chức năng xuống dưới và hướng xuống dưới. Lưu ý rằng caret default sẽ tự động thay đổi chiều trong

Trôi nổi

Bạn có thể áp dụng hiệu ứng float vào một phần tử (trái hoặc phải) bằng cách sử dụng một lớp tương ứng. 72 được thêm vào để tránh các vấn đề liên quan đến đặc tính hiệu. Các lớp cũng có thể được sử dụng như các mixin

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

8

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-8

.col-md-4

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

9

Không sử dụng cho thanh điều hướng

Để điều chỉnh các thành phần trong thanh điều hướng với các lớp tiện ích, hãy sử dụng 73 hoặc 74. to know more chi tiết

Căn giữa các khối nội dung

Thiết lập thuộc tính 75 vào một phần tử và căn cứ giữa bằng 76. Tiện ích này có thể được sử dụng bằng mixin hoặc class

...

0

...

1

Clearfix

Xóa thuộc tính 77 trên một phần tử bất kỳ bằng cách sử dụng lớp 50, được lấy từ micro clearfix của Nicolas Gallagher. Lớp này cũng có thể được sử dụng như một mixin

...

2

...

3

Ẩn và hiện nội dung

Bạn có thể làm cho một phần tử ẩn đi hoặc hiện ra (hỗ trợ cả thiết bị đọc màn hình) bằng cách sử dụng các lớp 79 và 80. Những lớp này sử dụng 72 để tránh xung đột về tính đặc hiệu, giống như. Chúng chỉ được áp dụng lên các khối định dạng phần tử (hiển thị. block) và cũng có thể sử dụng như các mixin

Lớp 82 thi thoảng không có tác dụng trên các thiết bị đọc màn hình, do đó lớp này đã bị loại bỏ ở phiên bản 3. 0. 1 and are instead by 80 and 33

Ngoài ra, lớp 85 được sử dụng để ẩn/hiện một phần tử, điều đó có nghĩa là thuộc tính hiển thị của nó không bị thay đổi và có thể vẫn ảnh hưởng đến luồng của tài liệu

...

4

...

5

Nội dung thiết bị đọc màn hình

Bạn có thể ẩn một phần tử bằng lớp 33 trên tất cả các thiết bị ngoại trừ màn hình đọc. Kết hợp lớp 33 cùng với lớp 88 để hiển thị phần tử một lần nữa khi được lấy nét (không giới hạn như đối với người dùng chỉ sử dụng bàn phím). Bạn nên tham khảo. Lớp này cũng được sử dụng như mixin

...

6

...

7

Replace image

Sử dụng lớp 89 hoặc mixin để thay thế nội dung văn bản của một phần tử bằng một hình nền

...

8

...

9

Đối với nhu cầu phát triển các ứng dụng thân thiện với thiết bị di động, chúng tôi sử dụng những lớp tiện ích này để ẩn và hiển thị nội dung trên các thiết bị khác nhau thông qua truy vấn phương tiện. Ngoài ra, các lớp tiện ích dành cho việc đóng/mở nội dung để vào cũng được thêm vào

Hãy cố gắng sử dụng những lớp này theo một cách giới hạn và tránh việc tạo ra quá nhiều phiên bản hoàn toàn khác nhau trên cùng một trang. Thay vì thế, hãy sử dụng chúng để bổ sung cho công việc hiển thị trên mỗi thiết bị. Các tiện ích responsive hiện chỉ có tác dụng đối với các khối định dạng phần tử (hiển thị. chặn hoặc hiển thị. inline-block) and table. Việc sử dụng các phần tử cùng dòng (hiển thị. nội tuyến) và các phần tử nằm trong bảng (, ,. ) sẽ không được hỗ trợ đáp ứng

Các lớp có sẵn

Sử dụng đơn lẻ hoặc kết hợp các lớp có sẵn để ẩn/hiện nội dung tương ứng với các kích thước của khung nhìn

Extra small devices Phones (