Reszponzív minták.

Reszponzív az az oldal, amelynek tartalma minden képernyőn használható: telefonon nem kell nagyítani vagy oldalra görgetni, laptopon nem marad üres a fél képernyő. A Bootstrap „mobil először” működik: az előtag nélküli osztály a legkisebb képernyőre vonatkozik, a -md-, -lg- változatok felfelé módosítanak. Minden példát próbálj ki mindhárom szélességen!

• navigáció, amely kis képernyőn összecsukódik
• táblázat, amely mobilon kártyává alakul
• arányos képek, galéria, videó
• rugalmas betűméret

A Bootstrap navbarja (2. modul) kész megoldás. Ha saját menüt írunk, a lényeg ugyanaz: 768 px alatt a menüpontok elrejtőznek, és egy gomb nyitja őket. A gomb aria-expanded attribútuma jelzi az állapotot (a képernyőolvasónak is), a CSS pedig erre az attribútumra mutatja a menüt. A régi változatban a gomb nem csinált semmit, így mobilon a menü elérhetetlen volt. A példa mobilnézetben indul: nyisd ki a menüt!

Vezérlőpultokon gyakori a bal oldali menü. Laptopon állandóan látszik a tartalom mellett; 768 px alatt elrejtőzik, és egy – a tartalom fölött mindig látható – gomb csúsztatja be. A Bootstrap ehhez kész komponenst is ad: az offcanvas-t; itt a saját változatot mutatjuk, hogy látszódjon, mitől működik.

A mega menü egy több oszlopos lenyíló panel. Laptopon a menüpont alá nyílik, három oszlopban (row + col-lg-4); mobilon az oszlopok egymás alá kerülnek. Itt a Bootstrap dropdown komponensét használjuk, így kattintásra és billentyűzettel is nyílik (a régi változat csak egérrel, rámutatásra).

• position-static a lenyíló panel a teljes navbar szélességéhez igazodik
• dropdown-menu w-100

Két bevált megoldás: (1) a táblázat a helyén marad, de vízszintesen görgethető dobozba kerül (table-responsive) – csak a táblázat görög, nem az egész oldal; (2) 768 px alatt a sorokból kártyák lesznek, amelyekben minden adat mellett ott a megnevezése. Itt ugyanazt az adatsort mutatjuk mindkét formában: a táblázat d-none d-md-block, a kártyák d-md-none. A régi változatban a „45 db raktáron” termék mellett „Készlethiány” állt – a mintaadat itt ellentmondásmentes.

Az img-fluid a képet legfeljebb a szülő szélességéig engedi (max-width: 100%), és arányosan kicsinyíti. Ha egyforma képarány kell, a ratio ratio-16x9 doboz és az object-fit-cover együtt vágja a képet. A galéria 2 / 3 / 4 oszlopos (row-cols-2 row-cols-md-3 row-cols-lg-4). Videót is a ratio dobozba teszünk; a beágyazási címbe a saját videód azonosítója kerül.

A Bootstrap címsorai alapból „rugalmasak” (RFS: 1200 px alatt arányosan kisebbek). Saját méretnél a clamp(min, kívánt, max) függvényt használjuk: font-size: clamp(1.75rem, 5vw, 3.5rem) keskeny képernyőn 28 px, széles képernyőn legfeljebb 56 px, közte a nézetablak 5%-a. Váltogasd a szélességet!

1. Készíts reszponzív vezérlőpultot: oldalmenü (laptopon látszik, mobilon gombbal nyílik), fejléc, kártyák 1 / 2 / 3 oszlopban.
2. Alakíts át egy hétoszlopos táblázatot úgy, hogy 375 px-en se kelljen az egész oldalt oldalra görgetni.
3. Készíts képgalériát egyforma képaránnyal (ratio + object-fit-cover) 2 / 3 / 4 oszlopban.
4. Ellenőrizd a kész oldalt 320 px szélességen és 200%-os nagyításnál is: minden olvasható és kattintható?