Stai creando e progettando siti ancora da zero senza fare affidamento a qualche CMS come Joomla o WordPress? Vuoi avere comunque strumenti di sviluppo al passo con i tempi e avere il tuo sito capace di girare su tutti i dispositivi , dal pc al telefonino senza complicarti troppo la vita?
Bootstrap fa al caso tuo! E’ una piccola libreria CSS e Javascript che ti permette con pochi semplici passaggi di avere un sito con design accattivante e “fluido” ovvero “responsive” su ogni dispositivo su cui viene visualizzato. Un tool “must have” per ogni sviluppatore che crea un sito web e che, del resto, in varie forme o biforcazioni, è già incluso nei CMS commerciali. Per i puristi del codice, dalla versione 5 è interamente basata su Javascript Vanilla, contrariamente alle precedenti dove incorporava JQuery, con un balzo di qualità e velocità.
Entriamo nel vivo. Basta pochi copia incolla e una pagina banale con una lista HTML cambia già aspetto!
Le istruzioni sono già contenute nel sito, quindi seguiremo e commenteremo quello che leggiamo nella guida ufficiale. Nel momento in cui scriviamo questa lezione, Bootstrap è alla v5.3 e potete reperire il kit qui -> Link
Un po’ come visto in JQuery (qui), potete saltare il download e reperire i vari file direttamente online diminuendo la latenza del vostro sito, occhio che i link puntano ad una versione precisa della libreria/file che giocoforza, prima o poi, verrà soppiantata da altre versioni e potrebbe essere eliminata dai server rendendo inutilizzabile il vostro sito. Suggerisco sempre di scaricare la versione locale sul vostro sito e farla puntare con path relativi, valutando se aggiornare i file statici quando ci fosse una nuova versione, piuttosto che lasciare ad oltranza l’esistente o di tenere i siti web aggiornati con le versioni diffuse.
Per fare un test rapido su una vostra paginetta esistente, provate ad aggiungere nello <head></head> questo link al foglio di stile ufficiale, anche accanto a quelli che già avete/utilizzate. Un banale refresh della vostra pagina e probabilmente la vostra pagina assume già altra forma! Nel corpo della pagina aggiungete invece il caricamento dello script js ufficiale come riportato nell’esempio.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Il vantaggio di caricare il js a fondo pagina è che il js che serve per creare animazioni e feedback utente e non è strettamente necessario caricarlo ad inizio pagina, in modo pigro ovvero lazy mode, dove è più importante caricare la grafica e le immagini. Sembrerà strano al lettore ma un sito web che si carica in troppo tempo o non da subito una resa grafica, spazientisce l’utente che potrebbe addirittura andare via dal sito stesso facendoci perdere un potenziale cliente. Potete sempre misurare la velocità del vostro sito con tool online come Google Insight
Se invece scaricate il file zip, avrete due cartelle css e una js con un discreto numero di file. Non vi preoccupate, lasciateli cosi nelle cartelle del vostro sito/pagina web e includiamo solo l’essenziale.
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>Con questi file, siamo operativi. Aggiungeteli di default ad ogni sito che fate o esempio che seguite su questo sito. Li trovate anche negli zip con i codici integrali dei nostri esempi.
Anche andando ad inserire qualche testo e paragrafo, in questo esempio forse non si vede molto. Già di default in una pagina semplice o applicando i css e js di Bootstrap in una pagina esistente, vengono eliminati i margini al box-content e viene applicato un sistema detto Reboot che lima alcune inconsistenze tra browser nel rendering dei selettori css e ridefinisce svariati tag standard.
Alternative
Bootstrap non è l’unico framework frontend. Con questa filosofia ne esistono diversi. A cominciare dall’alternativa più blasonata Fundation e Tailwind. Seguono altri progetti interessanti come Bulma, Pure.css e Skeleton. Ogni sviluppatore o progetto possono richiedere un framework o un altro in base allo stile grafico, leggerezza o funzionalità a disposizione. Molti sviluppatori attualmente si orientano a Tailwind che consente di creare componenti grafici riutilizzabili e personalizzabili. Bootstrap rimane un’ottima soluzione professionale ma con una curva di apprendimento semplice per scuola.
Ultima modifica 1 Ottobre 2024
