Monday, August 14, 2017

Bootstrap Part 3 : Tampilan Gambar Dengan Bootstrap


Tampilan Gambar Dengan Bootstrap

Oke bro..
Sebelumnya kita telah membahas tutorial belajar bootstrap...

Maka pada bab ini kita akan membahas cara membuat tampilan gambar yang menarik dengan bootstrap..

Kita bisa membuat gambar berbentuk melengkung disisi sudutnya..
Kita bisa membuat gambar dengan bentuk lingkaran..
Kita bisa membuat gambar thumbnail dan gambar responsive dengan bootstrap...

Di bootstrap juga telah menyediakan class untuk mengatur gambar sesuai ide kamu..
Contoh:

1. Kamu bisa membuat bentuk rounder.
2. Kamu bisa membuat bentuk circle(lingkaran) + gambar yang responsive.

Nah..bro..
Ini class bootstrap yang bisa kamu gunakan untuk membuat dan memanipulasi tampilan gambar pada bootstrap kamu..

*Pertama adalah .img-responsive

Class ini berguna membuat gambar menjadi responsive pada saat dijalankan dimana saja.

*Kedua adalah img-rounded

Class ini berguna untuk membuat gambar berbentuk round.
Maksudnya gini..
Jadi nanti disudut gambar kamu akan berbentuk melengkung.

*Ketiga adalah img-circle

Class ini berguna untuk membuat gambar berbentuk lingkaran.

*Keempat adalah img-thumbnail.

Class ini berguna untuk membuat gambar thumbnail dengan bootstrap.

Oke cukup ya..
Jadi sekarang kita akan membuat tampilan gambar dengan bootstrap.

1. Membuat Gambar Thumbnail Dengan Bootstrap


Jadi kali ini kita menggunakan class "img-thumbnail" untuk membuat gambar thumbnail dengan bootstrap.

Kodenya seperti ini ..


Untuk full codenya ini bro.. Silahkan di copy dan paste di file index.php kemarin..


Mka hasilnya akan seperti ini..




2. Membuat Gambar Circle Dengan Bootstrap

Sebenernya caranya sama dengan cara membuat gambar thumbnail seperti diatas tadi.

Jadi untuk membuat gambar dengan bentuk lingkaran kamu bisa menggunakan class "img-circle". tampilan gambar dengan bootstrap. 

Kamu hanya mengganti classnya menjadi class="img-circle"

Atau langsung saja copas kode ini dan taruh di inndex.php kamu bro..



Dan ini hasil SS nya..






3. Membuat Gambar Round Dengan Bootstrap


Jadi caranya juga sama silahkan kamu ganti dengan class="img-rounded"

Cuma gitu aja bro.. mudah kan,. hehehe:)

Ini kodenya broo..



Sip dan ini Hasil SS nya gan..




4. Membuat Gambar Responsive Dengan Bootstrap

Jadi sama juga kok..
Untuk membuat gambar responsive dengan bootstrap kamu hanya menambahkan class "img-responsive" pada elemnt gambar. tampilan gambar dengan bootstrap


Jadi untuk keseluruhan ini kodenya bro..Hehehe..



Dan ini Hasil SS nya bro..




Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
cara membuat tampilan gambar dengan bootstrap.




Bootstrap Part 5 : membuat jumbotron dengan bootstrap
Bootstrap Part 6 : membuat alert dengan bootstrap (rilis besok tanggal 16-08-2017)
Lainnya masih rahasia yaa.. hehehe




15 comments: