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

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 JS Collapse


JS Collapse (collapse.js)

ได้รับรูปแบบฐานและการสนับสนุนที่มีความยืดหยุ่นสำหรับส่วนประกอบพับเหมือน accordions และระบบนำทาง

พึ่งพาปลั๊กอิน: ยุบต้องเปลี่ยนปลั๊กอินจะรวมอยู่ในรุ่นของเงินทุน

สำหรับการสอนเกี่ยวกับ Collapsibles อ่านของเรา Bootstrap Collapse กวดวิชา


The Collapse Plugin Classes

ชั้น ลักษณะ ตัวอย่าง
.collapse ซ่อนเนื้อหา ลองมัน
.collapse in แสดงเนื้อหา ลองมัน
.collapsing เพิ่มเมื่อการเปลี่ยนแปลงเริ่มต้นและเอาออกเมื่อเสร็จสิ้น ลองมัน

ผ่าน data-* แอตทริบิวต์

เพียงแค่เพิ่ม data-toggle="collapse" และข้อมูลเป้าหมายเพื่อที่จะกำหนดองค์ประกอบการควบคุมขององค์ประกอบพับอัตโนมัติ แอตทริบิวต์ข้อมูลเป้าหมายยอมรับเลือก CSS จะนำไปใช้เพื่อการล่มสลาย ให้แน่ใจว่าจะเพิ่มการล่มสลายของชั้นเรียนไปยังองค์ประกอบพับ หากคุณต้องการที่จะเริ่มต้นเปิดเพิ่มระดับเพิ่มเติมใน

ตัวอย่าง

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

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

เคล็ดลับ: การเพิ่มการจัดการกลุ่มหีบเพลงเหมือนการควบคุมพับเพิ่มข้อมูลแอตทริบิวต์ data-parent="#selector"


ผ่านทางจาวาสคริปต์

เปิดใช้งานด้วยตนเอง:

$('.collapse').collapse()

ตัวเลือกการล่มสลาย

ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- ในขณะที่ data-parent=""

ชื่อ ชนิด ค่าเริ่มต้น ลักษณะ
parentselectorfalse องค์ประกอบพับทั้งหมดภายใต้การปกครองที่ระบุจะถูกปิดเมื่อรายการพับนี้จะแสดงให้เห็นว่า (คล้ายกับพฤติกรรมหีบเพลงแบบดั้งเดิม - นี้จะขึ้นอยู่กับระดับแผง) - ดูตัวอย่างด้านล่าง
togglebooleantrue สลับองค์ประกอบพับเกี่ยวกับการภาวนา

วิธีการล่มสลาย

ตารางต่อไปนี้แสดงวิธีการล่มสลายที่มีอยู่ทั้งหมด

วิธี ลักษณะ ลองมัน
.collapse( options ) เปิดใช้งานองค์ประกอบพับที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง
.collapse("toggle") สลับองค์ประกอบพับ ลองมัน
.collapse("show") แสดงให้เห็นถึงองค์ประกอบพับ ลองมัน
.collapse("hide") ซ่อนองค์ประกอบพับ ลองมัน

เหตุการณ์ยุบ

ตารางต่อไปนี้แสดงเหตุการณ์ล่มสลายที่มีอยู่ทั้งหมด

เหตุการณ์ ลักษณะ ลองมัน
show.bs.collapse เกิดขึ้นเมื่อองค์ประกอบที่พับเป็นเรื่องเกี่ยวกับที่จะแสดง ลองมัน
shown.bs.collapse เกิดขึ้นเมื่อองค์ประกอบพับก็แสดงให้เห็นอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน
hide.bs.collapse เกิดขึ้นเมื่อองค์ประกอบที่พับเป็นเรื่องเกี่ยวกับที่จะถูกซ่อนไว้ ลองมัน
hidden.bs.collapse เกิดขึ้นเมื่อองค์ประกอบพับถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน

ตัวอย่าง

ตัวอย่าง

ง่ายพับ

ตัวอย่างต่อไปนี้จะทำให้ปุ่มสลับเนื้อหาที่ขยายตัวและยุบตัวลงขององค์ประกอบอื่น:

ตัวอย่าง

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
  Simple collapsible
</button>

<div id="demo" class="collapse in">
  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 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>
ลองตัวเอง»

หีบเพลง

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

หมายเหตุ: 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>
ลองตัวเอง»

ขยายและยุบสลับไอคอนและข้อความ

ตัวอย่างต่อไปนี้การเปลี่ยนแปลงข้อความเปิด / ปิดและไอคอนเมื่อเปิดและปิดเนื้อหาพับ:

ตัวอย่าง

$(document).ready(function(){
  $("#demo").on("hide.bs.collapse", function(){
    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
  });
  $("#demo").on("show.bs.collapse", function(){
    $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
  });
});
ลองตัวเอง»

หรือคุณสามารถใช้ CSS:

ตัวอย่าง

/* Icon when the collapsible content is shown */
.btn:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
}

/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
    content: "\e080";
}
ลองตัวเอง»