ข้อความ
เพิ่มความหมายผ่านข้อความสีกับการเรียนดังต่อไปนี้ การเชื่อมโยงจะมืดลงบนโฉบ:
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .text-muted | ข้อความสไตล์กับชั้น "text-muted" | ลองมัน |
| .text-primary | ข้อความสไตล์กับชั้น "text-primary" | ลองมัน |
| .text-success | ข้อความสไตล์กับชั้น "text-success" | ลองมัน |
| .text-info | ข้อความสไตล์กับชั้น "text-info" | ลองมัน |
| .text-warning | ข้อความสไตล์กับชั้น "text-warning" | ลองมัน |
| .text-danger | ข้อความสไตล์กับชั้น "text-danger" | ลองมัน |
พื้นหลัง
เพิ่มความหมายผ่านพื้นหลังสีกับการเรียนดังต่อไปนี้ การเชื่อมโยงจะมืดลงบนโฉบเช่นเดียวกับการเรียนข้อความ:
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .bg-primary | เซลล์ของตารางสไตล์กับชั้น "bg-primary" | ลองมัน |
| .bg-success | เซลล์ของตารางสไตล์กับชั้น "bg-success" | ลองมัน |
| .bg-info | เซลล์ของตารางสไตล์กับชั้น "bg-info" | ลองมัน |
| .bg-warning | เซลล์ของตารางสไตล์กับชั้น "bg-warning" | ลองมัน |
| .bg-danger | เซลล์ของตารางสไตล์กับชั้น "bg-danger" | ลองมัน |
อื่น ๆ
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .pull-left | ลอยตัวองค์ประกอบไปทางซ้าย | ลองมัน |
| .pull-right | ลอยตัวองค์ประกอบทางด้านขวา | ลองมัน |
| .center-block | ชุดองค์ประกอบในการ display:block กับ margin-right:auto และ margin-left:auto | ลองมัน |
| .clearfix | ล้างลอย | ลองมัน |
| .show | บังคับให้เป็นองค์ประกอบที่จะแสดง | ลองมัน |
| .hidden | บังคับให้เป็นองค์ประกอบที่ถูกซ่อนไว้ | ลองมัน |
| .sr-only | ซ่อนองค์ประกอบกับอุปกรณ์ทั้งหมดยกเว้นโปรแกรมอ่านหน้าจอ | ลองมัน |
| .sr-only-focusable | รวมกับ .sr เท่านั้นที่จะแสดงองค์ประกอบอีกครั้งเมื่อมีการมุ่งเน้น (เช่นโดยผู้ใช้แป้นพิมพ์เท่านั้น) | ลองมัน |
| .text-hide | ช่วยเปลี่ยนเนื้อหาข้อความเป็นองค์ประกอบที่มีภาพพื้นหลัง | ลองมัน |
| .close | แสดงให้เห็นไอคอนใกล้ | ลองมัน |
| .caret | แสดงให้เห็นการทำงานแบบเลื่อนลง (จะกลับโดยอัตโนมัติในเมนู dropup) | ลองมัน |
ยูทิลิตี้ที่ตอบสนองต่อ
ชั้นเรียนเหล่านี้จะใช้ในการแสดงและ / หรือซ่อนเนื้อหาโดยอุปกรณ์ผ่านทางคำสั่งสื่อ
ใช้อย่างใดอย่างหนึ่งหรือรวมกันของชั้นเรียนที่มีอยู่สำหรับการสลับเนื้อหาข้าม viewport จุดพัก:
| ชั้นเรียน | ขนาดเล็กพิเศษโทรศัพท์อุปกรณ์ (<768px) | อุปกรณ์แท็บเล็ตขนาดเล็ก (≥768px) | อุปกรณ์เดสก์ท็ปานกลาง (≥992px) | เดสก์ท็อุปกรณ์ขนาดใหญ่ (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
ในฐานะของ v3.2.0 ที่ .visible-*-* เรียนมาในสามรูปแบบหนึ่งสำหรับแต่ละ CSS display มูลค่าทรัพย์สิน:
| กลุ่มของชั้นเรียน | การแสดงผล CSS |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
เช่นสำหรับขนาดเล็ก ( sm ) หน้าจอที่มี .visible-*-* ชั้นเรียน: .visible-sm-block , .visible-sm-inline และ .visible-sm-inline-block
เรียน .visible-xs , .visible-sm , .visible-md และ .visible-lg จะเลิกให้บริการ v3.2.0
ตัวอย่าง
<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>ผล:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
ลองตัวเอง»