Bootstrap inngangsstørrelse

Mens vi lager skjemaer i en webapplikasjon, krever vi en rekke komponenter, inkludert inngangsfelt, radioknapper, avkrysningsruter og mer. Mer spesifikt brukes flere bootstrap -klasser for å justere størrelsen på disse formkomponentene, som "Form-Control-*”Og“inngangsgruppe-*”. “*”Symboliserer klassene som definerer størrelsen, hvor“LG”Representerer store og“sm”Refererer til liten.

Dette innlegget vil guide:

• Metode 1: Hvordan spesifisere inngangsstørrelse ved å bruke "formkontroll”Klasse?
• Metode 2: Hvordan spesifisere inngangsstørrelse ved å bruke "inngangsgruppe”Klasse?
• Metode 3: Hvordan spesifisere inngangsstørrelse ved hjelp av bredde “w”Klasse?

Metode 1: Hvordan spesifisere inngangsstørrelse ved å bruke "Form-Control" -klasse?

“formkontroll”Klasse i Bootstrap brukes til å style tekstformkontroller som“ ”,“ ”og“ ”. Det gir generell styling til inngangselementene, for eksempel utseende, størrelse og mer.

For å justere størrelsen på formkontrollene, “Form-Control-*”Klasse brukes. Stjerne “*” symboliserer størrelsesklassen. Dessuten "Form-Control-LG”Indikerer en stor formkontroll,”Form-Control-SM”Definerer den lille formkontrollen, og uten å nevne noen klasse, vil middels størrelse bli brukt på inngangsfeltet.

Eksempel

I dette eksemplet vil vi lage tre innganger som spesifiserer “formkontroll”Og annerledes“Form-Control-*”Klasser:

Liten inngang

Produksjon

Metode 2: Hvordan spesifisere inngangsstørrelse ved å bruke "input-group" -klasse?

“inngangsgruppe”Klasse brukes til å gi generell styling til inngangsgruppene. Inngangsgruppene refererer til inngangsfeltene som har et ikon, knapp, tekst eller mer.

For å justere størrelsen på inngangsgruppen, klassen “inngangsgruppe-*”Brukes, der stjerne”*”Symbol indikerer størrelsen ved å spesifisere“LG”For store,“sm”For lite, ellers medium.

Eksempel

Eksemplet nedenfor representerer de to inngangsgruppene atskilt med en "
" stikkord. Hver består av et inngangsfelt og en knapp:

Sende inn

Produksjon

Metode 3: Hvordan spesifisere inngangsstørrelse ved bruk av bredde “W” -klasse?

Bredden "w-*”Klasse brukes til å justere bredden på inngangsfeltene som følger:

• “W-25”Setter inngangens bredde til 25% av foreldrene.
• “W-50”Setter inngangens bredde til 50% av foreldrene.
• “W-75”Setter inngangens bredde til 75% av foreldrene.
• “W-100”Setter inngangens bredde til 100% av foreldrene.

Eksempel

I dette eksemplet er inngangsfeltene spesifisert med "formkontroll”Og“w-*”Klasser:

bredde 25

bredde 50

bredde 75

bredde 100

Produksjon

Det kan observeres at den spesifiserte bredden har blitt brukt på det ekstra inngangsfeltet.

Konklusjon

For å justere størrelsen på de tekstlige inngangsfeltene, "Form-Control-*”Klasse brukes. For å sette størrelsen på inngangsgrupper, "inngangsgruppe-*”Klasse brukes. Mens “w-*”Klasse brukes til å bestemme bredden på inngangsfeltene. Stjernen “*”Indikerer klassene som"LG”,“sm”, Og et hvilket som helst tall, henholdsvis. Dette innlegget har forklart hvordan du justerer størrelsen på inngangene i bootstrap.