Bootstrap Part 3 : Tampilan Gambar Dengan Bootstrap

Tampilan Gambar Dengan Bootstrap

Pada tutorial kali ini akan di bahas tentang cara membuat tampilan gambar yang menarik dengan bootstrap. yaitu membuat gambar berbentuk melengkung pada sisi sudut, gambar dengan bentuk lingkaran, gambar thumbnail dan gambar responsive dengan bootstrap.

Bootstrap menyediakan class untuk mengatur gambar sesuai dengan keinginan, misalnya membuat gambar dengan bentuk rounder, circle(lingkaran) dan gambar yang responsive. berikut ini di jelaskan tentang beberapa class bootstrap yang bisa di gunakan untuk membuat memanipulasi tampilan gambar pada bootstrap

  • .img-responsive
    class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi.
  • img-rounded
    class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung.
  • img-circle
    class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.
  • img-thumbnail
    class img-thumbnail di gunakan untuk membuat gambar thumbnail dengan bootstrap.

berikut ini beberapa contoh yang dapat di lihat untuk membuat tampilan gambar dengan bootstrap.

Membuat gambar thumbnail dengan bootstrap

pada gambar di atas kita menggunakan class “img-thumbnail” untuk membuat gambar thumbnail dengan menggunakan bootstrap.

tampilan gambar dengan bootstrap

tampilan gambar dengan bootstrap

Membuat gambar circle dengan bootstrap

Sama dengan cara membuat gambar thumbnail pada contoh di atas. untuk membuat gambar dengan bentuk lingkaran anda dapat menggunakan class “img-circle”. tampilan gambar dengan bootstrap

membuat gambar lingkaran dengan bootstrap

membuat gambar lingkaran dengan bootstrap

Membuat gambar round dengan bootstrap

manipulasi tampilan gambar dengan bootstrap

manipulasi tampilan gambar dengan bootstrap

Membuat gambar responsive dengan bootstrap

untuk membuat gambar responsive dengan menggunakan bootstrap anda dapat melakukannya dengan menambahkan class “img-responsive” pada elemeng gambar. tampilan gambar dengan bootstrap

sekian tutorial belajar bootstrap part 3 tentang membuat tampilan gambar dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Sumber : http://www.malasngoding.com/bootstrap-part-3-tampilan-gambar-dengan-bootstrap/

This entry was posted in Bootstrap. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s