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

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

Cara Mengganti Warna Pada Bootstrap

Penggunaan warna merupakan hal yang sering dilakukan, selain memperindah tampilan dari sebuah web, warna juga dapat membuat kita memberikan tanda penting pada sebuah artikel maupun data yang penting. Pada BOOTSTRAP terdapat beberapa class default yang ada untuk memberikan warna pada button, table, dan lainnya. Class tersebut adalah sebagai berikut : success : class ini memberikan warna hijau. anda juga dapat menggunakan class ini untuk memberikan tanda bahwa sesuatu itu berhasil. misal untuk membuat alerts atau peringatan bahwa apa yang ada kerjakan berhasil. primary : class ini memberikan warna biru. seperti success , class ini dapat anda gunakan untuk memberikan sebuah tanda. danger : class ini memberikan warna merah. warning : class ini memberikan warna kuning. info : class ini memberikan warna biru muda. Penggunaan class warna ini dapat di lakukan pada beberapa tempat, seperti button , alerts , table , dan lain sebagainya. untuk yang akan di contohkan adalah pengguna

Membuat Tabel dengan Bootstrap

Pada kesempatan ini, saya akan membagikan bagaimana cara membuat tabel dengan bootstrap. cara yang digunakan tidak sulit namun tetap ada beberapa hal yang harus diperhatikan. pada pembuatan tabel di perlukan berapa CLASS. .table : penggunaan class untuk membuat tabel standar .table-striped :class tambahan yang ada pada tabel, berfungsi membuat table berwarna dengan warna seperti zebra. .table-bordered : membuat border disekitar tabel .table-hover : membuat table saat terkena cursor akan berwarna gelap .table-condensed : menghilangkan padding sehingga tabel terlihat lebih rapat. TABLE STANDAR Tampilan tabel standar akan terlihat seperti gambar di atas. untuk source code adalah sebagai berikut : TABLE-STRIPED Tampilan tabel striped akan terlihat seperti gambar di atas. untuk source code adalah sebagai berikut : TABLE-BORDERED Tampilan tabel striped akan terlihat seperti gambar di atas. untuk source code adalah sebagai berikut : TABLE-HOV

NetOption

Search This Blog