ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap CSS Helper Classes Reference


ข้อความ

เพิ่มความหมายผ่านข้อความสีกับการเรียนดังต่อไปนี้ การเชื่อมโยงจะมืดลงบนโฉบ:

ชั้น ลักษณะ ตัวอย่าง
.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.


ลองตัวเอง»