Fundación cuadro de entrada? Tamaño
El uso de una columna de cuadrícula para ajustar el tamaño de la caja de entrada, como .large-6 , .medium-6 , y así sucesivamente.
Más sistema de red de conocimiento, puede hacer clic en el sistema de red tutorial.
Ejemplos
<Div class = "fila">
<Div class = "10 a gran medianas-7 columnas">
<Label> grande-mediano 10 7 (100% en pequeño)
<Input type = "text" marcador de posición = "Nombre">
</ Etiqueta>
</ Div>
</ Div>
<Div class = "fila">
<Div class = "small-5 columnas">
<Label> pequeña 5
<Input type = "text" marcador de posición = "Nombre">
</ Etiqueta>
</ Div>
</ Div>
<Div class = "fila">
<div class = "medio-3 columnas">
<Label> Medio-3 (100 % en pequeño)
<Input type = "text" marcador de posición = "Nombre">
</ Etiqueta>
</ Div>
</ Div>
</ Form>
Trate »
Igual al tamaño de la columna
A continuación se ilustran ejemplos de columnas de igual tamaño:
Ejemplos
<Div class = "fila">
<div class = "medio-4 columnas">
<Label> medio-4 (100 % sobre los pequeños, apilados)
<Input type = "text" marcador de posición = "Nombre">
</ Etiqueta>
</ Div>
<div class = "medio-4 columnas">
<Label> medio-4 (100 % sobre los pequeños, apilados)
<Input type = "text" marcador de posición = "Nombre">
</ Etiqueta>
</ Div>
<div class = "medio-4 columnas">
<Label> medio-4 (100 % sobre los pequeños, apilados)
<Input type = "text" marcador de posición = "Nombre">
</ Etiqueta>
</ Div>
</ Div>
</ Form>
Trate »
etiquetas en línea
Si desea que su contenido de la etiqueta aparece a la izquierda (no la parte superior), puede etiquetar etiqueta de elemento en la caja a la entrada izquierda de diferentes columnas y utilizar .inline clase para ajustar la altura del centro:
Ejemplos
<Div class = "fila">
<Div class = "pequeña-8 ">
<Div class = "fila">
<Div class = "small-3 columnas">
<Label for = "nombre" clase = "right inline"> Nombre </ label>
</ Div>
<Div class = "small-9 columnas">
<Input type = "text" id = "nombre" marcador de posición = "Nombre ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Trate »
Delantera y trasera etiqueta
Puede <div class="row collapse"> > añadir delantera y trasera elemento de pestaña: < element class="postfix"> o < element class="prefix"> . Se puede utilizar el sistema de red para configurar el tamaño de las etiquetas delanteras y traseras:
Ejemplos
<Div class = "fila">
<Div class = "large-6 columnas">
<Div class = "fila colapso prefijo -radius">
<Div class = "small-3 columnas">
<Span class = "prefijo"> Prefijo </ span>
</ Div>
<Div class = "small-9 columnas">
<Input type = "text" marcador de posición = "valor">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columnas">
<Div class = "fila colapso postfix -radius">
<Div class = "small-9 columnas">
<Input type = "text" marcador de posición = "valor">
</ Div>
<Div class = "small-3 columnas">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Trate »
Delantera y trasera de la lengüeta botón
Puede utilizar <a> añadir elementos .button clase para configurar los botones delanteros y traseros:
botones redondos etiqueta delantera y trasera
Ejemplos
<Div class = "fila">
<Div class = "large-6 columnas">
<Div class = "fila colapso prefijo -radius">
<Div class = "small-3 columnas">
<Span class = "prefijo"> Prefijo </ span>
</ Div>
<Div class = "small-9 columnas">
<Input type = "text" marcador de posición = "valor">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columnas">
<Div class = "fila colapso postfix -radius">
<Div class = "small-9 columnas">
<Input type = "text" marcador de posición = "valor">
</ Div>
<Div class = "small-3 columnas">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "fila">
<Div class = "large-6 columnas">
<Div class = "fila colapso prefijo -round">
<Div class = "small-3 columnas">
<A Href = "#" class = "button prefix"> Ir </ a>
</ Div>
<Div class = "small-9 columnas">
<Input type = "text" marcador de posición = "valor">
</ Div>
</ Div>
</ Div>
<Div class = "large-6 columnas">
<Div class = "fila colapso postfix -round">
<Div class = "small-9 columnas">
<Input type = "text" marcador de posición = "valor">
</ Div>
<Div class = "small-3 columnas">
<A Href = "#" class = "button postfix"> Ir </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Trate »