Jumat, 03 Maret 2017

Membuat List Group Dengan Bootstrap

Assalamualaikum Wr.Wb


Masih dengan dengan bootsrap kali ini saya akan berbagi tutrial membuat list dengan bootstrap.List di sini maksudnya sama seperti list di html yang berbeda hanya secara tampilan lebih menarik dari list yang ada di html dan kita tidak perlu terlalu repot untuk membuat style atau yang lainnya jika ingin membuat tampilan list kita menjadi lebih menarik,baiklah mari kita mulai.

  • Basic List Group(yaitu list dengan model biasa)
<!DOCTYPE html>
<html>
<head>
    <title></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>Basic List Group</h2>
    <ul class="list-group">
        <li class="list-group-item">Soto</li>
        <li class="list-group-item">Bakso</li>
        <li class="list-group-item">Sate</li>
       
    </ul>
</div>
</body>
</html>

Dan inilah hasilnya




  • List Group Whith Linked Item(list grup dengan link)
<!DOCTYPE html>
<html>
<head>
    <title></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>Basic List Group Whith Linked Item</h2>
    <div class="list-group">
        <a href="#" class="list-group-item">Soto</a>
        <a href="#" class="list-group-item">Bakso</a>
        <a href="#" class="list-group-item">Sate</a>
    </div>
</div>
</body>
</html>

Dan inilah hasilnya


 
  • Contextual Clases(yaitu list dengan beberapa warna)
<!DOCTYPE html>
<html>
<head>
    <title></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>Contextual Clases</h2>
    <ul class="list-group">
        <li class="list-group-item list-group-item-warning">Bakso</li>
        <li class="list-group-item list-group-item-danger">Soto</li>
        <li class="list-group-item list-group-item-info">Sate</li>
    </ul>
</div>
</body>
</html>

Dan inilah hasilnya

 
  •  Active state
 <!DOCTYPE html>
<html>
<head>
    <title></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">
    <div class="list-group">
    <a href="#" class="list-group-item active">Bakso</a>
    <a href="#" class="list-group-item">Soto</a>
    <a href="#" class="list-group-item">Sate</a>  
    </div>
</div>
</body>
</html>
 Dan inilah hasilnya
Mudah bukan untuk membuat list dengan bootstrap? dan hasilnya saya rasa lebih menarik daripada html biasa,baiklah mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb 
Read More

Kamis, 02 Maret 2017

Mengenal Bootstrap Button Groups

Assalamualaikum Wr.Wb




Kali ini saya akan membahas tentang Button Group pada bootstrap,seperti namanya button group adalah beberapa kumpulan button yang style nya telah di sediakan bootstrap,oke mari kita mulai satu persatu karena ada beberapa jenis button group dengan catatan teman semua sudah mendownload bootstrap dan simpan filenya dalam satu folder dengan bootstrap.

  • Button Groups(button biasa)
<!DOCTYPE html>
<html>
<head>
    <title></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 Groups</h2>
    <div class="btn-group">
    <button type="button" class="btn btn-primary btn-danger">Button1</button>
    <button type="button" class="btn btn-primary">Button2</button>
    <button type="button" class="btn btn-primary btn-warning">Button3</button>
       
    </div>
</div>
</body>
</html>
  
Hasilnya seperti di bawah ini

 
  • Vertical Button Group(button dengan gaya vertikal)
<!DOCTYPE html>
<html>
<head>
    <title></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 Groups Vertical</h2>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary btn-danger">Button1</button>
    <button type="button" class="btn btn-primary">Button2</button>
    <button type="button" class="btn btn-primary btn-warning">Button3</button>
       
    </div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
 
  • Justified Button Group(button ini modelnya agak lebar tergantung banyaknya button yang di buat)
<!DOCTYPE html>
<html>
<head>
    <title></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 Groups Justified</h2>
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary btn-danger">Button1</a>   
        <a href="#" class="btn btn-primary ">Button2</a>
        <a href="#" class="btn btn-primary btn-warning">Button3</a>
       
    </div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
 

  • Nesting Button Groups Dropdown Menu(button dengan dropdown)
<!DOCTYPE html>
<html>
<head>
    <title></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 Groups Dengan Dropdown</h2>
   
<div class="container">
 
  <div class="btn-group">
    <button type="button" class="btn btn-primary btn-danger">Button1</button>
    <button type="button" class="btn btn-primary">Button2</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary btn-warning dropdown-toggle" data-toggle="dropdown">
      Button3<span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini
 

Ya mungkin sekian dulu postingan kali ini tentang Button Groups semoga bermanfaat di balik banyaknya kekurangan sampai jumpa di postingan berikutnya terimakasih.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Rabu, 01 Maret 2017

Bootstrap Alerts

Assalamualaikum Wr.Wb



Berjumpa lagi dengan bootstrap,sesuai dengan namanya bootstrap alerts bisa di artikan sebuah style atau fitur atau apalah itu yang intinya bisa di gunakan untuk membuat sebuah tampilan pesan peringatan maupun pesan yang intinya untuk info.Daripada bingung - bingung mari langsung kita coba untuk membuatnya ada 4 jenis style bootstrap alert.
  •  Danger yaitu alert dengan background yang cenderung merah
Di sini saya meletakkan bootstrap alerts di dalam tag container agar lebih tertata.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</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">
<div class="alert alert-danger">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap danger</a>.
  </div>   
</div>
</body>
</html>

Dan inilah hasilnya


 
  • Warning yaitu alerts dengan background yang cenderung kuning
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</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">
<div class="alert alert-warning">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap warning</a>.
  </div>   
</div>
</body>
</html>
Hasilya seperti di bawah
 
  • Info yaitu alert yang background nya cenderung berwarna biru

 <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</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">
<div class="alert alert-warning">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap warning</a>.
  </div>   
</div>
</body>
</html>
Dan hasilnya seperti di bawah
  •  Success yaitu alerts yang backgrond nya cenderung berwarna hijau
 <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</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">
<div class="alert alert-success">
    <strong>Danger!</strong> Contoh<a href="#" class="alert-link">bootstrap succes</a>.
  </div>  
</div>
</body>
</html>
Dan hasilnya seperti di bawah
  
saya beri satu contoh lagi yaitu alerts yang bisa di close tapi untuk membuktikan harus langsung di coba langsung
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Alert</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">
<div class="alert alert-success alert-dismissable">
    <strong>Danger!</strong> Contoh Tekan simbol "X" untuk close<a href="#" class="close" data-dismiss="alert" >X</a>.
  </div>   
</div>
</body>
</html>
 Hasilnya seperti di bawah,tapi ingat harus di coba langsung
Oke mungkin sekian dulu untuk postingan kali ini semoga bermanfaat,sampai jumpa di postingan berikutnya terimakasih sudah berkunjung.

Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb 
Read More

Selasa, 28 Februari 2017

Mengenal Dan Mengetahui Fungsi Jumbotron Pada Bootstrap

Assalamualaikum Wr.Wb



Apa kabar semua?semoga sehat selalu pada postigan kali saya ingin berbagi sedikit pengetahuan yaitu tentang Jumbotron pada Bootstrap.Apa itu Jumbotron? yaitu merupakan sebuah style yang telah tersedia di Bootstrap yang bisa kita gunakan untuk meletakkan content yang berukuran cukup besar misalnya seperti untuk membuat header web ataupun content-content gambar yang di rasa membutuhkan ukuran yang cukup besar bisa menggunakan bootstrap agar tampilannya lebih rapi,oke lebih baik kita mulai saja.

  • Jumbotron Inside Container
Yaitu jumbotron yang berada di dalam container,artinya tampilan jumbotron lebarnya tidak memenuhi layar,tuliskan tag bawah ini

<!DOCTYPE html>
<html>
<head>
    <title></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">
<div class="jumbotron">
    <h1>Bootstrap Inside Container</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
   
</div>

</body>
</html>

Dan hasilnya adalah seperti berikut


  
  • Jumbotron Outside Container
yaitu tampilan jumbotron yang lebarnya akan memenuhi layar,tuliskan tag di bawah ini

<!DOCTYPE html>
<html>
<head>
    <title></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="jumbotron">
<h1>Jumbotron outside container</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   
</div>
</body>
</html>

Dan inilah hasilnya

 


Berikut jika jumbotron di gunakan untuk membuat tampilan header web dengan menggunakan gambar, tinggal masukkan gambar pada jumbotron atur lebar dan tinggi gambar dan contoh hasilnya seperti di bawah


untuk gambar di atas lebih jelasnya lihat ss coding di bawah




Oke mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa di postingan berikutnya terimakasih sudah mau berkunjung.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Senin, 27 Februari 2017

Mengenal Bootstrap Grid

Assalamualaikum Wr.Wb

Oke teman - teman kali ini saya ingin mengajak teman semua untuk mengenal bootstrap grid,apa itu? Bootstrap Grid yaitu ukuran untuk mengatur besar kecl bagian elemet pada tampilan web yang ingin kita buat,selain itu juga bisa mempermudah kita untuk membuat tampilan layout sebuah web dan bisa untuk mengatur keresponsivan tampilan web yang kita buat.Ada 4 jenis grid pada bootstrap yaitu:
  • col-lg
Di gunakan untuk mengatur grid pada layar monitor komputer yang berkuran besar.
  • col-md
Di gunakan untuk mengatur grid pada layar monitor komputer yang berukuran medium.
  • col-sm
Di gunakan untuk mengatur grid pada layar tablet.
  • col-xs
Di gunakan untuk mengatur grid pada layar handphone.

Selain itu ada 12 size grid pada bootstrap,di mulai dari size 1 yaitu paling kecil 
sampai 12 merupakan size paling lebar.Mari kita coba untuk lebih jelasnya,kali ini saya akan menggunakan grid col-sm dengan size 1,2,3,4,dan 12.

Tuliskan tag di bawah ini,oh ya ini sudah saya tambahkan style css agar lebih jelas tampilannya antara element yang satu dengan yang lain

<!DOCTYPE html>
<html>
<head>
    <title></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>
  <style>
      div{
          background-color: #0066ff;
          color: white;
          border: 1px solid #fff;
          text-align: center;
          padding: 10px;
      }
  </style>
</head>
<body>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>

<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>
<div class="col-md-2"> col-md-2</div>

<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>

<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>


<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>

<div class="col-md-12">col-md-12</div>
</body>
</html>
Bila kurang jelas silakan lihat ss coding di bawah
 
Dan inilah hasilnya
 

Ya mungkin sekian dulu postingan kali ini semoga bermanfaat sampai jumpa dipostingan berikutnya terimakasih sudah mau berkunjung.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

Sabtu, 25 Februari 2017

Mengenal Dan Menerapkan Glyphicons Pada Bootstrap

Assalamualaikum Wr.Wb



Oke pada kesempatan kali ini saya akan berbagi sedikit tutorial mengenai glyphicons pada bootstrap.Apa itu glyphicons?Glyphicons adalah kumpulan icon ringan yang telah di sediakan oleh bootstrap dan warnanya bisa di ganti - ganti seperti font,itu menurut pendapat saya sendiri lho ya?jika salah mohon di benarkan.Baiklah tidak usah panjang lebar mari kita mulai.

  • Pertama download boostrap dulu bagi yang belum punya,setelah itu tuliskan tag untuk memanggil bootstrap.
<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>

  •  Setelah itu kita masukkan tag untuk memanggil icon,saya akan mencoba membuat icon signal
<div class="col-sm-4">
        <span class="glyphicon glyphicon-signal logo"></span>   
        </div>    

Berikut SS hasilnya


Catatan:Icon di atas telah saya ubah warna dan ukurannya utuk lebih jelasnya silahkan lihat ss coding yang saya sertakan di akhir postingan ini.
  • Selanjutnya kita coba icon Globe atau bumi
 <div class="col-sm-4">
        <span class="glyphicon glyphicon-globe logo"></span>  
        </div>

Berikut SS Hasilnya




  • Lalu kita coba menampilkan icon user
 <div class="col-sm-4">
        <span class="glyphicon glyphicon-user logo"></span>  
        </div>

SS Hasilnya

  
  •  Yang terakhir kita coba untuk menampilkan icon music
 <div class="col-sm-4">
        <span class="glyphicon glyphicon-music logo2"></span>  
        </div>
 SS Hasilnya
 
Sebenarnya banyak sekali icon - icon yang ada pada glyphicons Bootstrap silahkan di sesuikan dengan kebutuhan masing - masing.Dan yang belum jelas mengenai glyphicons bisa lihat ss coding di bawah


Oke cukup sekian  postingan kali ini mengenai glyphicons semoga bermanfaat di balik banyaknya kekurangan sekian.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Read More

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 
Read More