Tutorial Bootstrap : Membuat Tombol Dengan Bootstrap 3

0 Comments


Halo, ini adalah posting pertama saya tentang Bootstrap. Saya gak menulis dengan sistematis tutorial Bootstrap ini, jadi judulnya pun gak berurut seperti tutorial bootstrap di website lain. Oiya, ngomong-ngomong soal tutorial, sepertinya posting ini belum cocok disebut tutorial karena cuma berbagi ala kadarnya tentang bagaimana menggunakan Bootstrap untuk mempercantik tampilan website yang kita desain.

Kostumasi Tombol Di Bootstrap

Untuk membuat tombol yang keliatan menarik, Bootstrap punya class 'btn' yang siap meng-customize tampilan hyperlink biasa menjadi tombol yang enak dilihat.

Sebelum mencoba, pastikan bootstrap styling sheet sudah di-link dan bootstrap.js juga jquery-nya sudah di-include-kan dalam file html yang dibuat. Caranya?

Baca Juga : Membuat desain web responsive dengan Bootstrap

<head>
  <title>Judul dokumen</title>
  <link rel="stylesheet" type="text/css" href="bootstap/css/bootstrap.css">
 </head>
 <body>
  
 </body>
 <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
 <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

Nah, untuk menampilkan tombol yang baik, kita cukup menambahkan class 'btn' pada hyperlink atau button yang dibuat. Setelah itu, tambahkan class 'btn-...' untuk memberikan tampilan spesifik pada tombol tersebut. Bootstrap mempunyai beberapa jenis tombol, berikut ini adalah class yang tersedia.

HasilKode HTML
Tutorial Tombol Bootstrap<a href="#" class="btn btn-default">Default</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-primary">Primary</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-info">Info</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-success">Success</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-warning">Warning</a>
Tutorial Tombol Bootstrap<a href="#" class="btn btn-danger">Danger</a>

Selain dipakai untuk meng-customize hyperlink (<a href=""></a>), class 'btn' bisa dipakai juga untuk jenis kode <input type="button"> atau <button>.

Baca juga : Aplikasi Cetak Kwitansi dengan PHP MySQL

Untuk mengatur ukuran tombol, kita bisa tambahkan class berikut :
  • btn-lg : untuk membuat tombol dengan ukuran besar
  • btn-sm : untuk membuat tombol dengan ukuran kecil
  • btn-xs : untuk membuat tombol dengan ukuran sangat kecil
  • Untuk membuat tombol ukuran sedang, cukup tanpa menambahkan salah satu dari 3 class di atas.

Kira, ini dulu untuk tutorial bootstrap (eh, sharing maksudnya bukan tutorial :D ). Di tulisan berikutnya, saya akan coba share lagi tentang element di bootstrap yang bisa kita pakai untuk customize desain web kita. Semoga bermanfaat.

Baca Tulisan Lainnya Juga :)

0 komentar: