Tutorial Bootstrap Part 17: Collapse

Assalamu'alaikum W.W

Oke pada kesempatan kali ini rekayasaternaklele akan membahas tentang Collapse pada Bootstrap.

Judul
Tutorial Bootstrap Part 17: Collapse

Pengertian

Menurut Wikipedia, Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Latar Belakang

Mencari kemudahan dalam membuat front-end website yang cepat,responsive dan praktis sehingga kita tidak perlu menulis kode CSS dari nol.

Maksud dan Tujuan
Memahami dan bisa menggunakan Bootsrap sehingga pengembangan fron end website lebih efektif dan efisien.

Alat dan Bahan
Text Editor dan PC

Jangka Waktu
1 Jam

Pembahasan

Collapsible berfungsi untuk menyembunyikan dan menampilkan sejumlah konten.

Contoh :

Ket :

• class collapse digunakan untuk menunjukan elemen yang akan disembunyikan atau ditampilkan.
•  Untuk kontrol (show / hide), tambahkan attribut data-toggle="collapse"  ke elemen <a> atau <button>.
• Attribut data-target="#id" untuk menghubungkan tombol dengan konten dilipat (<div id = "demo">). attribut data-target bisa diganti href.
• Tambahkan class show untuk menjadikan elemen langsung terbuka ketika halaman dibuka.

Accordion
Berikut cara pembuatan Accordion:

Kesimpulan

Collapsible berfungsi untuk menyembunyikan dan menampilkan sejumlah konten.

Referensi

https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

Share this post