Ticker

6/recent/ticker-posts

Membuat Custom Dropdown Dengan Bootstrap

Juli 06, 2017
Dalam membuat sebuah aplikasi web kita selalu membuat form dropdown contohnya ketika user akan memilih agama biasanya kita membuat suatu dropdown untuk memudahkan user dalam memilihnya, seperti contoh dibawah ini,


Pada kesempatan kali ini kita akan membuat dropdown dengan bantuan Bootstrap, ikuti langkah pembuatannya seperti berikut,


1. Buatlah sintak HTML nya sebagai berikut :
 
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Silahkan Pilih
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Islam</a></li>
    <li><a href="#">Kristen Protestan</a></li>
    <li><a href="#">Kristen Katolik</a></li>
    <li><a href="#">Hindu</a></li>
    <li><a href="#">Budha</a></li>
    <li><a href="#">Kong Hu Cu</a></li>
  </ul>
</div>

Pada sintak HTML diatas untuk membuat dropdown kita cukup tambahkan class .dropdown dan untuk isi dari dropdown kita tambahkan class .dropdown-menu pada tag <ul>.

2. Tambahkan library jquery dan bootstrapnya beserta style nya, seperti berikut pada bagian <head> html nya

//Style bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

//Script bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

//Script jQuery
https://code.jquery.com/jquery-1.10.2.min.js

Demikian proses pembuatan dropdown dengan bootstrap. Untuk contoh diatas lebih jelasnya bisa lihat pada contoh Berikut.

Selain contoh diatas kita juga bisa buat header didalam dropdown, seperti gambar di bawah ini


untuk membuat header cukup tambahkan tag <li> dengan class .dropdown-header 

<div class="dropdown">
.......................
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-header">Dropdown header</li>
    ............
    ............
</ul>
</div>

 Kita juga bisa membuat garis pembatas di dalam drop down seperti gambar berikut
tambahkan tag <li> dengan class .divider

<div class="dropdown">
 ......................
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    ..........................
    <li role="separator" class="divider"></li>
    ..........................
  </ul>
</div>

Jika kita menginginkan pilihan yang disable atau tidak bisa dipilih kita cukup tambahkan class .disabled didalam tag <li>

Untuk melihat contoh keseluruhan bisa buka pada contoh Berikut 

Demikian pembuatan dropdown dengan bantuan bootstrap, smoga dapat bermanfaat....
Unknown

Diposting oleh Unknown

Posting Komentar

0 Komentar