Skip to main content

Introduzione

Come usare Bootstrap Italia nel tuo progetto

Caricare la libreria

Per utilizzare il codice compilato di Bootstrap Italia nel tuo progetto, è sufficiente scaricare ed includere nella pagina HTML alcuni file, tra cui un file CSS e un Javascript, scaricabili sottoforma di file compresso alla pagina delle release di progetto:

Scarica Bootstrap Italia v0.30.0

Se preferisci usare i file sorgente di Bootstrap Italia nel tuo progetto attraverso il package manager npm, puoi fare riferimento a queste indicazioni.

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

La libreria è accessibile anche via CDN su jsDeliver: Boostrap Italia.
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 tuo progetto sarà quindi 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">

Utilizzando jsDeliver:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-italia@0.30.0/dist/css/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, popper.js e Owl Carousel (quest’ultimo necessario soltanto se presenti componenti di tipo Carousel). Vediamo nel dettaglio di cosa si tratta:

JS files Popper jQuery OwlCarousel
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 vostro 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).

Versione “bundle”

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

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

Utilizzando jsDeliver:

<script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@0.30.0/dist/js/bootstrap-italia.bundle.min.js"></script>

Versione semplice

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<script src="./bootstrap-italia.min.js"></script>

Utilizzando jsDeliver:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-italia@0.30.0/dist/js/bootstrap-italia.bundle.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 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/.

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">

Puoi vedere un’esempio di tale codice applicato nella pagina html di esempio.

Box-sizing

Per un migliore dimensionamento degli elementi nella pagina, Bootstrap imposta 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 o 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.

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy