Tutorial Belajar Bootstrap 4 Part 4 – Menampilkan gambar dengan bootstrap
Selamat datang lagi dalam tutorial warungbelajar, jika dalam tutorial sebelumnya kita sudah membahas mengenai bagaimana cara membuat sebuah tabel dengan menggunakan bootstrap, dalam tutorial kali ini kita akan membahas mengenai cara menampilkan gambar dengan bootstrap.
pada bootstrap 4 ada beberapa class yang bisa digunakan untuk mengatur bagaimana sebuah gambar ditampilkan, gambar bisa ditampilkan dengan tampilan sudut melengkung, bentuk lingkaran dan beberapa bentuk yang lain, baik sebelum kita bahas satu persatu kita akan membahas terlebih dahulu beberapa class yang bisa digunakan :
- rounded
- class ini digunakan untuk membuat sudut gambar yang ditampilkan menjadi rounded (melengkung).
- rounded-circle
- class ini digunakan untuk menampilkan gambar dengan bentuk circle (lingkaran)
- img-thumbnail
- class ini digunakan untuk manampilkan gambar dengan bentuk thumbnail
- float-right dan float-left
- class ini digunakan untuk mengatur posisi dari gambar ketika ditampilkan
- img-fluid
- class ini digunakan untuk membuat gambar menjadi responsive, sehingga ukuran dari gambar akan menyesuaikan ukuran dari parent dari gambarnya
Membuat sudut lengkung dengan class rounded bootstrap
untuk contoh skrip adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <img src="gambar.jpeg" width="300" class="rounded"/> <img src="gambar.jpeg" width="300"/> </body> </html> |
Semisal kita simpan dengan nama image_bootstrap_class_rounded.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- dalam contoh skrip diatas kita menampilkan 2 gambar, gambar pertama (sebelah kiri) kita berikan class rounded, gambar kedua (sebelah kanan) kita tidak memberikan class rounded
- hasilnya gambar pertama sudutnya melengkung, sedangkan gambar kedua sudutnya tidak melengkung.
Membuat tampilan gambar circle dengan class rounded-circle bootstrap 4
Untuk contoh skripnya adalah seperti berikut ini :
Keterangan :
- dalam contoh skrip diatas kita menampilkan 2 gambar, gambar pertama (sebelah kiri) kita berikan class rounded-circle, gambar kedua (sebelah kanan) kita tidak memberikan class rounded-circle
- hasilnya gambar pertama ditampilkan dengan tampilkan lingkaran, sedangkan gambar kedua ditampilkan dengan tampilan biasa yaitu kotak
Membuat tampilan thumbnail pada gambar dengan class img-thumbnail bootstrap 4
Contoh skripnya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <img src="gambar.jpeg" width="300" class="img-thumbnail"/> <img src="gambar.jpeg" width="300"/> </body> </html> |
Semisal kita simpan dengan nama image_bootstrap_class_img_thumnail.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- dalam contoh skrip diatas kita menampilkan 2 gambar, gambar pertama (sebelah kiri) kita berikan class img-thumbnail, gambar kedua (sebelah kanan) kita tidak memberikan class img-thumbnail
- hasilnya gambar pertama ditampilkan dengan tampilkan thumbnail, sedangkan gambar kedua ditampilkan dengan tampilan biasa yaitu kotak
Mengatur posisi gambar dengan bootstrap 4
Untuk contoh dari memindahkan posisi gambar, perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <img src="gambar.jpeg" width="300" class="img-thumbnail float-left" /> <img src="gambar.jpeg" width="300" class="img-thumbnail float-right"/> </body> </html> |
Semisal kita simpan dengan nama image_bootstrap_float.html, lalu silahkan dibuka di browser maka hasilnya :
Keterangan :
- Gambar 1 (sebelah kiri) menggunakan class float-left sehingga ditampilkan berada disebelah kiri
- Gambar 2 (sebelah kanan) menggunakan class float-right sehingga ditampilkan berada disebelah kanan
Membuat Gambar Responsive dengan bootstrap 4
Untuk contoh pembuatan gambar responsive menggunakan bootstrap 4, contoh skripnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <img class="img-fluid img-thumbnail float-left" src="gambar.jpeg" width="800"> </div> </body> </html> |
Maka hasilnya adalah sebagai berikut :
Keterangan :
- Gambar yang ditampilkan menggunakan class img-fluid, dan tag gambar diletakkan di dalam sebuah objek dengan class container, sehingga ketika browser diperkecil ukurannya, gambar akan mengikuti ukuran dari browser.
Jadi kurang lebih seperti itu teman – teman beberapa class yang ada di dalam bootstrap 4 yang bisa anda gunakan untuk mengatur tampilan gambar, jika ada yang ingin didiskusikan silahkan di dalam kolom komentar, sekian dulu sampai jumpa di dalam tutorial bootstrap berikutnya.
Informasi ini sangat membantu.