tutorial pengembangan web terbaru
 

Bootstrap Collapse


dasar dilipat

Collapsibles berguna ketika Anda ingin menyembunyikan dan menampilkan sejumlah besar konten:

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.

Contoh

<button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Cobalah sendiri "

misalnya Dijelaskan

The .collapse kelas menunjukkan elemen dilipat (a <div> di contoh kita); ini adalah konten yang akan ditampilkan atau disembunyikan dengan mengklik tombol.

Untuk mengontrol (show / hide) isi dilipat, tambahkan data-toggle="collapse" atribut ke <a> atau <button> elemen. Kemudian tambahkan data-target="#id" atribut untuk menghubungkan tombol dengan konten dilipat (<div id="demo">) .

Catatan: Untuk <a> elemen, Anda dapat menggunakan href atribut bukan data-target atribut:

Contoh

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Cobalah sendiri "

Secara default, isi dilipat tersembunyi. Namun, Anda dapat menambahkan .in kelas untuk menampilkan konten secara default:

Contoh

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Cobalah sendiri "

Panel dilipat

tubuh panel

Contoh berikut menunjukkan panel dilipat:

Contoh

<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>
Cobalah sendiri "

Dilipat Daftar Grup

  • Satu
  • Dua
  • Tiga

Berikut ini menunjukkan sebuah panel dilipat dengan kelompok di dalam daftar:

Contoh

<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>
Cobalah sendiri "

Akordeon

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.
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.
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.

Contoh berikut menunjukkan akordeon sederhana dengan memperluas komponen panel.

Catatan: Gunakan data-parent atribut memastikan bahwa semua elemen dilipat di bawah induk ditentukan akan ditutup ketika salah satu item dilipat ditampilkan.

Contoh

<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>
Cobalah sendiri "

Lengkap Bootstrap Collapse Referensi

Untuk referensi lengkap semua pilihan runtuh, metode dan peristiwa, pergi ke kami Bootstrap Collapse Referensi JS .