ブートストラップのブレッドクラム ナビゲーション


パンくずリストは、Webサイトの階層情報に基づいた表示方法です。ブログを例に挙げると、ブレッドクラムには公開日、カテゴリ、またはタグを表示できます。これらは、ナビゲーション階層内の現在のページの位置を表します。 Bootstrap の

Breadcrumbs は、.breadcrumb クラスを使用した単純な順序なしリストです。セパレータは、CSS (bootstrap.min.css) で以下に示すクラスを介して自動的に追加されます:

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

次の例は、パンくずリストのナビゲーションを示しています:

インスタンス

<!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>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックします