Önyükleme 4 Daraltma
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. .showAncak, içeriği varsayılan olarak göstermek için sınıfı ekleyebilirsiniz :
Örnek
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Akordeon
Aşağıdaki örnek, kart 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 id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Bootstrap 4 Daraltma Referansını Tamamlayın
Tüm daraltma seçeneklerinin, yöntemlerinin ve olayların tam bir referansı için Bootstrap 4 JS Collapse Reference sayfamıza gidin .