Tutorial Bootstrap : List Group, Card, Dropdown, Collapse, dan Form

Bootstrap : List Group, Card, Dropdown, Collapse, dan Form

Assalamu'alaikum W. W.
A. Pendahuluan

Halo, pada kesempataan kali ini saya akan menjelaskan cara membuat list group, card, collapse, dan form di bootstrap.
1.Pengertian
Bootstrap adalah sebuah framework yang bersifat open source. Bootstrap adalah sebuah framework yang digunakan untuk membuat sebuah website dinamis dengan menggunakan bahasa script CSS. Bootstrap dapat membantu developer dan designer dalam membuat sebuah tampilan website dengan cepat dan mudah tanpa harus membuatnya dari awal.
2.Latar Belakang
Mencari cara agar dapat membuat front end website dengan bagus, responsive, dan efektif. Tanpa harus membutuhkan waktu yang lama.
3.Maksud dan Tujuan
Paham dan dapat menggunakan Bootstrap, sehingga pengembangan front end dapat dilakukan dengan mudah.
B. Alat dan Bahan

- PC
- Text Editor
- Web Browser
C. Jangka Waktu Pelaksanaan
-D. Penjelasan
List Group
Untuk membuat list group dasar, kita dapat menggunakan elemen <ul> dan ditambah class .list-group, dan elemen <li> ditambah dengan class .list-group-item.
1. Active State
Digunakan untuk menunjukan list group yang aktif. Cara menggunakannya dengan cara menambah class .active pada elemn <li> yang akan diaktifkan.
2. Disbled Item
Digunakan untuk menonaktifkan list. Cara menggunakannya dengan menambah class .disabled pada <li> yang inginj dinonaktifkan.
3. List Group With Linked Items
Digunakan untuk membuat list-group yang dapat disertakan sebuah link. Cara menggunakannya adalah dengan mengganti <ul> menjadi <div> dan mengganti <li> menjadi <a> , lalu menambahkan class .list-group-item-action pada elemen <a>.
4. Contextual Classes
Digunakan untuk merubah warna list item.
Class untuk merubah warna yaitu :

• .list-group-item-success
• .list-group-item-secondary
• .list-group-item-info 
• .list-group-item-warning 
• .list-group-item-danger 
• .list-group-item-dark 
• .list-group-item-light

Contoh Penggunaan :

Card
1 Card Basic
Untuk membuat card biasa kita dapat membuat sebuah <div> lalu kita tambahkan class .card lalu buat lagi <div> di dalamnya lalu tambahkan class .card-body.
2. Header dan Footer
Untuk membuat header dan footer dalam card kita cukup menambah <div> yang di dalam lalu tambahkan class .card-header untuk header dan class card-footer untuk membuat footer.
3. Contextual Class
Digunakan untuk menambahkan warna background pada card, bisa menggunakan berbagai class yaitu :

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

4. Title, Text, dan link
Gunakan class .card-title untuk membuat title dan class .card-text untuk menghilangkan margin bawah, dan class .card-link digunakan untuk membuat link pada card.
5. Card Image
Digunakan dengan cara menambahkan class .card-img-top untuk menempatkan gambar di atas atau .card-img-bottom untuk menempatkan gambar di bawah dan tambahkan class tersebut di elemen <img>.
Contoh Penggunaan :

 

Dropdown
Dropdown adalah menu yang memungkinkan pengguna untuk memilih salah satu dari nilai dari daftar yang tersedia.
1. Dropdown Basic
Untuk menggunakan dropdown standard kita dapat menambahkan class .dropdown di <div> lalu buatlah <button> di dalam <div> pertama dan tambahkan class .dropdown-toggle dan artibut "data-toggle="dropdown" "
2. Dropdown Devider
Digunakan untuk memisahkan sebuah link dengan pembatas horizontal. Cara menggunakan dengan membuat <div> di dalam <div> yang kedua lalu tambahkan class .dropdown-devider .
3. Dropdown Header
Digunakan untuk membuat header pada dropdown, digunakan dengan cara sama seperti dropdown devider namun class-nya di ganti menjadi .dropdown-header.
4. Disabled dan Active Item
Digunakan untuk mengaktifkan dropdown dan menonaktifkan. Digunakan dengan cara menambahkan class .active atau .disabled pada <a>.
5. Dropdown Position
Digunakan untuk mngatur posisi list item pada dropdown.
6. Dropup
Digunakan untuk mengubah list menjadi ke atas bukan ke bawah ketika diclick.
Contoh Penggunaan :

Collapse
Collapse digunakan ketika akan menyembunyikan atau menampilkan sejumlah konten.
Cara menggunakan, gunakan class .collapse untuk menunjukan elemen collapse ini adalah konten yang akan ditampilkan atau disembunyikan dengan mengeklik tombol.
Untuk mengkontrol (show/hide) konten collapse, tambahkan artibut data-toggle="collapse" ke elemen <a> atau <button>. Kemudian tambahkan artibut data-target="#id" untuk menghubungkan tombol dengan konten collapse.
Catatan : Untuk elemen <a> dapat menggunakan artibut href bukan artibut data-target.
Secara standar, isi konten collapse. Namun, anda dapat menambahkan class .show untuk menampilkan konten secara default.
Cara penggunaan :

Form
1. Default Bootstrap
Semua inputan di dalam form ditambahkan class .from-control, contoh <input>, <textarea>, <select>, dll.
2. From Layout
Bootstrap memiliki 2 jenis form layout :

• Stacked (full-width) from
• inline form

Jika ingin menggunakan inline form kita harus menambahkan class .from-inline.
3. Form Control
Inputan yang support form control bootstrap

• input
• textarea
• checkbox
• radio
• select

4. Bootstrap input
Menggunakan dengan cara menambahkan class .from-control pada elemen <input>.
5. Bootstrap Textarea
Menggunakan dengan cara menambahkan class .from-control pada elemen <textarea>.
6. Bootstrap Checkbox
Lihatlah contoh berikut untuk mengetahui cara penggunannya.

7. Bootstrap Radio
Menggunakan dengan cara menambahkan class .radio di <div> yang menjadi induk untuk inputan radio.
8. Bootstrap Select List
Menggunakan dengan cara menambahkan class .form-group di <div> yang menjadi induk untuk inpuan, lalu menambahkan class .form-control pada tag <select>.
Contoh penggunaan :

E. Kesimpulan
>List Group digunakan untuk mengatur list sebuah daptar, sehingga dapat lebih bagus dilihat.
>Card biasanya digunakan untuk membuat sebuah kartu pengenal dan masih banyak lagi.
>Dropdown biasanya digunakan ketika kita sedang membuat navbar, biasanya digunakan ketika satu menu memiliki banyak jenis.
>Collapse digunakan untuk menampilkan / menyembunyikan sebuah konten, biasanya collapse digunakan agar dapat menghemat ruang dalam sebuah website.
F. Referensi
https://id.wikipedia.org/wiki/PHP_Bootstrap
https://www.w3schools.com/bootstrap4/bootstrap_list_groups.asp
https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp
https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

Wasalamu'alaikum W. W.

Share this post