Formularze bootstrap | Wyjaśnione

Formularze bootstrap są kluczową częścią dowolnej aplikacji. Umożliwiają interakcję użytkownika i wprowadzanie do systemu. Kilka klas bootstrap zapewnia wstępnie zaprojektowane formularze i opcje stylizacji w celu tworzenia responsywnych i czystych formularzy. Mówiąc dokładniej, formularze bootstrap składają się z różnych elementów form, takich jak pola tekstowe, obszary tekstowe, przyciski radiowe, pola wybrane i inne.

Ten zapis obejmie:

• Jak utworzyć formularz wbudowany w bootstrapie?
• Jak ustawić odstępy w formie wbudowanej?
• Jak utworzyć formularz ułożony w bootstrapie?
• Jak utworzyć formularz za pomocą rzędów siatki?
• Jak utworzyć kompaktowy formularz układu?
• Jak stworzyć formę poziomą?
• Jak ustawić rozmiar etykiety formularza?

Jak utworzyć formularz wbudowany w bootstrapie?

Formularze inline są tworzone za pomocą „.formularz" klasa. Ta klasa ma wstępnie zdefiniowane CSS ”wyświetlacz„Własność o wartości”przewód„Z innymi właściwościami.

Przykład

Sprawdź przykład, który pokazuje, jak utworzyć formularz wbudowany w bootstrap:

• Najpierw dodaj „„Element z klasą”formularz".
• W nim dodaj dwa „„Elementy z„grupa formularzy" klasa.
• Każdy element „” zawiera „" I "" elementy.
• Na koniec dodaj „„Element do utworzenia przycisku:

E-mail



Hasło

Składać

Wyjście

Jak ustawić odstępy w formie wbudowanej?

Narzędzia odstępów od odstępów bootstrap dostosowują odstępy formy inline. Obejmują one "ml-*„Za margines-lewi”Pan-*„W przypadku marginesu i wielu innych. „„*”Reprezentuje rozmiar.

Aby uzyskać praktyczną demonstrację, sprawdź poniższy przykład.

Przykład

W bieżącym przykładzie dodaj klasę „ML-2„Do elementu„ ”. Wygeneruje przestrzeń po lewej stronie etykiety:

E-mail



Hasło

Składać

Wyjście

Jak utworzyć formularz ułożony w bootstrapie?

Ułożone formularze odnoszą się do form pionowych. To jest formularz domyślny.

Sprawdź poniższy przykład.

Przykład

Postępuj zgodnie z podanymi instrukcjami, aby utworzyć formę pionową:

• Dodać "" element.
• Wewnątrz, dodaj „„Oznacz i przypisz go klasę„ Grupa formularza ”.
• Ten element „” zawiera „" I "" elementy. Możesz dodać elementy formularza zgodnie z Twoimi preferencjami.
• Na koniec dodaj „„Do formy:

E-mail



Hasło

Składać

Wyjście

Jak utworzyć formularz za pomocą rzędów siatki?

Stworzenie formularza za pomocą siatki bootstrap jest bardzo proste. Najpierw określ wiersz i utwórz kolumny dla wprowadzania formularza.

Przeanalizuj poniższy przykład.

Przykład

Postępuj zgodnie z instrukcjami utworzenia formularza za pomocą siatki bootstrap:

• Dodać "" element.
• Wewnątrz, dodaj „„Pojemnik z klasą„ Row ”.
• Wewnątrz „wiersz„Kontener, określ jeszcze dwa elementy„ ”z klasą„ Col ”.
• Dodaj "<etykieta> ”I„<wejście> „Elementy w każdym elemencie„ ”:

Nazwa



E-mail

Wyjście

Jak utworzyć kompaktowy formularz układu?

W przypadku kompaktowych i ciaśniejszych układów „„formularz„Klasa jest wykorzystywana zamiast„wiersz" klasa:

Nazwa



E-mail

Wyjście

Jak stworzyć formę poziomą?

Formularze poziome są tworzone przy użyciu „wiersz" I "przełęcz-*-*„Zajęcia. „„wiersz„Klasa określa rząd, a klasy„ Col-*-*”definiują szerokość etykiet i elementów sterujących, takich jak„Col-SM-2”,„Col-MD-6" albo więcej. Do elementu „” musi być również dodawana do elementu „”.

Przykład

Aby utworzyć formę poziomą, wypróbuj podane instrukcje:

• Najpierw dodaj „" element.
• W nim dodaj „„Element z klasami”grupa formularzy" I "wiersz".
• Określ grupy formularzy w tym „" element. W naszym przypadku „”I„ „”Elementy są określone.
• „„„Element jest umieszczony w innym”„Posiadanie zajęć”Col-SM-6". Określi 6 kolumn z siatką dla „" element:

Nazwa





Adres




Składać

Wyjście

Jak dostosować rozmiar etykiety formy?

Rozmiar „„Element można łatwo dostosować za pomocą„Col-Form-Label-SM" I "Col-Form-Label-LG". „Col-Form-Label-SM” ma predefiniowany CSS „rozmiar czcionki„Własność o wartości”0.875rem„Z innymi właściwościami. „Col-Form-Label-LG” ma predefiniowany CSS „rozmiar czcionki„Własność o wartości”1.25rem„Z innymi właściwościami.

Przykład

W trwającym przykładzie dodaj „Col-Form-Label-SM” do pierwszego elementu „” i „Col-Form-Label-LG” do drugiego, aby zobaczyć różnicę:

Nazwa





Adres




Składać

Wyjście

Z powodzeniem dowiedziałeś się, jak tworzyć formularze za pomocą bootstrap.

Wniosek

Bootstrap oferuje prostą metodę tworzenia responsywnych i spójnych form. Istnieją głównie trzy rodzaje form bootstrap: formy one, ułożone i poziome. Formularz wbudowany jest tworzony za pomocą „formularz" klasa. Aby określić ogólne style do grupy kontroli formularzy, „grupa formularzy„Klasa jest używana. Mówiąc dokładniej, istnieje kilka klas, które pomagają w dostosowaniu wielkości komponentów formularza, takich jak „col-sm-4”, „col-form-label-sm” i wiele innych. Ten zapis pokazał, jak tworzyć formularze za pomocą bootstrap.