Menambahkan Text pada Bootstrap Image Thumbnail

Pada tutorial pemrograman web sebelumnya kita telah mengdiskusikan tentang tata cara pembuatan Bootstrap image thumbnail yang disertai dengan munculnya text ketika dihover pada image tersebut.

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>

Menambahkan Text pada Bootstrap Image Thumbnail

0 Response to "Menambahkan Text pada Bootstrap Image Thumbnail"

Posting Komentar