ホームページ > 記事 > ウェブフロントエンド > ブートストラップ ブレッドクラム Navigation_html/css_WEB-ITnose
ブートストラップ ブレッドクラム Navigation_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:121309ブラウズ
パンくずリストは、Web サイトの階層情報に基づいた表示方法です。ブログを例に挙げると、ブレッドクラムには公開日、カテゴリ、またはタグを表示できます。これらは、ナビゲーション階層内の現在のページの位置を表します。
Bootstrap のブレッドクラムは、.breadcrumb クラスを備えた単純な順序なしリストです。セパレータは、CSS (bootstrap.min.css) で以下に示すクラスを通じて自動的に追加されます:
.breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px;} 次の例は、ブレッドクラム ナビゲーションを示しています:
<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 面包屑导航</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/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>
オンラインで実行
結果は次のとおりです:
ブートストラップ関連情報の読み取り:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。