Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Installazione

Installazione

Per utilizzare il codice compilato di Bootstrap Regione Lombardia nel proprio progetto, è sufficiente scaricare ed includere nella pagina HTML alcuni file, tra cui:

  • il foglio di stile contenuto nel file CSS
  • le funzionalità dei vari componenti contenute nel bundle JavaScript
  • i font
  • lo sprite SVG contenente le icone

il tutto scaricabile qui:

Scarica Bootstrap Regione Lombardia rl2.4.1

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

Utilizzo come dipendenza

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

npm i bootstrap-lombardia --save

CSS

Una volta scaricato e decompresso il file, all’interno della cartella css sarà presente un file CSS minificato (bootstrap-lombardia.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="<path-a-bootstrap-lombardia>/dist/css/bootstrap-lombardia.min.css" />

JavaScript

All’interno della cartella js saranno invece presenti il file di bundle, il file non bundle e i componenti suddivisi in moduli.

Versione bundle

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 includere la libreria in questo modo:

<script src="<path-a-bootstrap-lombardia>/dist/js/bootstrap-lombardia.bundle.min.js"></script>

Versione non bundle

Per la versione non bundle, 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 includere la libreria in questo modo, inserendo solo le dipendenze che servono al nostro progetto (qui nell’esempio sono inserite solo alcune per riferimento):

<!--- Dipendenze da inserire solo se usate -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<!--- Versione non bundle di Bootstrap Italia -->
<script src="<path-a-bootstrap-lombardia>/dist/js/bootstrap-lombardia.min.js"></script>

Fonts

È necessario anche includere i file relativi ai font referenziati nel CSS, mantenendo i path dei singoli font utilizzato nei file sorgente della libreria. L’inclusione dei font può avvenire utilizzando CSS o JavaScript.

Via JavaScript

Per caricare i font utilizzando JavaScript occorre chiamare esplicitamente la funzione loadFonts passando il percorso della cartella dove si trovano i font.

<script>
  bootstrap.loadFonts('/bootstrap-lombardia/dist/fonts');
</script>

Icone

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

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