00 – Introduzione a Bootstrap

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 Js vanilla 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.

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.1.3 e potete reperire il kit qui -> Link

Un po’ come JQuery, 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. Come per Jquery, 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>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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 gia 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/jquery-3.3.1.slim.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.

In allegato un semplice esempio complessivo che trovate anche qui sotto con gli script caricati da remoto e posizionati in fondo per non interferire nel download della pagina. Da questo forse non si vede molto ma gia di defualt 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. Nel link, una lista completa.

Ultima modifica 30 Gennaio 2022