Navigasi serbuk roti Bootstrap


Breadcrumbs ialah kaedah paparan berdasarkan maklumat hierarki tapak web. Mengambil blog sebagai contoh, serbuk roti boleh memaparkan tarikh penerbitan, kategori atau teg. Ia mewakili kedudukan halaman semasa dalam hierarki navigasi.

Breadcrumb dalam Bootstrap ialah senarai ringkas tidak tertib dengan kelas .breadcrumb. Pemisah akan ditambahkan secara automatik melalui kelas yang ditunjukkan di bawah dalam CSS (bootstrap.min.css):

.breadcrumb > li + li:before {
warna: #CCCCCC;
kandungan: "/ ";
padding: 0 5px;
}

Contoh berikut menunjukkan navigasi serbuk roti:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 面包屑导航</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">十一月</li>
</ol>


</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian