dasar dilipat
Collapsibles berguna ketika Anda ingin menyembunyikan dan menampilkan sejumlah besar konten:
Contoh
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Cobalah sendiri " misalnya Dijelaskan
The .collapse kelas menunjukkan elemen dilipat (a <div> di contoh kita); ini adalah konten yang akan ditampilkan atau disembunyikan dengan mengklik tombol.
Untuk mengontrol (show / hide) isi dilipat, tambahkan data-toggle="collapse" atribut ke <a> atau <button> elemen. Kemudian tambahkan data-target="#id" atribut untuk menghubungkan tombol dengan konten dilipat (<div id="demo">) .
Catatan: Untuk <a> elemen, Anda dapat menggunakan href atribut bukan data-target atribut:
Contoh
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Cobalah sendiri " Secara default, isi dilipat tersembunyi. Namun, Anda dapat menambahkan .in kelas untuk menampilkan konten secara default:
Panel dilipat
Contoh berikut menunjukkan panel dilipat:
Contoh
<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> Cobalah sendiri " Dilipat Daftar Grup
- Satu
- Dua
- Tiga
Berikut ini menunjukkan sebuah panel dilipat dengan kelompok di dalam daftar:
Contoh
<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> Cobalah sendiri " Akordeon
Contoh berikut menunjukkan akordeon sederhana dengan memperluas komponen panel.
Catatan: Gunakan data-parent atribut memastikan bahwa semua elemen dilipat di bawah induk ditentukan akan ditutup ketika salah satu item dilipat ditampilkan.
Contoh
<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> Cobalah sendiri " Lengkap Bootstrap Collapse Referensi
Untuk referensi lengkap semua pilihan runtuh, metode dan peristiwa, pergi ke kami Bootstrap Collapse Referensi JS .