Tutorial Bootstrap Part 17 : Membuat Dropdowns di Bootstrap

Assalamu'alaikum W. W.

Abdul Hafid Gunawan - Hai Sobat Setia SC Blog bertemu lagi di Catatan Blog saya ini. Kali ini saya akan membahas Cara Membuat Dropdowns di Bootstrap.

PENGERTIAN

SleepingCoding - Dropdowns ialah sebuah menu yang memiliki submenu di dalamnya.

LATAR BELAKANG

Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.

MAKSUD DAN TUJUAN

- Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.

- Dropdowns sering di gunakan ketika temen" nanti ingin membuat Website.

ALAT DAN BAHAN

- Text Editor

PEMBAHASAN

Keterangan : 

• Class dropdown menunjukkan bahwa kita membuat menu dropdown
• Untuk membuka menu dropdown, gunakan tombol atau link dengan class .dropdown-toggle dan atribut data-toggle="dropdown".
• Class .dropdown-menu digunakan untuk sebuah elemen yang berguna menampung link dropdwon .
• Class .dropdown-item untuk setiap elemen (link atau tombol) dalam menu dropdown .
• Class .dropdown-divider digunakan untuk memisahkan link dropdown dengan garis horisontal tipis.
• Class .active digunakan untuk menandai / memberikan efek active kepada menu tsb.
• Class .disabled digunakan untuk mematikkan menu tsb.
• Class Dropup digunakan untuk meletakkan dropdown di atas.
• Class Split Dropdowns digunakan untuk memisahkan antar text dengan dropdown caret.

1. BASIC DROPDOWNS

2. DROPDOWN DIVIDER

3. DROPDOWN HEADER

4. DROPDOWN ACTIVE & DISABLED

5. DROPUP

6. SPLIT BUTTON DROPDOWNS 

 

KESIMPULAN

Dropdowns merupakan sebuah menu yang sangat di butuhkan ketika kita membuat sebuah Website yang akan kita Hosting atau kita Publish, maka dari itu penggunaan Dropdowns menggunakan Bootstrap inilah yang membuat mudah & tidak memerlukan waktu yang lama dalam membuatnya.

Wassalamu'alaikum W. W.