Tutorial Bootstrap: Penanganan Gambar (Image) di Bootstrap 3
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 :
Tampilan yang akan dihasilkan untuk masing-masing class adalah seperti gambar berikut :
Semoga bermanfaat, dan baca terus ayayank yah ! :)
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
Classimg-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 classimg-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 :
 |
| Tampilan gambar hasil manipulasi class bootstrap |
Catatan :
Anda tidak bisa menggunakan class
Anda tidak bisa menggunakan class
img-roundeddan
img-circlepada 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 ! :)
0 komentar: