Bootstrap 4 - Fil d'Ariane
La description
Il est utilisé pour afficher des informations basées sur la hiérarchie pour un site et indique l'emplacement de la page actuelle dans une hiérarchie de navigation. Bootstrap utilise la classe .breadcrumb pour définir la liste en fil d'Ariane et ajoute un séparateur via CSS à la liste.
L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Breadcrumb</h2>
<nav aria-label = "breadcrumb">
<!--Add the "breadcrumb" class to ul element that represents the breadcrumb-->
<ul class = "breadcrumb">
<!--Add the ".breadcrumb-item" class to each li element within the breadcrumb-->
<li class = "breadcrumb-item"><a href = "#">Home</a></li>
<li class = "breadcrumb-item"><a href="#">Tutorials Library</a></li>
<!--Add the "active" class to li element to represent the current page-->
<li class = "breadcrumb-item active" aria-current = "page">Bootstrap 4</li>
</ul>
</nav>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -