MENGATUR TAMPILAN GAMBAR BOOTSTRAP (BOOTSTRAP PART3)

Kali ini saya melanjutkan bootstrap untuk mengatur tampilan gambar di bootstrap , disimak guys.

A. Pengertian
Bootstrap adalah framework atau tools untuk membuat aplikasi web atau website yang bersifat responsive secara cepat, mudah dan gratis. Kata 'responsive' disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai dengan lebar layar yang menampilkanya.
Salah satu website besar yang menggunakan framework bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut " Twitter Bootstrap" Dengan bootstrap, kita dapat membuat responsive website dengan cepat dan mudah  dapat berjalan sempurna pada browser-browser modern seperti Firefox, Google Chrome, Safari, Opera, Dan Internet Exploler.

B. Latar belakang

Salah satu kemudahan Botstrap yaitu Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Tifografi, Tabel, Form, Navigasi dan lain-lain. Di dalam Bootstrap juga sudah terdapat Javascript (jQuery Pluigns) untuk menghasilkan komponen UI yang cantik transtition, Modal, Dropdown, scroolspy, ToolTip, PopOver, Tab, Alert, Button, Carousel, dan lain-lain.

C. Alat dan Bahan

• PC / Laptop
• CSS Bootstrap

Bootstrap memiliki class untukmengatur gambar sesuai keinginan kita. Kita hanya perlu mengingat dan memahami classnya saja. Adapun cara beberapa class Bootstrap 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 thumbnail

D. Tahapan Pelaksanaan

MEMBUAT GAMBAR THUMBNAIL

Tampilan gambar dengan class ini sangat sesuai untuk keperluan thumbnailing sesuai namanya.

Hasilnya 

MEMBUAT GAMBAR CIRCLE

Sama seperti membuat gambar thumbnail. 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 Blackberyy Mesengger di perangkat android, tentu sudah terbiasa melihat tampilan profile picture dalam frame berbentuk lingkaran.

MEMBUAT GAMBAR ROUND DENGAN BOOTSRAP

Class ini digunakan untuk menampilkan gambar yang memiliki sudut melengkung atau lebih dikenal dengan istilah rounded-corner.

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

E. Kesimpulan

Kita dapat dengan mudah memanipulasi gambar dengan Bootstrap ini dan sedikit saran dari saya, Anda tidak bisa menggunakan class "img-rounded" dan "img-circle" pada Internet Exploler 8 dan Versi di bawahnya.

F. Refrensi

• Malas Ngoding
• http://www.script-kiddies.org/2016/12/belajar-bootstrap-part-3-mengatur.html

G. Penutup

Sekian Postingan Kali ini Semoga Bermanfaat, Good Luck..,