Introductie van Bootstrap Form Layout

HTML en CSS zijn de basistalen voor het ontwerpen van websitevormen. Alle basissjablonen gemaakt door HTML, maar we moeten een uniek en vervolgens afzonderlijk CSS-bestand ontwerpen en maken. Deze methode is gecompliceerd vanwege klasse- en id-verwijzingen. Om alle problemen in HTML- en CSS-bestanden te overwinnen, komt bootstrap. Bootstrap is een geavanceerde techniek voor webontwerp. Voor validatie en het vereiste formaat van formulier heeft bootstrap een eigen klasse voor Textarea, invoer en andere besturingselementen zoals formulierbeheer, invoergroep, enz. Met behulp van de bootstrap-indeling kunnen we het formaat van het formulier bepalen. We kunnen met behulp van bootstrap eenvoudig verticale, horizontale en inline-formulierformaten maken.

Typen Bootstrap-formulierindeling

Bootstrap-formulierindeling maakt een ander type formulier. het maakt ontwerp en validatie zonder CSS- en JavaScript-bestanden. Vanwege de vormindeling, verminder meer codering en complicaties. Bootstrap heeft een eigen klasse om alle complexe CSS- en JavaScript-code te overwinnen.

Bootstrap heeft drie soorten formulierlay-out.

  • Verticale vorm
  • Horizontale vorm
  • Inline vorm

Laten we deze drie soorten in detail bekijken:

1. Verticale vorm

In verticale formulierlay-out zijn label- en tekstelementen verticaal en is elke formuliergroep verticaal. De verticale vorm is standaardvorm in bootstrap. Er is geen aanvullende regel voor de indeling van verticale formulieren.

2. Horizontale vorm

In horizontale formulierlay-out zijn label- en tekstelementen horizontaal, maar elke formuliergroep is verticaal . Voeg twee hoofdklassen toe voor horizontale vorm.

Voeg de klasse toe aan het formulierelement.

Voeg de klasse toe aan de labelelementen.

3. Inline-formulier

In inline vorm zijn label en elementen inline en links uitgelijnd. Viewport heeft minimaal 768 px breed. Voeg een klasse toe voor inline-formulier.

Voeg de klasse toe aan de formulierelementen.

Bootstrap-formulierlay-out heeft een standaardklasse voor onderstaande formulierconventie:

  • .form-group: deze klasse wordt gebruikt voor formulierafstand en bind het label. Het is flexibel voor het binden van,, formuliervalidatieberichten en meer voor formulier.
  • . form-control: deze klasse wordt gebruikt voor alle tekstuele elementen en ruimte voor vorm, enz. Het wordt gebruikt voor alle stijlen zoals grootte, focus.
  • .form-control-lg en .form-control-sm worden respectievelijk gebruikt voor de grootte van het invoerelement groot en klein.

Ondersteund element en klasse

Sommige ondersteunde elementen en klassen voor Bootstrap-formuliervalidatie zonder JavaScript. Het maakt het eenvoudig en overwint veel server-side validatiecodering.

1) .form-control-file: Deze klasse wordt gebruikt om een ​​bestand zoals pdf, Docx, etc. toe te voegen in plaats van klasse form-control te gebruiken, in bestandsgegevens waarin deze klasse gebruikt.

Voorbeeld:

2) Alleen-lezen: dit is een Booleaanse eigenschap die wordt gebruikt voor invoerelementen . In dit kenmerk kan de gebruiker de waarde niet wijzigen en de cursor uitschakelen om te schrijven.

Voorbeeld:

3) .form-control-plaintext: deze klasse werkt als alleen-lezen, maar wordt geleverd met de juiste marge en opvulling.

Voorbeeld:

Voorbeeld van Bootstrap-formulierindeling

De gegeven voorbeelden worden hieronder gegeven:

1. Voorbeeld van verticale vorm (standaardformulier)


Name:

Email:

  • De verticale vorm is eenvoudig en standaardvorm in bootstrap.
  • Het bovenstaande voorbeeld heeft twee invoervelden en een inlogknop verticaal met het label.
  • Met alleen klasse-formuliergroep en klasse-formulierbeheer wordt het verticale formulier gemaakt.
  • U kunt de grootte van invoerelementen wijzigen zonder de grootte van het CSS-bestand aan te passen. De gebruiker heeft alleen een klasse nodig die respectievelijk .form-control-lg en .form-control-sm is voor grote en kleine formaten.

2. Voorbeeld van horizontale vorm

class=”form-horizontal”>
Name:


Email:


  • Met behulp van klasse-formulier horizontaal maakt de gebruiker een horizontaal formulier. Label en invoerelement zijn inline maar klasse-formuliergroep is verticaal. Klasse "controlelabel col-sm-2" en = "col-sm-10" gebruikt voor verdeelde kolom. Toewijzing met twee kolommen Voor label en Toewijzing met tien kolommen voor invoerelementen.
  • Klasse "col-sm-offset-2 col-sm-10" gebruikt voor de aanmeldknop. Offset gebruikt voor spatie, col-sm-offset-2 gebruikte twee kolommen spaties van links in een vorm.
  • Zie een horizontaal formuliervoorbeeld en de uitvoer om de lay-out te begrijpen. De zichtbare naam en invoertekst staan ​​op één regel en vervolgens op e-mail en elementen op een andere regel.
  • Op een groot en medium scherm ziet de vorm er horizontaal uit, maar op een klein scherm (767 px en lager) lijkt de vorm verticaal.
  • De horizontale vorm is ingewikkeld met behulp van de traditionele methode, maar de bootstrap-lay-out helpt om het gebruik van klasse- en labelcontrole eenvoudig te maken.

3. Voorbeeld van inline-formulier

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • In inline-vorm staan ​​alle labels en elementen op één rij. Alle formuliergroepen staan ​​in één rij. Klasse form-inline is de standaard voor deze lay-out. De gebruiker heeft deze klasse erin geplaatst. Het inline-formulier werd meer gebruikt voor keuzerondjes, controleknoppen, enzovoort.
  • Dit formulier werkt meestal op ten minste 576px viewport nadat het wordt weergegeven als standaardformulier. In label, alleen klasse sr gebruikt. Deze klasse is een schermlezer, gebruikt om het label te verbergen en toont het enige element.
  • Als het invoerelement in de inline-vorm moet de gebruiker met een tijdelijke aanduiding in een invoerelement komen om het element te herkennen.

Conclusie - Bootstrap uit layout

Om Bootstrap-technologie te begrijpen, moet de gebruiker kennis hebben van HTML, CSS en JavaScript. De bootstrap-vorm is de eenvoudigste manier om met de standaardindeling te werken. Het heeft eigen klassen om codering te verwijderen en niet vereist CSS en JavaScript ander bestand. Met behulp van het Bootstrap-formulier krijgt de gebruiker snelheid bij het coderen en het vermijden van blokcoderingontwerp en -stijl. Bootstrap is een raamwerk voor front-end webontwerp dat lichtgewicht en zelf geïmplementeerd is.

Aanbevolen artikelen

Dit is een gids voor Bootstrap Form Layout. Hier bespreken we de inleiding tot Bootstrap Form Layout samen met de soorten en voorbeelden. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie–

  1. Bootstrap typografie
  2. Bootstrap-indeling
  3. Bootstrap Grid-systeem
  4. Bootstrap-componenten

Categorie:

Software ontwikkeling