Introduktion til Bootstrap Form Layout

HTML og CSS er de grundlæggende sprog til design af webstedets form. Alle grundlæggende skabeloner lavet af HTML, men vi er nødt til at designe og skabe unikke derefter nødvendige CSS-filer separat. Denne metode er kompliceret på grund af klasse- og id-referencer. For at overvinde alle problemer i HTML- og CSS-filer kommer bootstrap. Bootstrap er en avanceret teknik til webdesign. Til validering og påkrævet formularformat har bootstrap egen klasse for Textarea, input og andre kontroller som form-kontrol, input-group osv. Ved hjælp af bootstrap-layout kan vi bestemme formens format. Vi kan nemt lave lodrette, vandrette og inline formularformater ved hjælp af bootstrap.

Typer af Bootstrap Form Layout

Bootstrap-formlayout skaber en anden type form. det gør design og validering uden CSS- og JavaScript-filer. På grund af formlayout skal du reducere mere kodning og komplikationer. Bootstrap har egen klasse til at overvinde alle komplekse CSS og JavaScript-koder.

Bootstrap har tre typer formlayout.

  • Lodret form
  • Vandret form
  • Inline form

Lad os se disse tre typer i detaljer:

1. Lodret form

I lodret formlayout er etiket- og tekstelementer lodret, og hver formgruppe er lodret. Den lodrette form er standardformular i bootstrap. Der er ingen yderligere regel for vertikal formformat.

2. Vandret form

I vandret formlayout er etiket og tekstelementer vandret, men hver formgruppe er lodret . Tilføj to hovedklasser til vandret form.

Tilføj klassen i formelementet.

Tilføj klassen i etiketelementerne.

3. Inline form

I inline form er etiket og elementer inline og venstrejusteret. Viewport har mindst 768px bred. Tilføj en klasse til inline form.

Føj klassen til formelementerne.

Bootstrap-formlayout har en vis standardklasse for formkonvention nævnt nedenfor:

  • .form-gruppe: Denne klasse bruges til formafstand og binder etiketten. Det er fleksibelt til at binde,, form valideringsmeddelelser og mere til form.
  • . form-kontrol: Denne klasse bruges til alt tekstelement og plads til form osv. Det bruges til alle stilarter som størrelse, fokus.
  • .form-control-lg og .form-control-sm bruges til henholdsvis stor og lille inputelementstørrelse .

Understøttet element og klasse

Nogle understøttede elementer og klasser til validering af Bootstrap-form uden JavaScript. Det gør det let og overvinder meget valideringskodning på serversiden.

1) .form-control-file: Denne klasse bruges til at tilføje en fil som pdf, Docx osv. I stedet for at bruge klasseform-kontrol, i fildata, denne klasse bruger i.

Eksempel:

2) Readonly: Dette er en boolsk attribut, der bruges til inputelementer. I denne attribut kan brugeren ikke ændre værdien og deaktivere markøren til at skrive.

Eksempel:

3) .form-control-plaintext: denne klasse fungerer som read-only men leveres med korrekt margen og polstring.

Eksempel:

Eksempel på Bootstrap Form Layout

De givne eksempler er givet nedenfor:

1. Eksempel på lodret form (standardformular)


Name:

Email:

  • Den lodrette form er enkel og standardformular i bootstrap.
  • Ovenstående eksempel har to inputfelter og en login-knap lodret med etiketten.
  • Brug kun klasseformgruppe og klasseformkontrol, oprettet den lodrette form.
  • Du kan ændre størrelsen på inputelementer uden størrelsejustering af CSS-filen. Brugeren har kun brug for en klasse, der er henholdsvis .form-control-lg og .form-control-sm for stor og lille størrelse.

2. Eksempel på vandret form

class=”form-horizontal”>
Name:


Email:


  • Ved hjælp af klasse form-vandret, brugeren opretter en vandret form. Etiket- og inputelement er inline, men klasseformgruppen er lodret. Klasse “kontrolmærke col-sm-2” og = “col-sm-10”, der bruges til delt kolonne. To-kolonnetildeling Til etiket og Ti kolonner tildeles til inputelementer.
  • Klasse ”col-sm-offset-2 col-sm-10”, der bruges til login-knappen. Offset brugt til plads, col-sm-offset-2 brugte to-søjles mellemrum fra venstre i en form.
  • Se eksempel på vandret form og dets output for at forstå layout. Dets set navn og inputtekst er på en linje, derefter e-mail og elementer er i en anden linje.
  • På stor- og mellemskærmsform ser horisontalt layout ud, men på lille skærm (767px og derunder) virker form lodret.
  • Den vandrette form er kompliceret ved hjælp af traditionel metode, men bootstrap-layout hjælper med at gøre det nemt ved hjælp af klasse- og etiketkontrol.

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 i en række. Alle formgrupper er i en enkelt række. Class form-inline er standard for dette layout. Brugeren placerede denne klasse i. Den inline form, der bruges mere til radioknapper, kontrolknapper osv.
  • Denne formular fungerer for det meste på mindst 576px visningsport, derefter vises den som standardformular. På etiketten bruges kun klasse sr. Denne klasse er en skærmlæser, der bruges til at skjule etiketten og viser det eneste element.
  • Hvis inputelementet i inline-formen, skal brugeren komme med en pladsholder i et inputelement for at genkende elementet.

Konklusion - bootstrap fra layout

For at forstå Bootstrap-teknologi skal brugeren vide om HTML, CSS og JavaScript. Bootstrap-formen er den nemmeste måde at arbejde standardformular på. Det har egne klasser til at fjerne kodning og ikke krævet CSS og JavaScript forskellig fil. Ved hjælp af Bootstrap-form får brugeren hastighed til kodning og undgår blokering af design og stil. Bootstrap er en ramme for frontend webdesign, der er let og selvimplementeret.

Anbefalede artikler

Dette er en guide til Bootstrap Form Layout. Her diskuterer vi introduktionen til Bootstrap Form Layout sammen med typer og eksempler. Du kan også gennemgå vores andre foreslåede artikler for at lære mere–

  1. Bootstrap typografi
  2. Bootstrap-layout
  3. Bootstrap Grid System
  4. Bootstrap-komponenter

Kategori:

Softwareudvikling