Comment régler la barre de navigation bootstrap

Bootstrap fournit un guide simple pour configurer les barres de navigation: l'introduction de la bibliothèque bootstrap pour créer des conteneurs de barre de navigation Ajouter l'identité de marque Créer des liens de navigation Ajouter d'autres éléments (facultatif) Styles d'ajustement (facultatif)

Guide de réglage de la barre de navigation bootstrap

Bootstrap fournit des outils puissants pour créer facilement des barres de navigation réactives et puissantes. Les étapes suivantes vous guideront pour configurer la barre de navigation bootstrap:

1. Présentation de la bibliothèque bootstrap

Dans votre fichier HTML, liez la bibliothèque bootstrap à votre page:

 <code><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbszth/b1EixfHpvwxNxQ8p5m8178fX2RC1tiIsu3nT3UpHvmwHuH 89y k9/nl8" crossorigin="anonymous"></code>

2. Créer un conteneur de barre de navigation

Créez un conteneur de barre de navigation à l'aide de l'élément nav :

 <code><nav class="navbar navbar-expand-lg navbar-light bg-light"></nav></code>

• La classe navbar appliquera le style de barre de navigation bootstrap.
• navbar-expand-lg fera en sorte que la barre de navigation développe automatiquement des écrans plus grands.
• navbar-light et bg-light appliqueront des thèmes de couleur claire.

3. Ajouter l'identité de la marque

Utilisez navbar-brand pour ajouter l'identité de la marque à la barre de navigation:

 <code><a class="navbar-brand" href="#">我的网站</a></code>

4. Créer un lien de navigation

Créer des liens de navigation à l'aide de classes nav-item et nav-link :

 <code><ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> <li class="nav-item"> <a class="nav-link" href="#">联系我们</a> </li> </ul></code>

5. Ajouter d'autres éléments (facultatif)

Vous pouvez ajouter des éléments supplémentaires au besoin, tels que des champs de recherche, des boutons ou des menus déroulants.

6. Ajustez le style (facultatif)

Vous pouvez utiliser la classe CSS attachée pour personnaliser l'apparence et le comportement de la barre de navigation, tels que le changement de couleur de texte, la couleur d'arrière-plan ou la taille de la police.

Exemple de code:

 <code><nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">我的网站</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">更多</a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">联系我们</a></li> <li><a class="dropdown-item" href="#">帮助</a></li> </ul> </li> </ul> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </nav></code>

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!