Bootstrap 3 Breadcrumb - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Breadcrumb
TrikSonic - Apa itu breadcrumb ? Breadcrumb ialah denah navigasi yang yang dipakai untuk mengatakan lokasi halaman ketika ini kepada user dalam situs web atau aplikasi.
Dengan bootstrap untuk menciptakan breadcrumb cukup memakai 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>