Önyükleme Çöküşü
Temel Katlanabilir
Katlanabilirler, büyük miktarda içeriği gizlemek ve göstermek istediğinizde kullanışlıdır:
Örnek
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Örnek Açıklama
Sınıf .collapse, daraltılabilir bir öğeyi belirtir (örneğimizde bir <div>); bu, bir düğmeye tıklanarak gösterilecek veya gizlenecek içeriktir.
Daraltılabilir içeriği kontrol etmek (göstermek/gizlemek) için, data-toggle="collapse"niteliği bir <a> veya <button> öğesine ekleyin. Ardından data-target="#id"düğmeyi daraltılabilir içeriğe bağlamak için özniteliği ekleyin (<div id="demo">).
Not: <a> öğeleri için hreföznitelik yerine data-target
özniteliği kullanabilirsiniz:
Örnek
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Varsayılan olarak, daraltılabilir içerik gizlidir. .inAncak, içeriği varsayılan olarak göstermek için sınıfı ekleyebilirsiniz :
Örnek
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Katlanabilir Panel
Aşağıdaki örnek, daraltılabilir bir paneli 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>
Daraltılabilir Liste Grubu
- One
- Two
- Three
Aşağıda, içinde bir liste grubu bulunan daraltılabilir bir panel gösterilmektedir:
Ö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>
Akordeon
Aşağıdaki örnek, panel bileşenini genişleterek basit bir akordeon göstermektedir.
Not:data-parent Belirtilen üst öğe altındaki tüm daraltılabilir öğelerin daraltılabilir öğelerden biri gösterildiğinde kapatılacağından emin olmak için özniteliği kullanın .
Ö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>
Bootstrap Daraltma Referansını Tamamlayın
Tüm daraltma seçeneklerinin, yöntemlerinin ve olayların tam bir referansı için Bootstrap JS Collapse Reference sayfamıza gidin .