Corso di Bootstrap 5

Introduzione

• Il corso sarà introduttivo e coprirà tutti gli aspetti necessari per utilizzare Bootstrap 5.
• Include griglia, componenti, personalizzazioni ecc.
• Versione completa del corso sarà disponibile con esercizi maggiori e più dettagli.
• Tratterà anche le differenze tra Bootstrap e altri framework come Tailwind.

Che cos'è Bootstrap?

• È nato come progetto interno di Twitter, inizialmente chiamato Twitter Bootstrap, rilasciato come Open Source nel 2011.
• Versioni:
  • 1.0 (2011)
  • 2.0 (2012)
  • 3.0 (2013)
  • 4.0 (2018)
  • 5.0 (2021)
• Mobile-first approach: adattabile a varie dimensioni di schermo (responsive design).
• Utilizza un sistema a griglia innovativo.

Perché imparare Bootstrap?

• È uno dei framework CSS più utilizzati e longevi.
• Molti progetti sono nati con Bootstrap e continuano a usarlo per comodità o necessità aziendali.
• Facilita lo sviluppo con componenti predefiniti e stilizzati con JavaScript integrato.

Differenze con Tailwind

• Tailwind si basa solo su classi, mentre Bootstrap utilizza classi più comprensive.
• Utilities in Bootstrap offrono modifiche dirette rispetto a Tailwind che è più granulare.

Installazione di Bootstrap

• Diverse modalità:
  • Tramite CDN (più semplice per progetti base).
  • Tramite npm per progetti più complessi.
• Bootstrap offre file CSS e JavaScript.
• Importante utilizzare il reset di stile di Bootstrap (Reboot) per uniformare il comportamento del CSS tra i vari browser.

Utilizzo delle icone di Bootstrap

• Bootstrap fornisce un set di icone proprietarie.
• Importazione tramite CDN e utilizzo con classi dedicate (es. bi bi-alarm).
• Possibilità di personalizzare dimensioni e colori delle icone.

Sistema a griglia e responsive design

Breakpoints

• Punti in cui il design cambia per adattarsi a differenti larghezze di schermo.
• Bootstrap utilizza i seguenti breakpoints:
  • xs: <576px
  • sm: >=576px
  • md: >=768px
  • lg: >=992px
  • xl: >=1200px
  • xxl: >=1400px

Containers

• Tre tipi di container: container, container-{breakpoint}, container-fluid.
• container: max-width a ogni breakpoint.
• container-{breakpoint}: 100% fino a quel breakpoint.
• container-fluid: sempre 100%.

Sistema a griglia

• Utilizza Flexbox anziché CSS Grid.
• La griglia è divisa in 12 colonne.
• Classi principali: row, col, col-{breakpoint}-{numero_colonne}, col-auto.
• Allineamento: align-items, justify-content, ecc.

Tipografia

• Stili per titoli (h1 - h6), paragrafo (lead), citazioni (blockquote).
• Utilities per testo: text-start, text-center, text-end, text-wrap, text-break, text-lowercase, text-uppercase, text-capitalize, e altre.
• Classi per font-weight, font-style (italic).

Immagini

• Classi principali: img-fluid (responsive), rounded (angoli arrotondati).
• picture elemento per diverse sorgenti di immagini.
• img-thumbnail per bordi arrotondati e leggeri.

Figure

• Struttura: figure, figure-img, figure-caption.
• figure-img: gestisce larghezza massima e altezza automatica.
• figure-caption: descrizione immagine.

Tabelle

• Classi base: table, table-striped, table-bordered, table-hover, table-dark, table-responsive, ecc.
• Varianti: table-primary, table-secondary, table-success, table-danger, table-warning, table-info, table-light, table-dark.
• table-sm per tabelle compatte.
• table-group-divider per dividere visivamente gruppi di righe.

Form

Form control

• Classi: form-control, form-control-lg, form-control-sm.
• Classi per input, textarea, select: form-select, form-range, form-check (checkbox).

Input Group

• Struttura: input-group, input-group-text, input-group-append, input-group-prepend.
• Utilizzato per campi di input con testo descrittivo o icone.

Floating Labels

• Struttura: form-floating, input, label invertiti.
• Effetto su campo input e textarea.

Layout dei form

• Layout a griglia (row, col), form orizzontali (form-horizontal), form stacked verticalmente (form).
• Utility class: form-inline, form-inline-small, form-inline-large.

Componenti

Accordeon

• Componente collassabile.
• Uso di show per aprire.

Alert

• Messaggi di notifica.
• Varianti di colore: alert-primary, alert-secondary, ecc.
• Opzionale: pulsante di chiusura (alert-dismissible).

Badge

• Etichette per indicare stato o contatori.
• Classi: badge, badge-pill, varianti di colore.

Breadcrumb

• Indicatori di navigazione.
• Struttura: nav, breadcrumb-item.

Button

• Varianti di colore: btn-primary, btn-secondary, ecc.
• btn-outline per bordi.
• Dimensioni: btn-lg, btn-sm.
• Disabilitazione: disabled.

Button Group

• Gruppi di pulsanti.
• Struttura: btn-group, btn.

Card

• Contenitori informativi.
• Struttura base: card, card-header, card-body, card-title, card-text, card-footer.
• Varianti con immagini, testo, footer.

Carousel

• Galleria di immagini scorrevole.
• Struttura: carousel, carousel-item, carousel-caption, carousel-indicators, carousel-control-prev, carousel-control-next.

Close Button

• Pulsanti di chiusura.
• Struttura: btn-close.

Collapse

• Sezioni collassabili.
• Struttura: collapse, collapsing, collapse show.

Dropdown

• Menu a discesa.
• Struttura: dropdown, dropdown-toggle, dropdown-menu, dropdown-item.

List Group

• Liste stilizzate.
• Struttura: list-group, list-group-item.

Modal

• Finestre di dialogo.
• Struttura: modal, modal-dialog, modal-content, modal-header, modal-body, modal-footer.

Navbar

• Barra di navigazione.
• Classi base: navbar, navbar-brand, navbar-nav, nav-item, nav-link.

Navs e Tabs

• Menu di navigazione orizzontali e verticali.
• Struttura: nav, nav-item, nav-link, tab-content.

Pagination

• Paginazione.
• Struttura: pagination, page-item, page-link.

Placeholder

• Elementi segnaposto.
• Struttura: placeholder, placeholder-glow, placeholder-wave.

Popover

• Informazioni aggiuntive.
• Struttura: popover, popover-header, popover-body.

Progress

• Barre di progresso.
• Struttura: progress, progress-bar.

Scrollspy

• Rilevamento posizione di scroll.
• Struttura: scrollspy, data-bs-spy, data-bs-target.

Spinner

• Indicatori di caricamento.
• Classi principali: spinner-border, spinner-grow.

Toast

• Notifiche veloci.
• Struttura: toast, toast-header, toast-body.

Tooltip

• Suggerimenti visuali.
• Struttura: tooltip, data-bs-toggle.

Helpers e Utilities

Helpers

• Soluzioni a problemi specifici.
• Esempi: text-bg-primary (testo e background contrastanti), focus-ring (anello di focus), icon-link (link con icona), text-truncate (testo troncato).

Utilities

• Classi generiche per singoli valori.
• Esempi: bg-primary, border, text-start, m-1, p-2.

Esempi e Temi

Esempi

• Headers, Hero section, Features, Sidebars, Footers, Dropdowns, List Groups, Breadcrumbs.
• Custom components: Checkout, Pricing, Sign-in, Dashboard.

Temi

• Temi premium per progetti commerciali.
• Disponibili per multiple piattaforme (html, React).