Bootstrap -Eingangsgröße
Während wir Formulare in einer Webanwendung erstellen, benötigen wir eine Vielzahl von Komponenten, einschließlich Eingabefeldern, Optionsschaltflächen, Kontrollkästchen und mehr. Insbesondere werden mehrere Bootstrap -Klassen verwendet, um die Größe dieser Formkomponenten anzupassen, wie “Form-Kontroll-*" Und "Eingabegruppe-*”. Der "*"Symbolisiert die Klassen, die die Größe definieren, wo"lg"Repräsentiert groß und"sm”Bezieht sich auf kleine.
Dieser Beitrag wird führen:
- Methode 1: So geben Sie die Eingangsgröße mit “anFormkontrolle" Klasse?
- Methode 2: So geben Sie die Eingangsgröße mit “anEingabegruppe" Klasse?
- Methode 3: So geben Sie die Eingangsgröße mit der Breite an “anw" Klasse?
Methode 1: So geben Sie die Eingangsgröße mit der Klasse „Form-Control“ an?
Der "Formkontrolle"Klasse in Bootstrap wird verwendet, um Textsteuerungen wie" "," "und" "zu stylen. Es bietet allgemeine Styling für die Eingabelemente wie Erscheinungsbild, Größe und mehr.
Um die Größe der Formelemente anzupassen, die “Form-Kontroll-*”Klasse wird verwendet. Das Sternchen "*" symbolisiert die Größenklasse. Darüber hinaus die “Form-Kontroll-LG"Zeigt eine Großformatkontrolle an.“Form-Kontroll-SM”Definiert die kleine Formkontrolle, und ohne eine Klasse zu erwähnen.
Beispiel
In diesem Beispiel werden wir drei Eingänge erstellen, in denen die “angegeben werdenFormkontrolle"Und anders"Form-Kontroll-*" Klassen:
Ausgang
Methode 2: So geben Sie die Eingangsgröße mithilfe der Eingabegruppenklasse an?
Der "EingabegruppeDie Klasse wird verwendet, um den Eingabegruppen ein allgemeines Styling zu verleihen. Die Eingabegruppen beziehen sich auf die Eingabefelder mit einem Symbol, einer Schaltfläche, einem Text oder mehr.
Um die Größe der Eingabegruppe anzupassen, der Klasse “Eingabegruppe-*"Wird genutzt, wo das Sternchen"*Symbol zeigt die Größe an, indem Sie das angebenlg"Für den großen", "sm”Für kleine, ansonsten mittelgroße.
Beispiel
Das folgende Beispiel repräsentiert die beiden Eingangsgruppen, die durch eine getrennt sind “
" Schild. Jeder besteht aus einem Eingabefeld und einer Taste:
Ausgang
Methode 3: So geben Sie die Eingangsgröße mithilfe der Breite „W“ -Klasse an?
Die Breite "w-*Die Klasse wird verwendet, um die Breite der Eingangsfelder wie folgt anzupassen:
- “W-25”Legt die Breite des Eingangs auf 25% der Eltern fest.
- “W-50”Legt die Breite des Eingangs auf 50% der Eltern fest.
- “W-75”Legt die Breite des Eingangs auf 75% der Eltern fest.
- “W-100”Legt die Breite des Eingangs auf 100% der Eltern fest.
Beispiel
In diesem Beispiel werden die Eingabefelder mit dem angegebenFormkontrolle" Und "w-*" Klassen:
Ausgang
Es kann beobachtet werden, dass die angegebene Breite auf das hinzugefügte Eingangsfeld angewendet wurde.
Abschluss
Um die Größe der Texteingangsfelder anzupassen, die “Form-Kontroll-*”Klasse wird genutzt. Um die Größe von Eingabegruppen festzulegen, die “Eingabegruppe-*”Klasse wird genutzt. Während die "w-*Die Klasse wird verwendet, um die Breite der Eingangsfelder zu bestimmen. Das Sternchen "*”Zeigt die Klassen wie“ an "lg","sm”, Und eine beliebige Zahl. In diesem Beitrag wurde erklärt, wie die Größe der Eingänge in Bootstrap angepasst werden kann.