ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap にブレッドクラム ナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析
Bootstrap にブレッドクラム ナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析
- 青灯夜游転載
- 2021-11-25 19:17:072684ブラウズ
Bootstrap にブレッドクラム ナビゲーションを追加するにはどうすればよいですか? Bootstrap5 のブレッドクラム ナビゲーション コンポーネントの使い方を次の記事で紹介しますので、ご参考になれば幸いです。
1 ブレッドクラム ナビゲーション
ブレッドクラム ナビゲーションは通常、Web サイトの上部にあるナビゲーション バーの下で、ナビゲーション内の現在のページのレベルを示すために使用されます。一般的に使用される > Or | およびスペース区切りでは、Bootstrap5 ブレッドクラム ナビゲーションでは CSS を通じて区切り文字が自動的に追加されます。 [関連する推奨事項: "ブートストラップ チュートリアル "]
下の図では、ナビゲーション バーの下にある小さなナビゲーションの行は、一般的なブレッドクラム ナビゲーションです。
例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>面包屑演示</title>
</head>
<body>
<br><br>
<nav aria-label="breadcrumb">
<ol>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li class="breadcrumb-item active" aria-current="page">国内新闻</li>
</ol>
</nav>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
style="max-width:90%">';"> を分割記号として使用することも、他の文字に変更することもできます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>面包屑演示</title>
</head>
<body>
<br><br>
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li class="breadcrumb-item active" aria-current="page">国内新闻</li>
</ol>
</nav>
<nav style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb">
<ol>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li class="breadcrumb-item active" aria-current="page">国内新闻</li>
</ol>
</nav>
<nav style="--bs-breadcrumb-divider: '-';" aria-label="breadcrumb">
<ol>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li class="breadcrumb-item active" aria-current="page">国内新闻</li>
</ol>
</nav>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
<nav style="max-width:90%" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">新闻</a></li>
<li class="breadcrumb-item active" aria-current="page">国内新闻</li>
</ol>
</nav>
<nav style="max-width:90%" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">新闻</a></li>
<li class="breadcrumb-item active" aria-current="page">国内新闻</li>
</ol>
</nav>ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！
以上がBootstrap にブレッドクラム ナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。