Tutorial Bootstrap 3 Breadcrumb
TrikSonic - Apa itu breadcrumb ? Breadcrumb adalah skema navigasi yang yang digunakan untuk menunjukkan lokasi halaman saat ini kepada user dalam situs web atau aplikasi.
Dengan bootstrap untuk membuat breadcrumb cukup menggunakan class
.breadcrumb yang ditulis pada element <ul> atau <ol>
Contoh :
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li>Cara Membuat Breadcrumb</li>
</ul>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Breadcrumb</h2> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Tutorial</a></li> <li>Cara Membuat Breadcrumb</li> </ul> </div> </body> </html>
Breadcrumb Aktif
Untuk memberi tampilan yang sedang aktif pada breadcrumb, tambahkan class
.active pada element <li> yang berada di area breadcrumbContoh :
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li class="active">Cara Membuat Breadcrumb</li>
</ul>
Hasil :
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- CSS Bootstrap3 --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Breadcrumb Aktif</h2> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Tutorial</a></li> <li class="active">Cara Membuat Breadcrumb</li> </ul> </div> </body> </html>
Posting Komentar