La clé pour ajouter un formulaire de recherche dans la barre de navigation bootstrap est d'avoir une structure claire et une utilisation correcte des noms de classe. 1. Utilisez D-FLEX pour organiser des éléments de forme horizontalement, et les classes de contr?le et de BTN sont utilisées respectivement pour les bo?tes d'entrée et les boutons; 2. Utilisez MS-Auto ou Me-Auto pour contr?ler l'alignement de la forme pour atteindre la disposition gauche ou droite; 3. Utilisez W-100 et Flex-Grow-1 pour optimiser l'affichage mobile pour éviter la confusion de disposition; 4. Sélectionnez la position de la zone de recherche en fonction de la scène. Les pratiques communes incluent le placer à droite, au milieu de la navigation ou dans le menu effondré; 5. Si des interactions complexes sont automatiquement terminées, JS supplémentaire est nécessaire. En combinant raisonnablement les classes bootstrap, les cases de recherche réactives peuvent être implémentées sans code complexe.

Il n'est pas difficile d'ajouter un formulaire de recherche à la barre de navigation bootstrap. La clé est d'avoir une structure claire et des styles coordonnés. Tant que vous utilisez raisonnablement les noms de classe fournis par bootstrap, la bo?te de recherche peut être naturellement intégrée dans la barre de navigation tout en conservant une disposition réactive.

Structure de base: utilisez le formulaire et le groupe d'entrée

La barre de navigation de Bootstrap est organisée horizontalement par défaut, adaptée à la mise en place d'éléments tels que des liens et des boutons. Pour ajouter une zone de recherche, vous utilisez généralement la balise <form></form> et utilisez form-inline pour garder les éléments affichés dans une ligne.

 <nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <div class = "contener-fluid">
    <a class = "navbar-brand" href = "#"> marque </a>
    <bouton class = "navbar-toggler" type = "bouton" data-bs-toggle = "effondrement" data-bs-target = "# navbarcontent">
      <span class = "navbar-toggler-icon"> </span>
    </ bouton>
    <div class = "effondrement navbar-clollapse" id = "navbarcontent">
      <form class = "d-flex ms-uto">
        <entrée class = "form-control me-2" type = "search" placeholder = "search" aria-label = "search">
        <Button class = "btn btn-outline-sucess" type = "soume"> search </utton>
      </ form>
    </div>
  </div>
</ nav>

• d-flex permet de disposer les éléments internes de la forme horizontalement
• ms-auto permet à la forme d'être alignée vers la droite (selon l'exigence)
• me-2 définit un peu d'espace entre la bo?te d'entrée et le bouton
• btn-outline-success est un choix de style visuel qui peut être remplacé en fonction du style du projet

Placez-le à droite ou à gauche? Décider en fonction du scénario d'utilisation

L'emplacement de la zone de recherche affectera l'expérience utilisateur, et il existe généralement plusieurs pratiques courantes:

• Placé sur le c?té droit de la barre de navigation : le plus commun, il est conforme aux habitudes de navigation de l'utilisateur de gauche à droite, adapté à la plupart des sites Web
• Placé au milieu du lien de navigation : adapté aux sites Web avec recherche comme fonction principale (comme le commerce électronique, les plateformes de contenu)
• Dans le menu pliant : adapté au mobile, à la sauvegarde de l'espace

Si vous voulez que la zone de recherche soit toujours bonne, vous pouvez l'écrire comme ceci:

 <div class = "effondrement navbar-clollapse" id = "navbarcontent">
  <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 = "#"> à propos de </a> </li>
  </ul>
  <form class = "d-flex">
    <entrée class = "form-control me-2" type = "search" placeholder = "search" aria-label = "search">
    <Button class = "btn btn-outline-sucess" type = "soume"> search </utton>
  </ form>
</div>

• me-auto doit donner de l'espace entre les liens de navigation et les bo?tes de recherche
• mb-2 mb-lg-0 est pour rendre le menu mobile plus propre

Optimisation mobile: éviter la disposition incorrectement

Sur un petit écran, si le bo?tier de recherche est trop large, il peut provoquer une disposition mal placée. Il peut être optimisé en définissant la largeur maximale ou en utilisant des classes réactives.

 <form class = "d-flex w-100">
  <Input class = "form-control me-2 flex-grow-1" type = "search" placeholder = "search" aria-label = "search">
  <Button class = "btn btn-outline-sucess" type = "soume"> search </utton>
</ form>

• w-100 garantit que le formulaire remplit le conteneur
• flex-grow-1 permet au bo?tier d'entrée d'élargir automatiquement la largeur
• Si vous souhaitez que le bouton devienne un bouton d'ic?ne du c?té mobile, vous pouvez ajouter une requête multimédia ou utiliser la classe d'outils réactive de Bootstrap

Fondamentalement c'est tout

Le c?ur de l'ajout d'une zone de recherche est l'utilisation correcte de la structure et des noms de classe. Aucun JS complexe n'est requis, et il ne nécessite pas de styles supplémentaires. Tant que vous utilisez rationnel les cours intégrés de Bootstrap, vous pouvez rapidement implémenter une bo?te de recherche magnifique et pratique. Bien s?r, s'il y a des exigences d'interaction plus complexes (telles que l'achèvement automatique, les résultats de mise à pied, etc.), une logique JS supplémentaire est requise.

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!