Bootstrap4 教程基础

Bootstrap4 Formulaire Bootstrap4 Barre de navigation

Bootstrap4 Navigation de piste de pain (Breadcrumb)

La piste de pain est une méthode de navigation qui indique à l'utilisateur la position de la page actuelle dans le site ou l'application. La navigation de piste de pain peut grandement améliorer l'accessibilité des sites web avec un grand nombre de pages ou une hiérarchie de navigation complexe.

La navigation de piste de pain est une méthode de visualisation basée sur les informations hiérarchiques du site. Prenez un blog par exemple, la navigation de piste de pain peut afficher la date de publication, la catégorie ou les étiquettes. Ils représentent la position de la page actuelle dans la hiérarchie de navigation, et sont une aide à la navigation dans l'interface utilisateur.

La navigation de piste de pain dans Bootstrap est une navigation simple avec .breadcrumb class des listes non ordonnées. Les séparateurs sont ajoutés via CSS (bootstrap.min.css) avec ::before et content, voici les classes automatiquement ajoutées :

.breadcrumb-item　+　.breadcrumb-item::before {
　　display: inline-block;
　　padding-right: 0.5rem;
　　color: "#6c757d;
　　content: "/";
}

Il suffit d'utiliser la classe .breadcrumb des listes ordonnées pour créer un agencement statique de navigation de piste de pain avec Bootstrap, comme dans l'exemple suivant Bootstrap4 Exemple de navigation de piste de pain

Exemple

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
　　<li class="breadcrumb-item active">Accueil</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Accueil</a></li>
　　<li class="breadcrumb-item active">Bibliothèque</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Accueil</a></li>
　　<li class="breadcrumb-item"><a href="#">Bibliothèque</a></li>
　　<li class="breadcrumb-item active">Data</li>
</ol>
</body>
</html>

Voyons si ça marche ‹/›

Nous pouvons également ne pas utiliser la forme de liste :

Bootstrap4 Exemple de navigation de piste de pain

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav　class="breadcrumb">
　　<a　class="breadcrumb-item"　href="#">Accueil</a>
　　<a　class="breadcrumb-item"　href="#">Bibliothèque</a>
　　<a　class="breadcrumb-item"　href="#">Données</a>
　　<span　class="breadcrumb-item　active">Bootstrap</span>
</nav>
</body>
</html>

Voyons si ça marche ‹/›

Voici le résultat après exécution :

Bootstrap4 Formulaire Bootstrap4 Barre de navigation