Tutorial Desain Web Responsif dengan Bootstrap (Bagian 5) - Layout Gambar

Senin, 05 Juni 2017 22:28:55 ,Oleh ,Dilihat : 64 x

Diasuh oleh Dr. Ir. Agus Wibowo, M.Kom, M.Si, M.M.

Framework Bootstrap mendukung beberapa bentuk tampilan gambar, yaitu rounded corners (bagian sudut gambar membulat), circle (gambar berbentuk lingkaran), Thumbnail serta gambar responsif di mana ukuran dari gambar dapat menyesuaikan tinggi serta lebarnya secara otomatis berdasarkan perangkat yang digunakan (smartphone, PC atau Laptop). Tampilan yang dimaksud dapat dilihat pada contoh gambar di bawah :

Langkah awal latihan :

1. Buat folder nama : latihan4

2. Copy file (folder) dari hasil ekstrak bootstrap-3.3.7-dist.zip  : css, js, fonts ke folder latihan4. Framework Bootstrap bootstrap-3.3.7-dist.zip dapat diunduh menggunakan tautan berikut :

https://drive.google.com/open?id=0B0nE7j_pjv62UXA5M1FBSGg2Rlk

3. Buat  subfolder dengan nama img di folder latihan4

4. Salin gambar ungaran.jpg di subfolder img, gambar latihan dapat diunduh menggunakan tautan berikut :

https://drive.google.com/file/d/0B0nE7j_pjv62YlVMeTdOak5EaDg/view?usp=sharing


Berikut penjelasan tampilan gambar menggunakan framework Bootstrap :

1. Rounded Corners

Kelas .img-rounded menambahkan sudut membulat pada sebuah gambar (Internet Explorer 8 tidak mendukung sudut yang membulat).

Contoh kode Bootstrap :

  <img src="img/ungaran.jpg" class="img-rounded" alt="STEKOM Ungaran" width="304" height="236">

Kode Bootstrap selengkapnya menggunakan HTML 5 , simpan dengan nama rounded.html :


2. Circle (Lingkaran)

Kelas .img-circle menampilkan gambar dalam bentuk lingkaran (Internet Explorer 8 tidak mendukung tampilan lingkaran)

Contoh kode Bootstrap :

<img src="img/ungaran.jpg" class="img-circle" alt="STEKOM Ungaran" width="304" height="236">

Kode Bootstrap selengkapnya menggunakan HTML 5 , simpan dengan nama lingkaran.html  :

3. Gambar Thumbnail

Kelas .img-thumbnail membuat gambar menjadi thumbnail, contoh :

<img src="img/ungaran.jpg" class="img-thumbnail" alt="STEKOM Ungaran" width="304" height="236">