Mediu de testare flex Bootstrap
Creează vizual layout-uri flex Bootstrap 5.3 și copiază exact clasele utilitare: d-flex, justify-content, align-items, order, grow și altele.
-
Totul rulează în browserul tău: nimic nu este încărcat.
Clasele pe care le setezi se aplică începând de la acest breakpoint în sus. Schimbă breakpoint-urile pentru a crea layout-uri responsive.
Despre Mediu de testare flex Bootstrap
Bootstrap Flex Playground îți permite să construiești layout-uri flexbox cu clase utilitare reale Bootstrap 5.3 în loc de CSS brut. Configurează containerul (direcție, wrapping, justify-content, align-items, gap) cu controale segmentate, dă clic pe orice element pentru a-i seta propriile utilitare align-self, order, grow și shrink și urmărește previzualizarea live rearanjându-se instantaneu.
Comutatorul de puncte de întrerupere (breakpoint) este ce transformă acest instrument din simplă jucărie: alege sm, md, lg, xl sau xxl, iar clasele pe care le setezi din acel punct primesc infixul responsiv (justify-content-md-between, flex-lg-row) exact așa cum sistemul mobile-first al Bootstrap le aplică de la acel punct de întrerupere în sus. Adaugă până la 12 elemente pentru a simula o componentă realistă.
Când layout-ul arată bine, copiază HTML-ul generat sau doar clasele containerului și lipește-le direct în proiectul tău. Totul rulează în browserul tău și nimic nu este încărcat.
Cum să utilizați Mediu de testare flex Bootstrap
- Setează utilitarele containerului (direcție, wrap, justify-content, align-items și gap) cu controalele segmentate.
- Adaugă sau elimină elemente (2 până la 12) pentru a se potrivi componentei tale reale.
- Dă clic pe un element pentru a-i da propriile utilitare align-self, order sau de dimensionare flex.
- Comută punctele de întrerupere pentru a adăuga variante responsive care se aplică de la sm, md, lg, xl sau xxl în sus.
- Verifică previzualizarea live, apoi copiază HTML-ul generat sau clasele containerului.