Tham khảo lớp 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 khi di chuột:
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | |
| .text-primary | Text styled with class "text-primary" | |
| .text-success | Text styled with class "text-success" | |
| .text-info | Text styled with class "text-info" | |
| .text-warning | Text styled with class "text-warning" | |
| .text-danger | Text styled with class "text-danger" |
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 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" | |
| .bg-success | Table cell is styled with class "bg-success" | |
| .bg-info | Table cell is styled with class "bg-info" | |
| .bg-warning | Table cell is styled with class "bg-warning" | |
| .bg-danger | Table cell is styled with class "bg-danger" |
Khác
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | |
| .pull-right | Floats an element to the right | |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | |
| .clearfix | Clears floats | |
| .show | Forces an element to be shown (display:block) | |
| .hidden | Forces an element to be hidden (display:none) | |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | |
| .sr-only | Hides an element to all devices except screen readers | |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | |
| .text-hide | Helps replace an element's text content with a background image | |
| .close | Indicates a close icon | |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) |
Các 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 các 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 giữa các điểm ngắt chế độ xem:
| Các lớp học | Thiết bị cực nhỏ Điện thoại (<768px) | Máy tính bảng cho thiết bị nhỏ (≥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- * | Có thể nhìn thấy | Ẩn giấu | Ẩn giấu | Ẩn giấu |
| .visible-sm- * | Ẩn giấu | Có thể nhìn thấy | Ẩn giấu | Ẩn giấu |
| .visible-md- * | Ẩn giấu | Ẩn giấu | Có thể nhìn thấy | Ẩn giấu |
| .visible-lg- * | Ẩn giấu | Ẩn giấu | Ẩn giấu | Có thể nhìn thấy |
| .hides-xs | Ẩn giấu | Có thể nhìn thấy | Có thể nhìn thấy | Có thể nhìn thấy |
| .hides-sm | Có thể nhìn thấy | Ẩn giấu | Có thể nhìn thấy | Có thể nhìn thấy |
| .hides-md | Có thể nhìn thấy | Có thể nhìn thấy | Ẩn giấu | Có thể nhìn thấy |
| .hides-lg | Có thể nhìn thấy | Có thể nhìn thấy | Có thể nhìn thấy | Ẩn giấu |
Ẩn giấu
Ẩn các phần tử tùy thuộc vào kích thước màn hình:
Thí 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 .visible-*-*lớp có ba biến thể, một cho mỗi display
giá trị thuộc tính CSS:
| Nhóm lớp | Hiển thị CSS |
|---|---|
| hiển thị - * - khối | hiển thị: khối; |
| .visible - * - inline | Hiển thị nội dòng; |
| .visible - * - inline-block | display: inline-block; |
Ví dụ: đối với màn hình nhỏ ( sm), các .visible-*-*lớp khả dụng là .visible-sm-block:, .visible-sm-inlinevà .visible-sm-inline-block.
Các lớp .visible-xsvà không được dùng .visible-smnữa kể từ v3.2.0 ..visible-md.visible-lg
Thí 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: