Úvod do rozvržení formulářů Bootstrap

HTML a CSS jsou základní jazyky pro návrh webových stránek. Všechny základní šablony vytvořené pomocí HTML, ale musíme navrhnout a vytvořit jedinečný, pak potřebný samostatně soubor CSS. Tato metoda je komplikovaná kvůli odkazům na třídy a id. K překonání všech problémů v souborech HTML a CSS přichází bootstrap. Bootstrap je pokročilá technika pro webdesign. Pro ověření a požadovaný formát formuláře má bootstrap vlastní třídu pro textarea, vstup a další ovládací prvky, jako je kontrola formulářů, skupina vstupů atd. Pomocí rozložení bootstrapu můžeme rozhodnout o formátu formuláře. Pomocí bootstrapu můžeme snadno vytvořit vertikální, horizontální a inline formáty.

Typy rozložení formulářů Bootstrap

Rozvržení formuláře spouštěcího formuláře vytváří jiný typ formuláře. umožňuje návrh a ověření bez souborů CSS a JavaScript. Kvůli rozvržení formuláře omezte více kódování a komplikací. Bootstrap má vlastní třídu k překonání všech složitých kódů CSS a JavaScript.

Bootstrap má tři typy rozvržení formuláře.

  • Vertikální tvar
  • Horizontální tvar
  • Vložený formulář

Podívejme se na tyto tři typy podrobně:

1. Vertikální forma

Ve svislém rozvržení formuláře jsou popisky a textové prvky svisle a každá skupina formulářů je svislá. Svislý formulář je ve bootstrapu výchozí. Neexistuje žádné další pravidlo pro vertikální formát formuláře.

2. Horizontální formulář

V horizontálním rozvržení formuláře jsou popisky a textové prvky vodorovně, ale každá skupina formulářů je svislá . Pro vodorovný tvar přidejte dvě hlavní třídy.

Přidejte třídu do elementu formuláře.

Přidejte třídu do prvků štítku.

3. Vložený formulář

V inline podobě jsou popisek a prvky inline a zarovnány doleva. Výřez má šířku nejméně 768 pixelů. Přidejte třídu pro vložený formulář.

Přidejte třídu k elementům formuláře.

Rozvržení formulářů Bootstrap má některou výchozí třídu pro konvenci formulářů uvedenou níže:

  • .form-group: Tato třída použitá pro rozestupy formulářů a svázání štítku. Je flexibilní pro vázání zpráv,, ověřování formulářů a více pro formulář.
  • . forma-control: Tato třída se používá pro všechny textové prvky a prostor pro formuláře, atd. Používá se pro všechny styly, jako je velikost, ostření.
  • .form-control-lg a .form-control-sm se používají pro velikost vstupních prvků velká a malá.

Podporovaný prvek a třída

Některé podporované prvky a třídy pro ověřování formulářů Bootstrap bez JavaScriptu. Usnadňuje a překonává mnoho ověřovacích kódů na straně serveru.

1) .form-control-file: Tato třída se používá k přidání souboru, jako je pdf, Docx, atd. Namísto použití formuláře-control třídy, do dat souboru, který tato třída používá.

Příklad:

2) Jen pro čtení: Toto je booleovský atribut používaný pro vstupní prvky. V tomto atributu uživatel nemůže změnit hodnotu a zakázat psaní kurzoru.

Příklad:

3) .form-control-plaintext: Tato třída funguje stejně jako pouze pro čtení, ale přichází se správným okrajem a výplní.

Příklad:

Příklad rozvržení formuláře zavádění

Níže uvedené příklady jsou uvedeny níže:

1. Příklad svislého tvaru (výchozí formulář)


Name:

Email:

  • Vertikální forma je jednoduchá a výchozí forma v bootstrapu.
  • Výše uvedený příklad má dvě vstupní pole a přihlašovací tlačítko svisle se štítkem.
  • S použitím pouze třídy form-group a class form-control se vytvoří vertikální formulář.
  • Velikost vstupních prvků můžete upravit bez úpravy velikosti souboru CSS. Uživatel potřebuje pouze třídu, která je .form-control-lg a .form-control-sm pro velké a malé velikosti.

2. Příklad horizontálního tvaru

class=”form-horizontal”>
Name:


Email:


  • Pomocí třídy form-horizontal uživatel vytvoří horizontální formu. Popisek a vstupní prvek je vložený, ale skupina formulářů je svislá. Třída „control-label col-sm-2“ a = „col-sm-10“ použitá pro rozdělený sloupec. Přiřazení dvou sloupců Pro označení a deset sloupců pro vstupní prvky.
  • Třída „col-sm-offset-2 col-sm-10“ použitá pro tlačítko přihlášení. Ofset použitý pro prostor, col-sm-offset-2 používal ve tvaru dva sloupce mezer zleva.
  • Viz příklad horizontálního formuláře a jeho výstup k pochopení rozvržení. Jeho viděný název a vstupní text jsou v jednom řádku, poté e-mail a prvky v jiném řádku.
  • Na velké a střední obrazovce vypadá horizontální rozvržení, ale na malé obrazovce (767px a níže) vypadá forma svisle.
  • Horizontální forma je komplikovaná tradiční metodou, ale rozvržení bootstrapu pomáhá usnadnit ovládání třídy a štítku.

3. Příklad vloženého formuláře

class=”form-inline”>
Name:

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

Email:
placeholder=”Enter email”>

  • V inline podobě jsou všechny štítky a prvky v jednom řádku. Všechny skupiny formulářů jsou v jednom řádku. Třída form-inline je pro toto rozvržení výchozí. Uživatel umístil tuto třídu do. Vložený formulář se používá více pro přepínače, tlačítka pro kontrolu atd.
  • Tento formulář většinou funguje na výřezu alespoň 576 pixelů, poté se zobrazí jako výchozí formulář. V označení byla použita pouze třída sr. Tato třída je čtečka obrazovky, která se používá ke skrytí štítku a zobrazuje jediný prvek.
  • Pokud je vstupní prvek v inline podobě, musí uživatel přijít s zástupným symbolem ve vstupním prvku, aby element rozpoznal.

Závěr - Bootstrap z rozložení

Abychom porozuměli technologii Bootstrap, musí uživatel vědět o HTML, CSS a JavaScript. Formulář bootstrap je nejjednodušší způsob práce ve standardním formátu. Má vlastní třídy pro odstranění kódování a nevyžaduje jiný soubor CSS a JavaScript. Pomocí formuláře Bootstrap dostane uživatel rychlost kódování a zamezuje designu a stylu kódování bloků. Bootstrap je rámec pro webový design front-end, který je lehký a samostatně implementovatelný.

Doporučené články

Toto je průvodce rozvržením formulářů Bootstrap. Zde diskutujeme úvod k rozvržení formulářů Bootstrap spolu s typy a příklady. Další informace naleznete také v dalších navrhovaných článcích -

  1. Bootstrap typografie
  2. Rozvržení zaváděcího systému
  3. Bootstrap Grid System
  4. Komponenty zaváděcího systému

Kategorie:

Vývoj softwaru