Základní použití

Tahle kapitola je pro ty, kdo v editoru píšou obsah. Předpokládá, že je plugin nainstalovaný podle Rychlého startu a tlačítka jsou v liště (referenční konfigurace přidá všechna).

Vložení komponenty

Dejte kurzor tam, kam má komponenta přijít.
Klikněte na její tlačítko v liště, třeba karta (Card). Stejné dialogy jsou i v nabídce Vložit, v rozbalovací nabídce Bootstrap (bootstrapui) a v galerii prvky stránky (Components), která ukazuje všechny komponenty jako živý náhled.
Vyplňte dialog. Vlevo je nastavení ve sbalovacích sekcích (Obsah, Vzhled, Chování, Rozšířené, Utility), vpravo živý náhled a výsledné HTML, které se mění, jak píšete. Prázdná pole ukazují ukázkové hodnoty.
Klikněte na Vložit. Komponenta se vloží na místo kurzoru jako čisté HTML Bootstrapu.

Dialog karty — Vlevo nastavení, vpravo živý náhled a HTML.

Interaktivní komponenty (modal, offcanvas, toast, collapse, dropdown, tooltip, popover) se vkládají spolu s tlačítkem, které je otevírá. Komponenty, které jsou na stránce skryté (třeba modal), editor kreslí orámované a popsané, takže jde upravit jejich obsah. Přehrát / otevřít v náhledu ukáže, jak se chovají; potřebuje v konfiguraci bootstrapui_js.

Úprava komponenty

Klikněte kamkoli do komponenty. Vedle ní se objeví plovoucí lišta. Její první položka říká, co je vybrané (třeba karta (Card)).
Klikněte na tužku, Upravit prvek. Otevře se stejný dialog s aktuálními hodnotami.
Změňte, co potřebujete, a klikněte na Uložit.

Text uvnitř komponent (tělo karty, zpráva upozornění) jde psát i přímo v editoru, bez dialogu.

Plovoucí lišta má další nástroje:

Nástroj	Co dělá
Upravit nadřazený prvek	Otevře dialog komponenty kolem té aktuální, třeba karty kolem tlačítka.
Upravit skupinu tlačítek	Na tlačítku ve skupině: nastavení celé skupiny.
Odstavec nad prvkem / Odstavec pod prvkem	Přidá vedle komponenty prázdný odstavec, aby šlo psát dál.
p ⇄ div	Přepne blok mezi odstavcem a `div`em.
Odstranit prvek	Smaže komponentu.
Předchozí snímek / Další snímek, Předchozí panel / Další panel	V karuselu nebo v záložkách: ukáže k úpravě jiný snímek nebo panel.

Nad první komponentou a mezi dvěma komponentami často není kam dát kurzor. Najeďte myší na mezeru, objeví se modrý pruh + Odstavec; kliknutím tam odstavec přidáte.

Rozvržení stránky

Klikněte na Vložit rozložení (bootstrapuilayout).
V návrháři mřížky zvolte počet sloupců, přepínáním breakpointů si prohlédněte rozložení na různých obrazovkách, tažením změňte pořadí sloupců a kliknutím na sloupec nastavte šířku, odsazení a zarovnání.
Klikněte na Vložit. Vznikne .row se sloupci .col-*; do sloupců se píše jako obvykle.

Po kliknutí do řádku nebo sloupce se objeví jeho vlastní lišta: přidat, upravit, duplikovat, přesunout a odstranit. Vybrat řádek nebo sloupec (bootstrapuipath) najde ten správný ve vnořených mřížkách. Zobrazit hranice rozložení (bootstrapuistructure) vykreslí řádky a sloupce v editoru, aniž by změnilo ukládané HTML. Podrobnosti jsou v kapitole Návrhář mřížky.

Třídy Bootstrapu

Nabídka Styly. Označte text nebo dejte kurzor do bloku, otevřete Styly a vyberte ze skupiny Bootstrap: barvy, velikost písma, odsazení, rámečky, zobrazení. Výběr hodnoty se zatržítkem ji odebere. Viz Utility.
Utility v každém dialogu. Každý dialog komponenty má sekci Utility pro odsazení, rozměry, zobrazení, flexbox, barvy, rámečky a text.
Vlastní třídy elementu (bootstrapuiclasses). Přidá prvku pod kurzorem libovolné třídy, i třídy vašeho vlastního motivu.

Tabulky

Bootstrap tabulka (Table) (bootstrapuitable) vloží tabulku s třídami Bootstrapu: pruhy, rámečky, barevný tón, styl záhlaví, kompaktní řádky, zvýraznění řádku pod myší, popisek a vodorovné posouvání na úzkých obrazovkách. Řádky, sloupce a slučování buněk se upravují nástroji tabulky z TinyMCE. Nabídka Tabulka (bootstrapuitablemenu) je dává na jedno místo, spolu s nastavením buňka tabulky (Table cell) (barevný tón, svislé zarovnání, buňka záhlaví), které platí pro jednu buňku, řádek, sloupec nebo celou tabulku.

Co se ukládá

Editor ukládá obyčejné HTML Bootstrapu: žádné shortcody, žádné obalové prvky, žádné inline styly. Web ho zobrazí se svým vlastním stylem Bootstrapu. Když plugin odeberete, obsah zůstane platný. Třídy, které plugin nezná, se při úpravě komponenty zachovají.