Assalamualaikum Wr.Wb
Pada kesempatan kali ini saya akan berbagi tutorial membuat button dengan bootstrap.Ada 7 macam style tombol yang resedia pada bootstrap yaitu:
Default,Primary,Success,Info,Warning,Danger dan Link.Baiklah mari kita mulai
Pada kesempatan kali ini saya akan berbagi tutorial membuat button dengan bootstrap.Ada 7 macam style tombol yang resedia pada bootstrap yaitu:
Default,Primary,Success,Info,Warning,Danger dan Link.Baiklah mari kita mulai
- Button Default,yaitu button biasa berwarna putih
<div class="container"><h2>Contoh Button Styles</h2>
<button type="button" class="btn btn-default">Default</button></div>
Untuk hasilnya nanti saya sertai screenshoot di bawah
- Button Primary, yaitu button dengan warna biru
<div class="container">
<button type="button" class="btn btn-primary">Primary</button></div>
- Button Succes, yaitu button dengan warna hijau
<div class="container">
<button type="button" class="btn btn-success">Success</button></div>
- Button Info, yaitu button dengan warna biru muda
<div class="container">
<button type="button" class="btn btn-info">Info</button></div>
- Button Warning, yaitu button dengan warna kuning
<div class="container"><button type="button" class="btn btn-warning">Warning</button></div>
- Button Danger, yaitu button dengan warna merah
<div class="container">
<button type="button" class="btn btn-danger">Danger</button></div>
- Button link, yitu button dengan tampilan link
<div class="container">
<button type="button" class="btn btn-link">Link</button></div>
Tag di atas untuk membuat satu jenis tombol,jika di gabungkan tag nya seperti di bawah
<!DOCTYPE html>
<html>
<head>
<title>Bosstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="witdh=device-witdh, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contoh Button Styles</h2>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
Berikut SS hasilnya
SS coding nya
Mudah bukan untuk membuat button dengan bootstrap?Oke mungkin sekian dulu untuk tutorial kali ini sampai jumpa di postingan berikutnya.Sekian.
Referensi:http://w3schools.com/
Referensi:http://w3schools.com/
Wassalamulaikum Wr.wb
0 komentar:
Posting Komentar