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

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 Badges and Labels


ป้าย

ป้ายเป็นตัวชี้วัดเชิงตัวเลขของจำนวนรายการที่มีความเกี่ยวข้องกับการเชื่อมโยง:

ข่าว 5
ความคิดเห็นที่ 10
อัพเดท 2

ตัวเลข (5, 10 และ 2) มีป้าย

ใช้ .badge ระดับภายใน <span> องค์ประกอบในการสร้างป้าย:

ตัวอย่าง

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
ลองตัวเอง»

ป้ายนอกจากนี้ยังสามารถใช้ในองค์ประกอบอื่น ๆ เช่นปุ่ม:



ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการเพิ่มป้ายปุ่ม:

ตัวอย่าง

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
ลองตัวเอง»

ป้ายกำกับ

ป้ายชื่อที่ใช้ในการให้ข้อมูลเพิ่มเติมเกี่ยวกับบางสิ่งบางอย่าง

ตัวอย่างใหม่

ตัวอย่างใหม่

ตัวอย่างใหม่

ตัวอย่างใหม่

ตัวอย่างใหม่
ตัวอย่างใหม่

ใช้ .label ระดับตามด้วยหนึ่งในหกชั้นเรียนตามบริบท .label-default , .label-primary , .label-success , .label-info , .label-warning หรือ .label-danger ภายใน <span> องค์ประกอบ เพื่อสร้างป้ายกำกับ:

ตัวอย่าง

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
ลองตัวเอง»

ตัวอย่างต่อไปนี้แสดงให้เห็นว่าทุกชั้นเรียนฉลากตามบริบท:

เริ่มต้นประถมป้ายฉลากที่ประสบความสำเร็จฉลากข้อมูลฉลากคำเตือนในฉลากอันตรายฉลาก

ตัวอย่าง

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»