Introduzione
CSS
Copia e incolla il codice HTML per includere il foglio di stile nella <head> del documento.
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito.min.css">Personalizzazione
All'interno di bootstrap-unito.configs.css sono contenuti alcuni codici colore che, se modificati, permettono di personalizzare la cromia generale del sito. Utilizza questo codice prima di caricare il CSS generale indicato sopra.
Sono disponibili questi file di configuazione:
Palette Principale
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito.configs.css">Palette Blu
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito-blu.configs.css">Palette Vermiglio
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito-vermiglio.configs.css">Palette Verde
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito-verde.configs.css">Palette Oliva
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito-oliva.configs.css">Palette Cobalto
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito-cobalto.configs.css">Puoi vedere le palette di questi file di configurazione nella pagina Colori
Js
Sulla CDN sono presenti due file javascript da includere, uno contenente il javascript Bootstrap e relative librerie, uno lo script per il supporto delle navigazione da tastiera
| JS files | Popper 2.9.2 | Anime 3.2.1 | Splide 4.1.4 |
|---|---|---|---|
bootstrap-unito.bundle.min.js |
Incluso | Incluso | Incluso |
keyboardNav.min.js |
n/a | n/a | n/a |
<script src="https://cdn.unito.it/unito-theme/v3/js/bootstrap-unito.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.unito.it/unito-theme/v3/js/keyboardNav.min.js" crossorigin="anonymous"></script>
Doctype HTML5
Bootstrap richiede l’uso del doctype HTML5, come segue:
<!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" />
Pagina HTML di esempio
In breve, si dovrebbe ottenere qualcosa di simile a ciò che segue:
<!doctype html>
<html lang="it">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito.configs.css">
<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v3/css/bootstrap-unito.min.css">
<!-- FAVICON -->
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.unito.it/unito-loghi/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.unito.it/unito-loghi/favicon/favicon-16x16.png">
<link rel="manifest" href="https://cdn.unito.it/unito-loghi/favicon/site.webmanifest">
<link rel="mask-icon" href="https://cdn.unito.it/unito-loghi/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.unito.it/unito-loghi/favicon/apple-touch-icon.png">
<!-- Windows Os Start Screen color -->
<meta name="msapplication-TileColor" content="#e3e4e6">
<!-- Browser UI Color -->
<meta name="theme-color" content="#ffffff">
</head>
<body>
<h1>Hello, world!</h1>
<!-- JS -->
<script src="https://cdn.unito.it/unito-theme/v3/js/bootstrap-unito.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.unito.it/unito-theme/v3/js/keyboardNav.min.js" crossorigin="anonymous"></script>
</body>
</html>
Contenitori body boxed
Utilizzando la classe .container in body si ottiene un contenitore limitato alla larghezza orizzontale di 1384px.
<body class="container">
<!-- Content here -->
</body> Contenitori body full
Usa la classe .container-fluid in body ed esso occuperà in larghezza tutta l’area a sua disposizione.
<body class="container-fluid">
<!-- Content here -->
</body> Posizionamento del footer
Il footer dispone di classi opzionali per il posizionamento del footer in pagina, rendendo possibile posizionarlo in modo fisso a piede, anche in caso di scarso contenuto all'interno della pagina.
Se vengono utilizzate queste classi è necessaria la presenza un elemento con classe .ContentContainer all'interno del quale andranno collocati i contenuti di <header> e <main> della pagina, che saranno seguiti dal contenuto di <footer>.
<body class="container">
<div class="ContentContainer">
<header>
....
</header>
<main>
.....
</main>
</div>
<footer>
...
</footer>
</body> Note sull'utilizzo degli SVG
I browser che implementano le policy CORS (Cross-Origin Resource Sharing) possono bloccare il caricamento di risorse esterne quali i file SVG se istanziati attraverso il tag <USE>, se questi sono presenti su un dominio differente rispetto alle pagine web. Quando questo accade, si consiglia di utilizzare una copia locale di queste risorse e caricarte attraverso un percorso relativo ad esempio:
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-folder"></use>
</svg>Il percorso ./dist/svg in esempio è arbitrario e può essere sostituito con un percorso a piacere, a patto che sia relativo.
SVG e accessibilità
Come ogni elemento visivo, gli SVG necessitano di attributi descrittivi ai fini dell'accessibilità. Vi sono diversi modi di implementare questi requisiti nel codice; si veda:
Note sulla documentazione
Per alcune funzionalità o componenti Bootstrap, non personalizzati esplicitamente in questo tema, sono forniti riferimenti alla documentazione esterna residente su Bootstrap Italia. Nel menù di navigazione, quesi riferimenti sono caratterizzati dall'icona
Migrazione dalla versione precedente
Un elenco dei principali cambiamenti rispetto alla versione precedente del tema è disponibile a questa url