Cara menggunakan membuat menu dropdown bootstrap

Walaupun sudah banyak contoh template Bootstrap yang dapat didownload melalui internet secara gratis, mungkin masih ada beberapa pengguna yang masih kebingungan ketika ingin mengkustomnya seperti menambah tombol dropdown. Di bawah ini kamu akan mengetahui bagaimana cara membuat dropdown button menggunakan Bootstrap.

Seiring berjalannya waktu, mulai bertambah banyak pengguna dan pengembang web yang menggunakan Bootstrap 4. Tapi, jika ditebak sampai saat ini penggunaan Bootstrap 3 juga belum berkurang banyak. Pilihlah di bawah ini versi Bootstrap yang sedang digunakan.

Dropdown Bootstrap 3

ads by posciety

Jika menggunakan Bootstrap 3, ketika ingin membuat tombol dropdown cukup gunakan struktur kode seperti ini:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="poscietydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Tombol Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="poscietydropdown">
    <li><a href="#">Dropdown 1</a></li>
    <li><a href="#">Dropdown 2</a></li>
    <li><a href="#">Dropdown 3</a></li>
  </ul>
</div>

Simpan dan lihat hasilnya !

Bootstrap 4

Pada Bootstrap 4 strukturnya sedikit dibuat lebih sederhana ketimbang Bootstrap 3, tapi secara keseluruhan fungsinya tidak jauh berbeda. Ketika ingin membuat tombol dropdown di Bootstrap 4 cukup gunakan struktur kode seperti ini:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="poscietytomboldropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Tombol Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="poscietytomboldropdown">
    <a class="dropdown-item" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
  </div>
</div>

Simpan dan lihat hasilnya !

Baik Bootstrap 3 maupun Bootstrap 4, kamu dapat menyesuaikan style dropdown button ini sesuai keperluan seperti mengganti warna tulisan / warna background (tombol), ukuran, mengganti font, dll.

Tips: Agar lebih cepat dalam memberikan warna pada tulisan ataupun warna background di Bootstrap, kamu dapat menggunakan class-class yang sudah disediakan oleh Bootstrap.

Tombol dropdown pada Bootstrap biasa digunakan untuk membuat sebuah tombol di area yang luas seperti isi postingan ataupun di area sempit seperti header, bahkan bisa dijadikan sebagai salah satu menu item pada header misalnya tombol register / login.

Pernahkah teman-teman membuat menu dropdown sendiri menggunakan HTML dan CSS, jika sudah bagaimana ribetnya ya, jika teman-teman baru membuatnya, apalagi teman-teman lagi di kejar dateline harus cepat-cepat selesai, sekarang dengan bootstrap kita di permudahkan dengan mengambil ambil saja di dalam library atau website bootstrap, lagi-lagi menggunakan bootstrap ya itu dia gunannya boostrap, oke jangan kemana-kemana kita akan bahas sesaat lagi belajar cara membuat menu dropdown dengan mudah menggunakan Bootstrap.

ketika kita menggunakan menu dropdown, tidak sedikit pertanyaan langsung membuat dropdown, kenapa bisa ini kenapa bisa itu, kenapa harus ada display none, lalu kenapa harus ada memanggilnya lagi dengan menggunakan display block, oke tenang saja dengan bootstrap kita lebih di permudahkan kok, oke langsung saja cara membuat menu dropdown dengan mudah menggunakan Bootstrap. saya harap teman-teman sudah bisa menggunakan bootstrap bagaiamana cara menginstal dan bagaimana cara menggunakannya, teman-teman perhatikan struktur berikut ini ya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>cara membuat menu dropdown dengan mudah menggunakan Bootstrap</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <-e-script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"><-e-/script>
      <-e-script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"><-e-/script>
    <![endif]-->
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>cara membuat menu dropdown dengan mudah menggunakan Bootstrap</h1>
        <span style="color: #ff0000"><div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div></span>
        <span class="glyphicon glyphicon-knight" aria-hidden="true"></span><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
        <a href="https://play.google.com/store/apps/details?id=com.mobile.legends">link download</a>
      </div>
    </div>
  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <-e-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><-e-/script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <-e-script src="js/bootstrap.min.js"><-e-/script>
  </body>
</html>

Seperti biasa teman-teman hilangkan tanda “-e-“, dan perhatikan tanda stuktur html yang saya block merah, oke bagaimana hasilnya:

Sudah jadi ya teman-teman, bagaimana sangat mudah kan, saya rasa cukup sampai disini belajar kita tentang cara membuat menu dropdown dengan mudah menggunakan Bootstrap, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.