Manuál pro uživatele

Vítejte na stránce s návody :-)

jak to zapsat - tento příklad?

<div class="row">

   <div class="cardobal col-lg-4 col-md-4 col-xs-12">
      <div class="dlazdice1">
           <p><a href="#"><img src="/images/LOGO_MUZEUM_ZB_zakladni_cervene.jpg" width="100%" alt="LOGO MUZEUM ZB zakladni cervene" /></a></p>
          <h3 style="text-align: left;">Výroční zprávy</h3>
       </div>
   </div>

   <div class="cardobal col-lg-4 col-md-4 col-xs-12">
      <div class="dlazdice1">
         <p><a href="#"><img src="/images/LOGO_MUZEUM_ZB_zakladni_modre.jpg" alt="LOGO MUZEUM ZB zakladni cervene" width="312" height="312" /></a></p>
         <h3 class="text-align">Logotyp muzea</h3>
       </div>
   </div>

   <div class="cardobal col-lg-4 col-md-4 col-xs-12">
       <div class="dlazdice1">
        <p><a href="#"><img src="/images/LOGO_MUZEUM_Z__zakladni_cerne.jpg" width="183" alt="LOGO MUZEUM Z zakladni cerne" height="183" /></a></p>
        <h3>Ostatní</h3>
        </div>
    </div>

</div>

Class="dlazdice2"

Tato třída tovří obraničení (rámeček):

• na výšku se automaticky přizpůsobí celé řadě rámečků aby byly stejně velké podle toho největšího
• šířku určujete třídou gridu (kolik dvanáctin se má zobrazit)
• zápis stejný jen je třída s dvojkou :-)

Jak je to s gridem? - responzivní rozložení

Tato třída tovří obraničení (rámeček):

• přesné a jasné informace jsou zde: https://getbootstrap.com/docs/5.0/layout/grid/
• Zjednodušeně:
  • Danému objektu například obrázku nebo oblasti (<div>) dáváte třídu, která učí jeho šířku -> kolik dvanáctin šířky zobrazení
  • Je potřeba urřit tu šířku pro jednotlivá zařízení pro
    • Monitor: "lg"
    • tablet a menší obrazovky : "md"
    • mobilní zobrazení: "xs"
  • záps třídy se skládá ze tří částí spojených pomlčkou
    • první část je vždy "col"
    • druhá část je zařízení
    • třetí je počet dvanáctin
    • příklad: "col-lg-6"
  • Tídy napište všechny tři oddělené mezerou jako například: class="col-lg-6 co-md-6 col-xs-12"
• Všechny takto připravené oblasti je dobré uzavřít do takové obálky pro kterou existuje třída "row"

Příklad:

Další zajímavé třídy:

• Zaoblení rohů obrázku: "rounded"
• Stíny různých velikostí: "shadow-sm", "shadow" nebo "shadow-lg"  (zkuste třeba k nějakému obrázku)
• Text zarovnaný na střed "text-center"
• Velikost textu - pokud chcete něco zvýraznit, tak můžete použít od největšího "fs-1" až po menší "fs-6"  (fs-2, fs-3, ...)
• Barva: navíc jsem vám připravil třídu "barva" která změní barvu textu tam kde třídu použijete na tuto barvu
  • například chcete zěmit barvu nadpisu tak to bude : <h3 class="barva">Tady je ten nadpis</h3>