Introduzione

Come usare Bootstrap Italia nel tuo progetto

Caricare la libreria

Per utilizzare il codice compilato di Bootstrap Italia nel proprio progetto, è sufficiente scaricare ed includere nella pagina HTML alcuni file, tra cui un file CSS, un Javascript, i fonts e una SVG sprite, il tutto scaricabile qui:

Scarica Bootstrap Italia v1.6.4

Importante!

È sempre consigliabile utilizzare la versione più recente della libreria e mantenerla aggiornata sui propri progetti.

Non occorre usare semplicemente la versione 1.0.0! La versione più recente tra le release di progetto contiene anche tutti i miglioramenti e le correzioni disponibili fino ad oggi.

Se si preferisce usare i file sorgente di Bootstrap Italia nel proprio progetto attraverso il package manager npm, si può fare riferimento alle indicazioni di come utilizzare la libreria come dipendenza.

Le librerie Javascript e CSS di Bootstrap Italia personalizzano e comprendono anche il codice originale di Bootstrap 4.6.1, ereditandone quindi tutte i selettori, le funzionalità, ecc., che sono consultabili al sito di Bootstrap stesso.

La libreria è accessibile anche via CDN su jsDelivr o unpkg, di cui però è sconsigliato l’utilizzo in ambienti di produzione.

Di seguito le informazioni per l’utilizzo dei singoli file.

CSS

Una volta scaricato e decompresso il file, all’interno della cartella css sarà presente un file CSS minificato (bootstrap-italia.min.css) con la sua sourcemap (opzionale).

Per includere questo file all’interno del proprio progetto sarà sufficiente aggiungere il tag <link> di seguito riportato all’interno del tag <head> della pagina, prima di ogni altro CSS già presente, eventualmente correggendo il riferimento al percorso del file:

<link rel="stylesheet" href="./bootstrap-italia.min.css" />

Javascript

All’interno della cartella js saranno invece presenti due file, che si differenziano soltanto per l’inclusione in linea delle librerie jQuery e popper.js. Vediamo nel dettaglio di cosa si tratta:

JS files	Popper	jQuery
`bootstrap-italia.bundle.min.js`	Incluso	Incluso	Incluso
`bootstrap-italia.min.js`	Non Incluso	Non Incluso	Non Incluso

In questo caso, dopo aver copiato i file all’interno del progetto, sarà sufficiente inserire una versione dei tag <script> di seguito riportati alla fine della pagina HTML, giusto prima della chiusura del tag </body>. Si potrà quindi scegliere se includere la versione *.bundle.* o caricare i singoli file separatamente (questo può rendersi necessario, ad esempio, se jQuery è già incluso nel vostro sito per altri motivi).

Fonts

È necessario anche includere i file relativi ai font referenziati nel CSS, mantenendo i path dei singoli font utilizzato nei file sorgente della libreria. Il path di base della cartella dei font può essere impostato utilizzando la variabile globale prima del caricamento della libreria Javascript di Bootstrap Italia:

<script>
  window.__PUBLIC_PATH__ = '/bootstrap-italia/dist/fonts'
</script>

Se tale variabile non è valorizzata, i font saranno cercati all’interno di una cartella /bootstrap-italia/dist/fonts/.

Icone

Le icone a disposizione sono un componente assolutamente opzionale e sono pubblicate nella libreria sotto forma di sprite SVG /bootstrap-italia/dist/svg/, le cui singole SVG sorgenti sono presenti nel repository.

Per informazioni, si può fare riferimento alla documentazione sull’utilizzo delle icone.

Versione “bundle”

Includendo la versione *.bundle.*, non sarà necessario aggiungere ulteriori riferimenti a jQuery e Popper.js, in quanto già inclusi nel file bootstrap-italia.bundle.min.js.

<script src="./bootstrap-italia.bundle.min.js"></script>

Versione semplice

Al contrario, nel caso si preferisca caricare jQuery e Popper.js separatamente, sarà necessario includere i tag <script> come mostrato di seguito:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="./bootstrap-italia.min.js"></script>

Pagina HTML di esempio

In breve, si dovrebbe ottenere qualcosa di simile a ciò che segue:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- CSS -->
    <link rel="stylesheet" href="./bootstrap-italia.min.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- JS -->
    <script src="./bootstrap-italia.bundle.min.js"></script>
  </body>
</html>

Questo è tutto ciò che è sufficiente per avere a disposizione le funzionalità e gli stili di Bootstrap Italia.

Altri esempi

Assieme a questa documentazione, si possono consultare una vasta quantità di esempi, consultabili sia alla sezione esempi e progetti di questo sito, che sul sito di Bootstrap, con i quali è possibile iniziare a personalizzare la tua pagina semplicemente copiando il loro codice sorgente.

Il codice sorgente di tali esempi si può trovare anche nel repository di Bootstrap Italia, nella cartella docs/esempi/.

Tra i progetti si possono trovare molti riferimenti a progetti terzi che fanno uso di Bootstrap Italia, come i temi per alcuni CMS, generatori di siti statici e framework per il web.

Utilizzo come dipendenza

Alternativamente, se si utilizza Webpack o altri module bundler per l’inclusione di librerie esterne attraverso npm, è possibile aggiungere Bootstrap Italia come dipendenza con il seguente comando:

npm i bootstrap-italia --save

Impostazioni globali

Il framework Bootstrap, e di conseguenza il tema Bootstrap Italia, utilizza e richiede alcune impostazioni globali di cui è bene essere al corrente durante lo sviluppo, che tendono normalizzare gli stili tra i vari browser. Di seguito alcune di esse.

Doctype HTML5

Bootstrap richiede l’uso del doctype HTML5.

<!DOCTYPE html>
<html lang="it">
  ...
</html>

Meta tag responsive

Bootstrap è sviluppato in modalità mobile first: per assicurare un rendering e una gestione dello zoom ottimale per ogni dispositivo, è necessario aggiungere il meta tag responsive che segue all’interno del tag <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

È possibile visualizzare un’esempio di tale codice applicato nella pagina html di esempio.

Box-sizing

Per un migliore dimensionamento degli elementi nella pagina, Bootstrap occorre impostare il valore di box-sizing da content-box a border-box. Questo assicura che ogni padding non abbia effetto sulla dimensione finale di un elemento, ma a volte può causare qualche problema con codice di terze parti come Google Maps o Google Custom Search Engine.

Nelle rare occasioni sia necessario sovrascrivere il comportamento impostato da Bootstrap, sarà sufficiente utilizzare codice simile a quanto segue:

.selettore-per-creare-eccezione {
  box-sizing: content-box;
}

Si possono trovare dettagli aggiuntivi alla pagina corrispondente sul sito ufficiale di Bootstrap.

Reboot

Infine, per normalizzare alcuni comportamenti cross-browser, Bootstrap Italia eredita da Bootstrap il cosiddetto “Reboot”, una serie di regole CSS che correggono inconsistenze tra browsers e dispositivi.

Continua la lettura >

Se ti interessa contribuire alla libreria e sapere come funziona il processo di compilazione dei file e la creazione della documentazione di Bootstrap Italia, continua a leggere alla pagina strumenti di compilazione e contribuzione.