Live Bootstrap 5.3 voorbeelden voor de navbar, cards, grid, formulieren, een modal, alerts en knoppen, elk met het Tailwind-equivalent en een klassenvertaler.
Bootstrap 5 bouwt layouts met kant-en-klare klassen: navbar navbar-expand-lg voor een menu, row en col-md-4 voor een grid van 12 kolommen, card voor inhoudsblokken, btn btn-primary voor knoppen en alert alert-success voor meldingen. Voeg de 5.3.3-CSS toe via een CDN, en de JavaScript-bundle alleen voor interactieve onderdelen zoals modals en dropdowns.
Kernklassen van Bootstrap 5
Elk component hieronder is vers geschreven voor Bootstrap 5.3 en wordt live getoond, met de Tailwind CSS-versie van hetzelfde ernaast, zodat u de twee vocabulaires kunt vergelijken of een pagina van het ene naar het andere kunt overzetten. Een klassenvertaler regelt de gangbare één-op-één-vervangingen.
Gebruik navbar-expand-lg (of md, sm) op de nav, voeg een navbar-toggler-knop toe met data-bs-toggle="collapse" en data-bs-target die naar de id van het menu wijst, en wikkel de links in een div met collapse navbar-collapse. De toggle heeft de JavaScript-bundle van Bootstrap nodig om te openen en te sluiten.
Twaalf per rij. col-6 neemt de helft, col-4 een derde, en breakpoint-prefixen zoals col-md-4 gelden vanaf die breedte. Er zijn zes breakpoints: de standaard onder 576px, daarna sm, md, lg, xl en xxl bij 576, 768, 992, 1200 en 1400 pixels.
Bootstrap is sneller als u kant-en-klare componenten en een conventionele look wilt met weinig ontwerpwerk. Tailwind is sneller als u een eigen ontwerp hebt en de componenten zelf bouwt. Beide hebben een MIT-licentie en worden goed onderhouden.
Nee. Bootstrap 5 heeft jQuery laten vallen. De JavaScript-plugins zijn gewoon JavaScript, en Popper is de enige afhankelijkheid, die in het bundlebestand zit.
De voorbeelden draaien in een gesandboxt frame waarin scripts uitstaan, dus de modal wordt al geopend getoond met de klassen position-static en d-block. Op een echte pagina opent en sluit de JavaScript-bundle hem en beheert hij de focus.
Elk live frame laadt een ongewijzigde kopie van de Bootstrap 5.3.3-stylesheet die we zelf hosten. Laad hem in uw eigen project via het officiële CDN met de link hieronder. Scripts staan uit in de frames, dus alleen de CSS-kant van elk component is te zien.
Zet de stylesheet in de head en de bundle vóór de afsluitende body-tag. Kopieer de integrity-hashes van getbootstrap.com en voeg ze toe als integrity- en crossorigin-attributen.
navbar-expand houdt de links op elke breedte zichtbaar, omdat het frame het collapse-script niet kan draaien. Gebruik op een echte site navbar-expand-lg plus een toggler.
Hetzelfde component met Tailwind-utilityklassen. Het heeft een Tailwind-build nodig, dus het wordt alleen als code getoond.
Drie cards delen een rij met g-3-gutters. Vervang col-4 door col-md-4 zodat ze op telefoons onder elkaar komen.
Hetzelfde component met Tailwind-utilityklassen. Het heeft een Tailwind-build nodig, dus het wordt alleen als code getoond.
Kolommen tellen op tot 12. Elke col-*-klasse is hier vast, zodat u de verdeling ziet; voeg sm-, md- of lg-prefixen toe voor responsive wijzigingen.
Hetzelfde component met Tailwind-utilityklassen. Het heeft een Tailwind-build nodig, dus het wordt alleen als code getoond.
form-label en form-control zorgen voor consistente velden; is-invalid met invalid-feedback toont een fout zonder enig script.
Hetzelfde component met Tailwind-utilityklassen. Het heeft een Tailwind-build nodig, dus het wordt alleen als code getoond.
position-static en d-block tonen de modal inline voor een demo. Laat die op een live pagina weg en open hem met data-bs-toggle="modal".
Hetzelfde component met Tailwind-utilityklassen. Het heeft een Tailwind-build nodig, dus het wordt alleen als code getoond.
Contextuele kleuren komen van alert-*-modifiers. Voeg role="alert" alleen toe aan meldingen die na een actie verschijnen.
Hetzelfde component met Tailwind-utilityklassen. Het heeft een Tailwind-build nodig, dus het wordt alleen als code getoond.
Varianten voor gevuld, outline, grootte en uitgeschakeld. Een link die als knop is gestyled, houdt role=button alleen als hij een actie start in plaats van te navigeren.
Hetzelfde component met Tailwind-utilityklassen. Het heeft een Tailwind-build nodig, dus het wordt alleen als code getoond.
Dit zijn benaderingen, geen exacte overeenkomsten: de spacingstappen 1 tot 5 van Bootstrap komen ongeveer overeen met 0.25, 0.5, 1, 1.5 en 3 rem, terwijl Tailwind 0.25 rem per stap gebruikt.
Gangbare één-op-één-vervangingen
Klassenvertaler van Bootstrap naar Tailwind
Richting
Bootstrap naar Tailwind
Tailwind naar Bootstrap
Om te zetten klassen
Resultaat
Kopiëren
Ongewijzigd gelaten (geen eenvoudige match in de kaart hieronder): {list}
Elke klasse had een match.
Gratis beginnen · Geen creditcard nodig