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