La méthode de fabrication d'une barre de navigation verticale dans Bootstrap est la suivante: 1. Utilisez la classe Flex-Colonne pour modifier la navigation horizontale par défaut en arrangement vertical, avec le code de structure

; 2. Ajoutez des classes P-3, MB-2 et d'autres classes pour optimiser l'espacement et les marges, et utilisez BG-Light et Text-Dark pour ajuster les couleurs pour améliorer l'apparence; 3. Ajouter éventuellement des ic?nes (telles que des ic?nes bootstrap) ou un sous-menu statique pour améliorer les fonctions et les effets visuels. Ces étapes vous permettent de construire rapidement une barre de navigation latérale verticale réactive et uniformément.



Faire une barre de navigation verticale est en fait assez simple dans Bootstrap, en particulier avec ses classes et structures intégrées. Vous n'avez pas besoin d'écrire trop de code supplémentaire pour créer rapidement une navigation latérale réactive et uniforme.



Infrastructure: arrangement vertical à l'aide de flex-column

Le composant de navigation de Bootstrap est horizontal par défaut, mais il peut être changé dans la direction verticale en ajoutant une classe flex-column .

 <ul class = "nav flex-column">
  <li class = "nav-item">
    <a class = "nav link" href = "#"> home </a>
  </li>
  <li class = "nav-item">
    <a class = "nav link" href = "#"> à propos de </a>
  </li>
  <li class = "nav-item">
    <a class = "nav link" href = "#"> Contact </a>
  </li>
</ul>

• nav est la classe de base qui contr?le le style global;
• flex-column modifie la disposition de l'horizontale à la verticale;
• Chaque nav-item est un élément de menu;
• nav-link est le style de lien.

Ce qui est écrit de cette manière est une simple barre de navigation verticale sans couleur d'arrière-plan ni espacement, ce qui convient à une utilisation dans la zone de la barre latérale pour d'autres dispositions.



Ajouter des styles et un espacement

La navigation verticale par défaut semble un peu compacte, et vous pouvez améliorer l'apparence de plusieurs manières:

• Ajouter p-3 ou py-2 à .nav pour augmenter la marge;
• Ajoutez mb-2 à chaque nav-link afin qu'il y ait un écart entre les entrées;
• Utilisez les classes de couleurs de Bootstrap, telles que bg-light ou text-dark , pour ajuster les couleurs d'arrière-plan et de texte;

Exemple:



 <ul class = "Nav flex-column bg-light p-3">
  <li class = "Nav-item MB-2">
    <a class = "NAV-Link Text-Dark" href = "#"> Home </a>
  </li>
  <li class = "Nav-item MB-2">
    <a class = "NAV-Link Text-Dark" href = "#"> à propos de </a>
  </li>
  <li class = "nav-item">
    <a class = "NAV-Link Text-Dark" href = "#"> Contact </a>
  </li>
</ul>

La navigation réalisée de cette manière est plus proche des exigences de style dans les projets réels et semble plus professionnelle.

Caractéristique facultative: ajouter une ic?ne ou un sous-menu

Si vous voulez en faire plus, vous pouvez envisager d'ajouter des ic?nes ou des menus inférieurs.

• Les ic?nes peuvent être utilisées avec des ic?nes Fontawesome ou bootstrap;
• Le sous-menu peut être mis en ?uvre avec ul imbriqué, mais vous devez écrire un petit contr?le CSS ou JS par vous-même pour vous développer et fermer;
• S'il ne s'agit qu'une page statique, il est recommandé d'être plus simple et de ne pas faire de fonctions trop compliquées;

Pour donner un petit exemple (sans interaction):

 <ul class = "nav flex-column">
  <li class = "nav-item">
    <a class = "nav link" href = "#"> <i class = "bi bi-house"> </i> home </a>
  </li>
  <li class = "nav-item">
    <a class = "nav link" href = "#"> <i class = "bi bi-info-circle"> </i> à propos de nous </a>
  </li>
</ul>

Ici, nous utilisons la bibliothèque d'ic?nes des ic?nes bootstrap, et l'effet visuel sera plus clair et plus intuitif après l'ajout de l'ic?ne.

Fondamentalement, c'est tout. Tant que vous ma?trisez la structure de base et ajoutez des styles et des fonctions en fonction des exigences du projet, vous pouvez créer une barre de navigation verticale pratique.

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!