bewoksatukosong.com | Hari ini om bewok akan membahas mengenai images atau gambar pada bootstrap, Setelah kemarin kita membahas mengenai Belajar Bootstrap Part 7 Button, kali ini kita akan membahas mengenai gambar, kelebihan dari boostrap ini adalah dapat me-responsive kan gambar tanpa susah, jadi sangat mudah sekali untuk gambar yang ingin di responsive kan. kita bisa semua gambar kita ubah dari mulai gambar gokil, foto lucu juga bisa yang penting berformat jpg, png atau svg. Kalau gif om bewok belum nyoba sih, tapi kalian coba saja ya sendiri, nanti kalau sudah tau, kasih tau om bewok ya di comment.
Jika kamu tidak tahu mengetahui responsive, responsive maksudnya website tersebut dapat mengikuti ukuran layar, entah berada di handphone ukuran sedang, ukuran tablet, dekstop pc, dan lain - lain. Dengan menggunakan boostrap kita sangat mudah menggunakanya. om bewok akan beri contoh dulu jika gambar tanpa menggunakan boostrap, jadi hasilnya tidak responsive, contohnya seperti di bawah ya.
 |
| image tanpa boostrap |
Kita lihat gambarnya seperti zoom gitu, apalagi kalau di perkecil layarnya, image responsive di gunakan untuk semua gambar agar semua layarnya depat mengikutinya, kan kurang enak ketika sedang liat di handphone gambarnya tapi kita harus geser - geser karena ga bisa liat full gambarnya.
Untuk itu kita akan mencoba gambar menggunakan boostrap agar bisa responsive, codinganya seperti dibawah ini ya.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<img src="dd.jpg" class="img-responsive" alt="Responsive image">
</body>
</html>
 |
| Image Menggunakan boostrap |
- Baca :
Tapi kan kalau seperti ini gambarnya full, apakah bisa gambarnya kita atur tapi tetap responsive ? Bisa dong.
Caranya sama seperti kamu menambahkan css image, kebetulan om bewok sudah membuat kodinganya, kodinganya seperti di bawah ini ya
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<style type="text/css">
.img-responsive {
width: 60%;
height: 60%;
}
</style>
</head>
<body>
<img src="dd.jpg" class="img-responsive" alt="Responsive image">
</body>
</html>Maka hasilnya kamu bisa lihat dibawah ini.
 |
| Image boostrap + size |
Kita bisa lihat ukuran mengikuti apa yang om bewok inginkan, yaitu width : 60%; height:60%; Mengapa menggunakan Percent % ? karena jika kamu ingin responsive sebaiknya menggunakan persen dibanding px (pixel), karena jika kamu menggunakan percent, jika kamu perkecil layar, mereka akan mengurangi secara otomatis, keren bukan ?
Mungkin itu saja yang bisa om bewok share mengenai image boostrap, jika kamu ingin melihat semua tutorial boostrap secara berurutan, kamu bisa lihat di bawah ini
- Baca :
Selanjutnya kita akan belajar mengenai class yang beberapa belum kita pelajari, ya intinya om bewok ingin teman - teman mengerti mengenai pembelajaran boostrap ini.
No comments:
Post a Comment