Menambahkan Text pada Bootstrap Image Thumbnail
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 :
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>Seperti yang terlihat pada source code, pada row pertama kita membuat dua kolom untuk menempati gambar atau thumbnail yang ditambahkan text, biasanya diistilahkan dengan caption. Dua kolom untuk thumbnail dan caption tersebut diwakili oleh
<div class="col-sm-6 col-md-4">..Dibaris kedua hanya kita tempatkan kolom untuk menampung image dalam bentuk thumbnail. Disini kita membuat 4 kolom yang diwakili oleh
<div class="col-xs-6 col-md-3">
