Bootstrap Flex Playground

Wszystkie narzędzia

Twórz układy flex w Bootstrap 5.3 wizualnie i kopiuj dokładne klasy narzędziowe — d-flex, justify-content, align-items, order, grow i więcej.

Podgląd Kliknij element, aby go edytować
Wygenerowany HTML
—

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

Ustawione klasy obowiązują od tego punktu przełamania w górę. Przełączaj punkty przełamania, aby tworzyć responsywne układy.

Kontener
Elementy
0
Zaznaczony element

O Bootstrap Flex Playground

Bootstrap Flex Playground pozwala budować układy flexbox przy użyciu prawdziwych klas narzędziowych Bootstrap 5.3 zamiast surowego CSS. Skonfiguruj kontener — kierunek, zawijanie, justify-content, align-items, odstęp — za pomocą segmentowanych przełączników, kliknij dowolny element, aby ustawić jego własne narzędzia align-self, order, grow i shrink, i obserwuj, jak podgląd na żywo natychmiast się przekształca.

To, co sprawia, że to coś więcej niż zabawka, to przełącznik punktów przełamania: wybierz sm, md, lg, xl lub xxl, a klasy ustawione od tego momentu zyskują responsywny przyrostek — justify-content-md-between, flex-lg-row — dokładnie tak, jak system mobile-first Bootstrapa je stosuje od tego punktu przełamania wzwyż. Dodaj do 12 elementów, aby zasymulować realistyczny komponent.

Gdy układ wygląda dobrze, skopiuj wygenerowany HTML lub same klasy kontenera i wklej je bezpośrednio do swojego projektu. Wszystko działa w Twojej przeglądarce i nic nie jest przesyłane.

Jak korzystać z Bootstrap Flex Playground

  1. Ustaw narzędzia kontenera — kierunek, zawijanie, justify-content, align-items i odstęp — za pomocą segmentowanych przełączników.
  2. Dodaj lub usuń elementy (od 2 do 12), aby dopasować do prawdziwego komponentu.
  3. Kliknij element, aby nadać mu własne narzędzia align-self, order lub rozmiaru flex.
  4. Przełącz punkty przełamania, aby dodać warianty responsywne stosowane od sm, md, lg, xl lub xxl wzwyż.
  5. Sprawdź podgląd na żywo, a następnie skopiuj wygenerowany HTML lub klasy kontenera.

Najczęściej zadawane pytania

Bootstrap jest mobile-first: klasa ustawiona przy danym punkcie przełamania obowiązuje od tej szerokości wzwyż. Ustawienie justify-content-between przy wybranym md daje justify-content-md-between, które zaczyna działać od 768 px i pozostaje aktywne na większych ekranach.

To narzędzie generuje klasy narzędziowe Bootstrap 5.3 (d-flex, justify-content-center, order-2) gotowe do projektu opartego na Bootstrapie. CSS Flexbox Playground generuje zamiast tego zwykłe właściwości CSS — wybierz to, co pasuje do Twojego stacku.

Tak. Kliknij dowolny element w podglądzie, aby go zaznaczyć, a następnie ustaw narzędzia dla tego elementu, takie jak align-self, order, grow i shrink. Wygenerowany HTML pokazuje każdy element dokładnie z przypisanymi klasami.

Od 2 do 12. Ten zakres obejmuje wszystko, od prostego dwukolumnowego nagłówka po pełny pasek narzędzi, i utrzymuje podgląd czytelny podczas eksperymentowania.

Tak, jest darmowy i działa całkowicie w Twojej przeglądarce — bez rejestracji, a nic z tego, co budujesz, nie jest nigdzie przesyłane.
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
Bootstrap flex playground Bootstrap generator flexbox Bootstrap 5 klasy flex generator klas d-flex justify-content align-items Bootstrap kreator klas flex Bootstrap responsywne narzędzie flexbox 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.