Spațiu de lucru pentru grila Bootstrap

Toate instrumentele

Construiește vizual layout-uri responsive cu grila Bootstrap 5.3 și copiază clasele exacte — row, col, decalaje, ordine, spațieri și aliniere.

Previzualizare Dă clic pe o coloană pentru a o edita
HTML generat
—

Totul rulează în browserul tău — nimic nu este încărcat.

Clasele setate se aplică începând cu acest punct de întrerupere și în sus. Comută între punctele de întrerupere pentru a crea layout-uri responsive.

Rând .row
Coloane
0
Coloană selectată

Despre Spațiu de lucru pentru grila Bootstrap

Bootstrap Grid Playground construiește layout-uri responsive de rânduri și coloane cu sistemul real de grid Bootstrap 5.3. Adaugă până la 12 coloane la un rând, dă clic pe orice coloană pentru a-i seta lățimea, decalajul și ordinea, și ajustează spațiile (gutters) și alinierea pe rând — previzualizarea și marcajul generat se actualizează live la fiecare modificare.

Pentru că grilele Bootstrap sunt mobile-first, comutatorul de punct de întrerupere este central: setează o coloană la col-6 pe bază și col-md-4 la md, iar tu ai construit tiparul clasic de stivuire pe mobil, trei-alăturate pe desktop, fără să scrii nicio linie de cod. Decalajele, ordinea și clasele de spațiu preiau toate aceleași infixuri responsive.

Rezultatul este HTML curat de copiat-lipit — un div de rând cu coloanele sale copil și exact clasele pe care le-ai configurat. Copiază întregul fragment sau doar clasele rândului; totul rulează local în browserul tău.

Cum să utilizați Spațiu de lucru pentru grila Bootstrap

  1. Adaugă coloane la rând — până la 12 — și dă clic pe una pentru a o selecta.
  2. Setează intervalul, decalajul și ordinea coloanei selectate pentru punctul de întrerupere curent.
  3. Comută punctele de întrerupere (sm până la xxl) pentru a defini cum se reflow-uiește layout-ul pe ecrane mai mari.
  4. Ajustează spațiile rândului și utilitarele sale de aliniere.
  5. Revizuiește previzualizarea live, apoi copiază HTML-ul generat sau clasele rândului.

Întrebări frecvente

Grila Bootstrap are 12 unități lățime. Coloanele al căror interval combinat depășește 12 se încadrează pe o linie nouă în cadrul aceluiași rând — acesta este comportamentul așteptat și adesea folosit intenționat pentru a crea grile pe mai multe linii.

Dă coloanei o bază pe toată lățimea (col-12) și un interval mai îngust la un punct de întrerupere, precum col-md-4. Sub 768 px coloanele se stivuiesc; de la md în sus se aliniază câte trei. Comutatorul de punct de întrerupere construiește exact acest lucru.

Un decalaj (offset) împinge o coloană spre dreapta cu un număr de unități de grilă (offset-md-2 sare peste două). Folosește decalajele pentru a centra o coloană singură sau pentru a crea spațiu alb intenționat, fără a insera coloane goale de umplutură.

Da — utilitarele de spațiu (gutter) pe rând controlează spațierea orizontală și verticală dintre coloane. Playground-ul le expune alături de opțiunile de aliniere a rândului, iar acestea acceptă infixuri responsive ca orice altă clasă de grilă.

Da, este complet gratuit. Constructorul rulează doar în browserul tău, așa că layout-urile tale nu sunt niciodată încărcate sau stocate pe server.
Distribuiți
Instrumente conexe
Constructor de semnătură e-mail Proiectează o semnătură HTML profesională de e-mail din 30 de șabloane, personalizez și salveaz-o. Gratuit
Icoană în PNG Convertește Bootstrap Icons, Font Awesome și altele în imagini PNG personalizate — gratuit, în browserul tău. Gratuit
Generator de icoane pentru aplicații Generează un set complet de icoane pentru App Store și Google Play — fundaluri premium cu gradient, mesh și model, construit din logo-ul tău. Gratuit
Generator de favicon Construiește un pachet complet de favicon-uri dintr-un logo, o icoană de tip font sau un monogram — favicon.ico, PNG-uri moderne, icoana Apple touch, icoane PWA, un manifest web și fragmentul HTML. Gratuit
Generator CSS Box Shadow Creează umbre CSS stratificate cu glisoare live pentru offset, estompare, extindere, culoare, opacitate și inset — previzualizează pe un element real și copiază CSS-ul gata de lipit instant. Gratuit
Generator CSS Border Radius Creează vizual border-radius CSS cu previzualizare în timp real și copiază cod gata de producție. Gratuit
Căutări populare
spațiu de lucru grila bootstrap generator grilă bootstrap sistem de grilă bootstrap 5 generator de clase row col instrument decalaj coloane bootstrap constructor grilă responsive bootstrap generator spațieri și aliniere bootstrap
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.