Przykłady Bootstrap 5 z odpowiednikami w Tailwind

Przykłady Bootstrap 5

Przykłady Bootstrap 5: navbar, karty, grid, modal + Tailwind | We.Inc

Przykłady Bootstrap 5.3 na żywo: navbar, karty, grid, formularze, modal, alerty i przyciski, każdy z odpowiednikiem w Tailwind i translatorem klas.

Bootstrap 5 buduje układy z gotowych klas: navbar navbar-expand-lg dla menu, row i col-md-4 dla 12-kolumnowego gridu, card dla bloków treści, btn btn-primary dla przycisków i alert alert-success dla komunikatów. Dodaj CSS w wersji 5.3.3 z CDN, a pakiet JavaScript tylko dla elementów interaktywnych, takich jak modale i dropdowny.

Podstawowe klasy Bootstrap 5

Komponent
Bootstrap 5
Pomysł w Tailwind

Kontener
mx-auto max-w-7xl px-4

Wiersz i kolumna gridu
row, col-md-4
grid md:grid-cols-3 gap-6

Karta
card, card-body
rounded-xl border p-6

Przycisk główny
btn btn-primary
rounded-md bg-blue-600 px-4 py-2 text-white

Alert
alert alert-warning
rounded-md border bg-amber-50 p-4

Każdy komponent poniżej jest napisany od nowa pod Bootstrap 5.3 i pokazany na żywo, z wersją Tailwind CSS tego samego elementu obok, abyś mógł porównać oba słowniki klas lub przenieść stronę z jednego do drugiego. Translator klas obsługuje typowe zamiany jeden do jednego.

Przewiń do potrzebnego komponentu. Kod Bootstrap po lewej renderuje się na żywo z prawdziwym arkuszem stylów Bootstrap.
Edytuj kod, aby wypróbować inne warianty, na przykład btn-outline-danger lub col-lg-3.
Skopiuj wersję Tailwind poniżej, jeśli Twój projekt używa Tailwind.
Wklej listę klas do translatora, aby przekonwertować typowe klasy narzędziowe w dowolnym kierunku.

Ładuj bootstrap.bundle.min.js tylko wtedy, gdy używasz modali, dropdownów, collapse, tooltipów lub popoverów. Pakiet zawiera Popper, którego potrzebują dropdowny i tooltipy.
Dostosowuj wygląd przez zmienne CSS, takie jak --bs-primary-rgb, lub przez Sass przed kompilacją, zamiast nadpisywać klasy komponentów jedna po drugiej.
Bootstrap 5.3 ma tryby kolorów. Dodaj data-bs-theme="dark" do elementu html lub dowolnego kontenera, aby przełączyć ten obszar na ciemną paletę.
Przypinaj dokładną wersję w linkach CDN i dodawaj hash integrity z oficjalnej dokumentacji, aby nie wślizgnął się zmieniony plik.

Najczęściej zadawane pytania

Jak sprawić, by navbar w Bootstrap 5 zwijał się na telefonie?

Użyj navbar-expand-lg (lub md, sm) na elemencie nav, dodaj przycisk navbar-toggler z data-bs-toggle="collapse" i data-bs-target wskazującym id menu, a linki umieść w div z klasami collapse navbar-collapse. Przełącznik potrzebuje pakietu JavaScript Bootstrap, aby się otwierać i zamykać.

Ile kolumn ma grid Bootstrap?

Dwanaście w wierszu. col-6 zajmuje połowę, col-4 jedną trzecią, a prefiksy breakpointów, takie jak col-md-4, działają od danej szerokości w górę. Istnieje sześć breakpointów: domyślny poniżej 576px, a potem sm, md, lg, xl i xxl przy 576, 768, 992, 1200 i 1400 pikselach.

Bootstrap czy Tailwind?

Bootstrap jest szybszy, gdy chcesz gotowych komponentów i konwencjonalnego wyglądu przy niewielkiej pracy projektowej. Tailwind jest szybszy, gdy masz własny projekt i budujesz komponenty sam. Oba mają licencję MIT i są dobrze utrzymywane.

Czy Bootstrap 5 potrzebuje jQuery?

Nie. Bootstrap 5 porzucił jQuery. Jego wtyczki JavaScript to czysty JavaScript, a jedyną zależnością jest Popper, dołączony do pliku bundle.

Dlaczego modal na tej stronie się nie otwiera i nie zamyka?

Przykłady działają w odizolowanej ramce z wyłączonymi skryptami, więc modal jest pokazany jako już otwarty za pomocą klas position-static i d-block. Na prawdziwej stronie otwiera go i zamyka pakiet JavaScript, który zarządza też fokusem.

Kiedy wybrać Bootstrap, a kiedy Tailwind

Bootstrap opłaca się przy narzędziach wewnętrznych, panelach administracyjnych i szybkich stronach marketingowych, gdzie domyślny wygląd jest akceptowalny, a działające widżety są ważniejsze niż wyróżniający się styl. Piszesz mniej klas i dostajesz przetestowaną obsługę klawiatury w modalach i dropdownach.
Tailwind opłaca się, gdy projektant przekazuje niestandardowy układ. Walka z paddingiem kart i stylami przycisków Bootstrap, by dopasować je do własnego projektu, trwa dłużej niż zbudowanie karty z klas narzędziowych, a do arkusza stylów trafiają tylko używane klasy.

Licencja i autorstwo

Bootstrap jest udostępniany na licencji MIT przez The Bootstrap Authors. Możesz go używać w projektach komercyjnych; zachowaj komentarz licencyjny dołączony na początku plików CSS i JavaScript. Markup na tej stronie jest nasz i można go swobodnie kopiować.

Komponenty: Bootstrap 5.3 na żywo, Tailwind obok

Każda ramka na żywo ładuje niezmodyfikowaną kopię arkusza stylów Bootstrap 5.3.3, którą hostujemy sami. We własnym projekcie ładuj go z oficjalnego CDN przez link pokazany poniżej. Skrypty w ramkach są wyłączone, więc widać tylko część CSS każdego komponentu.

Ładowanie Bootstrap 5.3.3 we własnym projekcie

Umieść arkusz stylów w head, a bundle przed zamykającym tagiem body. Skopiuj hashe integrity z getbootstrap.com i dodaj je jako atrybuty integrity i crossorigin.

Navbar: Bootstrap 5.3

navbar-expand utrzymuje linki widoczne przy każdej szerokości, bo ramka nie może uruchomić skryptu collapse. Na prawdziwej stronie użyj navbar-expand-lg z przełącznikiem.