INTRODUZIONE

Bootstrap rende lo sviluppo web più facile e veloce. E' realizzato per persone con differenti livelli di competenza, dispositivi di tutte le forme, e progetti di tutte le dimensioni.

DOWNLOAD

Bootstrap

CSS minimizzato e compilato, JavaScript, fonts. Nessuna documentazione.
Scarica Bootstrap

Sorgente

Sorgente Less, JavaScript, font, documentazionecompleta. Richiede un compilatore Less e alcune altre installazioni.
Scarica sorgente

Sass

Porting di Bootstrap da Less a Sass per integrarlo con facilità in progetti Rails, Compass, Sass.
Scarica Sass

NB: La versione corrente è 3.3.6.

BOOTSTRAP su CDN

MaxCDN offre i CDN per il CSS e il JavaScript di Bootstrap. 

<!– CSS versione production (compilato e minimizzato) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384- 1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!– Tema (opzionale) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384- fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- JavaScript versione production (compilato e minimizzato) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384- 0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

TEMPLATE MINIMALE

<!DOCTYPE html>
<html lang="it">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!– Questi 3 meta tags *devono* venire per primi; tutti gli altri componenti della heade devono seguire-->

   <title>Bootstrap 101 Template</title>
   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">

   <!-- HTML5 shim and Respond.js per rendere IE8 compatibile agli elementi HTML5 e alle media queries -->
   <!-- ATTENZIONE: Respond.js non funzione co il protocollo file:// -->
   <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
   <![endif]-->

</head>

<body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

</body>

</html>

MOBILE FIRST

Per assicurare un rendering appropriato e lo zoom al tocco, aggiungi il meta tag viewport nell'intestazione, <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Puoi disabilitare la funzionalità di zoom sui dispositivi Mobile aggiungendo user- scalable=no al meta tag viewport. Questo disabilita la possibilità di zoomare, e cioè gli utenti potranno solo scorrere su e giù la pagina. Il risultato sul sito darà la sensazione di avere a che fare più che con una pagina web con un'applicazione nativa per smartphone. Da usare con cautela!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

TIPOGRAFIA DI BASE

Bootstrap imposta alcuni stili di base globali sui caratteri o lo stile dei link. In particolare:

Imposta background-color: #fff; sul body

Usa le variabili less @font-family-base, @font-size-base, e @line-height-base come base per la dimensione dei caratteri

Imposta globalmente il colore dei link utilizzando la variabile @link-color e li sottolinea solo ad :hover

Queste impostazioni posso essere modificate:

  • Modificando il file variables.less e ricompilando bootstrap.css con il compilatore less.
  • Utilizzando la pagina http://getbootstrap.com/customize/ per personalizzare e quindi scaricare Bootstrap.

CONTENITORE

Il meccanismo di responsività e in generale l'impostazione visuale dei siti realizzati con bootrap avviene attraverso un certo numero di classi css predefinite.

Le classi .container e .container-fluid definiscono la larghezza totale che gli elementi della pagina assumono sui vari dispositivi.

IL SISTEMA GRIGLIA

Bootstrap include un sistema a griglia responsivo, fluido e mobile basato su12 colonne che vengono dimensionate in base alle dimensioni della finestra del dispositivo.

I sistemi a Griglia (grid systems) sono usati per creare layout di pagina fatti di righe e colonne destinati a organizzare i contenuti. Di seguito si mostra come funziona il sistema a griglia di Bootstrap:

  • Le righe (.row) devono essere piazzate all'interno del .container (fixed-width) o del .container-fluid (full-width) per un allineamento e un padding corretto.
  • Le righe (.row) contengono un gruppo orizzontale di colonne.
  • Tutti i contenuti vanno inseriti all'interno delle colonne, e solo le colonne possono essere figli immediati delle righe.
  • Sono disponibili le classi predefinite .row e .col-*-* per la gestione della griglia.
  • Le Colonne creano degli spazi (gap fra colonna e contenuto) attraverso padding. Questo padding si compensa nelle righe per la prima e l'ultima colonna con un margine negativo sulle .row.
  • Per ogni colonna della griglia si specifica quante delle 12 colonne disponibili che si vogliono occupare. Ad esempio, per definire tre colonne uguali che occupino l'intera riga si può assegnare la classe .col-xs-4 a tutte tre le colonne.

MEDIA QUERIES

Per creare i breakpoint nel grid system (sistema a griglia) vengono usate queste media queries all'interno delle quali vengono definite gli stilidei vari componenti (contenitori, colonne, offset, navabr, ecc.).

/* extra small (smartphones, fino a 767px) */

/* Nessuna media query è il default in Bootstrap */

 

/* small (tablets, da 768px a 991px) */

@media (min-width: 768px) { ... }

 

/* medium(desktops, da 992px a 1199px) */

@media (min-width: 992px) { ... }

 

/* large (large desktops, da 1200px) */

@media (min-width: 1200px) { ... }

LA CLASSE .col-xx-x

La classe .col-xx-x si declina cos':

.col-{xs|sm|md|lg}-{1-12}

Al prefisso .col- segue una sigla che rappresenta il breakpoint per cui vale la regola e infine il numero che rappresenta la larghezza della colonna in dodicesimi. La colonna sarà larga il numero indicato per i dispositivo dei larghezza maggiore o uguale al breakpoint e il 100% (12 colonne) per dispositivi di larghezza inferiore, a meno che altre classi .col- non specifichino diversamente.

Se per esempio assegno class="col-sm-6 col-md-3" ad una colonna questa sarà larga;

  • 3 colonne (cioè il 25%) sui dispositivi di larghezza superiore a 991px
  • 6 colonne (cioè il 50%) su dispositivi di larghezza tra 768px e 991px
  • 12 colonne (cioè il 100%) su dispositivi di larghezza inferiore a 767px

ANNIDAMENTO

La struttura a righe e colonne può essere annidate. Un colonna, cioè può contenere un struttura righe-colonne

<div class="container">
   <div class="row">
      <div class="col-md-8"> 
         Livello 1: .col-md-9
         <div class="row">
            <div class="col-md-6"> 
               Livello 2: .col-md-6 
             </div>
             <div class="col-md-6"> 
                Livello 2: .col-md-6 
             </div>
         </div>
      </div>
   </div>
</div>

INTERRUZIONE DI UNA RIGA

Nella sua forma più semplice il grid system di Bootstrap prevede che le colonne siano correttamente affiancate fino ad un determinato breakpoint sotto al quale vengono impilate con un flusso ad una sola colonna.

Per impostare una pagina a quattro colonne uguali posso, ad esempio, assegnare alle quattro colonne la classe col-md-3. In questo caso la mia pagina risulterà a colonne affiancate per i dispositivi md (da 992px a 1199px) e lg (1200px e oltre), mentre sui dispositivi sm e xs i contenuti si impileranno su un'unica colonna.

Se invece voglio creare una struttura più flessibile che preveda quattro colonne su dispositivi lg e md, due colonne su dispositivi sm e una colonna su dispositivi xs dovrò

Se invece voglio creare una struttura più flessibile che preveda quattro colonne su dispositivi lg e md, due colonne su dispositivi sm e una colonna su dispositivi xs dovrò

  • assegnare alle colonne class= "col-md-3 col-sm-6".

Va, però, considerato che le colonne si affiancano correttamente solo se sono contenute in contenitore row su un'unica riga. In questo caso, sui dispositivi sm avremo quattro colonne di larghezza 6 (= 50%) che quindi si disporranno su due righe.

  • Per un corretto allineamento orizzontale devo interrompere il flusso orizzontale della riga.

  • Per farlo posso inserire un elemento con class= "clearfix" dopo la seconda colonna, avendo cura che sia visibile solo sui dispositivi sm.

INTERRUZIONE DI RIGA

<div class="row">
   <div class="col-sm-6 col-md-3">
     .col-xs-6 .col-sm-3 (1)<br />
     Questa è una colonna con un testo più lungo delle altre e viene allineata grazie al contenitore <code>.row</code>
   </div>
   <div class="col-sm-6 col-md-3">
      .col-xs-6 .col-sm-3 (2)
   </div>

   <!-- Interrompe il flow e consente un colletto allineamento -->
   <!-- Visibile solo su dispositivi sm -->
   <div class="clearfix visible-sm"></div>

   <div class="col-sm-6 col-md-3">
      .col-xs-6 .col-sm-3 (3) <br /> 
      Altro testo
   </div>
   <div class="col-sm-6 col-md-3">
      .col-xs-6 .col-sm-3 (4)
   </div>
</div>

MODIFICA DELLE POSIZIONE

Infine è possibile modificare la posizione delle colonna all'interno di un riga utilizzando le classi:

  • col-xx-offset-n

  • col-xx-pull-n

  • col-xx-push-n

Visita codepen.io per esempi live

PERSONALIZZAZIONE

Bootstrap è altamente personalizzabile. Tutte le caratteristiche principali di Bootstrap sono parametrate. Nel file variables.less che fa parte del codice sorgente vengono definite una serie di variabili che determinano le caratteristiche metriche, i colori e altre caratteristiche di Bootstrap.

Ad esempio:

  • Il font-size di default in Bootstrap è 14px, con un line-height di 1.428. Questo si applica al <body> e tutti i paragrafi. Inoltre, <p> ha un margine inferiore pari a metà della sua line-height (10px ca. di default) .
  • Questi valori sono definiti in due variabili @font-size-base e @line-height-base. La prima è la grandezza di base del font, la seconda è l'interlinea. Queste variabili determinano anche la dimensione dei margini, il padding, e, in proporzione, l'interlinea e le dimensioni dei titoli ecc..

Se uso il sorgente di bootstrap potrò personalizzare le variabili modificando il file variables.less. Altrimenti posso utilizzare l'utility online a:

http://getbootstrap.com/customize/

Che mi permette di modificare le variabili e di compilare e scaricare la mia versione personalizzata di bootstrap.