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