• Lihat Daftar Paket Kursus Aplikasi Berbasis Website KLIK TOMBOL INI

  • Blog

  • Cara Menggunakan Class img-responsive Di Bootstrap

    • Kamis, 11 Januari 2018 20:25:51
    • Author : Administrator
    5528
    1

    Halo guys, pada kesempatan kali ini Jasa Pembuatan Website punya sedikit tips dan trik mengenai cara menggunakan class img-responsive di bootstrap. Perlu kalian ketahui sebelumnya, Di bootstrap terdapat class yang memang dibuat khusus untuk penanganan masalah gambar, seperti halnya ketika saya ingin membuat gambar yang ada di website saya menjadi responsive, maka saya cukup menggunakan class tersebut. Sebelum penjelasan saya lanjutkan, ada baiknya kalian perlu tahu terlebih dahulu apa itu responsive.

    Responsive atau yang dimaksud dengan Responsive Web Design adalah penyesuaian yang dapat dilakukan dari sisi desain atau tampilan website untuk optimal di berbagai resolusi atau ukuran layar, seperti layar komputer (Dekstop), Layar Tablet (TAB), Layar Ponsel (Mobile), dan perangkat lainnya yang memiliki resolusi layar pada umumnya. Dikarenakan resolusi dari berbagai perangkat yang sudah saya sebutkan td berbeda-beda, disinilah persan dari class bootstrap image responsive, dimana pada class selektor tersebut sudah dibuatkan property-property khusus, yang ditujukan untuk berbagai macam ukuran resolusi layar, sehingga ketika dibuka di berbagai macam resolusi layar, tampilan website tetap konsisten dan rapi, sehingga enak dilihat dan mudah di baca oleh pengunjung website kalian.

    Untuk menggunakan class selektor tersebut, bootstrap sudah membuatnya dan kalian tinggal menggunakannya saja, class selektor tersebut ialah img-responsive, dan kalian cukup menyertakan class tersebut di tag <img>, sehingga tag html tersebut menjadi seperti ini

    <a class='img-responsive' src='images/gambar.png'>

    Dengan begitu, gambar yang ada di website kalian menjadi responsive, sehingga semakin enak di lihat di berbagai ukuran atau resolusi layar. Untuk contoh dari saya, kalian bisa mengikuti tahapan dibawah ini.

    Berikut Tahapannya

    • Kalian buat terlebih dahulu satu buah file dengan nama index.html
    • Jika sudah ketikan kode seperti berikut
    <!DOCTYPE html>
<html>
<head>
<title>Cara Menggunakan Class img-responsive Di Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contoh Gambar Responsive Bootstrap</h2>               
  <img src="gambar.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>
    • Jika sudah kalian save terlebih dahulu file tersebut
    • Selanjutnya persiapkan satu buah gambar dengan nama gambar.jpg yang di simpan sejajar dengan file index.html tersebut
    • Jika sudah, kalian lihat hasilnya pada browser kesayangan kalian.

    Sampai disini saya harap kalian sudah paham, dan apabila mengikuti tahapan yang saya berikan dengan benar maka sekarang kalian sudah berhasil cara menggunakan class img-responsive di bootstrap.

    Sampai disini tips dan trik yang Jasa Pembuatan Website jelaskan mengenai cara menggunakan class img-responsive di bootstrap, jangan sungkan untuk berkomentar di kotak komentar yang saya sediakan di bawah ini.

    ~ Happy Coding Guys 😘 ~

    Average rating 2.9 of 8 vote

  • KOMENTAR

  • Reply
    • Komala
      Komala Rabu, 09 September 2020 00:14:34

      Terimakasih atas tips nya min..

  • Kirim Komentar

    Untuk mengirim komentar, lengkapi formulir dibawah ini.