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

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 Collapse


พื้นฐานพับ

Collapsibles มีประโยชน์เมื่อคุณต้องการซ่อนและแสดงจำนวนมากของเนื้อหา:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ตัวอย่าง

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
ลองตัวเอง»

ตัวอย่างอธิบาย

.collapse ระดับบ่งชี้องค์ประกอบพับ (ก <div> ในตัวอย่างของเรา); นี้เป็นเนื้อหาที่จะแสดงหรือซ่อนด้วยการคลิกปุ่ม

ในการควบคุม (แสดง / ซ่อน) เนื้อหาพับเพิ่ม data-toggle="collapse" แอตทริบิวต์ไปยัง <a> หรือ <button> องค์ประกอบ แล้วเพิ่ม data-target="#id" แอตทริบิวต์การเชื่อมต่อปุ่มที่มีเนื้อหาที่พับ (<div id="demo">)

หมายเหตุ: สำหรับ <a> องค์ประกอบคุณสามารถใช้ href แอตทริบิวต์แทนของ data-target แอตทริบิวต์:

ตัวอย่าง

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
ลองตัวเอง»

โดยค่าเริ่มต้นเนื้อหาพับถูกซ่อนอยู่ อย่างไรก็ตามคุณสามารถเพิ่ม .in ระดับเพื่อแสดงเนื้อหาโดยเริ่มต้น:

ตัวอย่าง

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
ลองตัวเอง»

แผงพับ

บอดี้แผง

ตัวอย่างต่อไปนี้แสดงให้เห็นแผงพับ:

ตัวอย่าง

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>
ลองตัวเอง»

พับกลุ่มรายการ

  • หนึ่ง
  • สอง
  • สาม

ต่อไปนี้จะแสดงให้เห็นแผงพับกับกลุ่มรายการภายใน:

ตัวอย่าง

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
      </ul>
      <div class="panel-footer">Footer</div>
    </div>
  </div>
</div>
ลองตัวเอง»

หีบเพลง

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงหีบเพลงง่ายโดยการขยายส่วนประกอบแผง

หมายเหตุ: ใช้ data-parent แอตทริบิวต์เพื่อให้แน่ใจว่าองค์ประกอบพับทั้งหมดภายใต้การปกครองที่ระบุจะถูกปิดเมื่อหนึ่งในรายการที่จะแสดงยุบ

ตัวอย่าง

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>
ลองตัวเอง»

สมบูรณ์ Bootstrap อ้างอิงยุบ

สำหรับการอ้างอิงสมบูรณ์ของตัวเลือกยุบทั้งหมดวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap ยุบอ้างอิง JS