Tutorial Pemrograman

Cara Menampilkan Bentuk Gambar dengan Bootstrap

Bootstrap adalah suatu pustaka CSS Framework yang didesain untuk mempercantik tampilan dalam produktifitas website. Bootstrap ini memiliki kumpulan kode script yang telah siap dipakai untuk merancang tampilan website sehingga si web programmer tidak perlu membuat kode perintah CSS dari nol. Bootstrap merupakan salah satu CSS Framework yang populer bagi web programmer frontend pada saat ini.

Ternyata, Bootstrap ini ada juga pustaka JS Framework. Nah, Bootstrap JS Framework ini bisa dijadikan sebagai alternatif dari JQuery dalam membuat tampilan antar-muka pada website tersebut.

Misalkan, kamu membuat sebuah deskripsi tentang Website Inwepo, berarti kamu harus mencantumkan gambar di dalam deskripsi tersebut agar informasi tersebut dianggap layak dilihat banyak pengunjung. Atau kamu membuat tutorial tentang teknologi, berarti kamu harus mencantumkan gambar di dalam tutorial tersebut agar si pengunjung dapat mengikuti tutorial buatan kamu lebih mudah.

Penulis akan berikan tutorial cara menampilkan bentuk gambar dengan Bootstrap, yang dimana di dalam informasi harus menggunakan gambar sebagai mewakili informasi tersebut agar si pengunjung (visitor) dapat mudah mengerti yang dimaksud dari penyampaian informasi tersebut.

Sebelum memulai, siapkan 1 gambar bitmap tipenya (jpg, png, bmp, jpeg).

Berikut cara menampilkan bentuk gambar dengan Bootstrap.

Langkah:

1. Silahkan aktifkan teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “gambar-bootstrap.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Lihat hasilnya.

Apabila di dalam project website tampilan gambar kamu, belum ada gambar, silahkan siapkan 1 gambar dulu, kemudian ditaruhkan ke dalam project website kamu.

Catatan:

Pada tampilan bentuk gambar ini memiliki 3 tipe.

  • img-rounded, tipe bentuk gambar seperti persegi tanpa ada garis siku.
  • img-circle, tipe bentuk gambarnya lingkaran.
  • img-thumbnail, tipe bentuk seperti gambar yang di cover atau di bingkai.

Sintaks:

“<img class=” tipe_bentuk_gambar” src=”logo.png” alt=”logo” width=”200″ height=”200″ style=”padding-top:10px;”>”

Jadi, kamu bisa menentukan dalam menampilkan bentuk gambar yang sesuai keinginan kamu.

Demikian tutorial cara menampilkan bentuk gambar dengan Bootstrap. Selamat mencoba.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top