tRikSonic

Bootstrap 3 Image - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 22 Mei 2018 - 06.01

Tutorial Bootstrap Image

TrikSonic - Gambar sangat umum digunakan dalam desain sebuah web atau aplikasi. Jadi penggunaan gaya pada sebuah gambar dan peletakkan gambar yang benar di halaman web sangatlah penting untuk meningkatkan pengalaman user/penggguna/pengunjung.
Dengan menggunakan class yang tersedia pada Bootstrap, kita dapat dengan mudah membuat gambar seperti membuat gambar responsive, melingkar, atau memberi efek seperti thumbnail.
Berikut contoh dan tutorial bootstrap image yang bisa dipelajari :

Image Responsive

Image Responsive pada bootstrap digunakan untuk membuat skala gambar secara tepat di seluruh perangkat. Untuk menerapkannya tambahkan class .img-responsive pada element <img>
Class .img-responsive mempunyai gaya css dengan max-width: 100%, height: auto, dan display: block.
.img-responsive akan menyesuaikan skala gambarnya pada elemen induk yang membungkusnya.

Contoh :

<img class="img-responsive" alt="demo" src="/Trik%2BSonic.png"/>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Image Responsive</h2>

<img class="img-responsive" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuElCdjMHKetjWYj_7zmhfAyyCPM9_g06WKbhDQYHu7xl3QvVJYIOzgPcb584IuERGMKCTgpLZonvBjxEqodgFyjsgkVxsDZheURTj05gGlPXhDwnw6P0zcuAOLyBlBuV64gw5vLzdsOFw/s320/Trik+Sonic.png"/>

<!--note-->
<p style="margin-top:20px;">
Rubah lebar area preview untuk melihat responsive element
</p>

</div>
</body>
</html>

Image Rounded

Image Rounded digunakan untuk memberikan tampilan sebuah gambar memiliki sudut membulat pada bagian ujungnya. Untuk menerapkannya gunakan class .img-rounded pada element <img>.
Contoh penulisannya bisa seperti ini :
<img class="img-rounded" alt="..." src="..."/>
  <!-- or -->
<img class="img-responsive img-rounded" alt="..." src="..."/>

Contoh :

<img class="img-responsive img-rounded" alt="demo" src="/Trik%2BSonic.png"/>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Image Rounded</h2>

<img class="img-responsive img-rounded" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuElCdjMHKetjWYj_7zmhfAyyCPM9_g06WKbhDQYHu7xl3QvVJYIOzgPcb584IuERGMKCTgpLZonvBjxEqodgFyjsgkVxsDZheURTj05gGlPXhDwnw6P0zcuAOLyBlBuV64gw5vLzdsOFw/s320/Trik+Sonic.png"/>

</div>
</body>
</html>

Image Circle

Image Circle digunakan untuk memberikan tampilan sebuah gambar berbentuk seperti lingkaran. Untuk menerapkannya gunakan class .img-circle pada element <img>.
Contoh penulisannya bisa seperti ini :
<img class="img-circle" alt="..." src="..."/>
  <!-- or -->
<img class="img-responsive img-circle" alt="..." src="..."/>

Contoh :

<img class="img-responsive img-circle" alt="demo" src="/Trik%2BSonic.png"/>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Image Circle</h2>

<img class="img-responsive img-circle" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuElCdjMHKetjWYj_7zmhfAyyCPM9_g06WKbhDQYHu7xl3QvVJYIOzgPcb584IuERGMKCTgpLZonvBjxEqodgFyjsgkVxsDZheURTj05gGlPXhDwnw6P0zcuAOLyBlBuV64gw5vLzdsOFw/s320/Trik+Sonic.png"/>

</div>
</body>
</html>

Image Thumbnail

Image Thumbnail digunakan untuk memberikan tampilan sebuah gambar berbentuk thumbnail atau memiliki sebuah bingkai. Untuk menerapkannya gunakan class .img-thumbnail pada element <img>.
Contoh penulisannya bisa seperti ini :
<img class="img-thumbnail" alt="..." src="..."/>
  <!-- or -->
<img class="img-responsive img-thumbnail" alt="..." src="..."/>

Contoh :

<figure style="padding:20px;background:#32798e">
   <img class="img-responsive img-thumbnail" alt="demo" src="/Trik%2BSonic.png"/>
</figure>

Hasil :

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<div class="container">
<h2>Bootstrap 3 Image Thumbnail</h2>

<figure style="padding:20px;background:#32798e">
  <img class="img-responsive img-thumbnail" alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuElCdjMHKetjWYj_7zmhfAyyCPM9_g06WKbhDQYHu7xl3QvVJYIOzgPcb584IuERGMKCTgpLZonvBjxEqodgFyjsgkVxsDZheURTj05gGlPXhDwnw6P0zcuAOLyBlBuV64gw5vLzdsOFw/s320/Trik+Sonic.png"/>
</figure>

</div>
</body>
</html>

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.