Komponenty

Dialogy mají stejné rozložení: vlevo nastavení ve sbalovacích sekcích (Obsah, Vzhled, Chování, Rozšířené, Utility), vpravo živý náhled a výsledné HTML. Při vkládání komponenty ukazují pole ukázkové hodnoty jako placeholdery; při úpravě zobrazí skutečné hodnoty.

Po kliknutí do vložené komponenty se zobrazí plovoucí lišta: Upravit prvek, Upravit nadřazený prvek, odstavec nad/pod a Odstranit.

Jak dialog vypadá

Dialog karty se živým náhledem — Karta: vlevo nastavení, vpravo živý náhled. Každá změna se hned překreslí.

Galerie komponent — Galerie ukazuje komponenty s živými náhledy. Výběr můžete omezit podle skupiny nebo pomocí hledání.

Dialog modálního okna — Dialogové okno: komponenta se vloží i s tlačítkem, které ji otevírá.

Dialog horní navigace — Horní navigace: značka, odkazy, bod zlomu, barevný režim a umístění.

Dialog tabulky Bootstrapu — Tabulka: pruhy, rámečky a responzivní obal; řádky a slučování zůstávají na TinyMCE.

Dialog formulářového prvku — Formulářový prvek: popisek, skupina, plovoucí popisek a stavy validace.

Dialog	Vloží	Poznámka
Alert	`.alert` s nadpisem, křížkem, fade	Text se píše přímo v editoru.
Badge	`.badge.text-bg-*`	Vkládá se do textu na místo kurzoru.
Button	`<a class="btn">` nebo `<button>`	Obrys, velikost, neaktivní se správným ARIA.
Button group	`.btn-group`	Obyčejná tlačítka nebo přepínače (na čtyřce se přepínače nenabízejí).
Card	`.card` s hlavičkou, nadpisem, obrázkem, patičkou	Tělo se píše v editoru. Obrázek nahoře, dole, přes kartu nebo vedle textu.
List group	`.list-group`	Číslovaný, flush, vodorovný od breakpointu, barva a stav položek.
Progress	`.progress`	Pruhovaný, animovaný, skládaný.
Spinner	`.spinner-border` / `.spinner-grow`	Text pro čtečku povinný.
Accordion	`.accordion`	Položky s bohatým obsahem psaným v editoru. Jen Bootstrap 5.
Pagination, Breadcrumb	obal `<nav>`	Nedostupné šipky vypadnou z tabulátoru.
Navs and tabs	`.nav` + `.tab-content`	Panely přepínáte šipkami v plovoucí liště.
Navbar	`.navbar`	Značka, odkazy, breakpoint rozbalení, barevný režim, umístění.
Scrollspy	navigace + posuvná oblast	Sekce se upravují v editoru.
Toast, Modal, Offcanvas	komponenta + spouštěcí tlačítko	V editoru orámované s popiskem na webu skryté. U modalu jde vypnout hlavičku (bez ní ho čtečky ohlásí nadpisem), křížek, tělo i patičku; do patičky umí přidat tlačítko Zavřít s vlastním textem. Offcanvas jen Bootstrap 5; na čtyřce plugin pro Modal nenabízí celoobrazovkové varianty a pro Toast umístění.
Tooltip, Popover	spouštěč s `data-bs-*`	Umístění, posun, prodlevy, HTML obsah.
Dropdown, Collapse	spouštěč + panel	Směr, automatické zavírání, vodorovné skrývání.
Carousel	`.carousel`	Snímky se píší v editoru; přepínání šipkami v plovoucí liště.
Table	`.table` (+ `.table-responsive`)	Řádky hlavičky a zápatí, pruhy, rámečky; řádky a slučování nástroji TinyMCE.
Table cell	třídy na `td`/`th`	Na jednu buňku, řádek, sloupec nebo všechny buňky.
Figure	`<figure>` s popiskem	Rámeček, přizpůsobení šířce, obtékání, šířka.
Typography	nadpis, odstavec, citát	Velikosti display, úvodní odstavec, zarovnání.
Form control	popisek + input/select/textarea/check	Plovoucí popisky, skupiny vstupů, stavy ověření.
Placeholder	řádky `.placeholder`	Šířka, velikost, animace. Jen Bootstrap 5.
Ratio	rám `.ratio` (na čtyřce `.embed-responsive`)	Video nebo mapa s pevným poměrem stran.
Close button	`.btn-close` nebo tlačítko s textem (`.btn`)	V modalu, offcanvasu, alertu či toastu ve výchozím stavu zavře tuto komponentu (bez ID); jinak prvek, který zavírá, vyberete kliknutím v editoru. Podoba křížku nebo běžného tlačítka (barva, obrys, velikost).
Container, Custom classes	`.container*`; libovolné třídy na libovolném prvku

Obsah uvnitř komponent

Tělo dialogového okna, karty, skrývaného obsahu, oznámení, akordeonu, krátkého oznámení, postranního panelu i buňky tabulky se při uložení dialogu zachová i s tabulkami, citáty, obrázky s popiskem a inline styly. HTML zadané v dialogu se filtruje stejnými pravidly jako obsah editoru (schéma TinyMCE, valid_elements, ochrana proti XSS): co editor nepřijme ve zdrojovém kódu, nepřijme ani dialog. Chcete-li v obsahu komponent povolit další prvek nebo atribut, povolte ho v konfiguraci TinyMCE.

Co uložení dialogu zachová a co složí znovu

Uložením se celá komponenta nahradí, dialog proto znovu složí to, co sám řídí, a zbytek převezme.

Zachová se beze změny

Bohatý obsah těl (seznamy, odkazy, formátování, obrázky, vnořené bloky).
U karty hlavička, nadpis, podnadpis a patička včetně formátování, pokud dané pole v dialogu nezměníte. Upravené pole se uloží jako prostý text v původní značce (nadpis h5 zůstane h5). Další části karty, třeba druhé tělo nebo seznam, zůstanou v původním pořadí.
Atributy na nejvyšším prvku, které dialog nemá ve vlastním poli, například style, data-*, title, lang. Procházejí stejným filtrem jako obsah. Volba, kterou v dialogu vypnete, zůstane vypnutá.
width a height obrázku v kartě. Změníte-li adresu obrázku, staré rozměry a srcset se zahodí, protože by novému obrázku nesedly.
Panely collapse a akordeonu bez obvyklého obalu (card-body, accordion-body): obsahem je celý panel a dialog žádný obal nepřidá.

Složí se znovu z dialogu

Stavba, kterou dialog řídí sám: spouštěcí tlačítka, hlavička dialogového okna a křížek, indikátory a šipky, ID, atributy ARIA, datové atributy a třídy, které odpovídají nastavení v dialogu. Ručně napsané třídy zůstanou mezi vlastními třídami.
Ručně přidané značky uvnitř této struktury (mimo upravitelná těla) se mohou při uložení ztratit. Upravujte je ve zdrojovém kódu.

Bootstrap 4

S bootstrapui_version: '4' nemají Accordion, Offcanvas a Placeholder tlačítko ani položku nabídky; příkaz (např. BootstrapUiOffcanvas) ukáže hlášku, že komponenta v dané řadě není. Konfiguraci lišty proto nemusíte větvit, neznámé tlačítko TinyMCE vynechá. Přehled dalších rozdílů je v Požadavcích.