Heim > Artikel > Web-Frontend > Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden
Wie füge ich eine Breadcrumb-Navigation in Bootstrap hinzu? Kurze Analyse der Methoden
- 青灯夜游nach vorne
- 2021-11-25 19:17:072620Durchsuche
Wie füge ich eine Breadcrumb-Navigation in
Bootstrap hinzu? Im folgenden Artikel erfahren Sie, wie Sie die Breadcrumb-Navigationskomponente von Bootstrap5 verwenden.
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
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>
2 Anpassungstrennzeichen
2.1 Durch Ändern des lokalen benutzerdefinierten CSS-Attributs
Im folgenden Code können Sie durch Hinzufügen eines style="--bs-breadcrumb-divider: '>';" > 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: '>';" 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>
2.2 Symbole oder Bilder verwenden
Das obige Beispiel kann auch eingebettete SVG-Symbole verwenden.
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");" 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>
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="--bs-breadcrumb-divider: '';" 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>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!