casella di input Fondazione? Size
Utilizzando una colonna della griglia per impostare la dimensione della casella di input, come .large-6 , .medium-6 , e così via.
Più conoscenza del sistema di rete, è possibile fare clic sul sistema a griglia tutorial.
Esempi
<Div class = "riga">
<Div class = "larga 10 medio-7 colonne">
<Label> grande-10 a medio 7 (100% sulle piccole)
<Input type = "text" segnaposto = "Nome">
</ Label>
</ Div>
</ Div>
<Div class = "riga">
<Div class = "piccoli-5 colonne">
<Label> piccolo-5
<Input type = "text" segnaposto = "Nome">
</ Label>
</ Div>
</ Div>
<Div class = "riga">
<div class = "medio-3 colonne">
<Label> medio-3 (100 % sulle piccole)
<Input type = "text" segnaposto = "Nome">
</ Label>
</ Div>
</ Div>
</ Form>
Prova »
Uguale alla dimensione della colonna
L'esempio seguente illustra esempi di colonne di uguali dimensioni:
Esempi
<Div class = "riga">
<div class = "medio-4 colonne">
<Label> medio-4 (100 % sulla piccola, impilati)
<Input type = "text" segnaposto = "Nome">
</ Label>
</ Div>
<div class = "medio-4 colonne">
<Label> medio-4 (100 % sulla piccola, impilati)
<Input type = "text" segnaposto = "Nome">
</ Label>
</ Div>
<div class = "medio-4 colonne">
<Label> medio-4 (100 % sulla piccola, impilati)
<Input type = "text" segnaposto = "Nome">
</ Label>
</ Div>
</ Div>
</ Form>
Prova »
tag in linea
Se si desidera che il contenuto dell'etichetta visualizzata a sinistra (non il top), è possibile contrassegnare un'etichetta elemento sulla scatola con l'ingresso di sinistra di diverse colonne e utilizzare .inline classe per impostare il centro verticale:
Esempi
<Div class = "riga">
<Div class = "piccolo-8 ">
<Div class = "riga">
<Div class = "piccoli-3 colonne">
<Label for = "nome" class = "right in linea"> Nome </ label>
</ Div>
<Div class = "piccoli-9 colonne">
<Input type = "text" id = "nome" segnaposto = "Nome ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Prova »
Anteriore e sull'etichetta posteriore
È possibile <div class="row collapse"> > aggiungere elemento scheda anteriore e posteriore: < element class="postfix"> o < element class="prefix"> . È possibile utilizzare il sistema di griglia per impostare la dimensione delle etichette anteriori e posteriori:
Esempi
<Div class = "riga">
<Div class = "grandi-6 colonne">
<Div class = "fila crollo prefisso raggio di curvatura">
<Div class = "piccoli-3 colonne">
<Span class = "prefisso"> prefisso </ span>
</ Div>
<Div class = "piccoli-9 colonne">
<Input type = "text" segnaposto = "valore">
</ Div>
</ Div>
</ Div>
<Div class = "grandi-6 colonne">
<Div class = "fila crollo postfix raggio di curvatura">
<Div class = "piccoli-9 colonne">
<Input type = "text" segnaposto = "valore">
</ Div>
<Div class = "piccoli-3 colonne">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Prova »
Anteriore e il pulsante linguetta posteriore
È possibile utilizzare <a> aggiungere elementi .button classe per impostare i tasti anteriori e posteriori:
pulsanti rotondi etichetta anteriore e posteriore
Esempi
<Div class = "riga">
<Div class = "grandi-6 colonne">
<Div class = "fila crollo prefisso raggio di curvatura">
<Div class = "piccoli-3 colonne">
<Span class = "prefisso"> prefisso </ span>
</ Div>
<Div class = "piccoli-9 colonne">
<Input type = "text" segnaposto = "valore">
</ Div>
</ Div>
</ Div>
<Div class = "grandi-6 colonne">
<Div class = "fila crollo postfix raggio di curvatura">
<Div class = "piccoli-9 colonne">
<Input type = "text" segnaposto = "valore">
</ Div>
<Div class = "piccoli-3 colonne">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "riga">
<Div class = "grandi-6 colonne">
<Div class = "fila crollo prefisso round-ray">
<Div class = "piccoli-3 colonne">
<A Href = "#" class = "button prefix"> Vai </ a>
</ Div>
<Div class = "piccoli-9 colonne">
<Input type = "text" segnaposto = "valore">
</ Div>
</ Div>
</ Div>
<Div class = "grandi-6 colonne">
<Div class = "fila crollo postfix round-ray">
<Div class = "piccoli-9 colonne">
<Input type = "text" segnaposto = "valore">
</ Div>
<Div class = "piccoli-3 colonne">
<A Href = "#" class = "button postfix"> Vai </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Prova »