Dengan menggunakan Bootstrap kita mudah membuat tampilan thumbnail. Misalnya kita ingin membuat tampilan seperti ini:
Source utama adalah:
<div class=”row”>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g01.jpg”/>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g02.jpg”/>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g03.jpg”/>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g04.jpg”/>
</a>
</div>
</div><!– /row –>
Source lengkapnya adalah:
<!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>Gallery</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g01.jpg”/>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g02.jpg”/>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g03.jpg”/>
</a>
</div>
<div class=”col-xs-3″>
<a href=”#” class=”thumbnail”>
<img src=”./images/g04.jpg”/>
</a>
</div>
</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/coba11.html . Dari demo ini kita melihat dengan coding yang sederhana kita dapat menghasilkan gallery dengan tampilan thumbnail yang bagus. Thumbnail yang rapi menggunakan kotak melengkung, dan warna kota berubah saat mouse melakukan hover di atas salah satu photo.
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/components/#thumbnails .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.