Introduktion till Bootstrap Form Layout

HTML och CSS är de grundläggande språken för webbformsdesign. Alla grundläggande mallar gjorda av HTML, men vi måste designa och skapa unika då behövs separat CSS-fil. Den här metoden är komplicerad på grund av klass- och id-referenser. För att övervinna alla problem i HTML- och CSS-filer kommer bootstrap. Bootstrap är en avancerad teknik för webbdesign. För validering och önskat formformat har bootstrap egen klass för Textarea, input och andra kontroller som formkontroll, input-group, etc. Med hjälp av bootstrap-layouten kan vi bestämma formens format. Vi kan enkelt skapa vertikala, horisontella och inlineformat med hjälp av bootstrap.

Typer av Bootstrap Form Layout

Bootstrap-formlayout gör en annan typ av form. det gör design och validering utan CSS- och JavaScript-filer. På grund av formlayout, minska mer kodning och komplikationer. Bootstrap har en egen klass för att övervinna alla komplexa CSS- och JavaScript-kod.

Bootstrap har tre typer av formlayout.

  • Vertikal form
  • Horisontell form
  • Inlineform

Låt oss se dessa tre typer i detalj:

1. Vertikal form

I vertikal formlayout är etikett- och textelement vertikalt och varje formgrupp är vertikal. Den vertikala formen är standardformulär i bootstrap. Det finns ingen ytterligare regel för vertikalt formformat.

2. Horisontell form

I horisontell formlayout är etikett- och textelement horisontellt men varje formgrupp är vertikal . Lägg till två huvudklasser för horisontell form.

Lägg till klassen i formelementet.

Lägg till klassen i etikettelementen.

3. Inlineformulär

I inlineform är etikett och element inline och vänsterjusterade. Viewport har åtminstone 768px breda. Lägg till en klass för inlineform.

Lägg till klassen i formelementen.

Bootstrap-formlayout har någon standardklass för formkonvention som nämns nedan:

  • .form-group: Denna klass används för formavstånd och binder etiketten. Det är flexibelt för att binda,, formulär valideringsmeddelanden och mer för form.
  • . form-kontroll: Den här klassen används för alla textelement och utrymme för form osv. Den används för alla stilar som storlek, fokus.
  • .form-control-lg och .form-control-sm används för inmatningselementstorlek stor respektive liten.

Stödet Element och Klass

Vissa stöds element och klasser för validering av Bootstrap-form utan JavaScript. Det gör det enkelt och övervinner mycket valideringskodning på serversidan.

1) .form-control-file: Denna klass används för att lägga till en fil som pdf, Docx, etc. istället för att använda klassform-control, i fildata som denna klass använder i.

Exempel:

2) Readonly: Detta är ett booleskt attribut som används för inmatningselement. I detta attribut kan användaren inte ändra värdet och inaktivera markören för att skriva.

Exempel:

3) .form-control-plaintext: den här klassen fungerar som en skrivskyddad men har rätt marginal och stoppning.

Exempel:

Exempel på Bootstrap Form Layout

De givna exemplen ges nedan:

1. Exempel på vertikal form (standardformulär)


Name:

Email:

  • Den vertikala formen är enkel och standardformulär i bootstrap.
  • Exemplet ovan har två inmatningsfält och en inloggningsknapp vertikalt med etiketten.
  • Med endast klassformgrupp och klassformkontroll skapas den vertikala formen.
  • Du kan ändra storleken på ingångselement utan storleksjustering av CSS-filen. Användaren behöver bara en klass som är .form-control-lg och .form-control-sm för stor respektive liten storlek.

2. Exempel på horisontell form

class=”form-horizontal”>
Name:


Email:


  • Med hjälp av klassform horisontellt gör användaren en horisontell form. Etikett och inmatningselement är inline men klassformgruppen är vertikal. Klass "kontroll-etikett col-sm-2" och = "col-sm-10" som används för uppdelad kolumn. Två-kolumntilldelning för etikett och Tio kolumner tilldela inmatningselement.
  • Klass ”col-sm-offset-2 col-sm-10” som används för inloggningsknappen. Offset används för utrymme, col-sm-offset-2 använde två-kolumn mellanslag från vänster i en form.
  • Se exempel på horisontell form och dess utgång för att förstå layout. Det sett namnet och inmatningstexten finns i en rad sedan e-post och element finns i en annan rad.
  • På stor och medelstor skärm ser horisontell utformning ut men på liten skärm (767px och nedan) verkar form vertikal.
  • Den horisontella formen är komplicerad med traditionell metod men bootstrap-layout hjälper till att göra det enkelt med klass- och etikettkontroll.

3. Exempel på inlineform

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • I inlineform finns alla etiketter och element i en rad. Alla formgrupper finns i en rad. Klassformulär är standard för denna layout. Användaren placerade den här klassen i. Den inlineform som används mer för radioknappar, kontrollknappar och så vidare.
  • Det här formuläret fungerar mestadels på minst 576px visningsport efter att det visar som standardformulär. I etiketten användes klass sr-endast. Denna klass är en skärmläsare, som används för att dölja etiketten och visar det enda elementet.
  • Om ingångselementet i inlineformen måste användaren komma med en platshållare i ett inmatningselement för att känna igen elementet.

Slutsats - Bootstrap från layout

För att förstå Bootstrap-tekniken måste användaren veta om HTML, CSS och JavaScript. Bootstrap-formuläret är det enklaste sättet att arbeta med standardformat. Den har egna klasser för att ta bort kodning och inte nödvändig CSS och JavaScript annan fil. Med hjälp av Bootstrap-formulär får användaren snabb kodning och undviker design och stil för blockkodning. Bootstrap är ett ramverk för front design webbdesign som är lätt och självimplementerad.

Rekommenderade artiklar

Detta är en guide till Bootstrap Form Layout. Här diskuterar vi introduktionen till Bootstrap Form Layout tillsammans med typer och exempel. Du kan också gå igenom våra andra artiklar som föreslås för att lära dig mer–

  1. Bootstrap Typography
  2. Bootstrap Layout
  3. Bootstrap Grid System
  4. Bootstrap-komponenter

Kategori:

Mjukvaruutveckling