Pada tutorial kali ini kita akan membuat tampilan comment dengan Bootstrap. Kita akan menggunakan Media Object untuk menampilkan sebuah comment terdiri dari foto pengguna, judul komentar dan isi komentarnya. Tampilan yang akan dihasilkan adalah seperti gambar berikut ini:
Source inti dari tampilan comment ini adalah:
<div class=”media”>
<a href=”#” class=”pull-left”>
<img src=”./images/photo.jpg” class=”media-object”/>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>Setuju</h4>
<p>Setuju dengan salam 3 jari : Persatuan Indonesia. Pilpres sudah selesai, mari berkarya dengan penuh semangat di bidang kita masing-masing.</p>
</div>
</div><!– /media –>
Source code 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>Media Object</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<div class=”media”>
<a href=”#” class=”pull-left”>
<img src=”./images/photo.jpg” class=”media-object”/>
</a>
<div class=”media-body”>
<h4 class=”media-heading”>Setuju</h4>
<p>Setuju dengan salam 3 jari : Persatuan Indonesia. Pilpres sudah selesai, mari berkarya dengan penuh semangat di bidang kita masing-masing.</p>
</div>
</div><!– /media –>
</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/coba10.html .
Informasi lebih lanjut silahkan mengunjungi http://getbootstrap.com/components/#media .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.