Maison > Article > interface Web > Comment ajouter un fil d'Ariane dans Bootstrap ? Brève analyse des méthodes
Comment ajouter un fil d'Ariane dans Bootstrap ? Brève analyse des méthodes
- 青灯夜游avant
- 2021-11-25 19:17:072623parcourir
Comment ajouter un fil d'Ariane dans
Bootstrap ? L'article suivant vous présentera comment utiliser le composant de navigation dans le fil d'Ariane Bootstrap5. J'espère qu'il vous sera utile !
1 Navigation par fil d'Ariane
La navigation par fil d'Ariane est généralement utilisée sous la barre de navigation en haut du site Web pour indiquer le niveau de la page actuelle dans la hiérarchie de navigation. Le fil d'Ariane Bootstrap5 utilise CSS Ajoute automatiquement des séparateurs. [Recommandation associée : "Tutoriel bootstrap"]
Dans l'image ci-dessous, la petite ligne de navigation sous la barre de navigation est un fil d'Ariane commun
Exemple
<!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 Séparateur de personnalisation
2.1 En modifiant l'attribut personnalisé CSS local
Dans le code suivant, en ajoutant un style="--bs-breadcrumb-divider: '>';", vous pouvez utiliser > comme symbole séparateur, ou vous pouvez le remplacer par n'importe quel autre caractère.
<!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 Utiliser des icônes ou des images
L'exemple ci-dessus peut également utiliser des icônes SVG intégrées.
<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 Sans séparateurs
Vous pouvez également supprimer les séparateurs en définissant --bs-breadcrumb-divider : ''; (les chaînes vides dans les propriétés personnalisées CSS compteront pour une valeur).
<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>Pour plus de connaissances sur le bootstrap, veuillez visiter : tutoriel de base du bootstrap ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!