Zvolte jazyk

Manuál pro uživatele

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

 


Class="dlazdice1"

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

  • na výšku se automaticky přizpůsobí obshu rámečku
  • šířku určujete třídou gridu (kolik dvanáctin se má zobrazit)

LOGO MUZEUM ZB zakladni cervene

Výroční zprávy

LOGO MUZEUM ZB zakladni cervene

Logotyp muzea

LOGO MUZEUM Z zakladni cerne

Ostatní

 

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 :-)

LOGO MUZEUM ZB zakladni cervene

Výroční zprávy

LOGO MUZEUM ZB zakladni cervene

Logotyp muzea

LOGO MUZEUM Z zakladni cerne

Ostatní

 


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:

tady je jedna polovina "col-lg-6"

tady je třetina "col-lg-4"

tady je šestina "col-lg-2"

Zápis příkladu:

<div class="row">
   <div class="cardobal col-lg-6 col-md-6 col-xs-12">
     <div class="dlazdice2">
        <p>tady je jedna polovina "col-lg-6"</p>
     </div>
   </div>


   <div class="cardobal col-lg-4 col-md-4 col-xs-12">
      <div class="dlazdice2">
      <p>tady je třetina "col-lg-4"</p>
      </div>
   </div>


  <div class="cardobal col-lg-2 col-md-2 col-xs-12">
     <div class="dlazdice2">
      <p>tady je šestina "col-lg-2"</p>
      </div>
   </div>

</div>


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>
Tvorba internetových stránek Dejtonaweb.cz | Jan Adamec