Nadpis H1
<p class="large">Lorem ipsum dolor sit...</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris. Vivamus quam lorem, hendrerit ac elementum sed, pretium at arcu. Suspendisse sed luctus magna. Nunc convallis ut mi at viverra. Donec malesuada ipsum et enim iaculis tincidunt. Sed cursus odio sed diam rhoncus, eget efficitur felis pharetra. Aliquam feugiat diam quis nulla placerat pellentesque. Maecenas mauris turpis, vestibulum faucibus consequat eu, bibendum ac tellus. Suspendisse fringilla convallis elit, vitae gravida tortor.
Nadpis H2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
Nadpis H3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
Nadpis H4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
Nadpis H5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
Nadpis H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
ÚPRAVA TEXTU
link without underline lorem ipsum
<a class="no-decoration">link without underline</a>& lorem ipsum
strong lorem ipsum
<strong>strong</strong>& lorem ipsum
em lorem ipsum
<em>em</em> lorem ipsum
mark lorem ipsum
<mark>mark</mark> lorem ipsum
sub lorem ipsum
<sub>sub</sub> lorem ipsum
sup lorem ipsum
<sup>sup</sup> lorem ipsum
cite lorem ipsum
<cite>cite</cite> lorem ipsum
abbr lorem ipsum
TIP: Doporučuji používat tooltipy
<abbr title="ABBR">abbr</abbr> lorem ipsum
del lorem ipsum
<del>del</del> lorem ipsum
small lorem ipsum
<small>small</small> lorem ipsum
TLOUŠŤKA PÍSMA
fw-300
<span class="fw-300">fw-300</span>
fw-400
<span class="fw-400">fw-400</span>
fw-500
<span class="fw-500">fw-500</span>
ZAROVNÁNÍ TEXTU
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<p class="text-left">Lorem ipsum dolor sit...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<p class="text-right">Lorem ipsum dolor sit...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<p class="text-center">Lorem ipsum dolor sit...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<p class="text-justify">Lorem ipsum dolor sit...</p>BLOKY
CODE
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<code>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
</code>
Pro rychlý převod kódu do html entit pro zobrazení na stránce je možné využít automatiku: html-online.com/editor
CITACE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque.
Zdroj: wiki
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque.</p>
<span class="source">Zdroj: wiki</span>
</blockquote>
PRE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<pre>Lorem ipsum dolor sit...</pre>
SEZNAMY
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ul>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ol>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
<ul class="style-none">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ul>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
<ul class="list-group">
<li class="list-group-item">Lorem</li>
<li class="list-group-item">Ipsum</li>
<li class="list-group-item">Dolor</li>
<li class="list-group-item">Sit</li>
<li class="list-group-item">Amet</li>
</ul>
- Lorem
- Ipsum
- Dolor
- Sit
- Amet
<ul class="list-group list-group-flush">
<li class="list-group-item">Lorem</li>
<li class="list-group-item">Ipsum</li>
<li class="list-group-item">Dolor</li>
<li class="list-group-item">Sit</li>
<li class="list-group-item">Amet</li>
</ul>
- Lorem
- Ipsum
- Dolor
<ul class="list-inline">
<li class="list-inline-item">Lorem</li>
<li class="list-inline-item">Ipsum</li>
<li class="list-inline-item">Dolor</li>
</ul>
OBRÁZKY
OBRÁZEK S POPISEM
<figure class="figure">
<img src="/images/icons/sslmarket-cist-faq.jpg" class="figure-img img-fluid" alt="Image description">
<figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
</figure>
Popis obrázků se zarovnává stejnou třídou jako běžný text, viz Zarovnání textu.
OBRÁZEK NA STŘED, S POPISEM
<figure class="figure w-100 text-center">
<img src="/images/icons/sslmarket-cist-faq.jpg" class="figure-img img-fluid" alt="Image description">
<figcaption class="figure-caption text-center">A caption for the above image.</figcaption>
</figure>
OBRÁZEK NA STŘED, BEZ POPISU
<div class="text-center">
<img src="/images/icons/sslmarket-cist-faq.jpg" class="img-fluid" alt="Image description">
</div>
OBRÁZEK VLEVO, OBTÉKANÝ TEXTEM
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque.
Morbi sed vehicula sem, ut mollis mauris. Vivamus quam lorem, hendrerit ac elementum sed, pretium at arcu. Suspendisse sed luctus magna. Nunc convallis ut mi at viverra. Donec malesuada ipsum et enim iaculis tincidunt. Sed cursus odio sed diam rhoncus, eget efficitur felis pharetra.
Aliquam feugiat diam quis nulla placerat pellentesque. Maecenas mauris turpis, vestibulum faucibus consequat eu, bibendum ac tellus. Suspendisse fringilla convallis elit, vitae gravida tortor. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<p>
<img src="/images/icons/sslmarket-cist-faq.jpg" class="img-fluid float-left" alt="Image description">
Lorem ipsum dolor sit...
</p>
OBRÁZEK VPRAVO, OBTÉKANÝ TEXTEM
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque.
Morbi sed vehicula sem, ut mollis mauris. Vivamus quam lorem, hendrerit ac elementum sed, pretium at arcu. Suspendisse sed luctus magna. Nunc convallis ut mi at viverra. Donec malesuada ipsum et enim iaculis tincidunt. Sed cursus odio sed diam rhoncus, eget efficitur felis pharetra.
Aliquam feugiat diam quis nulla placerat pellentesque. Maecenas mauris turpis, vestibulum faucibus consequat eu, bibendum ac tellus. Suspendisse fringilla convallis elit, vitae gravida tortor. Maecenas vel dapibus nulla, quis ultrices lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut semper est, sit amet maximus sem. Donec a lectus leo. Maecenas vel dapibus nulla, quis ultrices lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium fringilla scelerisque. Morbi sed vehicula sem, ut mollis mauris.
<p>
<img src="/images/icons/sslmarket-cist-faq.jpg" class="img-fluid float-right" alt="Image description">
Lorem ipsum dolor sit...
</p>
ALERTY
<div class="alert alert-success" role="alert"> This is a success alert!</div> <div class="alert alert-danger" role="alert"> This is a danger alert! </div> <div class="alert alert-warning" role="alert"> This is a warning alert! </div> <div class="alert alert-info" role="alert"> This is an info alert! </div>TLAČÍTKA
Primary Secondary Light Link
<a class="btn btn-primary">Primary</a>
<a class="btn btn-secondary">Secondary</a>
<a class="btn btn-secondary">Light</a>
<a class="btn btn-secondary">Link</a>
TOOLTIPY
Tooltipy je možné používat prakticky na všechny tagy html, nejen tlačítka. Například kdekoliv v textu na tag span nebo v ikoně . Přidává se pouze atribut data-toggle a atribut title. Při nepoužití atributu data-placement se zobrazuje tooltip ve výchozím stavu nad prvkem.
<span data-toggle="tooltip" title="Tooltip na spanu">
tag span
</span>
<i class="fa fa-info-circle" data-toggle="tooltip" title="Tooltip v ikoně"></i>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Top">
Tooltip on top
</button>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Right">
Tooltip on right
</button>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Bottom">
Tooltip on bottom
</button>
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Left">
Tooltip on left
</button>PROGRES BAR
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
25%
</div>
</div>
KURZOR MYŠI
cursor-help
<span class="cursor-help">cursor-help</span>
cursor-pointer
<span class="cursor-pointer">cursor-pointer</span>
BARVY TEXTU
Při použití u odkazů se hodí přidat třídu ch-colour, kde colour je zvolená barva, aby barva zůstala zachována i při najetí myši. Příklad: span class="c-black ch-black"
c-black colour
<span class="c-black">c-black colour</span>
c-red colour
<span class="c-red">c-red colour</span>
c-white colour
<span class="c-white">c-white colour</span>
c-blue colour
<span class="c-blue">c-blue colour</span>
c-dark-blue colour
<span class="c-dark-blue">c-dark-blue colour</span>
c-orange colour
<span class="c-orange">c-orange colour</span>
c-grey colour
<span class="c-grey">c-grey colour</span>
c-dark-green colour
<span class="c-dark-green">c-dark-green colour</span>
c-green colour
<span class="c-green">c-green colour</span>
c-browser-green colour
<span class="c-browser-green">c-browser-green colour</span>
BARVY POZADÍ
bg-transparent background
<span class="bg-transparent">bg-transparent background</span>
bg-white background
<span class="bg-white">bg-white background</span>
bg-light-grey background
<span class="bg-light-grey">bg-light-grey background</span>
bg-grey background
<span class="bg-grey">bg-grey background</span>
bg-orange background
<span class="bg-orange">bg-orange background</span>
bg-dark-grey background
<span class="bg-dark-grey">bg-dark-grey background</span>
bg-light-blue background
<span class="bg-light-blue">bg-light-blue background</span>
bg-blue background
<span class="bg-blue">bg-blue background</span>
bg-dark-blue background
<span class="bg-dark-blue">bg-dark-blue background</span>
UTILITY
no-padding - Odstraní vnitřní odsazení ze všech stran
no-margin - Odstraní vnější odsazení ze všech stran
no-border - Odstraní rámeček
arrow-right - Přidá šipku za prvek, pohyblivá při najetí myši
badge - přidá spanu label, například LABEL , kombinuje se s třídou barvy, pozadí a tloušťky textu ( span class="badge c-white bg-orange fw-400" )
