Bootstrap 5 Katlanabilir

Temel katlanma

Çok fazla içeriği gizlemek ve göstermek istediğinizde, katlanabilir bileşenler çok kullanışlıdır:

Örnek

<button data-bs-toggle="collapse" data-bs-target="#demo">bahar</button>
<div id="demo" class="collapse">
  <p>Şimdi yaz günü aramak, sınırsız manzara bir anda yeni başlıyor.</p>
  <p>Yalnızca bahar yüzünü kolayca tanırım, binlerce renk her zaman bahar gibidir.</p>
</div>

Kendi Kendine Deneyin

Örnek açıklaması

.collapse sınıfı katlanabilir elemente (örneğin, <div>) gösterin; düğmeye tıkladığınızda, gösterilecek veya gizlenecek içerik.

Katlanabilir içeriği (görünür/gizli) kontrol etmek için data-bs-toggle="collapse" Özelliğini <a> veya <button> elementine ekleyin. Ardından data-bs-target="#id" özelliği kullanarak düğme ve katlanabilir içerik (div id="demo")'yu bağlayabilirsiniz.

Açıklama:<a> elementi için, href Özelliği, data-bs-target Özellikler:

Örnek

<a href="#demo" data-bs-toggle="collapse"> bahar</a>
<div id="demo" class="collapse">
  <p>Şimdi yaz günü aramak, sınırsız manzara bir anda yeni başlıyor.</p>
  <p>Yalnızca bahar yüzünü kolayca tanırım, binlerce renk her zaman bahar gibidir.</p>
</div>

Kendi Kendine Deneyin

Varsayılan olarak, katlanabilir içerik gizlidir. Ancak, ekleyebilirsiniz .show Sınıf kullanarak içerik varsayılan olarak gösterilir:

Örnek

<div id="demo" class="collapse show">
  <p>Şimdi yaz günü aramak, sınırsız manzara bir anda yeni başlıyor.</p>
  <p>Yalnızca bahar yüzünü kolayca tanırım, binlerce renk her zaman bahar gibidir.</p>
</div>

Kendi Kendine Deneyin

Akordeon (akordeon)

Örnekte, card bileşeni genişletilerek basit bir akordeon gösterilir.

Açıklama:Kullanım data-bs-parent Özellik, belirtilen ana paragrafta gösterilen bir katlanabilir öğenin açılması durumunda, tüm katlanabilir öğelerin kapatılmasını sağlar.

Örnek

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        Küçük Grup Projesi #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3> bahar</h3>
        <p>Şimdi yaz günü aramak, sınırsız manzara bir anda yeni başlıyor.</p>
        <p>Yalnızca bahar yüzünü kolayca tanırım, binlerce renk her zaman bahar gibidir.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Küçük Grup Projesi #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>İlk Yaz Mısraları</h3>
        <p>Yıllar içinde kırmızı mavi toz haline geldi, kuş cıvıltısında yazın yeni başlıyor.</p>
        <p>Yol boyunca asma ve mısır yürüyüşü bitmez, savaş zamanında insan olduğumu biliyorum.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        Küçük Grup Projesi #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>Dağ Yürüyüşü</h3>
        <p>Uzakta soğuk dağın taş yolları eğimlidir, bulutların doğduğu yerde evler vardır.</p>
        <p>İlkbaharın sonunda ağaçlıkta oturup sevin, karanlık yapraklar Şubat çiçeklerinden daha kırmızıdır.</p>
      </div>
    </div>
  </div>
</div>

Kendi Kendine Deneyin