Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Breaking

Saturday 1 April 2017

Belajar Bootstrap Part 3 Menampilkan Gambar dengan Bootstrap

Menampilkan Gambar Dengan Bootstrap


Assalamualaikum Wr. Wb.

Hai Sobat, pada tutorial kali ini kita akan di membahas tentang cara membuat tampilan gambar yang menarik dengan bootstrap. Yaitu membuat gambar berbentuk melengkung pada sisi sudut, gambar dengan bentuk lingkaran, gambar thumbnail dan gambar responsive dengan bootstrap.

PENGERTIAN

Bootstrap menyediakan class untuk mengatur gambar sesuai dengan keinginan, misalnya membuat gambar dengan bentuk rounder, circle(lingkaran) dan gambar yang responsive. Berikut ini di jelaskan tentang beberapa class bootstrap yang bisa di gunakan untuk membuat memanipulasi tampilan gambar pada 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.

LATAR BELAKANG

Ingin belajar tentang class-class untuk gambar yang ada di dalam framework bootstrap.

MAKSUD & TUJUAN

Menampilkan gambar yang responsive.
Menghasilkan gambar dengan bentuk lingkaran.
Dapat membuat gambar sudutnya melengkung.

ALAT  & BAHAN
  • Bootstrap
  • Text Editor
  • Browser


LANGKAH KERJA

Untuk mendesain tampilan gambar dengan bootstrap, kita perlu memanggil class-class pada bootstrap. Berikut merupakan contohnya:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/java" src="js/jquery.js"></script>
<script type="text/java" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Cara Membuat tampilan gambar dengan Bootstrap | www.malasngoding.com</h1>
<img src="tema.jpg" class="img-thumbnail" alt="Gambar ahmad faizin" width="304" height="236">
</body>
</html>


Pada gambar di atas kita menggunakan class “img-thumbnail” untuk membuat gambar thumbnail dengan menggunakan bootstrap.

Membuat gambar circle dengan bootstrap


Sama dengan cara membuat gambar thumbnail pada contoh di atas. Untuk membuat gambar dengan bentuk lingkaran anda dapat menggunakan class “img-circle”. Tampilan gambar dengan bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/java" src="js/jquery.js"></script>
<script type="text/java" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Cara Membuat tampilan gambar dengan Bootstrap | www.ahmadfaizin.ga</h1>
<img src="tema.jpg" class="img-circle" alt="Gambar ahmad" width="304" height="236">
</body>
</html>



Dengan menambahkan class=img-circle maka hasil gambarnya seperti lingkaran.

Membuat gambar round dengan bootstrap

Round maksudnya yaitu membuat sisi pojok pada gambar menjadi bentuk lingkaran. Contoh
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 3 : Tampilan gambar dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/java" src="js/jquery.js"></script>
<script type="text/java" src="js/bootstrap.js"></script>
</head>
<body>
<h1>Cara Membuat tampilan gambar dengan Bootstrap | www.ahmadfaizin.ga</h1>
<img src="tema.jpg" class="img-rounded" alt="Gambar ahmad" width="304" height="236">
</body>
</html>

Dengan menambahkan class=img-rounded hasil gambar di sisi sudutnya terlihat melengkung.

Membuat gambar responsive dengan bootstrap

Untuk membuat gambar responsive dengan menggunakan bootstrap anda dapat melakukannya dengan menambahkan class “img-responsive” pada elemen gambar. 


Mungkin sekian dari saya, kurang lebihnya mohon maaf.
Syukron

Wassalamualaikum Wr. Wb.



Referensi



No comments:

Post a Comment

Adbox