Tampilan Gambar Dengan Bootstrap
Oke bro..
Sebelumnya kita telah membahas tutorial belajar bootstrap...
Kita juga telah membahas pengertian dan cara menggunakan bootstrap dan cara membuat table dengan 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..
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..
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..
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.
Daftar Tutorial Bootstrap Lainnya
Bootstrap Part 1 : pengertian dan cara menggunakan bootstrap untuk pemula.
Bootstrap Part 2 : membuat table dengan bootstrap untuk pemula
Bootstrap Part 3 : tamplan gambar dengan bootstrap
Bootstrap Part 4 : membuat tombol dengan bootstrap
Bootstrap Part 1 : pengertian dan cara menggunakan bootstrap untuk pemula.
Bootstrap Part 2 : membuat table dengan bootstrap untuk pemula
Bootstrap Part 3 : tamplan gambar dengan bootstrap
Bootstrap Part 4 : membuat tombol 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
Bootstrap Part 6 : membuat alert dengan bootstrap (rilis besok tanggal 16-08-2017)
Lainnya masih rahasia yaa.. hehehe
thank info gan nice artikel
ReplyDeleteOke bang
DeleteSaya Lagi belajar html, untuk ini masih agak sulit
ReplyDeleteTunggu aja bang.. Nantikan tutorial html selanjutnya
DeleteWah nemu juga artikel yang kayak gini, sangat bermanfaat hust saya yang baru gelajar html
ReplyDeleteWww dot yukgas dot id
Sip bang
Deleteharus lebih banyak belajar lagi,
ReplyDeletebookmark dulu
Oke bang
DeleteMaksih infonya gan. Boleh dicoba nih
ReplyDeleteOke bang
DeleteMakasih info tambahannya bro, kebetulan lagi belajar HTML ^_^
ReplyDeleteIya bang
Deletedilanjut gan, ane bookmark.....
ReplyDeletengomong" framework css yang paling banyak dipake apa ya ?
Sip Gan Akhirnya dapet jg ni Artikel
ReplyDeleteoke bang
Delete