Bootstrap にブレッドクラムナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析

青灯夜游

リリース： 2021-11-25 19:41:45

転載

2659 人が閲覧しました

Bootstrap にブレッドクラムナビゲーションを追加するにはどうすればよいですか? Bootstrap5 のブレッドクラムナビゲーションコンポーネントの使い方を次の記事で紹介しますので、ご参考になれば幸いです。

Bootstrap にブレッドクラムナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析

1 ブレッドクラムナビゲーション

ブレッドクラムナビゲーションは通常、Web サイトの上部にあるナビゲーションバーの下で、ナビゲーション内の現在のページのレベルを示すために使用されます。一般的に使用される > Or | およびスペース区切りでは、Bootstrap5 ブレッドクラムナビゲーションでは CSS を通じて区切り文字が自動的に追加されます。 [関連する推奨事項: "ブートストラップチュートリアル "]

下の図では、ナビゲーションバーの下にある小さなナビゲーションの行は、一般的なブレッドクラムナビゲーションです。

Bootstrap にブレッドクラムナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析

例

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

ログイン後にコピー

Bootstrap にブレッドクラムナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析

#2 カスタム区切り記号

2.1 ローカル CSS カスタムプロパティを変更する

次のコードでは、

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: &#39;>&#39;;" 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: &#39;|&#39;;" 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: &#39;-&#39;;" 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>

ログイン後にコピー

Bootstrap にブレッドクラムナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析

2.2 アイコンまたは画像の使用

上記の例では、埋め込み SVG アイコンを使用することもできます。

 <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 にブレッドクラムナビゲーションを追加するにはどうすればよいですか?メソッドの簡単な分析

2.3 区切り文字を使用しない

区切り文字の設定を削除することもできます--bs-breadcrumb-divider: '';(CSS カスタムプロパティ Emptyの文字列は 1 つの値としてカウントされます)。

<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 サイトの他の関連記事を参照してください。