La méthode principale de mise en ?uvre d'une barre de navigation à double rangée dans Bootstrap est de combiner les structures et les ajustements de style. 1. Utilisez des conteneurs imbriqués pour construire une structure à double ligne, utilisez deux .navars indépendants ou. Conontaileurs pour placer respectivement le contenu de navigation supérieur et inférieur, la première ligne place des informations secondaires telles que la commutation de langue et les coordonnées, et la deuxième ligne est utilisée comme menu principal; 2. Utilisez la disposition Flex pour fusionner dans un conteneur, définissez D-Flex Flex-Colonne à travers la div externe pour obtenir un empilement vertical et gérez uniformément les styles et les largeurs; 3. Les détails de l'optimisation incluent le contr?le de l'espacement, la réaction à cacher le contenu de la première ligne, l'isolement de style et la coordination de correspondance des couleurs. Ces étapes permettent une structure claire et une barre de navigation à double ligne réactive et conviviale.

La mise en ?uvre de la barre de navigation à double rangée dans Bootstrap n'est en fait pas une fonctionnalité fournie avec le cadre, mais cet effet peut être réalisé grace à une structure HTML simple et à des ajustements de style CSS. L'accent est mis sur la compréhension du mécanisme de mise en page du bootstrap et de l'utilisation rationnelle de son système raster ou des outils flexibles.

Construire une structure à double rangée à l'aide de conteneurs imbriqués

Une pratique courante consiste à utiliser deux .navbar ou .container distincts pour placer respectivement le contenu de navigation en haut et en bas.

 <div class = "top-nav">
  <div class = "conteneur">
    <! - Le contenu de la première ligne, comme la sélection des langues, les coordonnées, etc.->
    <div class = "d-flex justify-content-between">
      <span> chinois / anglais </span>
      <span> Contactez-nous </span>
    </div>
  </div>
</div>

<nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <div class = "conteneur">
    <a class = "navbar-brand" href = "#"> logo </a>
    <bouton class = "navbar-toggler" type = "bouton" data-bs-toggle = "effondrement" data-bs-target = "# mainnav">
      <span class = "navbar-toggler-icon"> </span>
    </ bouton>
    <div class = "effondrement navbar-clollapse" id = "mainnav">
      <ul class = "Navbar-nav MS-Auto">
        <li class = "nav-item"> <a class = "nav link" href = "#"> home </a> </li>
        <li class = "nav-item"> <a class = "nav link" href = "#"> Produit </a> </li>
        <li class = "nav-item"> <a class = "nav link" href = "#"> contactez-nous </a> </li>
      </ul>
    </div>
  </div>
</ nav>

• La première ligne peut mettre des informations secondaires, telles que la commutation linguistique, le lien de connexion, etc.
• La deuxième ligne est la barre de navigation bootstrap standard pour le menu principal.
• Cette méthode est claire dans la structure et est pratique pour le traitement réactif.

Fusionner dans un conteneur à l'aide de la disposition Flex

Si vous souhaitez que la navigation à double ligne soit gérée dans un conteneur parent, vous pouvez envelopper deux lignes de contenu avec un conteneur Flex personnalisé:

 <div class = "Double-Navbar d-flex flex-column">
  <div class = "top-bar bg-light py-2">
    <div class = "conteneur d-flex justify-content-between">
      <span> Bienvenue sur notre site Web </span>
      <span> Connexion | Enregistrer </span>
    </div>
  </div>

  <nav class = "navbar navbar-expand-lg navbar-light bg-blanc">
    ...
  </ nav>
</div>

• Le réglage de la couche externe d-flex flex-column permet à deux parties de s'empiler verticalement.
• La largeur ou la couleur d'arrière-plan peut être réglée uniformément, ce qui la rend plus visuellement plus globale.
• Faites attention à savoir si la logique de pliage affecte le contenu de la première ligne lors de l'adaptation au terminal mobile.

Petites suggestions d'optimisation des détails

• Contr?le d'espacement : il est préférable d'ajouter un peu de marge ou de rembourrage entre les deux lignes pour éviter la surpeuplement visuel.

• Masquer de manière réceptuelle la première ligne : sur le petit écran, vous pouvez envisager de cacher les informations secondaires sur la ligne supérieure:

  

   <div class = "top-bar d-none d-md-block">

• Isolement du style : essayez de ne pas partager trop de styles pour les deux barres de navigation pour éviter les interférences les uns avec les autres.

• Correspondance des couleurs : les différences de couleurs entre les lignes supérieures et inférieures ne doivent pas être trop évidentes et maintenir la coordination globale.

---

Fondamentalement, ce sont les méthodes. Bien que Bootstrap ne prenne pas directement en charge une barre de navigation à double ligne, il peut être facilement réalisé en combinant des composants existants avec un petit ajustement CSS. La clé est de clarifier le niveau structurel et de faire attention aux problèmes d'expérience dans la conception réactive.

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!