Ticker

6/recent/ticker-posts

Membuat Tombol Dengan Bootstrap

Desember 27, 2016
Pada artikel ini kita akan mencoba membuat beberapa tombol menggunakan Bootstrap. Bootstrap menyediakan beberapa class yang bisa kita gunakan untuk mendesign bentuk tombol yang menarik. Kita cukup menambahkan class 'btn' pada hyperlink atau button yang kita buat. Setelah itu, tambahkan class "btn-..." untuk memberikan tampilan spesifik pada tombol tersebut.
Berikut ini adalah beberapa class bootstrap yang bisa kita gunakan untuk membuat tombol, mengatur warna dari tombol tersebut.

  • btn, untuk membuat tombol.
  • btn-success, untuk membuat tombol berwarna hijau.
  • btn-info, untuk membuat tombol berwarna biru langit.
  • btn-warning, untuk membuat tombol berwarna kuning.
  • btn-primary, untuk membuat tombol berwarna biru.
  • btn-default, untuk membuat tombol dengan warna standar bootstrap.
  • btn-danger, untuk membuat tombol berwarna merah.
Untuk lebih jelasnya bisa dilihat pada contoh berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat tombol dengan Bootstrap</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
    <h1>Membuat tombol dengan Bootstrap</h1>
    <a href="#" class="btn btn-success">Success</a>  
    <a href="#" class="btn btn-info">Info</a>
    <a href="#" class="btn btn-warning">Warning</a> 
    <a href="#" class="btn btn-primary">Primary</a>
    <a href="#" class="btn btn-default">Default</a>
    <a href="#" class="btn btn-danger">Danger</a>
</body>
</html>

 Hasilnya seperti berikut,


Untuk contoh ini bisa di lihat di link Berikut

Selain kita bisa mengatur warna tombol kita juga bisa mengatur ukuran dari tombol tersebut. Untuk mengatur ukuran tombol, kita bisa tambahkan class berikut : 
  • btn-lg : untuk membuat tombol dengan ukuran besar 
  • btn-lg : membuat tombol dengan ukuran besar.
  • btn-sm : untuk membuat tombol dengan ukuran kecil 
  • btn-xs : untuk membuat tombol dengan ukuran sangat kecil.
 Semoga bermanfaat..
Unknown

Diposting oleh Unknown

Posting Komentar

0 Komentar