Bootstrap -skjemaer | Forklart

Bootstrap -skjemaer er en avgjørende del av alle applikasjoner. De muliggjør brukerinteraksjon og inngang i systemet. Flere bootstrap-klasser gir forhåndsdesignede formkontroller og stylingalternativer for å skape responsive og rene former. Mer spesifikt består bootstrap -skjemaer av forskjellige formelementer, for eksempel tekstfelt, tekstområder, radioknapper, utvalgte bokser og mer.

Denne oppskrivningen vil dekke:

• Hvordan lage en inline form i bootstrap?
• Hvordan du setter avstand i inline form?
• Hvordan lage en stablet form i bootstrap?
• Hvordan lage et skjema ved hjelp av rutenettrader?
• Hvordan lage et kompakt layoutskjema?
• Hvordan lage en horisontal form?
• Hvordan du angir etikettstørrelsen på skjemaet?

Hvordan lage en inline form i bootstrap?

Inline -skjemaer opprettes ved hjelp av “.form-inline”Klasse. Denne klassen har en forhåndsdefinert CSS “vise”Eiendom med verdien”Flex”Med andre egenskaper.

Eksempel

Sjekk ut eksemplet som viser hvordan du lager en inline -form i Bootstrap:

• Først, legg til en "”Element med klassen“form-inline”.
• Innenfor det, legg til to “”Elementer med“formgruppe”Klasse.
• Hvert “” -element inneholder “”Og“”Elementer.
• Til slutt, legg til en "”Element for å lage en knapp:

E -post



Passord

Sende inn

Produksjon

Hvordan du setter avstand i inline form?

Bootstrap -avstandsverktøyene justerer avstanden til en inline -skjema. Disse inkluderer "ml-*”For margin-venstre,”MR-*”For margin-høyre og mange flere. “*”Representerer størrelsen.

For en praktisk demonstrasjon, sjekk ut eksemplet nedenfor.

Eksempel

I det pågående eksemplet, legg til klassen "ML-2”Til“ "elementet. Det vil generere plass til venstre for etiketten:

E -post



Passord

Sende inn

Produksjon

Hvordan lage en stablet form i bootstrap?

De stablede formene refererer til de vertikale formene. Dette er et standardskjema.

Sjekk ut eksemplet nedenfor.

Eksempel

Følg de gitte instruksjonene for å lage en vertikal form:

• Legg til en "”Element.
• Inne i den, legg til en "”Merk og tilordne den en klasse“ Form-Group ”.
• Dette “” elementet inneholder “”Og“”Elementer. Du kan legge til skjemaelementene i henhold til dine preferanser.
• På slutten, legg til en "”Til skjemaet:

E -post



Passord

Sende inn

Produksjon

Hvordan lage et skjema ved hjelp av rutenettrader?

Å lage et skjema ved hjelp av bootstrap -rutenett er veldig enkelt. Først, spesifiser en rad og lag kolonner for skjemainngangene i den.

Analyser eksemplet nedenfor.

Eksempel

Følg instruksjonene for å lage et skjema ved hjelp av Bootstrap -rutenett:

• Legg til en "”Element.
• Inne i den, legg til en "”Container med klassen“ Row ”.
• Inne i dette “rad”Container, spesifiser to“ "elementer med“ COL ”-klassen.
• Legg til "<merkelapp> ”Og“<inngang> ”Elementer i hvert“ ”element:

Navn



E -post

Produksjon

Hvordan lage et kompakt layoutskjema?

For kompakte og strammere oppsett, "form-rad”Klasse brukes i stedet for“rad”Klasse:

Navn



E -post

Produksjon

Hvordan lage en horisontal form?

De horisontale formene opprettes ved å bruke “rad”Og“Col-*-*”Klasser. “rad”Klasse spesifiserer en rad, og“ Col-*-*”-klassene definerer bredden på etiketter og kontroller, for eksempel“Col-SM-2”,“Col-MD-6" eller mer. "Col-form-label" må også legges til "" elementet.

Eksempel

For å lage en horisontal form, prøv de gitte instruksjonene:

• Først, legg til en "”Element.
• Innenfor det, legg til en "”Element med klassene”formgruppe”Og“rad”.
• Spesifiser skjemaregruppene i dette “”Element. I vårt tilfelle "" og "”Elementer er spesifisert.
• “”Element er plassert i en annen””Å ha klasse“Col-SM-6”. Den vil spesifisere 6 rutenettkolonner for "”Element:

Navn





Adresse




Sende inn

Produksjon

Hvordan justere størrelsen på størrelsen på form?

Størrelsen på “”Element kan justeres enkelt ved å bruke“Col-form-label-SM”Og“col-form-label-lg”. "Col-form-label-SM" har en forhåndsdefinert CSS "skriftstørrelse”Eiendom med verdien”0.875rem”Med andre egenskaper. "Col-form-label-LG" har en forhåndsdefinert CSS "skriftstørrelse”Eiendom med verdien”1.25REM”Med andre egenskaper.

Eksempel

I det pågående eksemplet, legg til "col-form-label-SM" til det første "" elementet og "col-form-label-lg" til det andre for å se forskjellen:

Navn





Adresse




Sende inn

Produksjon

Du har vellykket lært om hvordan du lager skjemaer ved hjelp av Bootstrap.

Konklusjon

Bootstrap tilbyr en enkel metode for å produsere responsive og konsistente former. Det er hovedsakelig tre typer bootstrap -skjemaer: inline, stablede og horisontale former. En inline -skjema opprettes ved hjelp av “form-inline”Klasse. For å spesifisere generelle stiler til gruppen av formkontroller, "formgruppe”Klasse brukes. Mer spesifikt er det flere klasser som hjelper til med å justere størrelsen på formkomponentene, for eksempel “COL-SM-4”, “COL-form-label-SM”, og mange flere. Denne oppskrivningen har vist hvordan du lager skjemaer ved hjelp av Bootstrap.