Comment créer un champ de recherche dans bootstrap

Pendant le processus de développement du projet, nous utiliserons plus ou moins l'option de recherche Alors, comment créer un champ de recherche standard et esthétique ? Ici, nous recommandons input-group, un contrôle fourni avec bootstrap.

Manuel recommandé : Manuel chinois Bootstrap

Jetons un bref coup d'œil à la description officielle de ce contrôle

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

Il signifie que pour la fonction de soumission de formulaire que nous utilisons habituellement, nous pouvons ajouter des boutons et du texte des deux côtés du champ de saisie.

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Les sept contenus suivants du contenu sont les fonctions de base qu'il peut réaliser. Ici, nous nous concentrons sur le quatrième bouton des modules complémentaires. ça suffit, si vous êtes intéressé, vous pouvez apprendre le reste par vous-même.

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .
input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser 
styles that cannot 
be overridden.

Le paragraphe ci-dessus signifie que les boutons des groupes de saisie sont différents des boutons ordinaires et nécessitent un niveau d'imbrication différent. En fait, pour faire simple, nous n'utilisons plus input-group-addon, mais utilisons input-group-btn pour gérer les boutons. Le code de démonstration que j'ai donné est le suivant :

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder="请输入字段名" / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search">查找</button>
               <button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
            </span>
 </div>

L'effet final est le suivant. suit Affichage

Cela affiche parfaitement les options de la barre de recherche, et le style reste cohérent.

Articles connexes recommandés :
1.Explication détaillée du champ de recherche et de la fonction de requête de la table Bootstrap
2.Utilisation de la pagination en arrière-plan côté serveur de la table bootStrap et de la mise en œuvre du champ de recherche personnalisé
Recommandations vidéo associées :
1.Dugu Jiujian (7)_Tutoriel vidéo Bootstrap

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!