Vzhled stylování obsahu (Styleguide)

Většinu níže ukázaných prvků lze naklikat v admin prostředí editoru článku výběrem textu či elementu a přiřadit mu styl pomocí roletkového výberu „Styly“ a „Formát“. Pokud je u prvku uvedena cesta a název k šabloně, znamená to, že tento prvek lze kompletně načíst přes šablonu jako celek a následně upravit (přepsat text, vyměnit obrázek atd.).


Nadpisy

Nadpisy lze přiřazovat pomocí roletkového výběru „Formát„.

Nadpis H1

Nadpis H2

Nadpis H3

Nadpis H4

Nadpis H5
Nadpis H6

Odstavce

Odstavce lze stylovat pomocí roletkového výběru „Style„.

Normální odstavec – zarovnaný vlevo

Defaultní nastavení bez stylu. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Normální odstavec – zarovnaný vpravo

Přiřazený styl text-right. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Normální odstavec – zarovnaný soumerne

Přiřazený styl text-justify. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Normální odstavec – zarovnaný na střed

Přiřazený styl text-center. Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Zvýrazněné odstavce podbarvením

Odstavce lze stylovat pomocí roletkového výběru „Style„.

Přiřazený styl odstavecUvodnik. Úvodník, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecVystraha. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.
Výstraha

Přiřazený styl odstavecPotvrzeni. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecPoznamka. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecRada. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecDulezite. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Přiřazený styl odstavecCitace. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Obrázkové odstavce s malou ikonou

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-malou-ikonou\Vystraha-m.html

Přiřazený styl odstavecVystrahavystrahaM. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-malou-ikonou\Potvrzeni-m.html

Přiřazený styl odstavecPotvrzenipotvrzeniM. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-malou-ikonou\Poznamka-m.html

Přiřazený styl odstavecPoznamkapoznamkaM. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-malou-ikonou\Rada-m.html

Přiřazený styl odstavecRadaradaM. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-malou-ikonou\Dulezite-m.html

Přiřazený styl odstavecDuleziteduleziteM. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-malou-ikonou\Citace-m.html

Přiřazený styl odstavecCitacecitaceM. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.

Obrázkové odstavce se střední ikonou

Název šablony s cestou v editoru: \Odstavce-podbarvene\Se-stredni-ikonou\Vystraha-s.html

Přiřazený styl odstavecVystrahavystrahaS. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Název šablony s cestou v editoru: \Odstavce-podbarvene\Se-stredni-ikonou\Potvrzeni-s.html

Přiřazený styl odstavecPotvrzenipotvrzeniS. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Název šablony s cestou v editoru: \Odstavce-podbarvene\Se-stredni-ikonou\Poznamka-s.html

Přiřazený styl odstavecPotvrzenivystrahaS. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Název šablony s cestou v editoru: \Odstavce-podbarvene\Se-stredni-ikonou\Rada-s.html

Přiřazený styl odstavecRadaradaS. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Název šablony s cestou v editoru: \Odstavce-podbarvene\Se-stredni-ikonou\Dulezite-s.html

Přiřazený styl odstavecDuleziteduleziteM. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Název šablony s cestou v editoru: \Odstavce-podbarvene\Se-stredni-ikonou\Citace-s.html

Přiřazený styl odstavecCitacecitaceM. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus.

Obrázkové odstavce s velkou ikonou

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-velkou-ikonou\Vystraha-v.html

Přiřazený styl odstavecVystrahavystrahaV. Výstraha, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-velkou-ikonou\Potvrzeni-v.html

Přiřazený styl odstavecPotvrzenipotvrzeniV. Potvrzení, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.
Potvrzení

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-velkou-ikonou\Poznamka-v.html

Přiřazený styl odstavecPoznamkapoznamkaV. Poznámka, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-velkou-ikonou\Rada-v.html

Přiřazený styl odstavecRadaradaV. Rada, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-velkou-ikonou\Dulezite-v.html

Přiřazený styl odstavecDuleziteduleziteV. Dulezite, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Název šablony s cestou v editoru: \Odstavce-podbarvene\S-velkou-ikonou\Citace-v.html

Přiřazený styl odstavecCitacecitaceV. Citace, tučně, kurzíva, odkaz. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Barevné bloky s obrázkem a odstavci

Do barevného bloku je možné nahrát jakýkoliv obrázek, který budou optékat odstavce. Na blok lze aplykovat barevné styly předchozích odstavců. Pro rozšířené úpravy prvků uvnitř bloku je nutné se přepnout do html kodu!

Název šablony s cestou v editoru: \Bloky-s-obrazky-a-odstavci\Obrazek-vlevo-plus-odstavce.html

rada-big

Kliknutím na obrázek můžete pomocí ikony „Vložit/upravit“ obrázek změnit. Odentrováním můžete dále přidávat další odstavce. Změnu barvy pozadí však lze zmenit jen po přepnutí-se do html kodu a přepsání třídy odstavecRada obalového <div>. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed.

Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Název šablony s cestou v editoru: \Bloky-s-obrazky-a-odstavci\Obrazek-vlevo-a-vpravo-plus-odstavce.html

vyhoda-big

Kliknutím na obrázek můžete pomocí ikony „Vložit/upravit“ obrázek změnit. Odentrováním můžete dále přidávat další odstavce. Změnu barvy pozadí však lze zmenit jen po přepnutí-se do html kodu a přepsání třídy odstavecPotvrzeni obalového <div>. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

nevyhoda-big

Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Další možnosti úprav v bloku

thumb-120x120

Nadpis H2

Do bloku je možné vkládat další prvky jako třeba nadpisy, nebo odrážkový seznam.

Seznam ovšem nesmí být vedle obrázku umístěného vlevo (odrážky se schovají pod obrázek).

Ideální umístění orážkového seznamu je mimo obrázky, případně použít obrázek umístěný vpravo.

  • Morbi leo libero non Suspendisse
  • pharetra diam vel massa. Neque
  • Quisque ac pellentesque eu sodales egestas purus pellentesque
  • Phasellus Nullam. Dolor hac condimentum pede quam In magna tellus semper id consectetuer.

Seznamy

Seznam lze stylovat pomocí ikon „Řazený seznam“ a „Neřazený seznam„.

Jmenný seznam – bez odrážek horizontální

Seznam lze stylovat pomocí roletkového výběru „Style„. Přiřazený styl list-inline.

  • Odrazka
  • Odrazka
  • Odrazka
  • Odrazka
  • Odrazka

Jmenný seznam – bez odrážek

Název šablony s cestou v editoru: \Seznamy\Bezodrazkovy-seznam.html

Seznam lze stylovat pomocí roletkového výběru „Style„. Přiřazený styl list-unstyled.

  • odrazka
  • odrazka s odkazem
  • odrazka strong
  • odrazka tučně – výrazně
  • odrážka kurzíva

Jmenný seznam – odrážky kolečka

Seznam lze stylovat pomocí ikony „Neřazený seznam„.

  • odrazka
  • odrazka s odkazem
  • odrazka strong
  • odrazka tučně – výrazně
  • odrážka kurzíva

Jmenný seznam – obrázkové odrážky

Název šablony s cestou v editoru: \Seznamy\Obrazkovy-seznam.html

Seznam lze stylovat pomocí roletkového výběru „Style„. Přiřazený styl seznam-obrazkovy.

  • hlavní obrázková odrážka webu
  • hlavní obrázková odrážka webu s odkazem
  • hlavní obrázková odrážka webu strong
  • hlavní obrázková odrážka webu kurzíva

Číselný seznam

Seznam lze stylovat pomocí ikony „Řazený seznam„.

  1. odrazka
  2. odrazka s odkazem
  3. odrazka strong
  4. odrazka tučně – výrazně
  5. odrážka kurzíva

Číselný seznam s obrázky čísel do 10

Upravený Řazený seznam. Celému seznamu je přiřazen styl seznam-ciselny jednotlivým odrážkám pak postupně slul jedna, dva, tri, ctyri, pet, sest, sedm, osm, devet, deset.

Název šablony s cestou v editoru: \Seznamy\Ciselny-seznam.html

  1. jedna, tučně, kurzíva, výrazně, nevýrazně, odkaz
  2. dva
  3. tři
  4. čtyři
  5. pět
  6. šest
  7. sedm
  8. osm
  9. devět
  10. deset

Seznamy v bloku (výhoda – nevýhoda)

Název šablony s cestou v editoru: \Seznamy\Blok-vyhoda-s-malou-ikonou.html

  • Výhoda quis tellus Vivamus natoque Donec

Název šablony s cestou v editoru: \Seznamy\Blok-nevyhoda-s-malou-ikonou.html

  • Nevýhoda quis tellus Vivamus natoque Donec

Název šablony s cestou v editoru: \Seznamy\Blok-vyhoda-se-stredni-ikonou.html

  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec

Název šablony s cestou v editoru: \Seznamy\Blok-nevyhoda-se-stredni-ikonou.html

  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec

Název šablony s cestou v editoru: \Seznamy\Blok-vyhoda-s-velkou-ikonou.html

  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec
  • Justo id amet consequat natoque commodo fringilla

Název šablony s cestou v editoru: \Seznamy\Blok-nevyhoda-s-velkou-ikonou.html

  • Lorem ipsum dolor sit amet
  • consectetuer quis tellus Vivamus natoque Donec
  • Justo id amet consequat natoque commodo fringilla

Definiční seznam

Název šablony s cestou v editoru: \Seznamy\Definicny-seznam.html

Definiční Termín 1
Vysvětlení termínu 1 ….. Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam.
Definiční Termín 2
Vysvětlení termínu 2 …..Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam.
Definiční Termín 3
Vysvětlení termínu 3 …..Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam.

Externí odkaz

Odkaz směřující na  jiný web může být doplněn upozorňující ikonou. Přiřazený styl externi-odkaz.

Externí odkaz na www.webprezent.cz

Obrázky

Základní styly obrázků

Obrázkům lze přiřadit základní styly img-rounded (oblé rohy), img-circle (kulatý obrázek) a img-thumbnail (obrázek s rámečkem). Styly lze i kombinovat a získat tak třeba kulatý obrázek s rámečekem.

Název šablony s cestou v editoru: \Obrazky\Obrazky-s-rameckem\Obrazek-vlevo.html

thumb-120x120
thumb-120x120
thumb-120x120

Obrázek přes celou šířku obsahu

Obrázek přes celou šířku webu, případně obrázek uprostřed stránky center-block. Přidáním stylu img-thumbnail pak obrázek doplní rámeček.

Název šablony s cestou v editoru: \Obrazky\Obrazek-cela-sirka-stred.html

640x480

Obrázek obtékaný textem zprava

Název šablony s cestou v editoru: \Obrazky\Obrazek-obtekany-textem-zprava.html

thumb-120x120

Obrázek se stylem img-left. Přidán je i rámeček img-thumbnail. Amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.

Obrázek obtékaný textem zleva

Název šablony s cestou v editoru: \Obrazky\Obrazek-obtekany-textem-zleva.html

thumb-120x120

Obrázek se stylem img-right. zajistí zarovnání obrázku vpravo. Přidán je i rámeček img-thumbnail. Amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.

Fotogalerie (3 obrázky)

Název šablony s cestou v editoru: \Obrazky\Fotogalerie-3-fotky.html

Fotogalerie (6 obrázky)

Název šablony s cestou v editoru: \Obrazky\Fotogalerie-6-fotek.html

Fotogalerie (4 obrázky)

Název šablony s cestou v editoru: \Obrazky\Fotogalerie-4-fotky.html

Fotogalerie (8 obrázky)

Název šablony s cestou v editoru: \Obrazky\Fotogalerie-8-fotek.html

Tabulky

Pomocí editoru lze snadno a rychle přidat (nebo odebrat) další sloupce a řádky při zachování stylu přes ikony vložení řádku, či sloupce (potažmo smazat řádek, či sloupec).

Tabulka základní styl

Přiřazený styl table.

Název šablony s cestou v editoru: \Tabulky\Tabulka-zakladni.html

Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

Tabulka se střídajícími-se zvýrazněnými řádky

Přiřazený styl tabletable-striped.

Název šablony s cestou v editoru: \Tabulky\Tabulka-stridajicise-radky.html

Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

Tabulka s rámečky

Přiřazený styl tabletable-bordered.

Název šablony s cestou v editoru: \Tabulky\Tabulka-s-ramecky.html

Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

Tabulka se zvýrazněním řádku po najetí myši

Přiřazený styl tabletable-hover.

Název šablony s cestou v editoru: \Tabulky\Tabulka-hover-radky.html

Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

Tabulka s menším řádkováním

Přiřazený styl tabletable-condensed.

Název šablony s cestou v editoru: \Tabulky\Tabulka-male-radkovani.html

Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota

Tabulka s barevnými řádky

Přiřazený styl table a řádkům přiřazeny postupně styly active, success, info, warning, danger.

Název šablony s cestou v editoru: \Tabulky\Tabulka-barevne-radky.html

Název sloupce Název sloupce Název sloupce
Styl active: Hodnota Hodnota Hodnota
Styl success: Hodnota Hodnota Hodnota
Styl info: Hodnota Hodnota Hodnota
Styl warning: Hodnota Hodnota Hodnota
Styl danger: Hodnota Hodnota Hodnota

Kombinovaná tabulka

Výše uvedené styly lze různě kombinovat se zachváním základního stylu table.

Přiřazený styl table, table-striped, table-bordered a dvěma řádkům přiřazeny styly success a danger.

Název sloupce Název sloupce Název sloupce
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota
Název řádku: Hodnota Hodnota Hodnota