Bootstrap groupe de cases d'entrée
Une autre caractéristique de ce chapitre expliquera support Bootstrap, groupe de cases d'entrée. expansion du groupe de zone de saisie depuis les contrôles de formulaire . Utilisez le groupe de la boîte d'entrée, vous pouvez facilement ajouter une zone de saisie de texte préfixe et suffixe, ou un bouton à la base de texte.
En ajoutant des préfixes et des suffixes pour le contenu du champ de saisie, vous pouvez ajouter des éléments à l'entrée d'utilisateur commun. Par exemple, vous pouvez ajouter un signe de dollar, ou avant que le nom d'utilisateur Twitter avec @, ou programmation d'applications interfaces nécessaires pour d'autres éléments communs.
Pour ajouter aux éléments préfixe ou un suffixe.form de contrôle sont les suivantes:
- Les éléments d'un préfixe ou un suffixe avec un groupe .inputclasse de la <div> dans.
- Ensuite, dans le même <div> à l' intérieur, en plaçant du contenu supplémentaire dans la classe de.input-groupe-addon de <span> à l' intérieur.
- Pour le <span> placé devant ou derrière l'élément <input>.
Afin de maintenir la compatibilité cross-browser, évitez d'utiliser élément <select>, parce qu'ils ne rendent pas complètement les effets navigateur WebKit. Ne pas appliquer directement au groupe de classe boîte sous forme d'entrée ensemble, le groupe de la boîte d'entrée est un élément isolé.
La boîte d'entrée ensemble de base
L'exemple suivant illustre le Groupe de base des boîtes d'entrée:
Exemples
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-exemple BS- exemple-forme" role = "form">
<Div class = "entrée-groupe">
<Span class = "entrée-groupe-addon "> @ </ span>
<entrée type = "text" class = "form-commande" espace réservé = "twitterhandle">
</ Div>
<Br>
<Div class = "entrée-groupe">
<entrée type = "text" class = "form-commande">
<Span class = "entrée-groupe-addon "> .00 </ span>
</ Div>
<Br>
<Div class = "entrée-groupe">
<Span class = "entrée-groupe-addon "> $ </ span>
<entrée type = "text" class = "form-commande">
<Span class = "entrée-groupe-addon "> .00 </ span>
</ Div>
</ Form>
</ Div>
Les résultats sont les suivants:
La taille du groupe de zone de saisie
Vous pouvez ajouter une forme par rapport à la taille de la.input groupe classe (par exemple.input-groupe-lg, entrée - groupe-sm, xs entrée-groupe) pour changer la taille du groupe de la boîte d'entrée. Le contenu de la boîte d'entrée seront automatiquement redimensionnées.
L'exemple suivant illustre ce point:
Exemples
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-exemple BS- exemple-forme" role = "form">
<Div class = "entrée-groupe entrées - groupe-lg">
<Span class = "entrée-groupe-addon "> @ </ span>
<entrée type = "text" class = "form-commande" espace réservé = "Twitterhandle">
</ Div>
<Br>
<Div class = "entrée-groupe">
<Span class = "entrée-groupe-addon "> @ </ span>
<entrée type = "text" class = "form-commande" espace réservé = "Twitterhandle">
</ Div>
<Br>
<Div class = "entrée-groupe entrées - groupe-sm">
<Span class = "entrée-groupe-addon "> @ </ span>
<entrée type = "text" class = "form-commande" espace réservé = "Twitterhandle">
</ Div>
</ Form>
</ Div>
Les résultats sont les suivants:
Cochez les cases et la fiche de radio
Vous pouvez cocher les cases et la radio plug-in comme une boîte d'entrée préfixe ou un suffixe groupe d'éléments, comme le montre l'exemple suivant:
Exemples
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-exemple BS- exemple-forme" role = "form">
<Div class = "ligne">
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<Span class = "entrée-groupe-addon ">
<entrée type = "checkbox"> </ span>
<entrée type = "text" class = "form-commande">
Input-groupe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<Span class = "entrée-groupe-addon ">
<entrée type = "radio"> </ span>
<entrée type = "text" class = "form-commande">
Input-groupe ->
->
->
</ Form>
</ Div>
Les résultats sont les suivants:
Button widget
Vous pouvez aussi mettre le bouton comme un élément de préfixe ou un suffixe du groupe de la boîte d'entrée, cette fois , vous ne serez pas ajouter laclasse .input-groupe-addon, vous devez utiliser la classe.input-group-btn bouton pour envelopper. Cela est nécessaire parce que le style du navigateur par défaut ne sera pas réécrite. L'exemple suivant illustre ce point:
Exemples
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-exemple BS- exemple-forme" role = "form">
<Div class = "ligne">
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<Span class = "entrée-groupe-btn ">
<Bouton class = "btn btn-default" type = "button"> Go! bouton </>
</ Span>
<entrée type = "text" class = "form-commande">
Input-groupe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<entrée type = "text" class = "form-commande">
<Span class = "entrée-groupe-btn ">
<Bouton class = "btn btn-default" type = "button"> Go! bouton </>
</ Span>
Input-groupe ->
->
->
</ Form>
</ Div>
Les résultats sont les suivants:
Bouton avec menu déroulant
menus bouton Ajouter un menu déroulant dans le groupe de la boîte d'entrée, tout simplement dans uneclasse .input-groupe-btn de boutons et déroulants peuvent être enveloppés, comme le montrent les exemples suivants:
Exemples
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-exemple BS- exemple-forme" role = "form">
<Div class = "ligne">
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<Div class = "entrée-groupe-btn ">
<Bouton type = "button" class = "btn btn-default déroulant -toggle" données-toggle = "déroulant"> menu déroulant <span class = "caret"> </ span>
</ Button>
<Ul class = "liste déroulante-menu">
<Li>
<A href = "#"> function </ a>
</ Li>
<Li>
<A href = "#"> Une autre caractéristique </ a>
</ Li>
<Li>
<A href = "#"> Autre </ a>
</ Li>
<Li class = "diviseur"> </ li>
<Li>
<A href = "#"> isolé lien </ a>
</ Li>
</ Ul>
Btn-groupe ->
<entrée type = "text" class = "form-commande">
Input-groupe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<entrée type = "text" class = "form-commande">
<Div class = "entrée-groupe-btn ">
<Bouton type = "button" class = "btn btn-default déroulant -toggle" données-toggle = "déroulant"> menu déroulant <span class = "caret"> </ span>
</ Button>
<Ul class = "menu déroulant pull- right">
<Li>
<A href = "#"> function </ a>
</ Li>
<Li>
<A href = "#"> Une autre caractéristique </ a>
</ Li>
<Li>
<A href = "#"> Autre </ a>
</ Li>
<Li class = "diviseur"> </ li>
<Li>
<A href = "#"> isolé lien </ a>
</ Li>
</ Ul>
Btn-groupe ->
Input-groupe ->
->
->
</ Form>
</ Div>
Les résultats sont les suivants:
Segmentation bouton de menu déroulant
Bouton Ajouter split avec un menu déroulant dans le groupe de la boîte d'entrée, utilisez le bouton de menu déroulant et à peu près le même style, mais le menu déroulant pour ajouter la fonction principale, comme le montre l'exemple suivant:
Exemples
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-exemple BS- exemple-forme" role = "form">
<Div class = "ligne">
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<Div class = "entrée-groupe-btn ">
<Bouton type = "button" class = "btn btn-default" tabindex = "-1"> menu déroulant </ button>
<Bouton type = "button" class = "btn btn-default déroulant -toggle" données-toggle = "déroulant" tabindex = "-1">
<Span class = "caret"> </ span>
<Span class = "sr-only"> menu déroulant commutateur </ span>
</ Button>
<Ul class = "liste déroulante-menu">
<Li>
<A href = "#"> function </ a>
</ Li>
<Li>
<A href = "#"> Une autre caractéristique </ a>
</ Li>
<Li>
<A href = "#"> Autre </ a>
</ Li>
<Li class = "diviseur"> </ li>
<Li>
<A href = "#"> isolé lien </ a>
</ Li>
</ Ul>
Btn-groupe ->
<entrée type = "text" class = "form-commande">
Input-groupe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "entrée-groupe">
<entrée type = "text" class = "form-commande">
<Div class = "entrée-groupe-btn ">
<Bouton type = "button" class = "btn btn-default" tabindex = "-1"> menu déroulant </ button>
<Bouton type = "button" class = "btn btn-default déroulant -toggle" données-toggle = "déroulant" tabindex = "-1">
<Span class = "caret"> </ span>
<Span class = "sr-only"> menu déroulant commutateur </ span>
</ Button>
<Ul class = "menu déroulant pull- right">
<Li>
<A href = "#"> function </ a>
</ Li>
<Li>
<A href = "#"> Une autre caractéristique </ a>
</ Li>
<Li>
<A href = "#"> Autre </ a>
</ Li>
<Li class = "diviseur"> </ li>
<Li>
<A href = "#"> isolé lien </ a>
</ Li>
</ Ul>
Btn-groupe ->
Input-groupe ->
->
->
</ Form>
</ Div>
Les résultats sont les suivants:
