zone de saisie Foundation? Taille
En utilisant une colonne de grille pour définir la taille de la zone d'entrée, tel que .large-6 , .medium-6 , et ainsi de suite.
Plus système de grille de connaissances, vous pouvez cliquer sur le système de grille tutoriel.
Exemples
<Class Div = "ligne">
<Class = "Div grande-10 moyennes-7 colonnes">
<Label> grand 10 moyen 7 (100% sur les petites)
<Input type = "text" espace réservé = "Nom">
</ Label>
</ Div>
</ Div>
<Class Div = "ligne">
<Class Div = "small-5 colonnes">
<Label> petite-5
<Input type = "text" espace réservé = "Nom">
</ Label>
</ Div>
</ Div>
<Class Div = "ligne">
<class = "Div moyenne-3 colonnes">
<Label> moyen-3 (100 % sur les petites)
<Input type = "text" espace réservé = "Nom">
</ Label>
</ Div>
</ Div>
</ Form>
Essayez »
Égale à la taille de la colonne,
Ce qui suit illustre des exemples de colonnes de taille égale:
Exemples
<Class Div = "ligne">
<class = "Div moyennes-4 colonnes">
<Label> moyen-4 (100 % sur les petits, empilés)
<Input type = "text" espace réservé = "Nom">
</ Label>
</ Div>
<class = "Div moyennes-4 colonnes">
<Label> moyen-4 (100 % sur les petits, empilés)
<Input type = "text" espace réservé = "Nom">
</ Label>
</ Div>
<class = "Div moyennes-4 colonnes">
<Label> moyen-4 (100 % sur les petits, empilés)
<Input type = "text" espace réservé = "Nom">
</ Label>
</ Div>
</ Div>
</ Form>
Essayez »
tags Inline
Si vous voulez que votre contenu de l' étiquette affichée sur la gauche (pas le haut), vous pouvez marquer l' étiquette d'élément sur la boîte à l'entrée gauche de différentes colonnes et utiliser .inline classe pour définir le centre vertical:
Exemples
<Class Div = "ligne">
<Class Div = "small-8 ">
<Class Div = "ligne">
<Class Div = "small-3 colonnes">
<Label for = "nom" class = "right inline"> Nom </ label>
</ Div>
<Class Div = "small-9 colonnes">
<Input type = "text" id = "nom" espace réservé = "Prénom ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Essayez »
Avant et arrière étiquette
Vous pouvez <div class="row collapse"> la < element class="postfix"> < element class="prefix"> <div class="row collapse"> > ajouter élément de patte avant et arrière: < element class="postfix"> ou < element class="prefix"> . Vous pouvez utiliser le système de grille pour définir la taille des étiquettes avant et arrière:
Exemples
<Class Div = "ligne">
<Class = "Div grands-6 colonnes">
<Class Div = "ligne effondrement préfixe de radius">
<Class Div = "small-3 colonnes">
<Span class = "préfixe"> Prefix </ span>
</ Div>
<Class Div = "small-9 colonnes">
<Input type = "text" espace réservé = "Value">
</ Div>
</ Div>
</ Div>
<Class = "Div grands-6 colonnes">
<Class Div = "ligne effondrement postfix de radius">
<Class Div = "small-9 colonnes">
<Input type = "text" espace réservé = "Value">
</ Div>
<Class Div = "small-3 colonnes">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Essayez »
Avant et bouton de patte arrière
Vous pouvez utiliser <a> ajouter des éléments .button classe pour définir les boutons avant et arrière:
Avant et boutons ronds d'étiquette arrière
Exemples
<Class Div = "ligne">
<Class = "Div grands-6 colonnes">
<Class Div = "ligne effondrement préfixe de radius">
<Class Div = "small-3 colonnes">
<Span class = "préfixe"> Prefix </ span>
</ Div>
<Class Div = "small-9 colonnes">
<Input type = "text" espace réservé = "Value">
</ Div>
</ Div>
</ Div>
<Class = "Div grands-6 colonnes">
<Class Div = "ligne effondrement postfix de radius">
<Class Div = "small-9 colonnes">
<Input type = "text" espace réservé = "Value">
</ Div>
<Class Div = "small-3 colonnes">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Class Div = "ligne">
<Class = "Div grands-6 colonnes">
<Class Div = "ligne effondrement préfixe -ROUND">
<Class Div = "small-3 colonnes">
<A Href = "#" class = "button prefix"> Go </ a>
</ Div>
<Class Div = "small-9 colonnes">
<Input type = "text" espace réservé = "Value">
</ Div>
</ Div>
</ Div>
<Class = "Div grands-6 colonnes">
<Class Div = "ligne effondrement postfix -ROUND">
<Class Div = "small-9 colonnes">
<Input type = "text" espace réservé = "Value">
</ Div>
<Class Div = "small-3 colonnes">
<A Href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Essayez »