Comment ajouter un fil d'Ariane dans Bootstrap ? Brève analyse des méthodes

青灯夜游

Libérer： 2021-11-25 19:41:45

avant

2659 Les gens l'ont consulté

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 !

Comment ajouter un fil d'Ariane dans Bootstrap ? Brève analyse des méthodes

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

Comment ajouter un fil dAriane dans Bootstrap ? Brève analyse des méthodes

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>

Copier après la connexion

Comment ajouter un fil dAriane dans Bootstrap ? Brève analyse des méthodes

2 Séparateur de personnalisation

2.1 En modifiant l'attribut personnalisé CSS local

Dans le code suivant, en ajoutant un style="max-width:90%", 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: &#39;>&#39;;" 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: &#39;|&#39;;" 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: &#39;-&#39;;" 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>

Copier après la connexion

Comment ajouter un fil dAriane dans Bootstrap ? Brève analyse des méthodes

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="max-width:90%" 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>

Copier après la connexion

Comment ajouter un fil dAriane dans Bootstrap ? Brève analyse des méthodes

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="max-width:90%" 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>

Copier après la connexion

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!