ASSALAMU'ALAIKUM Wr. Wb.
Mengatur Tampilan Gambar Dengan Bootstrap
Setelah sebelumnya kita belajar Pengertian dan Mengenal Bootstrap dan Membuat Table Dengan Bootstrap sekarang kita akan masuk ke Mengatur Tampilan Gambar Bootstrap . Yaitu membentuk tampilan gambar yang melengkung di sisi sudut, gambar berbentuk lingkaran, gambar tumbnail dan gambar responsive.
Bootstrap memiliki class untuk mengatur gambar sesuai keinginan kita. Kitahanya perlu mengingat dan memahami classnya saja. Adapun beberapa class Bootstap yang dapat digunakan untuk mendesain web
- img-responsive : Untuk membuat gambar responsive pada saat dijalankan pada semua bentuk ukuran dan resolusi
- img-rounded : Untuk membuat gambar berbentuk rounded yaitu sisi samping dari gambar akan melengkung
- img-circle : Untuk membuat gambar menjadi bulat
- img-thumbnail : Untuk membuat gambar tumbnail
Membuat Gambar Thumbnail
Tampilan gambar dengan class ini sangat sesuai untuk keperluan thumbnailing sesuai namanya
Perhatikan contoh diatas. Saya menambahkan class="img-thumbnail" untuk membuat gambar thumbnail dan jangan lupa sediakan gambar yang satu file dengan program kerja
<img src="blogger.png" class="img-thumbnail" alt="Contoh Gambar">
Membuat Gambar Circle
Sama seperti membuat gambar tumbnail. Kita dapat menggunakan "img-circle" untuk membuat gambar dengan bentuk lingkaran / bulat. Class ini merupakan 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
hasil
Membuat Gambar Round Dengan Bootstra
Class ini digunakan untuk menampilkan gambar yang memiliki sudut melengkung atau lebih dikenal dengan istilah rounded-corner.
hasil
Membuat Gambar Responsive
Untuk membuat gambar responsive sobat dapat menggunakan class "img-responsive" untuk membuat gambar tampil penuh di semua ukuran dan resolusi. Berikut contoh penggunaanya
hasil
Sekian dari saya apabila ada kesalahan saya minta maaf. TerimaKasih
WASSALAM











Tidak ada komentar:
Posting Komentar