Piaskownica siatki Bootstrap

Wszystkie narzędzia

Twórz wizualnie responsywne układy oparte na siatce Bootstrap 5.3 i kopiuj dokładne klasy — row, col, przesunięcia, kolejność, odstępy i wyrównanie.

Podgląd Kliknij kolumnę, aby ją edytować
Wygenerowany kod HTML
—

Wszystko działa w Twojej przeglądarce — nic nie jest wysyłane.

Ustawione klasy obowiązują od tego punktu granicznego wzwyż. Przełączaj punkty graniczne, aby tworzyć responsywne układy.

Wiersz .row
Kolumny
0
Wybrana kolumna

O Piaskownica siatki Bootstrap

Bootstrap Grid Playground buduje responsywne układy wierszy i kolumn przy użyciu prawdziwego systemu siatki Bootstrap 5.3. Dodaj do 12 kolumn do wiersza, kliknij dowolną kolumnę, aby ustawić jej szerokość, przesunięcie i kolejność, oraz dostosuj odstępy i wyrównanie w wierszu — podgląd i wygenerowany kod aktualizują się na bieżąco przy każdej zmianie.

Ponieważ siatki Bootstrapa są mobile-first, kluczowe znaczenie ma przełącznik punktów przełamania: ustaw kolumnę na col-6 przy podstawie i col-md-4 przy md, a zbudujesz klasyczny wzorzec — układ w stos na urządzeniach mobilnych, trzy kolumny obok siebie na komputerze — bez napisania ani linijki kodu. Przesunięcia, kolejność i klasy odstępów przyjmują te same responsywne przyrostki.

Wynikiem jest czysty kod HTML gotowy do skopiowania — div wiersza z jego kolumnami potomnymi i dokładnie tymi klasami, które skonfigurowałeś. Skopiuj cały fragment lub same klasy wiersza; wszystko działa lokalnie w Twojej przeglądarce.

Jak korzystać z Piaskownica siatki Bootstrap

  1. Dodaj kolumny do wiersza — do 12 — i kliknij jedną, aby ją zaznaczyć.
  2. Ustaw rozpiętość, przesunięcie i kolejność zaznaczonej kolumny dla bieżącego punktu przełamania.
  3. Przełącz punkty przełamania (od sm do xxl), aby zdefiniować, jak układ ma się przekształcać na większych ekranach.
  4. Dostosuj odstępy wiersza i jego narzędzia wyrównania.
  5. Sprawdź podgląd na żywo, a następnie skopiuj wygenerowany HTML lub klasy wiersza.

Najczęściej zadawane pytania

Siatka Bootstrapa ma szerokość 12 jednostek. Kolumny, których łączna rozpiętość przekracza 12, zawijają się do nowej linii w tym samym wierszu — to oczekiwane zachowanie, często stosowane celowo do tworzenia siatek wielowierszowych.

Nadaj kolumnie pełną szerokość jako podstawę (col-12) i węższą rozpiętość przy danym punkcie przełamania, jak col-md-4. Poniżej 768 px kolumny układają się w stos; od md wzwyż ustawiają się trzy obok siebie. Przełącznik punktów przełamania buduje dokładnie taki wzorzec.

Przesunięcie przesuwa kolumnę w prawo o określoną liczbę jednostek siatki (offset-md-2 pomija dwie). Używaj przesunięć, aby wyśrodkować pojedynczą kolumnę lub stworzyć celowy biały odstęp bez wstawiania pustych kolumn wypełniających.

Tak — narzędzia odstępów (gutter) w wierszu kontrolują poziomy i pionowy odstęp między kolumnami. Playground udostępnia je obok opcji wyrównania wiersza, a przyjmują one responsywne przyrostki tak jak każda inna klasa siatki.

Tak, jest całkowicie darmowy. Kreator działa wyłącznie w Twojej przeglądarce, więc Twoje układy nigdy nie są przesyłane ani przechowywane po stronie serwera.
Udostępnij
Powiązane narzędzia
Kreator podpisu e-mail Zaprojektuj profesjonalny podpis HTML do e-maila korzystając z 30 szablonów, dostosuj go i zapisz. Bezpłatnie
Ikona do PNG Konwertuj Bootstrap Icons, Font Awesome i inne na niestandardowe obrazy PNG — bezpłatnie, w przeglądarce. Bezpłatnie
Generator ikon aplikacji Wygeneruj kompletny, gotowy do publikacji zestaw ikon aplikacji dla App Store i Google Play — eleganckie tła gradientowe, siatkowe i wzorzyste, zbudowane z Twojego logo. Bezpłatnie
Generator faviconów Zbuduj kompletny pakiet faviconów z logo, ikony czcionkowej lub monogramu — favicon.ico, nowoczesne pliki PNG, ikona Apple touch, ikony PWA, manifest webowy i fragment HTML. Bezpłatnie
Generator cieni CSS box-shadow Twórz warstwowe cienie CSS box-shadow z suwakami do przesunięcia, rozmycia, rozrostu, koloru, krycia i wcięcia — podgląd na prawdziwym elemencie i gotowy CSS do skopiowania. Bezpłatnie
Generator zaokrągleń CSS (border-radius) Twórz wizualnie border-radius CSS z podglądem na żywo i kopiuj gotowy do użycia kod. Bezpłatnie
Popularne wyszukiwania
piaskownica siatki bootstrap generator siatki bootstrap system siatki bootstrap 5 generator klas row col narzędzie przesunięć kolumn bootstrap kreator responsywnej siatki bootstrap generator odstępów i wyrównania bootstrap
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.