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 notevole sforzo di codice ma 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 gia contenute nel sito, quindi seguiremo e commenteremo quello che leggiamo nella guida ufficiale. Nel momento in cui scriviamo questa lezione, Bootstrap è alla v5.2 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, ma come per JQuery, 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.
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 nella pagina, spesso a fondo pagina, è che il js che serve per creare animazioni e feedback utente non è strettamente necessario caricarlo ad inizio pagina ma anche, in modo pigro ovvero lazy mode, più avanti dopo la grafica e le immagini.
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. Vanno pur sempre aggiunti popper e jquery ma potete scaricarli direttamente dal link in src e salvare i file nella vostra cartella js come file di testo con nome ed estensione già suggeriti. Gli script js qualcuno li inserisci in fondo alla pagina, prima della chiusura del body. E’ una scelta per gestire i tempi di caricamento della pagina.
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.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.
Ultima modifica 16 Ottobre 2022