Bootstrap adalah kumpulan library framework CSS yang dibuat khusus untuk pengembangan front-end. Maksudnya bootstrap ini juga bisa dikatakan kumpulan CSS siap digunakan uintuk memberikan kemudahan kepada anda untuk membuat tampilan website lebih optimal dan responsive.
Breadcrumbs merupakan navigasi pada setiap website atau blog yang menunjukkan letak postingan artikel yang berada pada label, kategori, atau menu kepada pengunjung.
Breadcrumbs ini salah satu faktor score seo, secara dengan adanya breadcrumbs akan lebih memudahkan pengunjung mengetahui artikel yang sedang ia baca terletak di mana.
Penggunaan bootsrap pada breadcrumbs juga sangat lah mudah. Lebih lengkapnya ikuti tutorial membuat breadscrumb dengan bootsraps.
1. Copy kerangka HTML untuk dasar membuat breadcrumbs
<ol class="breadcrumb">
<li class="active">Home</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Data</a></li>
<li class="active">CSS</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Data</li>
<li><a href="#">CSS</a></li>
<li class="active">HTML</li>
</ol>
2. Untuk Bootstrapnya kenny menggunakan versi 3.3.7 baik itu CSS
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
3. Kode HTML dan bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breadcumbs Bootstarp | kenscripts</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
</head>
<body>
<ol class="breadcrumb">
<li class="active">Home</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Library</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Data</a></li>
<li class="active">CSS</li>
</ol>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Data</li>
<li><a href="#">CSS</a></li>
<li class="active">HTML</li>
</ol>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
4. Simpan filenya dengan format .html
5. Done
Tampilan dari breadcrumbs dengan bootstrap ini lumayan menarik walaupun sederhana tetapi mampu memberikan kesan simple tidak berlebihan.
Terima kasih telah berkunjung dan mengikuti tutorial membuat breadcrunbs.
Demo