Memanipulasi Gambar dengan Bootstrap

18 Aug 2016 10:05 2539 Hits 1 Comments
memanipulasi gambar dengan bootstrap lebih mudah dari pada CSS. Meskipun bootstrap juga CSS.

Setelah sebelumnya saya memposting cara membuat dan menesain table menggunakan bootstrap, kali ini saya akan berbagi ilmu cara membuat tampilan gambar yang menarik dengan bootstrap.

Dengan menggunakan bootstrap membuat gambar dengan sudutnya melengkung, gambar dengan berbentuk lingkaran, gambar thumbnail dan gambar responsive sangat mudah.

Karena bootstrap menyediakan class untuk mengatur gambar maka kita akan mudah untuk mengatur gambar sesuai keinginan kita. Misalnya, Anda ingin membuat gambar dengan berbentuk rounder, circle dan responsive sangat mudah dengan bootstrap.

Berikut beberapa class dalam bootstrap yang sering digunakan untuk memanipulasi tampilan gambar.

1. Membuat gambar thumbnail dengan bootstrap (class img-thumbnail)

Class ini berfungsi untuk menampilkan gambar thumbnail. Dengan menggunakan class ini gambar kita akan lebih cantik dari biasanya.

Untuk membuat gambar thumbnail caranya sangat mudah, Anda hanya tinggal memasukan class img-thumbnail pada tag img. Contoh:

Skrip diatas akan menghasilkan tampilan gambar seperti berikut

Bagus kan?

Dari skrip diatas dapat dilihat bahwa untuk membuat gambar thumbnail adalah:

img src="luffy.png" class="img-thumbnail" alt="Gambar Luffy" width="500" height="400"

2. Membuat gambar circle dengan bootstrap (class img-circle)

Seperti namanya, class ini berfungsi untuk membuat tampilan gambar menjadi berbentuk lingkaran.

Penggunaan class ini sama seperti class img-thumbnail. Anda hanya perlu menambahkan class img-circle pada tag img. Perhatikan contoh berikut.

Jika di run di browser hasilnya seperti berikut

Skrip berikut ini yang membuat gambar tersebut menjadi bentuk lingkaran:

img src="luffy.png" class="img-circle" alt="Gambar Luffy" width="500" height="400"

3. Membuat gambar rounded corner dengan bootstrap (class img-rounded)

Untuk membuat gambar yang sudutnya berbentuk melengkung kita dapat menggunakan class img-rounded.

Seperti halnya class img-thumbnail dan class img-circle, class ini disimpan pada tag img untuk penggunaannya. Seperti contoh erikut ini

Skrip diatas akan menghasilkan tampilan seperti berikut:

Terlihat bahwa skrip untuk menghasilkan gambar yang sudutnya melengkung adalah:

img src="luffy.png" class="img-rounded" alt="Gambar Luffy" width="500" height="400"

4. Membuat gambar responsive dengan bootstrap (class img-responsive)

Class ini berfungsi untuk membuat gambar menjadi menyesuaikan secara otomatis dengan layar yang berbeda dan reolusi yang berbeda saat dijalankan.

Untuk membuat tampilan gambar menjadi responsive menggunakan bootstrap caranya sangat mudah. Anda hanya perlu menambahkan class img-responsive pada tag img. Contoh:

Hasil dari skrip diatas akan terlihat seperti berikut ini.

Berikut skrip yang membuat gambar menjadi responsive

img src="luffy.png" class="img-responsive" alt="Gambar Luffy" width="500" height="400"

 Bagaimana? Hasilnya bagus – bagus bukan?

Itulah kelebihan dari bootstrap, salah satunya dalam memenipulasi gambar. Kita tidak perlu repot – repot dengan css jika ingin membuat gambar lingkaran atau responsive. Kita hanya cukup memanggil class yang ada pada bootstrap untuk membuat gambar yang terlihat menarik.

Sekian artikel tutorial ini saya buat, mudah – mudahan bermanfaat da selamat mencoba!

Tags Web Bootstrap

About The Author

Rijwan 42
Ordinary

Rijwan

Saya merupakan anak RPL yang bercita - cita membangun web sendiri juga menjadi ahli pemrograman serta komputer.

Comments

You need to be logged in to be able to post a comment. Click here to login
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel