Maison > Article > interface Web > Présentation d'une fonctionnalité du groupe de zones de saisie Bootstrap
Présentation d'une fonctionnalité du groupe de zones de saisie Bootstrap
- 零下一度original
- 2017-07-17 14:38:071920parcourir
Ce chapitre expliquera une autre fonctionnalité prise en charge par Bootstrap, le groupe de zones de saisie. Le groupe de zones de saisie s’étend du contrôle de formulaire. À l’aide des groupes de zones de saisie, vous pouvez facilement ajouter du texte ou des boutons comme préfixes et suffixes aux zones de saisie basées sur du texte.
Vous pouvez ajouter des éléments communs à la saisie de l'utilisateur en ajoutant du contenu de préfixe et de suffixe au champ de saisie. Par exemple, vous pouvez ajouter un signe dollar ou @ avant votre nom d'utilisateur Twitter, ou d'autres éléments courants requis par l'interface de l'application.
Les étapes pour ajouter un élément préfixe ou suffixe à .form-control sont les suivantes :
Placez l'élément préfixe ou suffixe dans un
Ensuite, dans le même
Placez l'élément avant ou après l'élément <input>
Pour maintenir la compatibilité entre navigateurs, évitez d'utiliser les éléments <select> car ils ne s'affichent pas entièrement dans les navigateurs WebKit. N'appliquez pas la classe du groupe de zones de saisie directement au groupe de formulaires. Le groupe de zones de saisie est un composant isolé.
Les mots précédents
Parfois, nous devons combiner une zone de saisie de texte (groupe de saisie) avec un fichier ou une petite icône pour l'affichage, que nous appelons addon. Autrement dit, en ajoutant du texte ou des boutons devant, derrière ou des deux côtés de la zone de saisie de texte <input>, le contrôle du formulaire peut être étendu. Cet article présentera en détail l'utilisation de base du groupe de zones de saisie Bootstrap
Ajoutez des éléments ou des boutons supplémentaires de chaque côté de la zone de saisie. Vous pouvez également ajouter des éléments supplémentaires des deux côtés de la zone de saisie
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span></div><div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span></div><div class="input-group"> <span class="input-group-addon" id="basic-addon3"></span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div>
【Notes】
1. Évitez d'utiliser Élément <select> car les navigateurs WebKit ne peuvent pas dessiner entièrement ses styles
2. Évitez d'utiliser des éléments <textarea> car leur attribut rows n'est pas pris en charge dans certains cas
3. Ne mélangez pas les formulaires groupes ou classes de colonnes de grille (colonnes) directement avec les groupes de zones de saisie. Au lieu de cela, le groupe de zones de saisie est imbriqué dans le groupe de formulaires ou dans les éléments liés à la grille
<h3>错误示范</h3><div class="input-group col-xs-4"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group col-xs-8"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><h3>正确示范</h3><div class="col-xs-4"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div><div class="col-xs-8"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div>
4. peut ajouter plusieurs ( .input-group-addon ou .input-group-btn)
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> <span class="input-group-addon" id="basic-addon1">@</span></div>
5. n'est pas pris en charge dans un seul groupe de zones de saisie Ajouter plusieurs contrôles de formulaire
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
taille
Ajouter pour .input-group Pour le classe de taille correspondante, les éléments qu’elle contient ajusteront automatiquement leur taille. Il n'est pas nécessaire d'ajouter à plusieurs reprises des classes de dimensionnement pour chaque élément du groupe de zones de saisie. .input-group-lg et .input-group-sm sont fournis, mais le style ultra-petit n'est pas fourni. Peut-être que l'auteur pense que ce n'est pas nécessaire
<div class="input-group input-group-lg"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group input-group-sm"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
<.>
<div class="input-group"> <span class="input-group-addon"><input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."></div><div class="input-group"> <span class="input-group-addon"><input type="radio" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."></div>
, ajoutez plutôt .input-group-addon pour envelopper l'élément bouton. Étant donné que le style du bouton .btn définit différents styles, ce n'est pas comme une case à cocher, une radio, une étiquette, etc. qui peuvent être directement placés dans le style .input-group-addon. Par conséquent, afin d'éviter les conflits, l'auteur a mis en place un style .input-group-btn distinct pour le style .btn afin de remplacer .input-group-addon en tant que nouveau conteneur d'extension .input-group-btn
<div class="input-group"> <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..."></div>
<div class="input-group"> <div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul> </div> <input type="text" class="form-control" aria-label="..."></div>
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default" type="button">Action</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul> </div> <input type="text" class="form-control" aria-label="..."></div>
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!