Pour implémenter une barre de navigation mobile en plein écran dans Bootstrap, vous devez combiner des composants par défaut et des styles personnalisés; 1. Utilisez la structure Navbar par défaut de bootstrap comme base pour construire une barre de navigation réactive; 2. Ajoutez un style CSS personnalisé pour faire en sorte que le menu couvre le plein écran et centrez le contenu lors de l'expansion; 3. Vous pouvez fermer automatiquement la barre de navigation après avoir cliqué sur le lien via des attributs HTML ou JavaScript; 4. Faites attention à la définition d'optimisations détaillées telles que Z-Index, le padding-top, l'animation de transition et le contr?le de défilement pour améliorer l'expérience.

La barre de navigation mobile à écran complet n'est pas compliquée en bootstrap, mais elle doit être implémentée en combinaison avec des composants par défaut et certains styles personnalisés. Bootstrap lui-même fournit l'infrastructure d'une barre de navigation réactive, mais pour obtenir un effet "plein écran", des CS et JS supplémentaires sont nécessaires.

1. Utilisez la structure Navbar par défaut de bootstrap par défaut

Tout d'abord, vous devez créer une barre de navigation réactive standard en utilisant les classes et les structures fournies par Bootstrap. Cette partie est la base et la condition préalable à l'expansion ultérieure.

 <nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <a class = "navbar-brand" href = "#"> logo </a>
  <bouton class = "navbar-toggler" type = "bouton" data-bs-toggle = "effondrement" data-bs-target = "# fullScreennavbar">
    <span class = "navbar-toggler-icon"> </span>
  </ bouton>

  <div class = "effondrement navbar-clollapse" id = "fullScreennavbar">
    <ul class = "navbar-nav me-uto mb-2 mb-lg-0">
      <li class = "nav-item"> <a class = "nav link" href = "#"> home </a> </li>
      <li class = "nav-item"> <a class = "nav link" href = "#"> service </a> </li>
      <li class = "nav-item"> <a class = "nav link" href = "#"> à propos de nous </a> </li>
    </ul>
  </div>
</ nav>

Cette partie du code peut déjà permettre à la barre de navigation de s'effondrer et de s'afficher sur un petit écran, mais elle ne peut pas remplir tout l'écran.

2. Ajouter des CSS personnalisés pour obtenir un effet plein écran

Pour que le menu de navigation occupe l'ensemble de l'écran lors de l'expansion, certains styles supplémentaires doivent être ajoutés pour remplacer le comportement par défaut .navbar-collapse :

 @media (max-large: 991px) {
  .Navbar-Collapse {
    Position: fixe;
    en haut: 0;
    à gauche: 0;
    Largeur: 100%;
    Hauteur: 100VH;
    Color d'arrière-plan: blanc;
    Z-Index: 9999;
    Tableau de rembourrage: 56px; / * Ajustez en fonction de la hauteur de votre Navbar * /
    Affichage: flex;
    Align-Items: Centre;
    Justification-contenu: centre;
  }

  .navbar-nav {
    Flex-Direction: colonne;
    Texte-aligne: Centre;
    taille de police: 1.5rem;
  }

  .nav-link {
    marge: 1rem 0;
  }
}

Après avoir configuré ceci, cliquez sur le bouton de menu de votre appareil mobile et le menu couvrira l'ensemble de l'écran et centrera le lien.

3. Facultatif: cliquez sur l'élément de menu pour fermer automatiquement la barre de navigation

Certains utilisateurs peuvent vouloir fermer automatiquement le menu après avoir cliqué sur un lien au lieu de cliquer manuellement. Vous pouvez le faire de la manière suivante:

• Ajouter un attribut data-bs-toggle="collapse" à chaque .nav-link
• Ou écoutez des événements de clic via JavaScript et cachez-les manuellement

Exemple de HTML:

 <a class = "nav link" href = "#" data-bs-toggle = "effondrement" data-bs-target = "# fullScreennavbar.show"> home </a>

Ou écrivez un JS simple:

 document.QuerySelectorall ('. NAV-LINK'). ForEach (link => {
  link.addeventListener ('click', () => {
    const bscollapse = new bootstrap.collapse (document.getElementByid ('fullScreennavbar'), {
      basculer: faux
    });
    bscollapse.hide ();
  });
});

4. Précautions et détails Optimisation

• L'index Z doit être suffisamment élevé pour éviter d'être obscurci par le contenu de la page.
• La valeur de la tampon doit être définie en fonction de votre hauteur Navbar réelle, sinon le contenu le plus élevé sera bloqué.
• Si vous souhaitez ajouter des transitions d'animation, vous pouvez ajouter transition: transform 0.3s ease; et d'autres attributs à .navbar-collapse .
• Lors du défilement de la page, il est préférable de rendre le corps non-défilable. Vous pouvez ajouter dynamiquement overflow:hidden au corps à l'aide de JS.

Fondamentalement, c'est tout. Bien que Bootstrap ne fournisse pas directement les composants de la "navigation complète", avec une légère modification, il peut réaliser l'expérience du menu mobile commun des sites Web modernes.

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!