Bootstrap JS Çöküşü
JS Çöküşü (collapse.js)
Akordeonlar ve navigasyon gibi katlanabilir bileşenler için temel stiller ve esnek destek alın.
Eklenti bağımlılığı: Daralt, geçiş eklentisinin Bootstrap sürümünüze dahil edilmesini gerektirir.
Collapsibles hakkında bir eğitim için Bootstrap Collapse Eğitimimizi okuyun .
Daralt Eklenti Sınıfları
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Veri-* Öznitelikler aracılığıyla
Bir daraltılabilir öğenin kontrolünü otomatik olarak atamak için, öğeye data-toggle="collapse" ve bir veri hedefi eklemeniz yeterlidir. data-target niteliği, daraltmanın uygulanacağı bir CSS seçiciyi kabul eder. Daraltılabilir öğeye sınıf daraltmasını eklediğinizden emin olun. Varsayılan olarak açılmasını istiyorsanız, ek sınıfı ekleyin.
Örnek
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
İpucu: Daraltılabilir bir denetime akordeon benzeri grup yönetimi eklemek için data-parent="#selector" veri özniteliğini ekleyin.
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
$('.collapse').collapse()
Seçenekleri Daralt
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, data-parent="" gibi seçenek adını data- öğesine ekleyin.
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Daraltma Yöntemleri
Aşağıdaki tablo, mevcut tüm daraltma yöntemlerini listeler.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
Olayları Daralt
Aşağıdaki tablo, mevcut tüm daraltma olaylarını listeler.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
Daha fazla örnek
Basit Katlanabilir
Aşağıdaki örnek, bir düğmenin başka bir öğenin genişleyen ve daraltılan içeriği arasında geçiş yapmasını sağlar:
Örnek
<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>
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
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österir:
Not: Nitelik data-parent, daraltılabilir öğelerden biri gösterildiğinde belirtilen üst öğe altındaki tüm daraltılabilir öğelerin kapatılmasını sağlar.
Ö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>
Genişlet ve Daralt Geçiş Simgesi ve Metni
Aşağıdaki örnek, daraltılabilir içeriği açarken ve kapatırken açma/kapama metnini ve simgesini değiştirir:
Örnek
$(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');
});
});
Veya CSS'yi kullanabilirsiniz:
Örnek
/* 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";
}