Temel Katlanır
Gizlemek istediğiniz ve içeriğin büyük miktarda gösterdiğinde Collapsibles yararlıdır:
Örnek
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Kendin dene " Örnek Açıklaması
.collapse sınıfı katlanabilir bir elemanı göstermektedir (a <div> in our example) ; Bu gösterilen veya bir düğmeye bir tıklama ile gizlenir içeriğidir.
Kontrol etmek için (show/hide) ekleyin, katlanabilir içerik data-toggle="collapse" bir öznitelik <a> veya <button> elemanı. Sonra eklemek data-target="#id" katlanabilir içerikli düğmeye bağlamak için özellik (<div id="demo">) .
Not: For <a> unsurları kullanabilirsiniz href yerine niteliğini data-target özniteliği:
Örnek
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Kendin dene " Varsayılan olarak, katlanabilir içerik gizli. Ancak ekleyebilir .in varsayılan içeriğini göstermek için sınıf:
daraltılabilir Paneli
Aşağıdaki örnek, katlanabilir bir panelini göstermektedir:
Örnek
<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> Kendin dene " Katlanır Liste Grubu
- Bir
- İki
- Üç
Aşağıdaki içinde bir liste grubu ile katlanabilir bir panelini göstermektedir:
Örnek
<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> Kendin dene " Akordeon
Aşağıdaki örnek, paneli uzanan bileşeninin basit bir akordeon gösterir.
Not: kullan data-parent katlanabilir öğenin tek gösterildiğinde belirtilen ebeveyn altındaki tüm katlanabilir elemanları kapalı olacaktır emin olmak için özniteliği.
Örnek
<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> Kendin dene " Komple Bootstrap Collapse Referans
Tüm çöküş seçenekleri, yöntemler ve olaylar tam bir referans için lütfen gidin Bootstrap JS Collapse Referans .