Belajar Bootstrap Part 8 Membahas Mengenai Images Atau Gambar Pada Bootstrap - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Friday, August 12, 2016

Belajar Bootstrap Part 8 Membahas Mengenai Images Atau Gambar Pada Bootstrap


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>
Maka teman - teman bisa lihat hasilnya seperti dibawah ini

Image Menggunakan boostrap
Terlihat lebih enak bukan ketika gambar tersebut sudah di responsive, kalau kita lihat kodinganya, yang membuat gambar tersebut responsive adalah om bewok hanya menambahkan class yaitu img-responsive. Mudah Bukan ?

- 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