←
Lucio Asciolla
Full Stack Developer
Bootstrap è un Framework Toolkit front-end, il più utilizzato, nato nel 2010 da Twitter per meno delgi sviluppatori Mark Otto e Jacob Thornton.
Con Bootstrap puoi sviluppare interfacce web, attraverso template HTML preconfezionati responsive.
Si tratta del progetto più popolare sulla piattaforma GitHub, con oltre 58.000 star e più di 20.000 fork.
Su un gran numero di siti web troviamo tracce del codice di questo framework.
E' possibile installare ed utilizzare bootstrap all'interno di praticamente qualunque progetto: siti custom, come pacchetto NPM in Node.Js e all'interno di diversi CMS come Wordpress e Prestashop.
Bootstrap, si base sostanzialmente su: HTML, CSS e SASS, JAVASCRIPT e JQUERY.
Esamineremo:
La principale caratterisca di questo framework-toolkit è rappresentata dal fatto che il framework è concepito nativamente come uno strumento adatto alla realizzazione di siti responsivi basandosi sull'approccio "mobile first".
Una pagina basata su Bootstrap è di default adattabile ad una gamma ampia di device, smartphone, tablet, laptop fino a schermi con una viewport di altissima risoluzione.
Tutto questo è possibile mediante l'utilizzo di una particolare griglia che rende il layout di default fluido.
Indipendentemente dalle modalità di installazione del framework, la struttura, ad eccezione dell' unica soluzione mediante CDN, che ci troveremo davanti sarà "simile" alla seguente.
bootstrap/ ├── js/│ ├── bootstrap.js│ ├──└── css/bootstrap.min.js│ ├── bootstrap.css│ ├── bootstrap.min.css│ ├── bootstrap.css.map│ ├── bootstrap-theme.css│ ├── bootstrap-theme.min.css│ ├── bootstrap-theme.css.map└── font/│ ├── arial-regular.woff│ ├── arial-regular.tff│ ├── ...
| bootstrap.css | codice CSS leggibile interamente |
| bootstrap.min.css | codice CSS ridotto/minificato |
| bootstrap.css.map | codice CSS source-map che contiene i file sorgente originali in formato LESS |
| bootstrap-theme.css | file CSS dei temi opzionali già pronti |
| bootstrap-theme.min.css | codice CSS ridotto/minificato del tema |
| bootstrap-theme.css.map | codice CSS source-map che contiene i file sorgente originali in formato LESS del tema |
| bootstrap.js | codice JS leggibile interamente |
| bootstrap.min.js | codice JS ridotto/minificato |
Questa rappresenta la struttura base di un installazione in locale del framework bootstrap.
In realtà vedremo più avanti che a seconda del tipo di installazione la struttura delle cartelle ed i file contenuti in essa saranno più complesse e popolate.
La directory "js" contiene la versione di sviluppo, "bootstrap.js" e la versione minificata "bootstrap.min.js".
In un unico file abbiamo dunque il codice di tutti i plugin e componenti Javascript.
Chiaramente questa cartella potrà contenere ulteriori file aggiuntivi per plugin e componenti.
Allo stesso modo la directory "css" contiene i file necessari alla costruzione del nostro layout.
Il primo, "bootstrap.css" rappresenta il core del framework, il CSS con tutti gli stili dei diversi componenti nella loro configurazione di base; il secondo "bootstrap.min.css" la sua versione minificata; il terzo foglio di stile, "bootstrap-theme.css", comprende una serie di regole che ridefiniscono alcuni di questi stili in modo da costituire una sorta di tema o skin rispetto al CSS principale; il quarto "bootstrapp-theme.min.css" la versione minificata di quest'ultimo.
Nella cartella font sono contenute tutti i font utilizzabili di default all'interno del framework; sono incluse icon-fonts.
La differenza tra ".css" e ".min.css" è abbastanza sottile; non si tratta di un'estensione ma una "nomenclatura" che sta ad indicare, a chi interviene sul codice, che quel file è minificato, ovvero, sono stati rimossi gli a capo e alcuni spazi.
/* file .css */
body {
background: blue;
color:red;
font-size: 1rem;
}
/* file min.css */
body{background:blue;color:red;font-size:1rem;}
Non dovremmo includi entrambe i files in un sito, si tratterebbe di una doppia lettura e spreco di risorse, in quanto, sostanzialmente si tratta di file uguali.
Quando si importiamo librerie Javascript o fogli di stile dovremmo sceglierne in base alle esigenze:
JS/CSS semplici se hai necessità di modificarle o "min.js"/"min.css" se non ce la necessità.
La versione minimale funziona leggermente più veloce di quella normale.
LESS è un pre-processore CSS che estende il normale linguaggio CSS permettendo (oltre alla normale sintassi dei fogli di stile) anche l'utilizzo di funzioni, operatori e variabili, la nidificazione delle istruzioni, la creazione di "mixin" e numerose altre caratteristiche che rendono il codice più facile da scrivere, da mantenere e da comprendere.
SASS come LESS, sono 2 pre-processori CSS che estendono le funzionalità del normale codice CSS, aggiungendo alcune features che normalmente sarebbero esclusive dei linguaggi di programmazione.
Lo scopo è quello di velocizzare la scrittura di codice e migliorare il suo mantenimento.
I browser attuali leggono solo ed esclusivamente codice CSS, quindi i linguaggi come SASS e LESS devono essere convertiti sempre in codice CSS. Da qui il termine di pre-processori.
Uno dei problemi introdotti dall'uso di un pre-processore, specie quando si utilizzano vari file importati con la direttiva @import, si manifesta in fase di debugging.
Se infatti apriamo gli strumenti per sviluppatori del browser e ispezioniamo le regole applicate a un certo elemento, viene fatto riferimento solo al file CSS finale.
In un progetto di grandi dimensioni può risultare particolarmente complicato risalire al file originale che contiene la regola a cui siamo interessati.
Per risolvere questo tipo di situazioni possiamo generare file "source-map" che mantengono le informazioni sui file originali.
Risorse in rete:
https://www.mrw.it/css/semplificare-debugging-source-maps_12571.html
Esistono diversi modi di installare bootstrap sul nostro sito/applicativo:
| Scaricare la versione compilata | dovremo provvedere a caricare i file sul nostro hosting localmente |
| Scaricare la versione con codice sorgente (source code) | dovremo provvedere a caricare i file sul nostro hosting localmente |
| Mediante CDN | dovremo collegare le nostre pagine mediante i tags <script src=""> e <link href=""> |
| Mediante NPM | dovremo installare il modulo mediante node-package-manager |
Il download della "versione compilata" bootstrap rappresenta la struttura vista poc'anzi con i file compilati e minificati, non include invece la documentazione, gli esempi ed il codice sorgente.
Questa è la forma più semplice di Bootstrap.
Sono inclusi i file compilati per un rapido utilizzo in quasi tutti i progetti web.
Fornisce i file CSS e JS ( bootstrap.*) compilati, nonché CSS e JS ( bootstrap.min.*) compilati e minimizzati.
Le mappe sorgente ( bootstrap.*.map) sono disponibili per l'uso con gli strumenti di sviluppo di alcuni browser.
I file JS in bundle, "raccolta" ( bootstrap.bundle.js e minimizzati bootstrap.bundle.min.js) includono Popper .
Il download della "versione con codice sorgente" bootstrap include le risorse CSS e JavaScript compilate e minificate, insieme a Sass, JavaScript e documentazione di origine e degli esempi.
La struttura dei file cambia leggermente:
bootstrap/ ├── dist/ │ ├── css/ │ └── js/ ├── site/ │ └──content/ │ └── docs/ │ └── 5.2/ │ └── examples/ ├── js/ └── scss/
Le directory "/scss" e "/js" contengono il codice sorgente per i nostri CSS e JavaScript.
La directory "/dist" include tutto ciò che è elencato sopra nella sezione di download della versione compilata.
La directory "/site" include la documentazione e alcuni esempi di utilizzo di Bootstrap.
E' possibile installare bootstrap nelle tue app basate su Node.js con il pacchetto npm:
npm install bootstrap@5.2.2Per l'utilizzo è opportuno leggere la documentazione del modulo stesso.
Possiamo evitare il download ed includere ugualmente bootstrap mediante l'utilizzo dei tags <script> e <link> all'interno del nostro progetto; collegheremo esclusivamente i file CSS e JS compilati ed eventuali dipendenze JS come Popper:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <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>
Collegando il file "bootstrap.bundle.min.js" stiamo integrando automaticamente il file "bootstrap.min.js" ed anche Popper, tattandosi di un bundle.
Se volessimo gestire le integrazioni separatamente dovremo procedere come segue:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
Essendo Popper, file "popper.min.js", una dipendenza di bootstrap e quindi del file "bootstrap.min.js" è bene includerlo prima di quest'ultimo.
L'integrazione mediante CDN rappresenta l'integrazione più immediata e semplice da eseguire.
Per iniziare subito ad utilizzare bootstrap sarà sufficiente creare il nostro file index.html ed includere il seguente codice:
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Quick start</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 precedente snippet rappresenta una pagina html con gli elementi <head> e <body>; notiamo all'interno di <head> il tag <link> che include il file css minificato "bootstrap.min.css"; invece includiamo prima della chiusura del tag <body> attraverso il tag <script> il file "bootstrap.bundle.min.js".
Lo includiamo alla fine perchè non vogliamo ritardare la lettura della pagina DOM che in alternativa dovrà attendere che sia letto il file js-bundle.
Il tag <!doctype html> in Bootstrap è obbligatorio. Senza di esso, vedrai uno stile funky, scombinato e incompleto.
Bootstrap è sviluppato prima per dispositivi mobili per garantire un rendering e uno zoom al tocco corretti per tutti i dispositivi, dobbiamo aggiungere il meta tag del viewport reattivo nel tag <head>
<head> ... <meta name="viewport" content="width=device-width, initial-scale=1"> ... </head>
Per uniformare gli elementi che compongono un interfaccia e la loro suddivisione in colonne, bootstrap, cambia il valore di default del "box-sizing" da content-box a border-box.
Questo può causare qualche problematica con gli elementi di terze-parti come "Google Maps" e "Google Custom Search Engine".
In queste rare occasioni possiamo sovrascrivere il comportamento di default di bootstrap creando una classe come quella che segue:
.content-box-sizing{
box-sizing: content-box;
}
applicandola agli elementi che necessitano del valore "content-box" in questo modo:
<div class="col content-box-sizing"> ... </div>