Tutorial Bootstrap: Penanganan Gambar (Image) di Bootstrap 3

0 Comments


Halo, kembali posting tentang Tutorial Bootstrap 3 di Ayayank.com kali ini hadir untuk berbagi tips tentang framework web desain yang sangat populer ini. Di posting terdahulu kita pernah membahas tentang bagaimana mempercantik tombol di Bootstrap, membuat layout responsive dengan Bootstrap dan lain-lain. Nah kali ini yang akan kita bahas adalah tentang kustumasi gambar / image.

Bootstrap mempunyai cara penanganan image / gambar yang cukup lengkap untuk kebutuhan web desain anda. Cukup menambahkan beberapa baris kode (class) pada tag "<img" sehingga style css bawaan bootstrap akan mempercantik tampilan gambar sesuai dengan kebutuhan. Class built-in yang disediakan Bootstrap untuk menganani gambar anda yaitu :

Kostumasi Image di Bootstrap

  • img-rounded
    Class ini digunakan untuk menampilkan gambar yang memiliki sudut melengkung atau lebih dikenal dengan istilah rounded-corner. Cara penulisannya adalah
    <img src="gambar.jpg" class="img-rounded">

  • img-circle
    Class
    img-circle
    adalah cara terbaik menampilkan gambar dalam sebuah lingkaran penuh. Jika anda pengguna aplikasi Blackberry Messenger di perangkat Android, tentu sudah terbiasa melihat tampilan profile picture dalam frame berbentuk lingkaran. Nah penggunaannya adalah
    <img src="gambar.jpg" class="img-circle"/>
  • img-thumbnail
    Untuk memberi sentuhan bingkai, anda bisa menggunakan class
    img-thumbnail
    dari Bootstrap. Tampilan gambar dengan class ini sangat sesuai untuk keperluan thumbnailing sesuai namanya. Penggunaan class ini pada tag img adalah
    <img src="gambar.jpg" class="img-thumbnail"/>

Tampilan yang akan dihasilkan untuk masing-masing class adalah seperti gambar berikut :

Penanganan Gambar di Bootstrap
Tampilan gambar hasil manipulasi class bootstrap




Catatan :
Anda tidak bisa menggunakan class
img-rounded
dan
img-circle
pada Internet Explorer 8 dan versi di bawahnya. Dua class bootstrap ini tidak bisa bekerja di browser bawaan Microsoft Windows tersebut, karena belum sepenuhnya mendukung property CSS
border-radius

Semoga bermanfaat, dan baca terus ayayank yah ! :)

Baca Tulisan Lainnya Juga :)

0 komentar: