Dark & Light Theme

Web podporuje dva barevné režimy — světlý a tmavý. Aktivní téma se nastaví třídou na <body>:

<body class="is-light">  <!-- světlý -->
<body class="is-dark">   <!-- tmavý -->

CSS soubory

assets/account/css/src/app.css	Výchozí styly (light) + layouty, komponenty
assets/account/css/src/custom.css	Vlastní styly projektu (komponenty, utility)
assets/account/css/src/dark-mode.css	Všechny dark mode přepisy — vždy s prefixem body.is-dark

Pravidla pro dark mode CSS

/* Všechny dark styly patří do dark-mode.css */
/* Každé pravidlo začíná prefixem body.is-dark */

body.is-dark .card {
    background: var(--header-bg);
    border: 1px solid var(--header-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

body.is-dark .form-control {
    background: var(--header-bg);
    border-color: var(--input-border-custom);
}

CSS proměnné (dark)

--body-bg	#1f2433
--header-bg	#222838
--header-border	#2F3647
--body-color	#fff
--secondary-bg	#222838
--input-border-custom	#3B4254
--input-bg-custom	#2f3647

Přepínání tématu

// V JS — volá se při kliknutí na theme switcher
window.themeSwitcherTrigger(checkbox);

{# V Twig — kontrola aktuálního tématu #}
{% if currentTheme() == 'dark' %}
    <!-- dark specifický obsah -->
{% endif %}

Dark mode styly nikdy nepsat do app.css nebo custom.css. Vždy do dark-mode.css s prefixem body.is-dark.

Card

Základní kontejner pro obsah. Podporuje header, body, footer a divider. Třídy light a lighter mění barvu pozadí.

Card Header

Card Body

Další obsah pod dividerem

Card Footer

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Obsah</div>
    <div class="card-divider"></div>
    <div class="card-body">Další obsah</div>
    <div class="card-footer">Footer</div>
</div>

<!-- Varianty pozadí -->
<div class="card-header lighter">...</div>
<div class="card-body light">...</div>
<div class="card-footer light">...</div>

Alerts

Stavové hlášky. Lze použít HTML tagy <success>, <danger>, <info>, <warning> které se automaticky transformují při kompilaci Twig cache.

Success alert

Info alert

Warning alert

Danger alert

<!-- Klasicky -->
<div class="alert alert-success">Zpráva</div>

<!-- Zkrácený zápis (transformuje se při kompilaci) -->
<success>Zpráva</success>
<danger>Chyba</danger>
<info>Informace</info>
<warning>Varování</warning>

Badges

Dvě varianty — plné a s border-left.

Plné

Primary Success Danger Info Warning

Border

Primary Success Danger Info Warning

<span class="badge bg-primary">Plný</span>
<span class="badge badge-border bg-success">S borderem</span>

Buttons

Data Loader

Atribut data-loader přidá loading spinner při kliknutí. Tlačítko se zároveň stane neklikatelným — zamezí opakovanému kliknutí.

Při použití na <form data-loader> se loader aplikuje na submit button a zamezí opakovanému odeslání formuláře.

Confirm Dialog

Atribut data-confirm na <a> zobrazí SweetAlert potvrzovací dialog. Po potvrzení přesměruje na href, po zrušení se nic nestane.

<button class="btn btn-primary">Tlačítko</button>

<!-- Loader na button — spinner + neklikatelné -->
<button class="btn btn-success" data-loader>Uložit</button>

<!-- Loader na formuláři — submit button dostane spinner -->
<form data-loader>
    <button type="submit" class="btn btn-primary">Odeslat</button>
</form>

<!-- Confirm dialog — button uvnitř <a> -->
<a href="/delete/1" data-confirm="Opravdu smazat?">
    <button class="btn btn-danger">Smazat</button>
</a>

Form Elements

Input

Textarea

Select

Input Group

$ .00

File Upload

Upload

<input type="text" class="form-control" placeholder="Text">
<input type="text" class="form-control" disabled>
<textarea class="form-control" rows="3"></textarea>

<div class="input-group">
    <span class="input-group-text"><icon>feather/search</icon></span>
    <input type="text" class="form-control">
</div>

Checkbox & Switch

Checkbox

Zaškrtnutý checkbox

Nezaškrtnutý checkbox

Switch

Default

Large

Success (barevná varianta)

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="x" checked>
    <label class="form-check-label" for="x">Label</label>
</div>

<!-- Switch — výchozí velikost -->
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch">
    <label class="form-check-label">Default</label>
</div>

<!-- Switch — large (form-switch-lg) -->
<div class="form-check form-switch form-switch-lg d-flex align-items-center">
    <input class="form-check-input" type="checkbox" role="switch">
    <label class="form-check-label">Large</label>
</div>

<!-- Barevné varianty: form-check-success, form-check-info, ... -->

Custom Select

Vlastní select s podporou optgroup, divider, disabled a custom HTML v options.

United States

Evropa

Europe

Singapore

Disabled select

<div class="custom-select">
    <div class="custom-option" data-value="us">United States</div>
    <div class="custom-select-divider"></div>
    <div class="custom-optgroup">
        <label>Evropa</label>
        <div class="custom-option selected" data-value="eu">Europe</div>
        <div class="custom-option" data-value="cz">Česká republika</div>
    </div>
</div>

<!-- Option s ikonou -->
<div class="custom-option" data-value="sg">
    <div class="d-flex align-items-center" style="gap: 8px">
        <icon style="width:18px;height:18px;">android</icon>
        <div>Singapore</div>
    </div>
</div>

<!-- Disabled -->
<div class="custom-select" disabled>...</div>

<!-- JS API -->
Account.Select.getValue(element)   // vrátí data-value
Account.Select.refresh()           // re-init po AJAX

DatePicker / DateTimePicker / DateRangePicker

DatePicker

DatePicker s vlastním formátem

DateTimePicker

TimePicker

DateRangePicker

<input data-datepicker>
<input data-datepicker data-datepicker-format="YYYY-MM-DD">
<input data-datetimepicker>
<input data-timepicker>
<input data-daterangepicker>
<input data-daterangepicker data-daterange-separator=" to ">

Formát tokeny: DD den, MM měsíc, YYYY rok, HH hodiny, mm minuty.

Radio Button

Horizontální

Horizontální — small

Vertikální

Možnost A

Popis první možnosti

Možnost B

Popis druhé možnosti

<!-- Horizontální -->
<div class="radio-button-horizontal">
    <div class="rb-h-items">
        <button class="rb-h-item is-active">A</button>
        <button class="rb-h-item">B</button>
    </div>
</div>

<!-- Horizontální small -->
<div class="radio-button-horizontal small">...</div>

<!-- Varianty pozadí (v .card-body) -->
<div class="radio-button-horizontal light">...</div>
<div class="radio-button-horizontal lighter">...</div>

<!-- Vertikální -->
<div class="radio-button-vertical">
    <div class="rb-v-item is-active">
        <div class="rb-v-check"></div>
        <h1>Nadpis</h1>
        <p>Popis</p>
    </div>
</div>

<!-- JS API -->
Account.RadioButton.getActiveElement('.my-radio')

TabCard

Dvě varianty — výchozí (s barevnou lištou) a light (jednoduché taby).

Výchozí

Volume

0.00 B

Storage

128 MB

Regions

Obsah záložky Volume

Obsah záložky Regions

Light varianta

Jednoduchý tab bez borderu a pozadí. Lze použít místo .card-header uvnitř .card — taby nahrazují header a obsah je v .card-body.

General

Settings

Advanced

Obsah General

Obsah Settings

Obsah Advanced

Light v .card (jako header)

Tab A

Tab B

Obsah A v card

Obsah B v card

<!-- Výchozí TabCard -->
<div class="tab-card">
    <div class="tc-tabs">
        <div class="tc-tab">
            <div class="tc-tab-bar"></div>
            <div>
                <div class="tc-tab-label">Název</div>
                <small>Popis</small>
            </div>
        </div>
    </div>
    <div class="tc-content">
        <div class="tc-pane">Statický obsah</div>
        <div class="tc-pane" data-load-url="/api" data-load-always></div>
        <div class="tc-pane" data-load-url="/api" data-load-post='{"filter":"x"}'></div>
    </div>
</div>

<!-- Light varianta -->
<div class="tab-card light">...</div>

<!-- Hash navigace na konkrétní záložku -->
<a href="/page#tab-card,nazev=polozka">Odkaz</a>

Data atributy na tc-pane

data-load-url	URL pro AJAX načtení obsahu
data-load-post	JSON objekt s POST daty (filtrace). Pokud přítomen, požadavek jde jako POST.
data-load-always	Obsah se načte znovu při každém přepnutí (bez cache)

Hash navigace

Po načtení stránky lze automaticky přepnout na konkrétní záložku a zascrollovat ke card pomocí URL hashe. Formát: #tab-card,nazev=polozka

data-tabcard	Na .tab-card — název pro hash navigaci
data-tabcard-item	Na .tc-tab — název položky pro hash navigaci

<!-- URL: /page#tab-card,test=storage -->
<div class="tab-card" data-tabcard="test">
    <div class="tc-tabs">
        <div class="tc-tab">...</div>
        <div class="tc-tab" data-tabcard-item="storage">...</div>
    </div>
    ...
</div>

<!-- Odkaz na záložku z jiné stránky -->
<a href="/page#tab-card,test=storage">Otevřít Storage tab</a>

Při hash navigaci se provede scroll animace ke card a kliknutí na záložku s ripple efektem. Více párů oddělených čárkou: #tab-card,nazev1=polozka1,nazev2=polozka2

Modal

// Prázdný modal
Account.Modal.open({size: 600});

// S obsahem
Account.Modal.setContent('<h1>Hello</h1>').open({size: 500, autoHeight: true});

// Načtení z URL
Account.Modal.openFromUrl('/api/detail/1', {size: 700, loader: true});

// Zavření
Account.Modal.close();

Options

size	Šířka: 300, 400, 500, 600, 700, 800, 900. Bez size = fullscreen na mobilu.
autoHeight	Výška podle obsahu místo fixní. Na mobilech (<690px) se ignoruje — vždy fullscreen.
centered	Vertikálně vycentruje modal
borderRadius	Vlastní border-radius v px
customClass	Přidá CSS třídy na #modal (oddělené mezerou)
style	Inline CSS na #modal-content
hash	Nastaví window.location.hash při otevření, vyčistí při zavření
loader	Zobrazí loader při načítání z URL (výchozí true)
onOpen / onClose	Callback funkce

Offcanvas

Account.Offcanvas.open('left', 'element-id');
Account.Offcanvas.open('right', 'element-id');
Account.Offcanvas.close();

<!-- Panel v layoutu -->
<div id="my-panel">
    Obsah panelu
</div>

Šířka 400px na desktopu, 100% pod 750px. Zavře se klikem na backdrop, Esc nebo Account.Offcanvas.close().

Page Loader

Fullscreen loader překrývající celou stránku. Zobrazí se automaticky při kliknutí na data-loader elementy nebo lze vyvolat ručně.

// Zobrazit
window.openLoader();

// Skrýt
window.closeLoader();

<!-- Automaticky při kliknutí -->
<button data-loader>Uložit</button>
<a href="/page" data-loader>Odkaz s loaderem</a>

Atribut data-loader na <button> přidá loading spinner přímo na tlačítko. Na <a> zobrazí fullscreen page loader.

Dropdown

Popis

Dropdown se aktivuje atributem data-dropdown-toggle na tlačítku. Menu se vždy obaluje do kontejneru .dropdown.

Zarovnání

Třída	Popis
`dropdown-menu-start`	Menu se zarovná k levé straně tlačítka (výchozí chování)
`dropdown-menu-end`	Menu se zarovná k pravé straně tlačítka — používat pro prvky umístěné na pravé straně obrazovky, aby menu nepřetékalo ven

Položky

Třída / element	Popis
`dropdown-item`	Odkaz / položka menu — ikony se zobrazí automaticky vedle textu
`dropdown-item active`	Zvýrazněná (aktivní) položka — tučný text
`dropdown-header`	Nadpis sekce v menu (tučný, centrovaný, první písmeno podtržené)
`dropdown-divider`	Vizuální oddělovač mezi skupinami položek

Kdykoli je to vhodné, doporučujeme používat <icon> tag uvnitř položek. Ikona se automaticky zarovná vlevo vedle textu.

Na položky lze přidat třídu hover-lift pro jemný posun při hover (viz sekce hover-lift níže).

<!-- Základní struktura -->
<div class="dropdown">
    <button data-dropdown-toggle class="btn btn-primary">Toggle</button>

    <div class="dropdown-menu dropdown-menu-start">
        <!-- Header -->
        <div class="dropdown-header">Nadpis</div>

        <div class="dropdown-divider"></div>

        <!-- Položka s ikonou -->
        <a class="dropdown-item hover-lift" href="#">
            <icon>feather/user</icon>
            <span class="align-middle">Profile</span>
        </a>

        <div class="dropdown-divider"></div>

        <a class="dropdown-item hover-lift" href="/account/logout">
            <icon>feather/log-out</icon>
            <span class="align-middle">Logout</span>
        </a>
    </div>
</div>

<!-- Zarovnání doprava (pro prvky na pravé straně obrazovky) -->
<div class="dropdown-menu dropdown-menu-end">...</div>

<!-- Data atributy na toggle -->
data-dropdown-width="300"       <!-- Min šířka menu -->
data-dropdown-offset="10"       <!-- Offset X i Y -->
data-dropdown-offset-x="5"      <!-- Offset jen X -->
data-dropdown-offset-y="10"     <!-- Offset jen Y -->

hover-lift

Utility třída .hover-lift přidá jemný posun elementu při hover (transform: translate(1px, -1px) s transition: 0.2s). Lze použít na jakýkoli element.

Odkaz a tlačítko

Odkaz s hover-lift

Dropdown

Radio Button

TabCard

Tab A

Tab B

Tab C

Obsah A

Obsah B

Obsah C

TabCard Light

Tab A

Tab B

Tab C

Obsah A

Obsah B

Obsah C

Pagination

<!-- Na jakýkoli element -->
<a class="hover-lift" href="#">Odkaz</a>
<button class="btn btn-primary hover-lift">Tlačítko</button>

<!-- Dropdown položky -->
<a class="dropdown-item hover-lift" href="#">...</a>

<!-- Radio Button -->
<button class="rb-h-item hover-lift">Den</button>

<!-- TabCard taby -->
<div class="tc-tab hover-lift">...</div>

<!-- Pagination odkazy -->
<a class="page-link hover-lift" href="#">1</a>

Oddělovače

<hr>

Běžný horizontální oddělovač pro oddělení sekcí na stránce.

.card-divider

Oddělovač uvnitř .card-body — ignoruje padding a táhne se od kraje ke kraji karty.

Obsah nad dividerem

Obsah pod dividerem

<!-- Běžný oddělovač -->
<hr>

<!-- Oddělovač v card-body (přes celou šířku karty) -->
<div class="card-body">
    Obsah
    <div class="card-divider"></div>
    Další obsah
</div>

Pagination

Tři vizuální varianty:

Default

Default — small

Lighter

Light

{% if pagination.hasPages() %}
    <ul class="pagination">
        {{ pagination.draw()|raw }}
    </ul>
{% endif %}

<!-- Varianty -->
<ul class="pagination lighter">...</ul>
<ul class="pagination light">...</ul>

<!-- Small -->
<ul class="pagination small">...</ul>

Grid

Bootstrap 12-sloupcový grid systém. Třídy .col-{n}, .col-md-{n}, .col-lg-{n}, offset, auto-šířka.

Stejné sloupce

col

Fixní šířky (col-{n})

col-12

col-6

col-4

col-3

col-2

Smíšené šířky

col-8

col-4

col-3

col-6

col-3

col-2

col-8

col-2

col-9

col-3

col-5

col-7

Fixní + auto

col-4

col (auto)

col-6

col (auto)

Offset

col-4 offset-4

col-3 offset-3

col-6 offset-3

col-4

col-4 offset-4

Responsive (col-md-, col-lg-)

Změň šířku okna a sleduj jak se sloupce přeskládají.

col-12 / md-6 / lg-4

col-12 / md-12 / lg-4

col-12 / md-4

col-12 / md-8

col-6 / lg-3

col-auto (šířka podle obsahu)

Krátký

Zbytek prostoru

Zbytek

Tento sloupec má šířku podle obsahu

Zbytek

Vnořený grid

col-8

col-6

col-4

<!-- Stejné sloupce -->
<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
</div>

<!-- Fixní šířky -->
<div class="row">
    <div class="col-8">...</div>
    <div class="col-4">...</div>
</div>

<!-- Offset -->
<div class="row">
    <div class="col-6 offset-3">...</div>
</div>

<!-- Responsive -->
<div class="row">
    <div class="col-12 col-md-6 col-lg-4">...</div>
    <div class="col-12 col-md-6 col-lg-4">...</div>
    <div class="col-12 col-md-12 col-lg-4">...</div>
</div>

<!-- Auto-šířka podle obsahu -->
<div class="row">
    <div class="col-auto">...</div>
    <div class="col">Zbytek</div>
</div>

<!-- Vnořený grid -->
<div class="row">
    <div class="col-8">
        <div class="row">
            <div class="col-6">...</div>
            <div class="col-6">...</div>
        </div>
    </div>
</div>

Tables

Základní třída .table s možností kombinovat modifikátory. Barvy .lighter a .light ovlivňují striped a hover pozadí (stejný princip jako u Pagination / TabCard).

Základní tabulka

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-striped

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-hover

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-striped + table-hover

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-bordered

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa

table-borderless

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa

table-rounded

Tabulka s border-radius a vnějším borderem (bez stínu — na rozdíl od table-card).

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-rounded + hover

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-sm

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-card

Tabulka s vizuálem .card — border-radius, border, stín, pozadí.

Název	Typ	Popis	Popis	Popis
id	int	Primární klíč	Primární klíč
name	string	Jméno uživatele	Primární klíč	Primární klíč
email	string	E-mailová adresa	Primární klíč	Primární klíč
created_at	datetime	Datum vytvoření	Primární klíč	Primární klíč

table-card + responsive

ID	Jméno	E-mail	Telefon	Město	Ulice	PSČ	Datum registrace	Poslední přihlášení	Poznámka
1	Jan Novák	jan@example.com	+420 601 123 456	Praha	Vodičkova 12	110 00	2026-01-15	2026-04-12	Aktivní uživatel
2	Eva Svobodová	eva@example.com	+420 602 654 321	Brno	Masarykova 88	602 00	2026-02-20	2026-04-10	Premium účet
3	Petr Dvořák	petr@example.com	+420 603 789 012	Ostrava	Stodolní 5	702 00	2026-03-01	2026-04-11	Nový uživatel

table-card + responsive + sticky-header

ID	Jméno	E-mail	Telefon	Město	Ulice	PSČ	Datum registrace
1	Jan Novák	jan@example.com	+420 601 123 456	Praha	Vodičkova 12	110 00	2026-01-15
2	Eva Svobodová	eva@example.com	+420 602 654 321	Brno	Masarykova 88	602 00	2026-02-20
3	Petr Dvořák	petr@example.com	+420 603 789 012	Ostrava	Stodolní 5	702 00	2026-03-01
4	Marie Králová	marie@example.com	+420 604 111 222	Plzeň	Náměstí 3	301 00	2026-03-10
5	Tomáš Černý	tomas@example.com	+420 605 333 444	Liberec	Jablonecká 7	460 01	2026-03-15
6	Lucie Veselá	lucie@example.com	+420 606 555 666	Olomouc	Horní 22	779 00	2026-03-20
7	Martin Procházka	martin@example.com	+420 607 777 888	Hradec Králové	Gočárova 15	500 02	2026-03-25
8	Kateřina Pokorná	katerina@example.com	+420 608 999 000	Pardubice	Zelená 9	530 02	2026-04-01

table-card + responsive + sticky-header s filtry

ID	Jméno	E-mail	Telefon	Město	Role	Datum registrace	Stav

1	Jan Novák	jan@example.com	+420 601 123 456	Praha	Admin	2026-01-15	Aktivní
2	Eva Svobodová	eva@example.com	+420 602 654 321	Brno	Editor	2026-02-20	Aktivní
3	Petr Dvořák	petr@example.com	+420 603 789 012	Ostrava	User	2026-03-01	Neaktivní
4	Marie Králová	marie@example.com	+420 604 111 222	Plzeň	Admin	2026-03-10	Aktivní
5	Tomáš Černý	tomas@example.com	+420 605 333 444	Liberec	Editor	2026-03-15	Aktivní
6	Lucie Veselá	lucie@example.com	+420 606 555 666	Olomouc	User	2026-03-20	Blokován
7	Martin Procházka	martin@example.com	+420 607 777 888	Hradec Králové	User	2026-03-25	Aktivní
8	Kateřina Pokorná	katerina@example.com	+420 608 999 000	Pardubice	Editor	2026-04-01	Aktivní

Barevné varianty (lighter / light)

Ovlivňují barvu pozadí u table-striped a table-hover.

lighter + striped + hover

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

light + striped + hover

Název	Typ	Popis
id	int	Primární klíč
name	string	Jméno uživatele
email	string	E-mailová adresa
created_at	datetime	Datum vytvoření

table-responsive

Horizontální scroll na menších zařízeních. Pod tabulkou se automaticky zobrazí nápověda, pokud je obsah širší než kontejner.

ID	Jméno	E-mail	Telefon	Město	Ulice	PSČ	Datum registrace	Poslední přihlášení	Poznámka
1	Jan Novák	jan@example.com	+420 601 123 456	Praha	Vodičkova 12	110 00	2026-01-15	2026-04-12	Aktivní uživatel
2	Eva Svobodová	eva@example.com	+420 602 654 321	Brno	Masarykova 88	602 00	2026-02-20	2026-04-10	Premium účet
3	Petr Dvořák	petr@example.com	+420 603 789 012	Ostrava	Stodolní 5	702 00	2026-03-01	2026-04-11	Nový uživatel

sticky-header

Hlavička tabulky zůstane vždy nahoře při scrollování. Při scrollu se automaticky zobrazí stín pod hlavičkou. Kontejner musí mít nastavenou max-height.

ID	Jméno	E-mail	Role
1	Jan Novák	jan@example.com	Admin
2	Eva Svobodová	eva@example.com	Editor
3	Petr Dvořák	petr@example.com	User
4	Marie Králová	marie@example.com	Admin
5	Tomáš Černý	tomas@example.com	Editor
6	Lucie Veselá	lucie@example.com	User
7	Martin Procházka	martin@example.com	User
8	Kateřina Pokorná	katerina@example.com	Editor
9	David Kučera	david@example.com	User
10	Anna Němcová	anna@example.com	Admin

sticky-header s filtry

Druhý řádek hlavičky může obsahovat filtrační inputy. Stín se zobrazí pod celou hlavičkou.

ID	Jméno	E-mail	Role	Stav

1	Jan Novák	jan@example.com	Admin	Aktivní
2	Eva Svobodová	eva@example.com	Editor	Aktivní
3	Petr Dvořák	petr@example.com	User	Neaktivní
4	Marie Králová	marie@example.com	Admin	Aktivní
5	Tomáš Černý	tomas@example.com	Editor	Aktivní
6	Lucie Veselá	lucie@example.com	User	Blokován
7	Martin Procházka	martin@example.com	User	Aktivní
8	Kateřina Pokorná	katerina@example.com	Editor	Aktivní
9	David Kučera	david@example.com	User	Neaktivní
10	Anna Němcová	anna@example.com	Admin	Aktivní

Přehled tříd

Třída	Popis
`table`	Základní styl tabulky
`table-striped`	Střídavé podbarvení řádků
`table-hover`	Zvýraznění řádku při hover
`table-bordered`	Ohraničení všech buněk
`table-borderless`	Bez jakýchkoli hranic
`table-sm`	Kompaktnější padding a menší font
`table-rounded`	Border-radius + vnější border (bez stínu)
`table-card`	Vizuál karty — border-radius, stín, pozadí
`lighter`	Světlejší varianta pozadí pro striped/hover
`light`	Tmavší varianta pozadí pro striped/hover

Kontejner	Popis
`.table-responsive-wrapper`	Obaluje `.table-responsive` + swipe hint (hint zůstává na místě)
`.table-responsive`	Horizontální scroll kontejner pro tabulku
`.table-sticky-header`	Sticky hlavička s automatickým stínem při scrollu (nastavit `max-height`)

<!-- Základní tabulka -->
<table class="table">...</table>

<!-- Kombinace modifikátorů -->
<table class="table table-striped table-hover">...</table>
<table class="table table-rounded table-striped">...</table>
<table class="table table-card table-striped">...</table>
<table class="table table-bordered table-sm">...</table>

<!-- Barevné varianty -->
<table class="table table-striped lighter">...</table>
<table class="table table-hover light">...</table>

<!-- Responsive (hint se generuje automaticky z JS) -->
<div class="table-responsive-wrapper">
    <div class="table-responsive">
        <table class="table">...</table>
    </div>
</div>

<!-- Sticky header -->
<div class="table-sticky-header" style="max-height: 400px">
    <table class="table table-striped">
        <thead>
            <tr><th>...</th></tr>
            <!-- Volitelně: filtrační řádek -->
            <tr><th><input class="form-control form-control-sm"></th></tr>
        </thead>
        <tbody>...</tbody>
    </table>
</div>

Dark & Light Theme

CSS soubory

Pravidla pro dark mode CSS

CSS proměnné (dark)

Přepínání tématu

Card

Alerts

Badges

Plné

Border

Buttons

Data Loader

Confirm Dialog

Form Elements

Input

Textarea

Select

Input Group

File Upload

Checkbox & Switch

Checkbox

Switch

Custom Select

DatePicker / DateTimePicker / DateRangePicker

DatePicker

DatePicker s vlastním formátem

DateTimePicker

TimePicker

DateRangePicker

Radio Button

Horizontální

Horizontální — small

Vertikální

Možnost A

Možnost B

TabCard

Výchozí

Light varianta

Light v .card (jako header)

Data atributy na tc-pane

Hash navigace

Modal

Options

Offcanvas

Page Loader

Dropdown

Popis

Zarovnání

Položky

hover-lift

Odkaz a tlačítko

Dropdown

Radio Button

TabCard

TabCard Light

Pagination

Oddělovače

<hr>

.card-divider

Pagination

Default

Default — small

Lighter

Light

Grid

Stejné sloupce

Fixní šířky (col-{n})

Smíšené šířky

Fixní + auto

Offset

Responsive (col-md-*, col-lg-*)

col-auto (šířka podle obsahu)

Vnořený grid

Tables

Základní tabulka

table-striped

table-hover

table-striped + table-hover

table-bordered

table-borderless

Responsive (col-md-, col-lg-)