Bagaimana cara membuat tampilan gambar menjadi responsif dengan menggunakan Bootstrap 3

Artikel ini saya tulis untuk para pengguna platform Bootstrap, khususnya Bootstrap versi 3.

Bagaimana cara membuat tampilan gambar menjadi responsif dengan menggunakan Bootstrap 3

Pada beberapa waktu yang lalu, saya mendapatkan pertanyaan dari pengguna ekstensi Opencart 3.0.2.0 Modification yang saya buat.

Artikel ini bisa membantu Anda yang baru menggunakan platform Bootstrap khususnya versi 3 untuk website Anda. Pada artikel ini saya akan memberikan sedikit pengetahuan bagaimana caranya membuat konten gambar menjadi lebih responsif.

Karena artikel ini tips mengenai Bootstrap, pastikan bahwa Anda sudah meletakan kode HTML dasar untuk penggunaan Bootstrap 3 (baca selengkapnya di: Getting Started Bootstrap 3). Dan artikel ini berhubungan dengan ekstensi saya di atas, maka Anda tidak perlu lagi menambahkan/meletakan kode HTML tersebut pada template saya.

Jika Anda telah menginstal ekstensi saya di atas, dan Anda mendapatkan bahwa gambar yang Anda masukan pada konten website Anda tidak tampil responsive, maka Anda hanya perlu menambahkan kode HTML class="img-responsive" pada kode HTML gambar Anda. Sebagai hasilnya maka akan seperti berikut;
<img src="http://websiteanda.com/image/catalog/gambaranda.jpg" class="img-responsive" />.

Untuk lebih jelasnya dalam penggunaan ekstensi di atas adalah pada gambar di bawah ini;
Silahkan klik gambar untuk gambar yang lebih jelas.

Bootstrap Opencart

Pada halaman Admin untuk membuat atau mengubah konten, silahkan klik tombol gambar seperti pada gambar di atas untuk mengambil atau memasukan gambar Anda pada konten halaman situs Anda.

Bootstrap Opencart

Setelah Anda memasukan gambar tersebut, maka tampilannya akan seperti di atas.

Bootstrap Opencart

Kemudian, klik tombol seperti gambar di atas untuk mengubah tampilan gambar menjadi responsif.

Bootstrap Opencart

Pada halaman Admin untuk membuat atau mengubah konten, silahkan klik tombol gambar seperti pada gambar di atas.

Bootstrap Opencart

Silahkan diubah pada kode HTML style="width: 800px;" menjadi class="img-responsive".

Bootstrap Opencart

Jangan lupa untuk klik kembali tombol tampilan kode seperti gambar di atas sebelum Anda menyimpan konten ini. Setelah selsai, silahkan klik simpan dan lihat pada halaman situs Anda melalui tampilan mobile.

URL Singkat :
DirZn

DirZn

Saya adalah seorang pengembang web lepas dengan semangat untuk terus belajar. Saya sangat menyukai dunia pemograman dengan menggunakan bahasa php yang sudah sangat lama saya pelajari. Melalui situs ini juga saya akan banyak berbagi kepada Anda semua.

Lihat semua artikel saya

Komentar