Free Download Software and Drivers

Download software perangkat lunak dan driver. Find a great range of driver downloads for free. Free full version crack software for all types of operating systems such as windows and others including drivers.

Diberdayakan oleh Blogger.

Minggu, 22 Oktober 2017

Bootstrap

Tutorial Bootstrap : Cara Membuat Single Button Dropdown

0 comments

Sudah lama saya tidak memosting pada blog ini dikarenakan kesibukanku belakangan ini, yosh! kita akan bahas mengenai bagaimana Cara Membuat Single Button Dropdown.


Jadi sedikit gambaran button yang akan kita buat adalah button saat diklik maka akan muncul dropdown menu dibawahnya. oke langsung saja kita praktekan.

 Sebelumnya untuk anda yang belum mengikuti tutorial sebelumnya anda dapat klik link dibawah ini.

Cara membuat Heading >>
Cara membuat Dropdown Menu >>

Yosh! langsung buka Adobe Dreamweaver anda atau aplikasi Text Editor lainnya seperti Notepad, Notepad++, Wordpad dll.

Buat file singlebuttondropdown.html dengan cara File > New > Html
Kemudian masukkan source code berikut

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Single Button Dropdown Pada Bootstrap Twitter</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/docs.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Contoh Single Button Dropdown Pada Bootstrap Twitter</h1>
<p class="lead">Cara menggunakan Single Button Dropdown Pada Bootstrap Twitter</p>
</div>
<div class="row">
<div class="col-md-6">
<h4>Single Button Dropdown</h4>
<div class="bs-example">
<p>DiBawah ini adalah contoh penggunaan Single Button Dropdown pada Bootstrap Twitter</p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Software</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Software</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Software</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Software</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Software</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Software</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
view raw singlebuttondropdown.html hosted with ❤ by GitHub
Simpan pada folder htdocs/latihan yang telah kita buat pada Tutorial sebelum-sebelumnya.
Setelah source code selesai diketik, maka kita lihat hasilnya, jangan lupa jalankan service Apache dan Mysql pada aplikasi Xampp.

Jika tidak ada kesalahan maka tampilannya akan seperti ini.
Untuk lebih jelasnya bisa anda tonton video tutorial berikut yang sudah saya buat.

Terimakasih
Semoga bermanfaat
Jangan lupa like comment and subscribe blog dan channel youtube ku ya

Contact Me :

Google + : https://plus.google.com/u/0/+esaprasetio
Twitter : http://twitter.com/aphriell_art
IG : @aphriel_art
Pinterest : https://id.pinterest.com/esaprasetio/
Youtube : https://www.youtube.com/c/esaprasetio

Blog :
aprilartwork.blogspot.com for my artwork
aphriellart.blogspot.com for some tutorial
Email : aphriellart@gmail.com
Diposting oleh di
Label: , , , , , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)