00. MODULBootstrap 5
Áttekintő bemutató
Egy teljes, Bootstrapből összerakott mintaoldal – a többi modul előzetese
- navbar
- hero
- rács
- komponensek
- utility osztályok
Élő példák forráskóddal
WEBFEJLESZTÉS · BOOTSTRAP 5.3
Bootstrap műhely.
Tizenhárom modul a Bootstrap 5 használatához, az alapoktól a haladó elrendezésekig. Minden példa saját ablakban, a valódi Bootstrap-pal fut, alatta a teljes forráskód – és az ablak szélessége átállítható, így a reszponzív viselkedés is kipróbálható.
- Nézd meg élőbena példák a valódi Bootstrap-pal futnak, nem képernyőképek
- Váltsd át a szélességetmobil, tablet, laptop, asztali vagy teljes képernyő – a töréspont-jelző mutatja, melyik osztály lép életbe
- Vidd haza a kódotHTML és CSS külön fülön, egy kattintással másolható
Kattints a Tablet és a Laptop gombra: a col-md-* 768 px-től, a col-lg-* 992 px-től lép életbe.
MODULOK SORRENDBEN
01. MODULBootstrap 5
Bootstrap alapok
Beillesztés, konténer, 12 oszlopos rács, színek, tipográfia
- CDN-beillesztés
- container
- row, col
- töréspontok
- bg-*, text-*
Élő példák forráskóddal
02. MODULBootstrap 5
Navigáció és hero
Navbar, összecsukható menü, lenyíló menü, hero szakaszok
- navbar
- navbar-expand-lg
- collapse
- dropdown
- hero
Élő példák forráskóddal
03. MODULBootstrap 5
Kártyák
A card komponens felépítése, változatai és saját effektek
- card, card-body
- card-img-top
- card-img-overlay
- vízszintes kártya
- card-group
Élő példák forráskóddal
04. MODULBootstrap 5
Űrlapok
Mezők, címkék, jelölők, beviteli csoportok, validáció
- form-control, form-label
- form-select
- form-check, form-switch
- form-floating
- input-group
Élő példák forráskóddal
05. MODULBootstrap 5
Utility osztályok
Térköz, szín, flex, pozíció, szegély, árnyék, méret – egy-egy osztállyal
- m-*, p-*
- text-*, bg-*
- d-flex, justify-content-*
- position-*
- border, rounded, shadow
Élő példák forráskóddal
06. MODULBootstrap 5
Elrendezés
Konténertípusok, rács, töréspontok, sorrend, eltolás, igazítás
- container-*
- col-*, col-md-*
- col, col-auto
- order-*
- offset-*
Élő példák forráskóddal
07. MODULBootstrap 5
Animációk és átmenetek
transition, @keyframes, mikro-interakciók
- transition
- transform
- @keyframes
- animation
- mikro-interakció
Élő példák forráskóddal
08. MODULBootstrap 5
Egyedi komponensek
Kreatív kártyák, idővonal, árazó táblák, statisztikák, profilkártyák
- kártyavariációk
- idővonal
- árazó tábla
- statisztikai kártya
- SVG-diagram
Élő példák forráskóddal
09. MODULBootstrap 5
Reszponzív minták
Navigáció, táblázat, média és tipográfia minden képernyőre
- mobilmenü
- oldalmenü
- mega menü
- table-responsive
- ratio, object-fit
Élő példák forráskóddal
10. MODULBootstrap 5
CSS-only interakciók
Lenyíló menü, harmonika, fülek, elemleírás, lightbox – JavaScript nélkül
- :checked
- label for
- :target
- :focus-within
- data-* és attr()
Élő példák forráskóddal
11. MODULBootstrap 5
Haladó grid
CSS Grid és Bootstrap együtt: vezérlőpult, masonry, auto-fill, területek
- display: grid
- grid-template-areas
- masonry
- auto-fill, auto-fit
- minmax()
Élő példák forráskóddal
12. MODULBootstrap 5
Haladó űrlapok
Többlépéses űrlap, fájlfeltöltés, élő validáció, összetett választók
- többlépéses űrlap
- folyamatjelző
- drag & drop
- élő validáció
- címkeválasztó
Élő példák forráskóddal
ARCHÍVUM · 2024–2025
A modulok korábbi változata
Az anyag első, 2024–2025 körül készült formája, változtatás nélkül megőrizve (forráskód és magyarázat nélküli bemutatóoldalak). A javítások listája a repó docs/HIBAJEGYZEK.md fájljában olvasható.