Bootstrap CSS Helper Classes Reference
ข้อความ
เพิ่มความหมายผ่านสีข้อความด้วยคลาสด้านล่าง ลิงก์จะมืดลงเมื่อวางเมาส์ไว้:
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" |
พื้นหลัง
เพิ่มความหมายผ่านสีพื้นหลังด้วยคลาสด้านล่าง ลิงก์จะมืดลงเมื่อโฮเวอร์เหมือนกับคลาสข้อความ:
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" |
อื่น
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) |
ยูทิลิตี้ตอบสนอง
คลาสเหล่านี้ใช้เพื่อแสดงและ/หรือซ่อนเนื้อหาตามอุปกรณ์ผ่านการสืบค้นสื่อ
ใช้หนึ่งหรือหลายคลาสที่มีอยู่สำหรับการสลับเนื้อหาข้ามเบรกพอยต์ของวิวพอร์ต:
ชั้นเรียน | อุปกรณ์ขนาดเล็กพิเศษ โทรศัพท์ (<768px) | อุปกรณ์ขนาดเล็ก แท็บเล็ต (≥768px) | อุปกรณ์ขนาดกลาง เดสก์ท็อป (≥992px) | อุปกรณ์ขนาดใหญ่ เดสก์ท็อป (≥1200px) |
---|---|---|---|---|
.visible-xs-* | มองเห็นได้ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ |
.visible-sm-* | ที่ซ่อนอยู่ | มองเห็นได้ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ |
.visible-md-* | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | มองเห็นได้ | ที่ซ่อนอยู่ |
.visible-lg-* | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | ที่ซ่อนอยู่ | มองเห็นได้ |
.hidden-xs | ที่ซ่อนอยู่ | มองเห็นได้ | มองเห็นได้ | มองเห็นได้ |
.hidden-sm | มองเห็นได้ | ที่ซ่อนอยู่ | มองเห็นได้ | มองเห็นได้ |
.hidden-md | มองเห็นได้ | มองเห็นได้ | ที่ซ่อนอยู่ | มองเห็นได้ |
.hidden-lg | มองเห็นได้ | มองเห็นได้ | มองเห็นได้ | ที่ซ่อนอยู่ |
ที่ซ่อนอยู่
ซ่อนองค์ประกอบตามขนาดหน้าจอ:
ตัวอย่าง
<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>
ผลลัพธ์:
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.
ตั้งแต่ v3.2.0 คลาสสำหรับมาในสามรูปแบบ หนึ่งคลาสสำหรับแต่ละ
ค่าคุณสมบัติ.visible-*-*
CSS :display
กลุ่มวิชา | CSS แสดง |
---|---|
มองเห็นได้-*-บล็อก | แสดง: บล็อก; |
.visible-*-inline | แสดง: แบบอินไลน์; |
.visible-*-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: