Sekarang kita akan membuat image thumbnail dengan menambahkan caption (text) dibawah image. Jadi disini tidak ada proses hover, sehingga dalam pembuatan thumbnail kali ini tidak diperlukan javascript.
Berikut ini adalah ouput yang akan kita buat dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
 |
| Gambar.1 |
Seperti yang terlihat pada Gambar.1, bagian pertama (Thumbnail Pertama) ditambahkan text tepat dibawah image. Sedangkan pada thumbnail bawahnya, kita sengaja tidak menambahkan text.
Berikut ini koding lengkap untuk membuat ouput seperti Gambar.1 diatas :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Bootstrap Thumbnail</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<!--<link rel='stylesheet' href='assets/css/jquery-ui-custom.css'>-->
<!-- Akhir dari Bagian css -->
<!-- Bagian js -->
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- akhir dari Bagian js -->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->
<div class="container" style="margin-top:30px">
<h2>Thumbnail Pertama</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/agenda.png" alt="">
<div class="caption">
<h3>Tutorial Agenda PHP</h3>
<p>Pada tutorial pemrograman web kali ini akan mempelajari bagaimana membuat agenda
lengkap dengan tanggal, waktu serta lokasi</p>
<p><a href="#" class="btn btn-primary" role="button">Read More</a>
<a href="#" class="btn btn-default" role="button">Download</a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="img/tabel.png" alt="Statue of Liberty thumbnail">
<div class="caption">
<h3>Tutorial Tabel JqGrid</h3>
<p>Dalam tutorial ini, kita akan membuat sebuah tabel layaknya seperti Ms.Excell,
namun datanya diambil dari database</p>
<p><a href="#" class="btn btn-primary" role="button">Read More</a>
<a href="#" class="btn btn-default" role="button">Download</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/agenda.png">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/tabel.png">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/dashboard.png">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/tabel.png">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
