Esempi dal vivo di Bootstrap 5.3 per navbar, card, griglia, form, una modal, alert e pulsanti, ognuno con l'equivalente Tailwind e un traduttore di classi.
Bootstrap 5 costruisce i layout con classi pronte: navbar navbar-expand-lg per un menu, row e col-md-4 per una griglia a 12 colonne, card per i riquadri di contenuto, btn btn-primary per i pulsanti e alert alert-success per i messaggi. Aggiungi il CSS 5.3.3 da una CDN, più il bundle JavaScript solo per le parti interattive come modal e dropdown.
Classi principali di Bootstrap 5
Ogni componente qui sotto è scritto da zero per Bootstrap 5.3 e mostrato dal vivo, con accanto la versione Tailwind CSS della stessa cosa, così puoi confrontare i due vocabolari o portare una pagina dall'uno all'altro. Un traduttore di classi gestisce le sostituzioni uno a uno più comuni.
Usa navbar-expand-lg (o md, sm) sul nav, aggiungi un pulsante navbar-toggler con data-bs-toggle="collapse" e data-bs-target che punta all'id del menu, e avvolgi i link in un div con collapse navbar-collapse. Il toggle ha bisogno del bundle JavaScript di Bootstrap per aprirsi e chiudersi.
Dodici per riga. col-6 occupa metà, col-4 un terzo, e i prefissi di breakpoint come col-md-4 si applicano da quella larghezza in su. Esistono sei breakpoint: quello predefinito sotto 576px, poi sm, md, lg, xl e xxl a 576, 768, 992, 1200 e 1400 pixel.
Bootstrap è più veloce quando vuoi componenti finiti e un aspetto convenzionale con poco lavoro di design. Tailwind è più veloce quando hai un tuo design e costruisci i componenti da solo. Entrambi hanno licenza MIT e sono ben mantenuti.
No. Bootstrap 5 ha abbandonato jQuery. I suoi plugin JavaScript sono JavaScript puro e Popper è l'unica dipendenza, inclusa nel file bundle.
Gli esempi girano in un frame sandbox con gli script disattivati, quindi la modal è mostrata già aperta usando le classi position-static e d-block. In una pagina reale, il bundle JavaScript la apre e la chiude e gestisce il focus.
Ogni frame dal vivo carica una copia non modificata del foglio di stile di Bootstrap 5.3.3 che ospitiamo noi. Nel tuo progetto, caricalo dalla CDN ufficiale con il link mostrato qui sotto. Gli script sono disattivati nei frame, quindi di ogni componente si vede solo la parte CSS.
Metti il foglio di stile nella head e il bundle prima del tag di chiusura del body. Copia gli hash integrity da getbootstrap.com e aggiungili come attributi integrity e crossorigin.
navbar-expand mantiene i link visibili a ogni larghezza, dato che il frame non può eseguire lo script di collapse. Su un sito reale usa navbar-expand-lg più un toggler.
Lo stesso componente con classi utility di Tailwind. Richiede una build Tailwind, quindi è mostrato solo come codice.
Tre card condividono una riga con gutter g-3. Sostituisci col-4 con col-md-4 così si impilano sui telefoni.
Lo stesso componente con classi utility di Tailwind. Richiede una build Tailwind, quindi è mostrato solo come codice.
Le colonne sommano 12. Ogni classe col-* qui è fissa così puoi vedere la divisione; aggiungi i prefissi sm, md o lg per i cambi responsive.
Lo stesso componente con classi utility di Tailwind. Richiede una build Tailwind, quindi è mostrato solo come codice.
form-label e form-control danno campi coerenti; is-invalid con invalid-feedback mostra un errore senza alcuno script.
Lo stesso componente con classi utility di Tailwind. Richiede una build Tailwind, quindi è mostrato solo come codice.
position-static e d-block mostrano la modal in linea per una demo. In una pagina reale, omettili e aprila con data-bs-toggle="modal".
Lo stesso componente con classi utility di Tailwind. Richiede una build Tailwind, quindi è mostrato solo come codice.
I colori contestuali vengono dai modificatori alert-*. Aggiungi role="alert" solo ai messaggi che compaiono dopo un'azione.
Lo stesso componente con classi utility di Tailwind. Richiede una build Tailwind, quindi è mostrato solo come codice.
Varianti piene, outline, di dimensione e disabilitate. Un link con lo stile di un pulsante mantiene role=button solo quando attiva un'azione e non una navigazione.
Lo stesso componente con classi utility di Tailwind. Richiede una build Tailwind, quindi è mostrato solo come codice.
Sono corrispondenze vicine, non esatte: i passi di spaziatura di Bootstrap da 1 a 5 corrispondono a circa 0.25, 0.5, 1, 1.5 e 3 rem, mentre Tailwind usa 0.25 rem per passo.
Sostituzioni uno a uno comuni
Traduttore di classi da Bootstrap a Tailwind
Direzione
Da Bootstrap a Tailwind
Da Tailwind a Bootstrap
Classi da convertire
Risultato
Copia
Lasciate invariate (nessuna corrispondenza semplice nella mappa qui sotto): {list}
Ogni classe ha trovato una corrispondenza.
Inizia gratis · Nessuna carta di credito richiesta