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

Posting Komentar

Untuk menyisipkan sebuah link atau tautan gunakan teks disini
- Tanpa menggunakan https: dan http:
Untuk menyisipkan sebuah kode yang pendek gunakan kode disini
Untuk menyisipkan sebuah kode yang panjang gunakan kode disini
Untuk menyisipkan sebuah teks Tebal gunakan teks tebal disini
Untuk menyisipkan sebuah teks Miring gunakan teks miring disini
Untuk menyisipkan sebuah gambar gunakan url gambar disini

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

Judul	`Bootstrap 3 Dropdown - Tutorial Bootstrap Indonesia`
Label	`Bootstrap 3`
Diposting pada	`11 Maret 2018 - 02:26`
Diperbaharui pada	`22 Mei 2018 - 06:03`
Komentar	Tidak ada komentar

Bootstrap 3 Dropdown - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Dropdown

Contoh Dropdown

Hasil :

Dropup

Contoh :

Hasil :

Dropdown Posisi

Contoh :

Hasil :

Dropdown Headers

Contoh :

Hasil :

Dropdown Divider

Contoh :

Hasil :

Dropdown Active dan Disabled

Contoh :

Hasil :

Tidak ada komentar

Posting Komentar

Ketentuan Komentar

Post Info

Populer Post

Arsip Blog

Label