pole wprowadzania Fundacja? Rozmiar
Z użyciem kolumny siatki, aby ustawić wielkość okna wejściowego, takiego jak .large-6 , .medium-6 , i tak dalej.
Więcej system sieci wiedzy, można kliknąć na systemie siatki tutoriala.
Przykłady
<Form>
<Div class = "wiersz">
<Div class = "Duży-10 średnie-7 kolumny">
<Label> duża-10 średnio 7 (100% na małe)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
<Div class = "wiersz">
<Div class = "small-5 kolumny">
<Label> małe-5
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
<Div class = "wiersz">
<div class = "średnie-3 kolumny">
<Label> średnio-3 (100 % na małe)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
</ Form>
<Div class = "wiersz">
<Div class = "Duży-10 średnie-7 kolumny">
<Label> duża-10 średnio 7 (100% na małe)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
<Div class = "wiersz">
<Div class = "small-5 kolumny">
<Label> małe-5
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
<Div class = "wiersz">
<div class = "średnie-3 kolumny">
<Label> średnio-3 (100 % na małe)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
</ Form>
Spróbuj »
Równy rozmiar kolumny
Poniżej przedstawiono przykłady kolumn o jednakowej wielkości:
Przykłady
<Form>
<Div class = "wiersz">
<div class = "średnio-4 kolumny">
<Label> średnio-4 (100 % na małe, ułożone)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
<div class = "średnio-4 kolumny">
<Label> średnio-4 (100 % na małe, ułożone)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
<div class = "średnio-4 kolumny">
<Label> średnio-4 (100 % na małe, ułożone)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
</ Form>
<Div class = "wiersz">
<div class = "średnio-4 kolumny">
<Label> średnio-4 (100 % na małe, ułożone)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
<div class = "średnio-4 kolumny">
<Label> średnio-4 (100 % na małe, ułożone)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
<div class = "średnio-4 kolumny">
<Label> średnio-4 (100 % na małe, ułożone)
<Input type = "text" placeholder = "Nazwa">
</ Label>
</ Div>
</ Div>
</ Form>
Spróbuj »
tagi Inline
Jeśli chcesz, aby treść etykiety wyświetlane po lewej stronie (nie w górę), można oznaczyć elementu etykiety w oknie po lewej wejście różnych kolumn i korzystać .inline klasę ustawić centrum pionowego:
Przykłady
<Form>
<Div class = "wiersz">
<Div class = "small-8 ">
<Div class = "wiersz">
<Div class = "small-3 kolumny">
<Label for = "name" class = "inline prawo"> Nazwa </ label>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" id = "name" placeholder = "Imię ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
<Div class = "wiersz">
<Div class = "small-8 ">
<Div class = "wiersz">
<Div class = "small-3 kolumny">
<Label for = "name" class = "inline prawo"> Nazwa </ label>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" id = "name" placeholder = "Imię ..">
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Spróbuj »
Przednie i tylne etykiety
Można <div class="row collapse"> > dodaj przedni i tylny element, zakładka: < element class="postfix"> lub < element class="prefix"> . Można użyć systemu sieci, aby ustawić rozmiar etykiet przednich i tylnych:
Przykłady
<Form>
<Div class = "wiersz">
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz prefix -radius">
<Div class = "small-3 kolumny">
<Span class = "Przedrostek"> Prefiks </ span>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
</ Div>
</ Div>
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz postfix -radius">
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
<Div class = "small-3 kolumny">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
<Div class = "wiersz">
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz prefix -radius">
<Div class = "small-3 kolumny">
<Span class = "Przedrostek"> Prefiks </ span>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
</ Div>
</ Div>
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz postfix -radius">
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
<Div class = "small-3 kolumny">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Spróbuj »
Przednie i tylne przycisk Zakładka
Można użyć <a> dodać elementy .button klasie ustawić przednie i tylne przyciski:
tylne etykiety okrągłe przyciski z przodu iz
Przykłady
<Form>
<Div class = "wiersz">
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz prefix -radius">
<Div class = "small-3 kolumny">
<Span class = "Przedrostek"> Prefiks </ span>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
</ Div>
</ Div>
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz postfix -radius">
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
<Div class = "small-3 kolumny">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "wiersz">
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz prefix -round">
<Div class = "small-3 kolumny">
<A Href = "#" class = "button prefix"> Go </ a>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
</ Div>
</ Div>
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz postfix -round">
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
<Div class = "small-3 kolumny">
<A Href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
<Div class = "wiersz">
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz prefix -radius">
<Div class = "small-3 kolumny">
<Span class = "Przedrostek"> Prefiks </ span>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
</ Div>
</ Div>
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz postfix -radius">
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
<Div class = "small-3 kolumny">
<Span class = "postfix"> Postfix </ span>
</ Div>
</ Div>
</ Div>
</ Div>
<Div class = "wiersz">
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz prefix -round">
<Div class = "small-3 kolumny">
<A Href = "#" class = "button prefix"> Go </ a>
</ Div>
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
</ Div>
</ Div>
<Div class = "duże-6 Kolumny">
<Div class = "załamanie wiersz postfix -round">
<Div class = "small-9 kolumny">
<Input type = "text" placeholder = "wartość">
</ Div>
<Div class = "small-3 kolumny">
<A Href = "#" class = "button postfix"> Go </ a>
</ Div>
</ Div>
</ Div>
</ Div>
</ Form>
Spróbuj »