Belajar Bootstrap dasar Part 5 : Tampilan Gambar Dengan Bootstrap
Kamis 10 November 2016
Tampilan Gambar Dengan BootstrapPada kali ini saya akan bahas cara membuat tampilan gambar yang menarik dengan bootstrap , yaitu membuat gambar berbentuk melengkung pada sisi sudut , gambar dengan betuk lingkaran dan gambar responsive dengan bootstrap .
Bootstrap menyediakan class untuk mengatur gambar sesuai keinginan , misalnya membuat gambar dengan bentuk rounder ,gambar thumbnail , circle dan gambar responsive . Berikut ini saya 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.
- himg-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 lingkaran.
- img-thumbnail : class img-thumbnail digunakan untuk membuat gambar thumbnail dengan bootstrap.
Membuat Gambar Thumbnail Dengan Bootstrap.
<!DOCTYPE html>pada Script di atas kita menggunakan class="img-thumbnil" untuk membuat gambar thubnil dengan menggunakan bootstrap.
<html>
<head>
<title>Tutorial Tampilan gambar dengan Bootsrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<br>
<center>
<body>
<img src="bima1.jpg" class="img-thumbnail" alt="Bima Zainudin Ikhsan" width="40%">
</body>
</center>
</html>
<img src="bima1.jpg" class="img-thumbnail" alt="Bima Zainudin Ikhsan">
Membuat Gambar Circle Dengan Bootstarp
Sama dengan cara membuat gambar thubnil pada contoh di atas . untuk membuat gambar dengan bentuk lingkaran adna dapat menggunkan calss="img-circle" .
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Tampilan gambar dengan Bootsrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<br>
<center>
<body>
<img src="bima1.jpg" class="img-thumbnail img-circle" alt="Bima Zainudin Ikhsan" width="40%">
</body>
</center>
</html>
Membuat Gambar Round dengan Bootstarp
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Tampilan gambar dengan Bootsrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<br>
<center>
<body>
<img src="bima1.jpg" class="img-rounded" alt="Bima Zainudin Ikhsan" width="40%">
</body>
</center>
</html>
Kesimpulan :
Membuat gambar agar bisa responsive dengan menentukan bootsrtapadna dapat melakuka dengan menambahkan class="img-responsive" pada elemen gambar .
No comments