ÁTTEKINTÉS
Egy teljes oldal Bootstrapből
Az alábbi ablakban egy teljes mintaoldal fut: rögzített navigáció, teljes képernyős hero, rácsrendszer, színek, komponensek, segédosztályok és lábléc. A legtöbb elemhez nem kellett saját CSS – a Bootstrap osztályai adják a megjelenést; a saját stíluslap csak a színátmeneteket és néhány díszítést tartalmaz.
Görgess az ablakban, majd próbáld ki a Mobil nézetet: a menü hamburgerikonná csukódik (kattints rá!), az oszlopok egymás alá kerülnek. A Térközök mutatása kapcsoló minden margót (narancs) és belső margót (zöld) kiszínez.
TÉRKÉP
Melyik részt hol tanulod meg?
| Az oldal része | Fő osztályok | Modul |
|---|---|---|
| Rögzített, összecsukható navigáció | navbar navbar-expand-lg fixed-top, collapse | 02 Navigáció és hero |
| Teljes képernyős hero | min-vh-100 d-flex align-items-center, display-1 | 02 Navigáció és hero |
| Rácsrendszer, beágyazott sor | container row col-md-* | 01 Alapok, 06 Elrendezés |
| Színek, tipográfia | bg-*, text-*, lead | 01 Alapok |
| Gombok, értesítések, listacsoport, kártya | btn, alert, list-group, card | 03 Kártyák |
| Űrlapok | form-control, form-select, form-check | 04 Űrlapok |
| Térköz, flex, pozíció | p-*, mb-*, d-flex, position-absolute | 05 Utility osztályok |
A korábbi változathoz képest javítottunk: a hamburgermenü most működik (be van töltve a Bootstrap JavaScript-csomagja), a hero tartalmát nem tolja le egy felülírt .h-100 osztály, a nem létező border-white-50 helyett border-white border-opacity-25 szerepel, és a pozicionálási példa elemei nem takarják el a doboz címét.