Bootstrap rutnätslek
Bygg responsiva rutnätslayouter med Bootstrap 5.3 visuellt och kopiera de exakta klasserna — row, col, förskjutningar, ordning, mellanrum och justering.
—
Allt körs i din webbläsare — inget laddas upp.
Klasserna du anger gäller från denna brytpunkt och uppåt. Växla mellan brytpunkter för att bygga responsiva layouter.
Om Bootstrap rutnätslek
Bootstrap Grid Playground bygger responsiva rad-och-kolumn-layouter med det riktiga Bootstrap 5.3-rutnätssystemet. Lägg till upp till 12 kolumner i en rad, klicka på en kolumn för att ställa in dess bredd, förskjutning och ordning, och justera mellanrum och justering på raden — förhandsvisningen och den genererade koden uppdateras direkt vid varje ändring.
Eftersom Bootstrap-rutnät är mobile-first är brytpunktsväljaren central: ställ in en kolumn på col-6 vid basen och col-md-4 vid md, så har du byggt det klassiska mönstret som staplar på mobil och ligger tre i bredd på skrivbordet, utan att skriva en rad kod. Förskjutningar, ordning och mellanrumsklasser tar alla samma responsiva infix.
Resultatet är ren kopiera-och-klistra-HTML — en rad-div med sina kolumnbarn och exakt de klasser du konfigurerat. Kopiera hela utdraget eller bara radens klasser; allt körs lokalt i din webbläsare.
Så använder du Bootstrap rutnätslek
- Lägg till kolumner i raden — upp till 12 — och klicka på en för att markera den.
- Ställ in den markerade kolumnens spann, förskjutning och ordning för den aktuella brytpunkten.
- Byt brytpunkt (sm till xxl) för att definiera hur layouten flödar om på större skärmar.
- Justera radens mellanrum och dess justeringsverktyg.
- Granska förhandsvisningen, kopiera sedan den genererade HTML:en eller radens klasser.