Introduksjon til Bootstrap Form Layout

HTML og CSS er de grunnleggende språkene for design av nettsteder. Alle grunnleggende maler laget av HTML, men vi må designe og lage unike deretter nødvendige CSS-filer separat. Denne metoden er komplisert på grunn av klasse- og ID-referanser. For å overvinne alle problemer i HTML- og CSS-filer kommer bootstrap. Bootstrap er en avansert teknikk for webdesign. For validering og ønsket formatform har bootstrap egen klasse for Textarea, input og andre kontroller som form-kontroll, input-group, etc. Ved hjelp av bootstrap-oppsettet kan vi bestemme formatformen. Vi kan enkelt lage vertikale, horisontale og inline formformater ved hjelp av bootstrap.

Typer oppstart av bootstrap-skjema

Bootstrap-skjemaoppsett lager en annen type skjema. den lager design og validering uten CSS- og JavaScript-filer. På grunn av formlayout, reduser mer koding og komplikasjoner. Bootstrap har egen klasse for å overvinne all kompleks CSS og JavaScript-kode.

Bootstrap har tre typer skjemaoppsett.

  • Vertikal form
  • Horisontal form
  • Inline form

La oss se disse tre typene i detalj:

1. Vertikal form

I vertikal formlayout er etiketter og tekstelementer vertikalt og hver formgruppe er vertikal. Den vertikale formen er standardform i bootstrap. Det er ingen tilleggsregel for format i vertikal form.

2. Horisontal form

I horisontal formlayout er etiketter og tekstelementer horisontalt, men hver formgruppe er vertikal . Legg til to hovedklasser for horisontal form.

Legg til klassen i formelementet.

Legg til klassen i etikettelementene.

3. Innlagt skjema

I inline form er etikett og elementer inline og venstrejustert. Viewport har minst 768px bredde. Legg til en klasse for inline form.

Legg klassen til skjemaelementene.

Bootstrap-skjemaoppsett har en viss standardklasse for skjemakonvensjon nevnt nedenfor:

  • .form-group: Denne klassen brukes til formavstand og bind etiketten. Det er fleksibelt for å binde,, formvalideringsmeldinger og mer for skjema.
  • . form-kontroll: Denne klassen brukes til alle tekstelementer og rom for form osv. Den brukes til alle stiler som størrelse, fokus.
  • .form-control-lg og .form-control-sm brukes for henholdsvis stor og liten inngangselementstørrelse.

Støttet element og klasse

Noen støttede elementer og klasser for validering av Bootstrap-skjema uten JavaScript. Det gjør det enkelt og overvinner mye valideringskoding på serversiden.

1) .form-control-file: Denne klassen brukes til å legge til en fil som pdf, Docx, etc. i stedet for å bruke klasseskjema-kontroll, i fildata denne klassen bruker i.

Eksempel:

2) Readonly: Dette er en boolsk attributt som brukes for inngangselementer. I dette attributtet kan ikke brukeren endre verdien og deaktivere markøren for å skrive.

Eksempel:

3) .form-control-plaintext: denne klassen fungerer som bare read-only, men kommer med riktig margin og polstring.

Eksempel:

Eksempel på oppsett av Bootstrap Form

De gitte eksempler er gitt nedenfor:

1. Eksempel på vertikal form (standardform)


Name:

Email:

  • Den vertikale formen er enkel og standardform i bootstrap.
  • Eksemplet ovenfor har to inntastingsfelt og en påloggingsknapp vertikalt med etiketten.
  • Ved å bruke kun klasseformgruppe og klasseskjermkontroll, opprettes den vertikale formen.
  • Du kan endre størrelsen på inngangselementene uten størrelsejustering av CSS-filen. Brukeren trenger bare en klasse som er henholdsvis .form-control-lg og .form-control-sm for stor og liten størrelse.

2. Eksempel på horisontal form

class=”form-horizontal”>
Name:


Email:


  • Ved å bruke klassisk form-horisontal lager brukeren en horisontal form. Etikett- og inputelement er inline, men klasseformgruppen er vertikal. Klasse “kontroll-etikett col-sm-2” og = “col-sm-10” brukt for delt kolonne. To-kolonne tilordne for etikett og ti kolonner tilordne for inngangselementer.
  • Klasse ”col-sm-offset-2 col-sm-10” brukt for innloggingsknapp. Offset brukt til mellomrom, col-sm-offset-2 brukte to-kolonne mellomrom fra venstre i en form.
  • Se eksempel på horisontal form og dets utdata for å forstå layout. Navnet og inndatateksten er sett på en linje, så e-post og elementer er i en annen linje.
  • På stor og mellomstor skjermform ser horisontal utforming ut, men på liten skjerm (767px og under) virker form vertikal form.
  • Den horisontale formen er komplisert ved bruk av tradisjonell metode, men bootstrap-oppsettet bidrar til å gjøre det enkelt å bruke klasse- og etikettkontroll.

3. Eksempel på inline-form

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • I inline-form er alle etiketter og elementer på en rad. Alle formgrupper er i en enkelt rad. Klasseformatlinje er standard for dette oppsettet. Brukeren plasserte denne klassen i. Inline-skjemaet brukt mer til radioknapper, kontroller knapper og så videre.
  • Dette skjemaet fungerer stort sett på minst 576px visningsport etter at det viser som standardskjema. I etiketten ble klassen sr-bare brukt. Denne klassen er en skjermleser, som brukes til å skjule etiketten og viser det eneste elementet.
  • Hvis inngangselementet i inline-skjemaet, må brukeren komme med en plassholder i et input-element for å gjenkjenne elementet.

Konklusjon - Bootstrap From Layout

For å forstå Bootstrap-teknologi, trenger brukeren å vite om HTML, CSS og JavaScript. Bootstrap-skjemaet er den enkleste måten å jobbe standardformat. Det har egne klasser for å fjerne koding og ikke nødvendig CSS og JavaScript annen fil. Ved hjelp av Bootstrap-skjema får brukeren hastighet til koding og unngår design og stil av blokkeringskoding. Bootstrap er et rammeverk for frontend webdesign som er lett og selvimplementert.

Anbefalte artikler

Dette er en guide til Bootstrap Form Layout. Her diskuterer vi introduksjonen til Bootstrap Form Layout sammen med typene og eksemplene. Du kan også gå gjennom de andre foreslåtte artiklene våre for å lære mer–

  1. Bootstrap Typography
  2. Oppstart av oppstart
  3. Bootstrap Grid System
  4. Bootstrap-komponenter

Kategori:

Programvare utvikling