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 rechercheAlors, 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 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 :

   查找 添加  

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!