Pada artikel sebelumnya kita telah membuat thumbnail dasar menggunakan Bootstrap. Pada artikel kali ini kita akan membuat thumbnail yang lebih advance. Thumbnail adavance kali ini akan dilengkapi dengan judul (captain) dan juga penjelasan singkat. Tampilan yang dihasilkan adalah seperti gambar berikut ini:
Coding utama tampilan di atas adalah seperti contoh berikut ini:
<div class=”col-xs-3″>
<div class=”thumbnail”>
<img src=”./images/v01.jpg”/>
<div class=”captain text-center”>
<h3>Mandi Bola</h3>
<p>Kebersamaan bersama bola-bolaku di area permainan.</p>
</div>
</div>
</div><!– /col–>
Coding lengkapnya adalah seperti berikut ini:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Thumbnail advance</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-xs-3″>
<div class=”thumbnail”>
<img src=”./images/v01.jpg”/>
<div class=”captain text-center”>
<h3>Mandi Bola</h3>
<p>Kebersamaan bersama bola-bolaku di area permainan.</p>
</div>
</div>
</div><!– /col–>
<div class=”col-xs-3″>
<div class=”thumbnail text-center”>
<img src=”./images/v02.jpg”/>
<div class=”captain”>
<h3>Sepedaku</h3>
<p>Sepada roda empatku yang kudapat dari orangtuaku.</p>
</div>
</div>
</div><!– /col–>
<div class=”col-xs-3″>
<div class=”thumbnail text-center”>
<img src=”./images/v03.jpg”/>
<div class=”captain”>
<h3>Belanja</h3>
<p>Bersama papa mama berbelanja di supermarket.</p>
</div>
</div>
</div><!– /col–>
<div class=”col-xs-3″>
<div class=”thumbnail text-center”>
<img src=”./images/v04.jpg”/>
<div class=”captain”>
<h3>Ceria selalu</h3>
<p>Hati yang gembira adalah obat, demikian kata Amsal</p>
</div>
</div>
</div><!– /col–>
</div><!– /row –>
</div>
<!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Demo dapat dilihat di http://aris.proweb.asia/dist/coba12.html .
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/components/#thumbnails .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.