My Inscription

  • Home
  • Jurusan
    • RPL
    • TKJ
    • MULTIMEDIA
  • Downloads
    • LINUX
    • UBUNTU
    • DEBIAN
      • Office
  • BLC TELKOM KLATEN
  • PEMROGRAMAN
  • REKAN KERJA
    • RIZKA MALA ALFIANA
    • FERRY KURNIAWAN
    • DENI OCTASAPUTRA
  • DOKUMENTASI
    • foto
    • video

Jumat, 09 November 2018

Bootstrap | Images (Gambar)

 Srijulfiyanik.blogspot.com     22.44     No comments   


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Merubah Tampilan Gambar dengan Bootstrap.

Bootstrap menyadiakan class untuk mengatur gambar sesuai dengan keinginan, misalnya membuat gambar dengan bentuk rouded, circle (lingkaran) dan gambar yang responsive.

Berikut beberapa class untuk membuat tampilah gambar dengan 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.



Contoh:

Gambar Responsive

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <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.1.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>Gambar</h2>
  <p>class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi:</p>
  <img class="img-responsive" src="gambar/linux.png" alt="Linux" width="460" height="345">
</div>

</body>
</html>




Gambar Rounded

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <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.1.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>Gambar Rounded</h2>
  <p>class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung.</p>           
  <img src="gambar/linux.png" class="img-rounded" alt="Linux" width="304" height="236">
</div>

</body>
</html>






Gambar Circle (Lingkaran)

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <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.1.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>Gambar Circle</h2>
  <p>class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.</p>          
  <img src="gambar/linux.png" class="img-circle" alt="Linux" width="304" height="236">
</div>

</body>
</html>

Sekian Cara Membuat Tampilan Gambar dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com


Wassalam'alaikum wr.wb
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Kirimkan Ini lewat EmailBlogThis!Bagikan ke XBerbagi ke Facebook
Posting Lebih Baru Posting Lama Beranda

0 komentar:

Posting Komentar

Popular Posts

  • Mengatasi Permasalahan pada PHPMyAdmin
  • Membuat Form Login ( Frontend )
  • KRISISNYA RASA CINTA TANAH AIR DIKALANGAN REMAJA SAAT INI
  • MEMBUAT PORTAL SEKOLAH

Blog Archive

About Me

  • Srijulfiyanik.blogspot.com
  • dimas ari

Pengikut

Total Pageviews

  • Features
  • _Multi DropDown
  • __DropDown 1
  • __DropDown 2
  • __DropDown 3
  • _ShortCodes
  • _SiteMap
  • _Error Page
  • Documentation
  • Video Documentation
  • Download This Template
  • Home
  • About
  • Contact

Facebook

Video News

posts

Feature

posts

Popular Posts

  • Mengatasi Permasalahan pada PHPMyAdmin
    Mengatasi Permasalahan pada PHPMyAdmin
  • KERJA BAKTI ANAK BLC TELKOMKLATEN
    KERJA BAKTI ANAK BLC TELKOMKLATEN
  • MTCRE

Copyright © My Inscription | Powered by Blogger
Design by Hardeep Asrani | Blogger Theme by NewBloggerThemes.com | Distributed By blogger Templates