Wprowadzenie do układu formularza Bootstrap

HTML i CSS to podstawowe języki projektowania stron internetowych. Wszystkie podstawowe szablony wykonane przez HTML, ale musimy zaprojektować i stworzyć unikalny, wtedy potrzebny osobno plik CSS. Ta metoda jest skomplikowana ze względu na odwołania do klas i identyfikatorów. Aby przezwyciężyć wszystkie problemy w plikach HTML i CSS, pojawia się bootstrap. Bootstrap to zaawansowana technika projektowania stron internetowych. Do sprawdzania poprawności i wymaganego formatu formularza, bootstrap ma własną klasę dla Textarea, input i innych formantów, takich jak form-control, input-group, itp. Korzystając z układu bootstrap, możemy zdecydować o formacie formularza. Możemy łatwo tworzyć formaty pionowe, poziome i wbudowane za pomocą bootstrap.

Rodzaje układu formularza Bootstrap

Układ formularza Bootstrap tworzy inny typ formularza. sprawia, że ​​projekt i walidacja bez plików CSS i JavaScript. Ze względu na układ formularza, zmniejsz więcej kodowania i komplikacji. Bootstrap ma własną klasę do pokonania całego złożonego kodu CSS i JavaScript.

Bootstrap ma trzy typy układu formularza.

  • Forma pionowa
  • Forma pozioma
  • Formularz wbudowany

Zobaczmy te trzy typy szczegółowo:

1. Forma pionowa

W układzie pionowym formy etykiety i elementy tekstowe są ustawione pionowo, a każda grupa formularzy jest ustawiona pionowo. Forma pionowa jest formą domyślną w programie ładującym. Nie ma dodatkowej reguły dla formatu formularza pionowego.

2. Forma pozioma

W układzie poziomym elementy etykiety i elementy tekstowe są ustawione poziomo, ale każda grupa formularzy jest pionowa . Dodaj dwie główne klasy dla formy poziomej.

Dodaj klasę w elemencie formularza.

Dodaj klasę do elementów etykiety.

3. Formularz wbudowany

W formie wbudowanej etykieta i elementy są wbudowane i wyrównane do lewej. Rzutnia ma przynajmniej 768 pikseli szerokości. Dodaj klasę do formularza wbudowanego.

Dodaj klasę do elementów formularza.

Układ formularza Bootstrap ma pewną domyślną klasę dla konwencji formularza wymienionej poniżej:

  • .form-group: ta klasa służy do odstępów między formami i wiązania etykiety. Jest elastyczny w zakresie wiązania wiadomości, sprawdzania poprawności formularzy i więcej w przypadku formularzy.
  • . form-control: ta klasa jest używana dla wszystkich elementów tekstowych i przestrzeni dla formy itp. Jest używana dla wszystkich stylów, takich jak rozmiar, fokus.
  • .form-control-lg i .form-control-sm są używane odpowiednio dla dużych i małych elementów wejściowych.

Obsługiwany element i klasa

Niektóre obsługiwane elementy i klasy do sprawdzania poprawności formularzy Bootstrap bez JavaScript. Ułatwia to i eliminuje wiele kodowań walidacyjnych po stronie serwera.

1) .form-control-file: Ta klasa służy do dodawania pliku takiego jak pdf, Docx itp. Zamiast klasowego form-control, w danych pliku, w którym ta klasa używa.

Przykład:

2) Tylko do odczytu: jest to atrybut logiczny używany dla elementów wejściowych. W tym atrybucie użytkownik nie może modyfikować wartości i wyłączać kursora do zapisu.

Przykład:

3) .form-control-zwykły tekst: ta klasa działa jak tylko do odczytu, ale ma poprawny margines i dopełnienie.

Przykład:

Przykład układu formularza Bootstrap

Podane przykłady podano poniżej:

1. Przykład formularza pionowego (formularz domyślny)


Name:

Email:

  • Forma pionowa jest prostą i domyślną formą w bootstrapie.
  • Powyższy przykład ma dwa pola wprowadzania i przycisk logowania pionowo z etykietą.
  • Używając tylko klasy form-group i class form-control, tworzona jest forma pionowa.
  • Możesz modyfikować rozmiar elementów wejściowych bez dostosowania rozmiaru pliku CSS. Użytkownik potrzebuje tylko klasy, która jest .form-control-lg i .form-control-sm odpowiednio dla dużych i małych rozmiarów.

2. Przykład formy poziomej

class=”form-horizontal”>
Name:


Email:


  • Używając klasy forma-pozioma, użytkownik tworzy formę poziomą. Etykieta i element wejściowy są wbudowane, ale grupa formularzy klasy jest pionowa. Klasa „kontrolna etykieta col-sm-2” i = ”col-sm-10” zastosowana do podzielonej kolumny. Przypisanie do dwóch kolumn Dla etykiety i Przypisanie do dziesięciu kolumn dla elementów wejściowych.
  • Klasa „col-sm-offset-2 col-sm-10” używana do przycisku logowania. Offset użyty do spacji, col-sm-offset-2 użył spacji dwukolumnowych od lewej w formie.
  • Zobacz przykład formularza poziomego i jego wyniki, aby zrozumieć układ. Widoczna nazwa i tekst wejściowy znajdują się w jednym wierszu, a następnie wiadomość e-mail, a elementy w innym wierszu.
  • Na dużym i średnim ekranie wygląda na układ poziomy, ale na małym ekranie (767 pikseli i poniżej) forma wydaje się pionowa.
  • Forma pozioma jest skomplikowana przy użyciu tradycyjnej metody, ale układ ładowania początkowego ułatwia korzystanie z kontroli klas i etykiet.

3. Przykład formularza wbudowanego

class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>
 class=”form-inline”>
Name:

Email:
placeholder=”Enter email”>

  • W formie liniowej wszystkie etykiety i elementy są w jednym rzędzie. Wszystkie grupy formularzy są w jednym rzędzie. Klasa form-inline jest domyślna dla tego układu. Użytkownik umieścił tę klasę w. Formularz wbudowany używany bardziej do przycisków opcji, przycisków wyboru i tak dalej.
  • Ten formularz działa głównie w rzutni o wielkości co najmniej 576 pikseli, po czym wyświetla się jak formularz domyślny. W etykiecie użyto tylko klasy sr. Ta klasa to czytnik ekranu, służący do ukrywania etykiety i pokazujący jedyny element.
  • Jeśli element wejściowy w postaci wbudowanej, użytkownik musi mieć symbol zastępczy w elemencie wejściowym, aby rozpoznać element.

Wniosek - Bootstrap z układu

Aby zrozumieć technologię Bootstrap, użytkownik musi wiedzieć o HTML, CSS i JavaScript. Formularz bootstrap jest najłatwiejszym sposobem pracy w standardowym formacie. Ma własne klasy do usuwania kodu i nie wymaga innego pliku CSS i JavaScript. Korzystając z formularza Bootstrap, użytkownik uzyskuje szybkość kodowania oraz unikanie projektowania i stylu kodowania blokowego. Bootstrap to platforma do projektowania stron internetowych, która jest lekka i samodzielnie wdrażana.

Polecane artykuły

Jest to przewodnik po układzie formularza Bootstrap. Tutaj omawiamy wprowadzenie do Bootstrap Form Layout wraz z typami i przykładami. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -

  1. Typografia Bootstrap
  2. Układ Bootstrap
  3. System siatki startowej
  4. Komponenty Bootstrap

Kategoria:

Rozwój oprogramowania