Memasang Buttons dan Image di Bootstrap

Sebelum saya lanjutkan pembahasan ini, saya ingin mengucapkan terima kasih yang sebesar-besarnya kepada sahabat semua yang mau mengikuti bahasan saya tentang Bootstrap; mulai dari membuat template dasar Bootstrap sampai artikel sekarang ini yaitu cara memasang tombol (button) dan gambar (image) di Bootstrap. Semoga kalian tidak bosan dan terus mengikuti pembahasan Bootstrap ini sampai selesai. Besar harapan saya jika kalian juga mau mengikuti artikel-artikel saya yang lain.
Kembali ke pokok pembahasan. Untuk memasang button dan image, anda bisa mempelajari langkah-langkahnya dibawah ini:

Button

1. Tombol Standar
   Untuk memasang tombol (button), kita menggunakan kelas .btn pada elemen <a>, <button>, or <input>. Sebelum itu, ada beberapa hal yang perlu diperhatikan saat memasang button, yaitu:
   
   1. Walaupun kelas button dapat digunakan pada elemen <a> dan <button>, hanya elemen <button> yang didukung oleh komponen nav dan navbar Bootstrap.
   2. Jika elemen <a> digunakan sebagai tombol - memicu fungsi di halaman, bukan menavigasi ke dokumen lain atau bagian dalam halaman saat ini - maka harus di beri tambahan role="button"
   Contoh penerapannya:
   

   <a class="btn btn-default" href="#" role="button">Link</a>
   <button class="btn btn-default" type="submit">Button</button>
   <input class="btn btn-default" type="button" value="Input">
   <input class="btn btn-default" type="submit" value="Submit">

   
   

   Link

2. Opsi kelas tombol
   Untuk membuat tombol, ada beberapa opsi kelas yang bisa digunakan:
   
   • .btn-default
   • .btn-primary
   • .btn-success
   • .btn-info
   • .btn-warning
   • .btn-danger
   • .btn-link
   Contoh penerapannya:
   

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

   
   
3. Ukuran tombol
   Untuk membuat tombol yang berbeda ukuran, kita bisa menggunakan kelas dibawah ini:
   
   • .btn-lg
   • .btn-md
   • .btn-sm
   • .btn-xs
   Contoh penerapannya:
   

   <p>
     <button type="button" class="btn btn-primary btn-lg">Large button</button>
     <button type="button" class="btn btn-default btn-lg">Large button</button>
   </p>
   <p>
     <button type="button" class="btn btn-primary">Default button</button>
     <button type="button" class="btn btn-default">Default button</button>
   </p>
   <p>
     <button type="button" class="btn btn-primary btn-sm">Small button</button>
     <button type="button" class="btn btn-default btn-sm">Small button</button>
   </p>
   <p>
     <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
     <button type="button" class="btn btn-default btn-xs">Extra small button</button>
   </p>

   
   
4. Tombol blok bertingkat
   Untuk membuatnya, gunakan kelas .btn-block
   Contoh penerapannya:
   

   <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
   <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

   
   
5. Tombol aktif dan disabled
   Contoh penerapannya:
   

   <button type="button" class="btn btn-primary">Primary Button</button>
   <button type="button" class="btn btn-primary active">Active Primary</button>
   <button type="button" class="btn btn-primary disabled">Disabled Primary</button>

Images

1. Bentuk gambar
   Untuk merubah bentuk tampilan gambar, gunakan kelas berikut ini:
   
   • .img-rounded
   • .img-circle
   • .img-thumbnail
   Contoh penerapan:
   

   <img alt="DESKRIPSI GAMBAR" class="img-rounded" src="LINK GAMBAR" title="JUDUL GAMBAR"/>
   <img alt="DESKRIPSI GAMBAR" class="img-circle" src="LINK GAMBAR" title="JUDUL GAMBAR"/>
   <img alt="DESKRIPSI GAMBAR" class="img-thumbnail" src="LINK GAMBAR" title="JUDUL GAMBAR"/>

   
   Hasilnya:
   

   img-rounded img-circle img-thumbnail

2. Gambar responsif
   Untuk membuat gambar (image) responsif, gunakan kelas .img-responsive pada tag <img>.
   Contoh penerapannya:
   

   <img alt="DESKRIPSI GAMBAR" class="img-responsive" src="LINK GAMBAR" title="JUDUL GAMBAR"/>

   Hasilnya:
   

   img-responsif

Itu tadi cara membuat tombol dan memasang gambar di Bootstrap. Selanjutnya kita akan membahas beberapa kelas pendukung untuk pengembangan CSS di Bootstrap. Seperti biasa.. tunggu aja ya... :)

INGAT!!!

jika ingin mencobanya secara offline, masukkan script diatas pada template dasar diantara kelas .container atau .container-fluid (hapus tulisan <!-- AWAL KONTEN --> sampai <!-- AKHIR KONTEN -->). Jika belum punya template dasar, anda bisa membacanya disini