Membuat Dropdown pada Bootstrap

Selamat datang di blog saya. NetOption, menyediakan tutorial untuk pemula yang ingin belajar untuk membuat websitenya sendiri dengan tampilan yang sesuai dengan yang anda inginkan. Kali ini yaitu untuk membuat menu DROPDOWN. Menu ini sangat umum digunakan pada navbar sebagi link. Penggunaan DROPDOWN pada BOOTSTRAP harus menggunakan jquery maupun javascript.

Sebelumnya saya memposting hanya menggunakan link CSS saja namun disini saya menambahkan beberapa atribut untuk link JavaScript.

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

link yang digunakan merupakan link offline yang terlah tersedia di bootstrap. untuk mengetahui penggunaan link offline dapat di lihat pada "Cara Penggunaan Bootstrap".

DROPDOWN STANDAR

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Membuat Table</title>

    <!--CSS-->

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

    <script src="js/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container">

        <H1>MEMBUAT DROPDOWN MENU | NET02OPTION</H1>

        <div class="dropdown">

            <button class="btn btn-primary dropdown-toggle" 

            type="button" data-toggle="dropdown">Dropdown net02option

            <span class="caret"></span></button>

            <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

            </ul>

        </div>

    </div>

</body>

</html>

Namun DROPDOWN sendiri terdapat beberapa class pendukung. sepeti dibawah ini :

class tambahan seperti di atas yaitu :

dropdown-header : Membuat header pada dropdown
divider : Membuat garis pemisah pada header
active : Membuat menu seperti sedang dipilih
disabled : Memuat menu tidak dapat di click

Mungkin itu saja yang dapat saya share untuk kesempata kali ini.
Terimakasih dan semoga bermanfaat bagi pembaca sekalian.

Comments

Cara Membuat Tombol Button pada Bootstrap

Pada kesempatan kali ini akan dibahas mengenai pembuatan BUTTON pada bootstrap. Penggunan button pada bootstrap memiliki beberapa class yang telah tersedia yaitu : btn-lg : Untuk membuat button dengan ukuran besar. btn-md : Untuk membuat button dengan ukuran medium atau sedang. btn-sm : Untuk membuat button dengan ukuran kecil. btn-xs : Untuk membuat button dengan ukuran sangat kecil. btn-block : Untuk membuat button dengan ukuran 100%. active : Untuk membuat button dengan fungsi yang dapat di click. disabled : Untuk membuat button namun tidak dapat di click. Untuk lebih jelasnnya akan di tunjukan contoh penggunaan dibawah ini. SOURCE CODE Untuk lebih terperinci mari bahas satu persatu dari fungsi yang telah diperlihatkan contohnya di atas. BUTTON LG/MD/SM/XS SOURCE CODE < div class = "container" > < H1 > MEMBUAT TOMBOL | NET02OPTION </ H1 > < a href = "#" class = "btn btn-success bt...

Membuat Button Group pada Bootstrap

Pada kesempatan kali ini saya akan memberikan beberapa contoh penggunaan dan pembuatan BUTTON GROUP pada BOOTSTRAP . Button gorup digunakan untuk membuat button atau tombol secara tergabung. Untuk membuat BUTTON secara terpisah dapat anda lihat pada link berikut : Cara Membuat Button pada Bootstrap Pembuatan BUTTON GROUP hanya berbeda sedikit dengan BUTTON biasa. namun pada pembuatan BUTTON GROUP juga mempunyai beberapa class, yaitu: btn-group : Membuat button group standar. btn-group-lg|md|sm : Membuat button group dengan ukuran. btn-group-vertical : Membuat button group secara vertical. btn-group-justified : Membuat button group secara rata kanan kiri. BTN GROUP STANDAR < div class = "container" > < H1 > MEMUAT BUTTON GROUP PADA BOOTSTRAP | NET02O...

Menampilkan Gambar pada Bootstrap

Kali ini saya akan membahas cara untuk menampilkan suatu gambar pada BOOTSTRAP. Sebelumnya kita sudah membahas beberapa yaitu Cara Penggunaan Bootstrap , Membuat Tabel dengan Bootstrap , dan Cara Mengganti Warna pada Bootstrap. Untuk kali ini yaitu cara menampilkan gambar pada BOOTSTRAP . Untuk gambar tersedia 3 setting yang bisa anda gunakan. yaitu: image rounded image thumbnail image circle jika hanya untuk menampilkan gambar, source code yang digunakan adalah sebagai berikut: <img src="net02option.jpg" alt="NET02OPTION.BLOGSPOT.COM"> Namun untuk beberapa variasi setting yang telah disebutkan di atas yaitu sebagai berikut: IMAGE THUMBNAIL Seperti yang terlihat pada gambar class yang digunakan untuk gambar tersebut adalah img-thumbnail . IMAGE ROUNDED Seperti yang terlihat pada gambar class yang digunakan untuk gambar tersebut adalah img-rounded IMAGE CIRCLE Seperti yang terlihat pada gambar class yang digu...

NetOption

Search This Blog