Unito.it

Tema Unito v2

Introduzione

CSS

Copia e incolla il foglio di stile <link>nel tuo <head> di tutti gli altri fogli di stile per caricare il nostro CSS.

<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v2/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.

<link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v2/css/bootstrap-unito.configs.css">

Js

Sulla CDN è presente un bundle javascript contenente jQuery e le altre librerie javascript necessarie, salvo quelle da includere manualmente, come da tabella:

JS files Popper jQuery OwlCarousel (legacy) Headroom vedi Header Splide vedi Carousel
bootstrap-unito.bundle.min.js
 Incluso Incluso Incluso Non Incluso Non Incluso 
<script src="https://cdn.unito.it/unito-theme/v2/js/bootstrap-unito.bundle.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/v2/css/bootstrap-unito.configs.css">
    <link rel="stylesheet" href="https://cdn.unito.it/unito-theme/v2/css/bootstrap-unito.min.css">
    <!-- FAVICON --> 
    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.unito.it/unito-loghi/favicon/favicon.png" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- JS -->
    <script src="https://cdn.unito.it/unito-theme/v2/js/bootstrap-unito.bundle.min.js"></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>

Footer fisso a piede

Utilizzando un elemento con classe .ContentContainer è possibile far si che il footer venga posizionato sempre a piede della pagina, anche nei casi in cui la pagina contenga scarsa quantità di contenuto.

All'interno di questo elemento andranno collocati i contenuti di <header> e <main> della pagina, mentre i contenuti di <footer> andranno collocati al di fuori di esso. Ulteriori informazioni sono cotnenute nella pagina di documentazione del 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.

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

Torna su