Bootstrap Wymianie
Podczas tworzenia formularzy w aplikacji internetowej potrzebujemy różnych komponentów, w tym pola wejściowego, przycisków opcji, pola wyboru i wiele innych. Mówiąc dokładniej, kilka klas bootstrap jest wykorzystywanych do dostosowania wielkości tych komponentów formularza, na przykład „formularz-*" I "Grupa wejściowa-*". „„*”Symbolizuje klasy, które definiują rozmiar, gdzie„LG”Reprezentuje duże i„SM”Odnosi się do małych.
Ten post będzie prowadził:
- Metoda 1: Jak określić rozmiar wejściowy za pomocą „Kontrola formy" klasa?
- Metoda 2: Jak określić rozmiar wejściowy za pomocą „grupa wejściowa" klasa?
- Metoda 3: Jak określić rozmiar wejściowy za pomocą szerokości ”w" klasa?
Metoda 1: Jak określić rozmiar wejściowy za pomocą klasy „formularz”?
„„Kontrola formy„Klasa w bootstrap jest wykorzystywana do stylizacji sterowania formularzem tekstowym, takim jak„ ”,„ ”i„ ”. Zapewnia ogólną stylizację elementów wejściowych, takich jak wygląd, rozmiar i więcej.
Aby dostosować rozmiar kontroli formularza, „formularz-*„Klasa jest używana. Asterisk „*” symbolizuje klasę rozmiaru. Co więcej, „forma-control-lg”Wskazuje dużą kontrolę formy,„formularz-kontrole-SM”Definiuje małą kontrolę formy i bez wzmianki o żadnej klasie, średniej wielkości zostanie zastosowana do pola wejściowego.
Przykład
W tym przykładzie utworzymy trzy dane wejściowe określające „Kontrola formy”I inne„formularz-*„Zajęcia:
Wyjście
Metoda 2: Jak określić rozmiar wejściowy za pomocą klasy „-grupa”?
„„grupa wejściowa„Klasa jest wykorzystywana do zapewnienia ogólnej stylizacji grupom wejściowym. Grupy wejściowe odnoszą się do pól wejściowych o ikonie, przycisku, tekstu lub więcej.
Aby dostosować rozmiar grupy wejściowej, klasa „Grupa wejściowa-*”Jest używany, gdzie gwiazdka„*„Symbol wskazuje rozmiar, określając„LG„Dla dużych”SM”W przypadku małych, w przeciwnym razie średniego.
Przykład
Poniższy przykład reprezentuje dwie grupy wejściowe oddzielone przez „
”Tag. Każdy składa się z pola wejściowego i przycisku:
Wyjście
Metoda 3: Jak określić rozmiar wejściowy za pomocą klasy „W”?
Szerokość "W-*„Klasa jest wykorzystywana do dostosowania szerokości pól wejściowych w następujący sposób:
- "W-25”Ustawia szerokość danych wejściowych na 25% rodzica.
- "W-50”Ustawia szerokość wejścia na 50% rodzica.
- "W-75”Ustawia szerokość wejścia na 75% rodzica.
- "W-100”Ustawia szerokość wejścia na 100% rodzica.
Przykład
W tym przykładzie pola wejściowe są określone za pomocą „Kontrola formy" I "W-*„Zajęcia:
Wyjście
Można zaobserwować, że określona szerokość została zastosowana do dodanego pola wejściowego.
Wniosek
Aby dostosować rozmiar pól wejściowych tekstowych, „formularz-*„Klasa jest wykorzystywana. Aby ustawić rozmiar grup wejściowych, „Grupa wejściowa-*„Klasa jest wykorzystywana. Natomiast "W-*”Klasa służy do określenia szerokości pól wejściowych. Gwiazdka „*”Wskazuje klasy takie jak„LG”,„SM”I odpowiednio dowolna liczba. Ten post wyjaśnił, jak dostosować rozmiar wejść w bootstrapie.