Bootstrap 4.6

Bootstrap je CSS framework. Umožňuje rychlé formátování HTML stránek za použití responzivního designu. Bootstrap 4 je starší verzí. Aktuální verze je Bootstrap 5. Rozhodla jsem se používat Bootstrap z důvodu, že umí lépe pracovat s obrázky a lépe je roztahovat dle šířky okna tak, jak potřebuji.

Dokumentace Bootstrap 4.6

Vybírám zde z dokumentace pouze ty části, které často používám:

• Layout: Containers (nastavení základního rozvržení stránky),
• Starter template (základní HTML 5 kostra),
• Grid system: How it works (rozvržení mřížky),
• Images (obrázky), Figures (obrázky s popiskem),
• Spacing (nastavení margin a padding),

Poznámka: Aktuální verze je Bootstrap 5. Dokumentace ke starším verzím (Bootstrap 4 a Bootstrap 3) je dostupná po výběru verze v hlavním menu.

Tutoriály

• Bootstrap Beginner Crash Course od Traversy Media – tutoriál pro začátečníky pro Bootstrap 3.

Obrázky – příklady mého způsobu použití

Obrázky bez popisu

Obrázek přes celou šířku (responzivní)

Responzivní obrázek, který se roztáhne na celou šířku. Obrázek je zarovnán automaticky vlevo. Drží svou vlastní šířku, při zmenšení okna se patřičně zmenší na šířku okna. Přidala jsem tam atribut padding pomocí bootstrap třídy p-3 a tag <a> pro odkaz. Třída m-3 u větších obrázků nefunguje zde úplně dle mých představ, lepší je p-3.

<a href="...">
<img src="..." class="img-fluid p-3" alt="...">
</a>

Obrázek s konkrétní šířkou

Obrázek s nastavenou konkrétní šířkou s umístěním vpravo. Přidala jsem tam atribut margin pomocí bootstrap třídy m-3 a tag <a> pro odkaz.

<a href="...">
  <img src="..." class="rounded float-right m-3" alt="..." width="300">
</a>

Vycentrovaný obrázek (neresponzivní)

Obrázek s nastavenou konkrétní šířkou s umístěním na střed. Přidala jsem tam atribut margin pomocí bootstrap třídy m-3 a width. Bez nastavení šířky se obrázek zobrazí ve své originální velikosti. Bohužel při zmenšení okna prohlížeče se šířka obrázku automaticky neupravuje.

<div class="text-center m-3">
  <img src="..." class="rounded" alt="..." width="300">
</div>

Vycentrovaný obrázek (responzivní)

Obrázek s nastavenou konkrétní šířkou s umístěním na střed. Přidala jsem tam třídu img-fluid a atribut margin pomocí bootstrap třídy m-3 a width. Bez nastavení šířky se obrázek zobrazí ve své originální velikosti. Při zmenšení okna prohlížeče se šířka obrázku automaticky upraví.

<div class="text-center m-3">
  <img src="..." class="rounded img-fluid" alt="..." width="600">
</div>

Náhledový obrázek

Náhledový obrázek s nastavenou konkrétní šířkou s umístěním vpravo. Přidala jsem tam atribut margin pomocí bootstrap třídy m-3 a tag <a> pro odkaz a atribut width.

<a href="...">
  <img src="..." class="img-thumbnail float-right m-2" alt="..." width="300">
</a>

Obrázek s popisem

Obrázek přes celou šířku

Obrázek s popisem bez nastavené konkrétní šířky (roztáhne se na celou šířku). Responzivně se velikost obrázku mění v případě zmenšení okna. Přidala jsem tam atribut margin pomocí bootstrap třídy m-3 a tag <a> pro odkaz. Popisek je automaticky zarovnán doleva.

<figure class="figure m-3">
  <a href="..."><img src="..." class="figure-img img-fluid rounded" alt="..."></a>
  <figcaption class="figure-caption">...</figcaption>
</figure>

Obrázek s popisem bez nastavené konkrétní šířky (roztáhne se na celou šířku). Responzivně se velikost obrázku mění v případě zmenšení okna. Přidala jsem tam atribut margin pomocí bootstrap třídy m-3, tag <a> pro odkaz a třídu text-center, která zajistí vycentrování popisku obrázku.

<figure class="figure m-3">
  <a href="..."><img src="..." class="figure-img img-fluid rounded" alt="..."></a>
  <figcaption class="figure-caption text-center">...</figcaption>
</figure>

Obrázek s konkrétní šířkou

Obrázek s popisem s nastavenou konkrétní šířkou (roztáhne se maximálně na toto maximum). Responzivně se velikost obrázku mění v případě zmenšení okna. Přidala jsem tam atribut width, tag <a> pro odkaz a margin pomocí bootstrap třídy m-3.

<figure class="figure m-3">
  <a href="..."><img src="..." class="figure-img img-fluid rounded" alt="..." width="600"></a>
  <figcaption class="figure-caption">...</figcaption>
</figure>

Clearfix

Pokud obrázek využívá float (obtékání) a přesahuje do dalších elementů tak, jak nechceme, tak je nutné zrušit obtékání pomocí dalšího div elementu:

<div class="clearfix">...</div>