Najlepszy samouczek pole wprowadzania Fundacja? Rozmiar W 2024 r. W tym samouczku możesz dowiedzieć się
Równy rozmiar kolumny,tagi Inline,Przednie i tylne etykiety,
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>
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>
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ę pl">
</ 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>
Spróbuj » Przednie i tylne przycisk Zakładka
Można użyć <a>
dodać elementy .button
klasie ustawić przednie i tylne przyciski:
Przykłady
<A Href = "#" class = "postfix przycisk"> Go </ a>
Spróbuj » 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>
Spróbuj »