Jumat, 24 Februari 2017

Tutorial Membuat Button Dengan Bootstrap Button

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

  • Button Default,yaitu button biasa berwarna putih
kali ini saya akan meletakkan button pada DIV agar tertata rapi.Tuliskan tag di bawah ini.
<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/ 
 
Wassalamulaikum Wr.wb 
Share:

0 komentar:

Posting Komentar