Dalam melakukan disain website, kita ingin membuat navigasi yang nyaman bagi pengunjungnya. Salah satu komponen penting adalah informasi posisi halaman yang sedang kita baca. Inilah yang disebut breadcrumbs.
Misal kita ingin membuat sebuah informasi posisi halaman dan juga nama halamannya dengan tampilan seperti berikut ini:
Source code utamannya adalah:
<ol class=”breadcrumb”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Artikel</a></li>
<li class=”active”>Posisi halaman dengan Bootstrap</li>
</ol>
<div class=”page-header”>
Posisi halaman dengan Bootstrap
</div>
Demo dapat dilihat di http://aris.proweb.asia/dist/coba16.html .
Source code lengkapnya:
<!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>Posisi halaman dengan Bootstrap</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<ol class=”breadcrumb”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Artikel</a></li>
<li class=”active”>Posisi halaman dengan Bootstrap</li>
</ol>
<div class=”page-header”>
Posisi halaman dengan Bootstrap
</div>
</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>
Informasi lebih lanjut silahkan mengunjungi:
1. http://getbootstrap.com/components/#breadcrumbs .
2. http://getbootstrap.com/components/#page-header .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.