tRikSonic

Bootstrap 3 Dropdown - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 06.03

Tutorial Bootstrap 3 Dropdown

TrikSonic - Apa itu Dropdown pada Bootstrap ? Dropdown adalah Bentuk menu yang menurun ke bawah pada tampilan Graphical User Interface biasaya berupa list box, yang diperuntukan untuk user dalam memilih opsi yang tersedia
Catatan : jQuery dan bootstrap Plugin diperlukan untuk Dropdown Bootstrap

Contoh Dropdown

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 Dropdown</h2>


<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>


</section>

<!-- jquery, bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Dropup

Jika ingin tampilan menu yang keluar berada diatas element Pemicu gunakan class .dropup pada pembungkus utama.

Contoh :

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 Dropup</h2>

<br/><br/><br/><br/>

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropup <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>


</section>

<!-- jquery, bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Dropdown Posisi

Untuk mengatur keselarasan atau posisi menu dropdown, gunakan class .dropdown-menu-left (untuk posisi kiri) dan .dropdown-menu-right (untuk posisi kanan).
Jika metode ini diterapkan maka dropdown akan menyesuaikan posisi dengan lebar pembungkus nya.

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<style>
.example {
  width : 250px;
  background : pink;
  padding : 5px;
}
</style>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 Dropdown</h2>


<div class="example">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </div>
</div>

</section>

<!-- jquery, bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Dropdown Headers

Digunakan untuk judul atau label pada daftar menu. Untuk menerapkannya tambahkan class .dropdown-header pada element <li> yang berada didalam element <ul class="dropdown-menu">...</ul>

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">Tutorial</li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="dropdown-header">Judul 2</li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 Dropdown Header</h2>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="dropdown-header">Tutorial</li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li class="dropdown-header">Judul 2</li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

</section>

<!-- jquery, bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Dropdown Divider

Divider pada dropdown Bootstrap berfungsi sebagai pembatas antar daftar menu.
Untuk menerapkannya tambahkan class .divider pada element <li>

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Link Terpisah</a></li>
  </ul>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 Dropdown <code>Divider</code></h2>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li class="divider"></li>
    <li><a href="#">Link Terpisah</a></li>
  </ul>
</div>

</section>

<!-- jquery, bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Dropdown Active dan Disabled

Untuk menampilkan daftar menu yang sedang aktif gunakan class .active pada element <li> yang berada dalam area <ul class="dropdown-menu">..</ul>
Sedangkan untuk memberikan tampilan nonaktif pada daftar menu gunakan class .disabled

Contoh :

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="active"><a href="#">Active List</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Disabled List</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!--Bootstrap 3 css-->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<section class="container">
<h2>Bootstrap 3 Dropdown <code>Divider</code></h2>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li class="active"><a href="#">Active List</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Disabled List</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>

</section>

<!-- jquery, bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.