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

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 List Groups


กลุ่มรายการพื้นฐาน

กลุ่มรายการพื้นฐานที่สุดคือรายการเรียงลำดับกับรายการ:

  • รายการแรก
  • รายการที่สอง
  • รายการที่สาม

เพื่อสร้างกลุ่มรายการพื้นฐานให้ใช้ <ul> องค์ประกอบที่มีระดับ .list-group และ <li> องค์ประกอบที่มีระดับ .list-group-item :

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>
ลองตัวเอง»

กลุ่มรายการที่มีป้าย

นอกจากนี้คุณยังสามารถเพิ่มป้ายไปยังกลุ่มรายการ ป้ายจะถูกวางตำแหน่งโดยอัตโนมัติบนขวา:

  • 12 ใหม่
  • 5 ลบ
  • 3 คำเตือน

เพื่อสร้างป้ายสร้าง <span> องค์ประกอบที่มีระดับ .badge ภายในรายการรายการ:

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item"><span class="badge">12</span> New</li>
  <li class="list-group-item"><span class="badge">5</span> Deleted</li>
  <li class="list-group-item"><span class="badge">3</span> Warnings</li>
</ul>
ลองตัวเอง»

รายชื่อกลุ่มที่เชื่อมโยงกับรายการ

รายการในกลุ่มรายการนอกจากนี้ยังสามารถเชื่อมโยงหลายมิติ นี้จะเพิ่มสีพื้นหลังสีเทาบนโฉบ:

เพื่อสร้างกลุ่มรายการกับรายการที่เชื่อมโยงการใช้งาน <div> แทน <ul> และ <a> แทน <li> :

ตัวอย่าง

<div class="list-group">
  <a href="#" class="list-group-item">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
ลองตัวเอง»

สภาพที่ใช้งาน

ใช้ .active ระดับเพื่อเน้นรายการปัจจุบัน:

ตัวอย่าง

<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
ลองตัวเอง»

รายการสำหรับผู้พิการ

กลุ่มรายการต่อไปนี้มีรายการที่ปิดใช้งาน:

ปิดการใช้งานรายการเพิ่ม .disabled ระดับ:

ตัวอย่าง

<div class="list-group">
  <a href="#" class="list-group-item disabled">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
ลองตัวเอง»

การเรียนการสอนตามบริบท

เรียนบริบทสามารถนำไปใช้ในรายการสี:

  • รายการแรก
  • รายการที่สอง
  • รายการที่สาม
  • รายการที่สี่

ชั้นเรียนสำหรับการระบายสีรายการรายการที่: .list-group-item-success , list-group-item-info , list-group-item-warning และ .list-group-item-danger :

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item list-group-item-success">First item</li>
  <li class="list-group-item list-group-item-info">Second item</li>
  <li class="list-group-item list-group-item-warning">Third item</li>
  <li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
ลองตัวเอง»

เนื้อหาที่กำหนดเอง

คุณสามารถเพิ่มเกือบ HTML ใด ๆ ภายในกลุ่มสินค้ารายการ

Bootstrap ให้เรียน .list-group-item-heading และ .list-group-item-text ซึ่งสามารถใช้เป็นดังนี้:

ตัวอย่าง

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">First List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
    <p class="list-group-item-text">List Group Item Text</p>
  </a>
</div>
ลองตัวเอง»

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

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