Úvod do rozloženia formulárov pre zavádzaciu techniku

HTML a CSS sú základné jazyky pre návrh webových stránok. Všetky základné šablóny vytvorené pomocou HTML, ale musíme navrhnúť a vytvoriť jedinečný a potom potrebný súbor CSS. Táto metóda je komplikovaná kvôli odkazom na triedy a id. Na prekonanie všetkých problémov v súboroch HTML a CSS prichádza bootstrap. Bootstrap je pokročilá technika pre webdizajn. Pre overenie a požadovaný formát formulára má bootstrap vlastnú triedu pre Textarea, vstup a ďalšie ovládacie prvky, ako je kontrola formulárov, skupina vstupov atď. Pomocou rozloženia bootstrapu môžeme rozhodnúť o formáte formulára. Môžeme ľahko vytvoriť vertikálne, horizontálne a inline formáty pomocou bootstrapu.

Typy rozloženia formulárov Bootstrap

Rozloženie formulárov Bootstrap vytvára iný typ formulára. robí návrh a validáciu bez súborov CSS a JavaScript. Z dôvodu usporiadania formulárov znížte viac kódovania a komplikácií. Bootstrap má vlastnú triedu na prekonanie všetkých zložitých kódov CSS a JavaScript.

Bootstrap má tri typy usporiadania formulárov.

  • Vertikálny tvar
  • Horizontálny tvar
  • Vložený formulár

Pozrime sa podrobne na tieto tri typy:

1. Vertikálny formulár

Vo vertikálnom rozložení formy sú štítok a textové prvky vertikálne a každá skupina formulárov je vertikálna. Vertikálny formulár je predvolený formulár pri zavádzaní systému. Neexistuje žiadne ďalšie pravidlo pre vertikálny formát formulára.

2. Horizontálny formulár

V horizontálnom usporiadaní formulárov sú štítok a textové prvky horizontálne, ale každá skupina formulárov je vertikálna . Pridajte vodorovné tvary do dvoch hlavných tried.

Pridajte triedu do elementu formulára.

Pridajte triedu do prvkov štítka.

3. Vložený formulár

V inline podobe sú štítok a prvky vložené a zarovnané doľava. Výrez má šírku najmenej 768px. Pridajte triedu pre vložený formulár.

Pridajte triedu k prvkom formulára.

Rozloženie formulárov Bootstrap má niektorú predvolenú triedu pre konvenciu formulárov uvedenú nižšie:

  • .form-group: Táto trieda použitá na rozmiestnenie formulárov a zviazanie štítku. Je flexibilný pre viazanie správ,, validačných formulárov a viac pre formulár.
  • , kontrola formy: Táto trieda sa používa pre všetky textové prvky a priestor pre formuláre atď. Používa sa pre všetky štýly, ako je veľkosť, zameranie.
  • .form-control-lg a .form-control-sm sa používajú pre veľkosť vstupných prvkov veľká a malá.

Podporovaný prvok a trieda

Niektoré podporované prvky a triedy pre validáciu formulárov Bootstrap bez JavaScriptu. Uľahčuje to a prekonáva množstvo overovacích kódov na strane servera.

1) .form-control-file: Táto trieda sa používa na pridanie súboru ako pdf, Docx atď. Namiesto použitia formulára na kontrolu triedy v súborových údajoch, ktoré táto trieda používa.

Príklad:

2) Len na čítanie: Toto je booleovský atribút používaný pre vstupné prvky. V tomto atribúte používateľ nemôže zmeniť hodnotu a zakázať písanie kurzora.

Príklad:

3) .form-control-plaintext: táto trieda funguje rovnako ako len na čítanie, ale prichádza so správnym okrajom a vypchávkou.

Príklad:

Príklad rozloženia formulárov pre zavádzaciu techniku

Uvedené príklady sú uvedené nižšie:

1. Príklad vertikálneho formulára (predvolený formulár)


Name:

Email:

  • Vertikálny formulár je jednoduchý a predvolený formulár pri zavádzaní systému.
  • Vyššie uvedený príklad obsahuje dve vstupné polia a prihlasovacie tlačidlo vertikálne so štítkom.
  • Použitím iba triedy forma-skupina a kontrola triedy sa vytvorí vertikálny formulár.
  • Veľkosť vstupných prvkov môžete upraviť bez úpravy veľkosti súboru CSS. Užívateľ potrebuje iba triedu, ktorá je .form-control-lg a .form-control-sm pre veľké a malé veľkosti.

2. Príklad horizontálneho tvaru

class=”form-horizontal”>
Name:


Email:


  • Použitím triedy formulár-horizontálny užívateľ vytvorí horizontálny formulár. Štítok a vstupný prvok sú vložené, ale skupina formulárov je vertikálna. Trieda „kontrolný štítok col-sm-2“ a = „col-sm-10“ použitá pre rozdelený stĺpec. Priradenie k dvom stĺpcom Pre označenie a priraďovanie desať stĺpcov pre vstupné prvky.
  • Trieda „col-sm-offset-2 col-sm-10“ použitá pre prihlasovacie tlačidlo. Ofset použitý pre priestor, col-sm-offset-2 použil dva stĺpce medzery zľava vo forme.
  • Pozrite si príklad horizontálneho formulára a jeho výstup, aby ste pochopili rozloženie. Jeho videný názov a vstupný text sú na jednom riadku, potom e-mail a prvky sú na druhom riadku.
  • Na veľkej a strednej obrazovke vyzerá horizontálne rozloženie, ale na malej obrazovke (767px a nižšie) sa zdá, že forma je zvislá.
  • Horizontálna forma je komplikovaná tradičnou metódou, ale rozloženie bootstrapu pomáha zjednodušiť používanie ovládania triedy a štítkov.

3. Príklad vloženého formulára

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • V inline podobe sú všetky štítky a prvky v jednom riadku. Všetky skupiny formulárov sú v jednom riadku. Formulár triedy inline je predvolené pre toto rozloženie. Používateľ zaradil túto triedu do. Vložený formulár sa používa viac pre prepínacie tlačidlá, kontrolné tlačidlá atď.
  • Tento formulár väčšinou funguje na výreze aspoň 576 pixelov, potom sa zobrazuje ako predvolený formulár. V označení sa používa iba trieda sr. Táto trieda je čítačka obrazovky, ktorá sa používa na skrytie štítka a zobrazuje jediný prvok.
  • Ak je vstupný prvok v inline podobe, musí užívateľ priložiť so zástupným symbolom vo vstupnom prvku na rozpoznanie prvku.

Záver - Bootstrap z rozloženia

Aby používateľ porozumel technológii Bootstrap, musí vedieť o HTML, CSS a JavaScript. Formulár bootstrap je najjednoduchší spôsob práce so štandardným formátom. Má vlastné triedy na odstránenie kódovania a nevyžaduje iný súbor CSS a JavaScript. Pomocou formulára Bootstrap dostane používateľ rýchlosť kódovania a vyhýba sa dizajnu a štýlu kódovania blokov. Bootstrap je rámec pre webový dizajn front-end, ktorý je ľahký a implementovaný samostatne.

Odporúčané články

Toto je sprievodca rozložením formulárov Bootstrap. Tu diskutujeme úvod k rozloženiu formulárov Bootstrap spolu s typmi a príkladmi. Viac informácií nájdete aj v ďalších navrhovaných článkoch -

  1. Bootstrap typografia
  2. Rozloženie zavádzacích zariadení
  3. Bootstrap mriežkový systém
  4. Komponenty zavádzacích zariadení

Kategórie:

Vývoj softvéru