BS műhely.
← Minden modul

03. MODUL · BOOTSTRAP 5

Kártyák.

A card komponens felépítése, változatai és saját effektek

A MODULRÓL

Mit tanulsz meg?

  • a kártya részei: fejléc, kép, törzs, lábléc
  • kép a szöveg mögött, vízszintes kártya
  • kártyacsoport és kártyák a rácsban
  • saját effektek: lebegés, fordulás, információs réteg

1. FEJEZET

A kártya felépítése

A .card egy keretes doboz; benne a .card-body adja a belső margót. A törzsben a .card-title és a .card-text a cím és a szöveg; a kép .card-img-top osztállyal kerül a tetejére, kitöltve a kártya szélességét. A .card-header és a .card-footer elválasztott fej- és lábrész. A kártyák egymás mellé a rácsban kerülnek (row + col-md-4); a h-100 egyforma magasra nyújtja őket.

  • card, card-body
  • card-title, card-text
  • card-img-top
  • card-header, card-footer
  • h-100 egyforma magasság
  • shadow-sm árnyék

A képek mérete eltérhet: a .kep-200 saját osztály egységesen 200 px magasra vágja őket (object-fit: cover). A Bootstrap .card-img-top osztályát nem írjuk felül – saját osztállyal egészítjük ki.

2. FEJEZET

Szöveg a képen és vízszintes kártya

A .card-img-overlay a kártya teljes területére, a kép fölé teszi a törzset. A fehér szöveg olvashatóságát egy alulról sötétedő színátmenet biztosítja (a saját .kartya-sotetit osztály). A vízszintes kártya belül egy rácssor: a kép col-md-4, a szöveg col-md-8; a g-0 eltünteti a hézagot. Mobilon a kép a szöveg fölé kerül.

3. FEJEZET

Interaktív kártyák saját CSS-sel

Három effekt, mindhárom transition-nel: a lebegő kártya felemelkedik és erősebb árnyékot kap; a forduló kártya 3D-ben megfordul (perspective, transform-style: preserve-3d, backface-visibility: hidden); az információs kártyán egy sötét réteg úszik be. Mindhárom nemcsak egérrel (:hover), hanem billentyűzettel és érintéssel is működik (:focus-within, illetve fókuszálható elem a kártyában) – próbáld a Tab billentyűvel is.

  • stretched-link a gomb linkje a teljes kártyára kiterjed
  • :focus-within a kártya bármely eleme fókuszban
  • tabindex="0" fókuszálhatóvá tesz egy nem interaktív elemet

4. FEJEZET

Kártyacsoport

A .card-group a kártyákat hézag nélkül, egyforma magasságban egymás mellé illeszti, mintha egyetlen nagy kártya lennének; 576 px alatt egymás alá kerülnek. Ha hézagot szeretnél, használd inkább a rácsot (row g-4).

GYAKORLÁS

Gyakorló feladatok

  1. Készíts három kártyát (szöveges, képes, fejléces) egy sorban; mobilon kerüljenek egymás alá.
  2. Készíts termékkártyát: kép, név, ár (9 990 Ft), „Kosárba” gomb a kártya alján (mt-auto egy flex oszlopban).
  3. Készíts lebegő, forduló és információs kártyát – ellenőrizd billentyűzettel is.
  4. Rendezz el kilenc képes kártyát galériaként: row-cols-1 row-cols-sm-2 row-cols-lg-3.

Bővítési ötletek

  • blogkártyák dátummal és kategóriacímkével (badge), sötét téma (data-bs-theme="dark"), saját színsémák.

Minden képnek legyen tartalmas alt szövege (díszítő képnél üres: alt=""). Overlay esetén mindig ellenőrizd a szöveg és a kép kontrasztját; ne használj túl erős árnyékot és túl sok egyidejű animációt.