Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden

青灯夜游

Freigeben： 2021-11-25 19:41:45

nach vorne

2684 Leute haben es durchsucht

Wie füge ich eine Breadcrumb-Navigation in

Bootstrap hinzu? Im folgenden Artikel erfahren Sie, wie Sie die Breadcrumb-Navigationskomponente von Bootstrap5 verwenden.

Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden

1 Breadcrumb-Navigation

Die Breadcrumb-Navigation wird im Allgemeinen unter der Navigationsleiste oben auf der Website verwendet, um die Ebene der aktuellen Seite in der Navigationshierarchie anzuzeigen. Sie wird normalerweise durch > oder | getrennt. Die Bootstrap5-Breadcrumb-Navigation verwendet CSS. Fügen Sie automatisch Trennzeichen hinzu. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

Im Bild unten ist die kleine Navigationszeile unter der Navigationsleiste eine übliche Breadcrumb-Navigation

Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden

Beispiel

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

Nach dem Login kopieren

Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden

2 Anpassungstrennzeichen

2.1 Durch Ändern des lokalen benutzerdefinierten CSS-Attributs

Im folgenden Code können Sie durch Hinzufügen eines style="max-width:90%" > als Trennzeichen verwenden oder es in ein beliebiges anderes Zeichen ändern.

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

Nach dem Login kopieren

Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden

2.2 Symbole oder Bilder verwenden

Das obige Beispiel kann auch eingebettete SVG-Symbole verwenden.

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

Nach dem Login kopieren

Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden

2.3 Ohne Trennzeichen

Sie können Trennzeichen auch entfernen, indem Sie --bs-breadcrumb-divider: ''; festlegen (leere Zeichenfolgen in benutzerdefinierten CSS-Eigenschaften zählen als ein Wert).

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

Nach dem Login kopieren

Weitere Informationen zu Bootstrap finden Sie unter: Bootstrap-Grundlagen-Tutorial! !

Das obige ist der detaillierte Inhalt vonWie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!