RON dokumentace

XML formuláře CSS Javascript

Responzivní formuláře

form

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.

form-content

Obsah formuláře.

buttons

Element pro vložení tlačítek - odděluje vizuálně obsah formuláře a tlačítka.


    
Obsah formuláře ... lorem ipsum kočkám i psům
Tlačítka ...

Jednoduché formuláře se dvěma sloupci

form-50-50

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.

form-30-70

Funguje stejně jako .form-50-50, ale poměr velikostí sloupců je 3:7.

form-25-75

Funguje stejně jako .form-50-50, ale poměr velikostí sloupců je 1:3.

form-100

Každý sloupec se zobrazí na samostatném řádku (i na velké obrazovce

.)

form-row

Řádek formuláře.

form-col1

První sloupec v řádku formuláře.

form-col2

Druhý sloupec v řádku formuláře.

caption

Upravuje vzhled prvního sloupce pro zobrazení nadpisu.

form-section

Řádek s nadpisem pro vyznačení sekce formuláře.


    
Povinná položka
Další položka
Nadpis sekce formuláře ...
A ještě něco

Obecné 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.

row

Řádek formuláře.

col-1, col-2, col-3, col-4, col-5, col-6, col-7, col-8, col-9, col-10, col-11, col-12

Vnořený element řádku formuláře (.row), který zabírá příslušný počet sloupců.

col-sm-1, col-sm-2, col-sm-3, col-sm-4, col-sm-5, col-sm-6, col-sm-7, col-sm-8, col-sm-9, col-sm-10, col-sm-11, col-sm-12

Vnořený element řádku formuláře (.row), který od určité velikosti obrazovky (cca tablet) zabírá příslušný počet sloupců.

col-md-1, col-md-2, col-md-3, col-md-4, col-md-5, col-md-6, col-md-7, col-md-8, col-md-9, col-md-10, col-md-11, col-md-12

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ů.


    
Povinná položka
Další položka
Tlačítka ...