Navigation dans le fil d'Ariane Bootstrap


Le fil d'Ariane est une méthode d'affichage basée sur les informations hiérarchiques d'un site Web. En prenant un blog comme exemple, le fil d'Ariane peut afficher la date de publication, les catégories ou les balises. Ils représentent la position de la page actuelle dans la hiérarchie de navigation.

Breadcrumbs dans Bootstrap est une simple liste non ordonnée avec la classe .breadcrumb. Les séparateurs seront automatiquement ajoutés via la classe suivante en CSS (bootstrap.min.css) :

.breadcrumb > li + li:before {
color: #CCCCCC;
content : "/ ";
padding: 0 5px;
}

L'exemple suivant illustre la navigation dans le fil d'Ariane :

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 面包屑导航</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">十一月</li>
</ol>


</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne