Tham khảo các lớp trình trợ giúp CSS Bootstrap
Chữ
Thêm ý nghĩa thông qua màu sắc văn bản với các lớp bên dưới. Các liên kết sẽ tối đi khi di chuột:
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | Try it |
| .text-primary | Text styled with class "text-primary" | Try it |
| .text-success | Text styled with class "text-success" | Try it |
| .text-info | Text styled with class "text-info" | Try it |
| .text-warning | Text styled with class "text-warning" | Try it |
| .text-danger | Text styled with class "text-danger" | Try it |
Lý lịch
Thêm ý nghĩa thông qua màu nền với các lớp bên dưới. Các liên kết sẽ tối đi khi di chuột giống như các lớp văn bản:
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | Try it |
| .bg-success | Table cell is styled with class "bg-success" | Try it |
| .bg-info | Table cell is styled with class "bg-info" | Try it |
| .bg-warning | Table cell is styled with class "bg-warning" | Try it |
| .bg-danger | Table cell is styled with class "bg-danger" | Try it |
Khác
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | Try it |
| .pull-right | Floats an element to the right | Try it |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | Try it |
| .clearfix | Clears floats | Try it |
| .show | Forces an element to be shown (display:block) | Try it |
| .hidden | Forces an element to be hidden (display:none) | Try it |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | Try it |
| .sr-only | Hides an element to all devices except screen readers | Try it |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | Try it |
| .text-hide | Helps replace an element's text content with a background image | Try it |
| .close | Indicates a close icon | Try it |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) | Try it |
Tiện ích đáp ứng
Các lớp này được sử dụng để hiển thị và/hoặc ẩn nội dung theo thiết bị thông qua truy vấn phương tiện.
Sử dụng một hoặc kết hợp các lớp có sẵn để chuyển đổi nội dung qua các điểm dừng của khung nhìn:
| Các lớp học | Thiết bị cực nhỏ Điện thoại (<768px) | Thiết bị nhỏ Máy tính bảng ( ≥768px) | Thiết bị trung bình Máy tính để bàn ( ≥992px) | Thiết bị lớn Máy tính để bàn ( ≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Dễ thấy | Ẩn giấu | Ẩn giấu | Ẩn giấu |
| .visible-sm-* | Ẩn giấu | Dễ thấy | Ẩn giấu | Ẩn giấu |
| .visible-md-* | Ẩn giấu | Ẩn giấu | Dễ thấy | Ẩn giấu |
| .visible-lg-* | Ẩn giấu | Ẩn giấu | Ẩn giấu | Dễ thấy |
| .hidden-xs | Ẩn giấu | Dễ thấy | Dễ thấy | Dễ thấy |
| .hidden-sm | Dễ thấy | Ẩn giấu | Dễ thấy | Dễ thấy |
| .hidden-md | Dễ thấy | Dễ thấy | Ẩn giấu | Dễ thấy |
| .hidden-lg | Dễ thấy | Dễ thấy | Dễ thấy | Ẩn giấu |
Ẩn giấu
Ẩn các thành phần tùy thuộc vào kích thước màn hình:
Ví dụ
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>Kết quả:
Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
Kể từ v3.2.0, các lớp .visible-*-* có ba biến thể, một biến thể cho mỗi giá trị thuộc tính display CSS:
| Nhóm lớp học | hiển thị CSS |
|---|---|
| khối hiển thị-*- | hiển thị: khối; |
| .visible-*-inline | Hiển thị nội dòng; |
| .visible-*-inline-block | hiển thị: khối nội tuyến; |
Ví dụ: đối với màn hình nhỏ ( sm ), các lớp .visible-*-* có sẵn là: .visible-sm-block , .visible-sm-inline và .visible-sm-inline-block .
Các lớp .visible-xs , .visible-sm , .visible-md và .visible-lg không được dùng nữa kể từ v3.2.0 .
Ví dụ
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>Kết quả:
Example
Resize this page to see how the text below changes:
