Formulář s jednotným orámováním a barvou pozadí. Měl by obsahovat vnořený element .form-content
a může mít taky vnořený element .buttons
.
Obsah formuláře.
Element pro vložení tlačítek - odděluje vizuálně obsah formuláře a tlačítka.
Formulář s jedním sloupcem pro zobrazení nadpisů a jedním sloupcem pro zobrazení hodnot. Oba sloupce jsou stejně široké.
Na malých displejích se formulář přeskládá a původní sloupce se zobrazí na samostatném řádku.
Pro správnou funkčnost by měl obsahovat řádky s css třídou .form-row
.
Funguje stejně jako .form-50-50
, ale poměr velikostí sloupců je 3:7.
Funguje stejně jako .form-50-50
, ale poměr velikostí sloupců je 1:3.
Každý sloupec se zobrazí na samostatném řádku (i na velké obrazovce
.)Řádek formuláře.
První sloupec v řádku formuláře.
Druhý sloupec v řádku formuláře.
Upravuje vzhled prvního sloupce pro zobrazení nadpisu.
Řádek s nadpisem pro vyznačení sekce formuláře.
Pro složitější formuláře, ve kterých je potřeba mít více sloupců, používáme grid system inpirovaný
bootstrapem.
Implementovaný je pomocí display: flex
. Princip je ten, že se řádek rozdělí na 12 sloupců a
u vnořených elementů se určuje, kolik sloupců budou zabírat (1 - 12). Navíc lze tento počet zabraných sloupců měnit v závislosti na velikosti obrazovky.
Řádek formuláře.
Vnořený element řádku formuláře (.row
), který zabírá příslušný počet sloupců.
Vnořený element řádku formuláře (.row
), který od určité velikosti obrazovky (cca tablet) zabírá příslušný počet sloupců.
Vnořený element řádku formuláře (.row
), který od určité velikosti obrazovky (desktop s menším rozlišením) zabírá příslušný počet sloupců.