Panoramica

Andiamo a fondo di quelli che sono i pezzi fondamentali dell'infrastruttura di Bootstrap, incluso il nostro approccio ad un migliore, veloce e forte sviluppo del web.

Doctype HTML5

Bootstrap fa uso di certi elementi HTML e proprietà CSS che richiedono l'uso di un doctype HTML. Includilo all'inizio di ogni tuo progetto.

<!DOCTYPE html>
<html lang="it">
  ...
</html>

Il Mobile prima

Con Bootstrap 2, abbiamo aggiunto stili opzionali pensati per il mobile, un aspetto chiave del framework. Con Bootstrap 3, abbiamo riscritto il progetto per essere quanto più compatibile possibile con il Mobile, fin dall'inizio. Invece di aggiungere files di stile opzionali, sono stati direttamente immessi nel cuore del sistema. Infatti, Bootstrap è prima di tutto Mobile. Fogli di stile per Mobile possono essere trovati nell'intera libreria piuttosto che in file separati.

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 saranno soltanto capaci di scorrere su e giù la pagina, e il risultato sul sito darà la sensazione di avere a che fare più che con una pagina web con un'applicazione nativa per smartphone. Sommariamente, non lo raccomandiamo ad ogni sito, siate cauti!

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

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

  • Imposta background-color: #fff; sul body
  • Usa gli attributi @font-family-base, @font-size-base, e @line-height-base come base tipografica
  • Imposta globalmente il colore dei link via @link-color e li sottolinea solo ad :hover

Questi stili si trovano all'interno di scaffolding.less.

Normalize.css

Per un rendering migliore su più browser differenti, usiamo Normalize.css, un progetto di Nicolas Gallagher e Jonathan Neal.

Contenitori

Centra facilmente il contenuto di una pagina immettendolo dentro il .container. I Contenitori impostano il width a vari media query breakpoints per soddisfare il nostro sistema di griglie.

Nota che, a causa del padding e delle larghezze fisse, i contenitori non sono annidabili di default.

<div class="container">
  ...
</div>

Sistema a Griglia

Bootstrap include un sistema a griglia responsivo, fluido e mobile che scala fino a 12 colonne in base alle dimensioni della finestra del dispositivo. Include classi predefinite per le opzioni di layout semplici, così come potenti mixins per generare layout più semantici.

Introduzione

I sistemi a Griglia (grid systems) sono usati per creare layout di pagina attraverso righe e colonne che contengono i tuoi contenuti. Qui si mostra come funziona il sistema a griglia di Bootstrap:

  • Le righe devono essere piazzate all'interno del .container (fixed-width) o del .container-fluid (full-width) per un allineamento e un padding corretto.
  • Usa le righe per creare un gruppo orizzontale di colonne.
  • I contenuti dovrebbero essere inseriti all'interno delle colonne, e solo le colonne possono essere figli immediati delle righe nel codice html.
  • Sono disponibili classi predefinite come .row e .col-xs-4 per la creazione rapida dei layout a griglia. Per layout semantici si possono usare anche i mixin di Less.
  • 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 .rows.
  • Le colonne della griglia si creano specificando un numero delle 12 colonne disponibili che si vogliono occupare. Per esempio, tre colonne uguali useranno tre .col-xs-4.

Guarda gli esempi per applicare questi principi al tuo codice.

Media queries

Per creare i breakpoint nel grid system (sistema a griglia) usiamo queste media queries nei file Less.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Occasionalmente allarghiamo queste media queries includendo un max-width per limitare il CSS a un insieme ristretto di device.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Opzioni griglia

Guarda con questa tabella a portata di mano come gli aspetti del sistema a griglia (grid system) funzionano anche tra device differenti.

Device extra piccoli Smartphone (<768px) Piccoli device Tablet (≥768px) Device Medi PC (≥992px) Grandi device PC (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Le classi sopra si applicano a device con una larghezza di schermo maggiore o uguale alle dimensioni dei breakpoint, e sovrascrivono le classi della griglia destinate ai piccoli device. Pertanto, applicare qualsiasi classe .col-md- ad un elemento, non influenzerà soltanto il suo stile sui dispositivi di media grandezza ma anche sui grandi dispositivi se non è presente una classe .col-lg-.

Esempio: Impilati-in-orizzontale

Usando un singolo insieme di classi .col-md-*, puoi creare un sistema a griglia base che si mostra impilato in colonna sui dispositivi mobile e sui tablet e si mostra orizzontale sui device di Media grandezza (PC Desktop). Piazza le colonne della griglia in qualsiasi .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Esempio: Contenitore fluido

Trasforma ogni layout (a griglia) fixed-width in un layout full-width cambiando il .container più esterno in un .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Esempio: Mobile e desktop

Non vuoi che le tue colonne si mettano in pila nei device più piccoli? Usa le classi della griglia extra small e medium device .col-xs-* .col-md-* per le tue colonne. Guarda l'esempio sotto per farti un'idea su come funzioni il tutto.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Sugli smartphone impila le colonne creando un unico full-width e gli altri half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Le colonne hanno una larghezza del 50% su smartphone e sobbalzano fino ad una larghezza di 33.3% su desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Le colonne hanno una larghezza sempre del 50%, sia su mobile che su desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Esempio: Mobile, Tablet, Desktop

Costruito sull'esempio precedente creando layouts ancora più dinamici con le classi per tablet .col-sm-*.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Reset di colonne responsive

Con i quattro livelli di griglie disponibili ti capiterà di imbatterti in qualche problema. Infatti in determinati breakpoints, le colonne non appariranno omogenee in quanto una più alta delle altre. Per risolvere, usa in combinazione .clearfix e le nostre responsive utility classes.

.col-xs-6 .col-sm-3
Ridimensiona la tua finestra o aprilo sul tuo telefono per un esempio.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In aggiunta alla colonna per compensare ai breakpoints responsivi, potresti aver bisogno di resettare offsets, pushes, o pulls. Guardalo in azione nella griglia d'esempio.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Compensare (offsetting) le colonne

Muovi le colonne a destra usando le classi .col-md-offset-*. Queste classi aumentano il margine sinistro di una colonna di * colonne. Per esempio, .col-md-offset-4 muove .col-md-4 di quattro colonne.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Colonne annidate

Per annidare i tuoi contenuti con la griglia di default, aggiungi una nuova .row e un insieme di .col-md-* colonne all'interno di una colonna .col-md-* esistente. Le righe annidate dovrebbero includere un insieme di colonne che sommate danno un massimo di 12 o meno.

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

Ordinare le colonne

Facilmente puoi cambiare l'ordine delle colonne in griglia con le classi .col-md-push-* e .col-md-pull-*.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Mixin e variabili in Less

In aggiunta alle classi di griglia precostruite per la realizzazione rapida di layouts, Bootstrap include mixin e variabili Less per generare il tuo personale layout semantico velocemente.

Variabili

Le variabili determinano il numero di colonne, l'ampiezza degli spazi, e i punti in cui iniziano le colonne. Le usiamo per generare le classi predefinite della griglia documentate sopra, così come per i mixin elencati sotto.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

I mixin sono usati in congiunzione con le variabili della griglia per generare un CSS semantico per ogni colonna della griglia.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Esempio d'utilizzo

Puoi modificare le variabili con il valore che ritieni più adatto, oppure usare i mixin con i loro valori di default. Qui un esempio d'uso delle impostazioni di default per creare un layout a due colonne con uno spazio in mezzo.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Tipografia

Intestazioni

Tutte le intestazioni HTML, <h1> fino a <h6>, sono disponibili in Bootstrap. Anche le classi .h1 fino a .h6 sono presenti, per quando tu voglia presentare il testo nello stesso stile delle intestazioni ma con una formattazione in linea rispetto al testo secondario.

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Crea del testo secondario più leggero, in qualsiasi intestazione con un generico tag <small> oppure con la classe .small.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Body-copy (testo descrittivo)

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> (paragrafo) riceve un margine in basso pari a metà della sua line-height (10px di default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body-copy (testo principale)

Fai risaltare un paragrafo rendendone il testo marcato, aggiungi semplicemente .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Costruito con Less

La scala tipografica è basata su due variabili Less in variables.less: @font-size-base e @line-height-base. La prima è la grandezza del font ovunque e la seconda è l'interlinea (la spaziatura tra due linee di testo). Usiamo queste variabili e qualche semplice calcolo per creare i margini, il padding e l'interlinea di tutti i caratteri e molto altro. Personalizzali e Bootstrap si adeguerà.

Enfasi

Usa i tag HTML di enfasi presenti di default per uno stile leggero e pulito.

Testo piccolo

Per de-enfatizzare un blocco di testo, usa il tag <small> in modo da settare il testo ad una grandezza del 85% rispetto all'originale. Gli elementi d'intestazione ricevono il proprio font-size per gli elementi <small> annidati.

In alternativa puoi far uso di un elemento in linea con la classe .small al posto del tag <small>.

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

Grassetto

Per enfatizzare un pezzetto di testo con una formattazione più marcata.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italico

Per enfatizzare un pezzetto di testo in italico.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Elementi alternativi

Sentiti libero di usare <b> e <i> in HTML5. <b> si usa per evidenziare parole o frasi senza conferirgli ulteriore importanza mentre <i> è usato più per voci, termini tecnici, etc.

Classi di allineamento

Riallinea il testo ai componenti con le classi di allineamento per il testo.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Abbreviazioni

Implementazione stilizzata dell'elemento <abbr> dell' HTML per mostrare la versione estesa di acronimi e abbreviazioni quando il cursore si posiziona sopra l'elemento. Le abbreviazioni con l'attributo title hanno un bordo puntellato sottile, il cursore d'aiuto quando ci si posiziona al di sopra e mostrano contenuti addizionali.

Abbreviazione di base

In caso si abbia molto testo in un'abbreviazione, includi l'attributo title con l'elemento <abbr>.

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

Sigle

Aggiungi ad un'abbreviazione .initialism per un font-size leggermente più piccolo.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Indirizzi

Presenta le informazioni di contatto partendo dall'elemento indicativo che più si avvicina a te (solitamente nome e cognome). Preserva la formattazione terminando ogno linea con un tag <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
[email protected]
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Citazioni

Per citare blocchi di contenuti di un'altra fonte all'interno del tuo documento.

Citazione di Default

Racchiudi in <blockquote> ogni testo HTML citato. Raccomandiamo l'uso di <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Opzioni di citazione

Lo stile e il contenuto si differenziano con piccole variazioni rispetto alla citazione <blockquote> standard.

Nominare la fonte

Aggiungi un <footer> per nominare la fonte. Racchiudi il nome della fonte in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Visualizzazioni alternative

Aggiungi .blockquote-reverse per una citazione che abbia il contenuto spostato sulla destra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Liste

Non ordinata

Una lista di elementi in cui l'ordine non conta particolarmente.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

Ordinata

Una lista di elementi in cui l'ordine conta.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Senza stile

Rimuovi stile di default list-style e il margine sinistro sugli elementi della lista (solo ai figli immediati). Questo si applica soltanto agli elementi della lista che sono figli immediati della lista, cioè non si applica ai figli degli elementi in lista che avranno bisogno dell'aggiunta di un'altra classe.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

In linea

Piazza tutti gli elementi della lista su una singola linea con display: inline-block; e un leggero padding.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

Descrittiva

Una lista di termini, ognuno con la sua descrizione associata.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descrizione orizzontale

Fai in modo che i termini e le descrizioni siano l'una a fianco all'altra con <dl>.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Auto-troncamento

La lista delle descrizioni orizzontali tronca i termini troppo lunghi che non entrano nella colonna di sinistra tramite text-overflow. In una finestra stretta, il layout cambia tornando a quello in pila presente di default.

Codice

In linea

Racchiudi piccoli pezzi di codice con <code>.

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User input

Usa il tag <kbd> per indicare input che solitamente vengono inseriti da tastiera.

To switch directories, type cd followed by the name of the directory.
  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.

Blocco di base

Usa <pre> per più linee di codice. Assicurati di fare l'escape di ogni virgoletta bassa (< e >) nel codice per una visualizzazione corretta.

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Facoltativamente potresti aggungere la classe .pre-scrollable, che imposterà la max-height a 350px e fornirà una barra di scorrimento orizzontale.

Tabelle

Esempio di base

Per uno stile di base —padding leggero e divisori orizzontali— aggiungi la classe base .table ad ogni <table> nella pagina. Potrà sembrare ridondante, ma dato l'ampio uso di tabelle nei plugin come calendari, data pickers e così via, abbiamo deciso di isolare il nostro stile per le tabelle.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

Righe striate

Usa la classe .table-striped per aggiungere delle striature zebrate ad ogni riga della tabella all'interno del <tbody>.

Compatibilità cross-browser

Le tabelle striate sono definite attraverso il selettore CSS :nth-child, il quale non è disponibile su Internet Explorer 8.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

Tabella con bordi

La classe .table-bordered aggiunge i bordi a tutti i lati della tabella e su tutte le celle.

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Righe ed Hover

Aggiungi .table-hover per abilitare l'hover sulle righe della tabella contenute in <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

Tabella condensata

Aggiungi .table-condensed per rendere le tabelle più compatte, togliendo il padding in eccesso fra le celle.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

Classi contestuali

Usa le classi contestuali per colorare righe o celle individuali di una tabella.

Classe Descrizione
.active Applica un colore all'evento hover ad una particolare riga o cella
.success Indica un'azione di successo o positiva
.info Indica un'informazione neutrale
.warning Indica un avviso che potrebbe richiedere attenzione
.danger Indica un pericolo o un'azione potenzialmente negativa
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Tabelle Responsive

Crea delle tabelle responsive racchiudendo ogni .table in .table-responsive per far si che scorrano nei piccoli device (sotto i 768px). Quando le si guarda su qualcosa più largo di 768px, non vedrete alcuna differenza nelle tabelle.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Moduli (Forms)

Esempio di base

Individualmente, i controlli presenti in ogni form ricevono automaticamente uno stile globale. Tutti gli <input> testuali, <textarea>, ed elementi <select> con .form-control sono settati di default ad una larghezza di width: 100%;. Racchiudi le etichette (label) e i controlli in .form-group per una spaziatura ottimale.

Example block-level help text here.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Non mescolare gruppi di moduli (form group) con gruppi di input (input group)

Non mescolare direttamente gruppi di form con gruppi di input. Invece, annida il gruppo di input dentro al gruppo di form.

Modulo in linea

Aggiungi .form-inline al tuo <form> per avere i controlli su singola linea allineati a sinistra. Questo si applica soltanto ai moduli contenuti in una finestra larga almeno 768px.

Richiede larghezze personalizzate

Input, select, e textarea hanno una larghezza pari a 100% di default in Bootstrap. Per usare il form in linea, dovresti configurare le larghezze (width) sui singoli controlli del form.

Aggiungi sempre le etichette

Gli screen reader (per portatori di handicap visivo) avranno problemi con il tuo modulo se non includi un'etichetta ad ogni input. In questi form in linea, si possono dunque nascondere alla normale utenza usando la classe .sr-only (solo gli screen reader vedranno le etichette in questo modo).

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Modulo orizzontale

Usa le classi di griglia predefinite in Bootstrap per allineare etichette e controlli nel form con un layout orizzontale, aggiungi .form-horizontal. Facendolo i .form-group si comporteranno come righe della griglia, di conseguenza non ci sarà bisogno di .row.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Controlli supportati

Esempi di controlli standard di un form in un layout d'esempio.

Inputs

I più comuni controlli del form, basati sull'input di testo. Includono il supporto a tutti i tipi definiti nel nuovo HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Dichiarazione del tipo obbligatoria

Gli input verranno visualizzati correttamente solo se il loro type è propriamente dichiarato.

<input type="text" class="form-control" placeholder="Text input">

Input groups

Per integrare testo o bottoni prima e/o dopo ogni <input> testuale, guarda il componente input group.

Textarea

E' un controllo (elemento) del Form che supporta linee di testo multiple. Cambia se necessario l'attributo rows per allungare in verticale l'elemento.

<textarea class="form-control" rows="3"></textarea>

Checkboxes e radios

I checkboxes servono a selezionare una o più opzioni in una lista mentre i radios servono per selezionare una sola opzione fra quelle presenti.

Default (impilati)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

Checkboxes in linea

Usa la classe .checkbox-inline o .radio-inline su una serie di checkboxes o radios per far si che appaiano sulla stessa linea.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

Selects

Usa l'opzione di default, oppure aggiungi multiple per mostrare più opzioni insieme.


<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Controllo statico

Quando hai necessità di inserire all'interno di un modulo orizzontale un testo affiancato ad un'etichetta, usa la classe .form-control-static su <p>.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

Input focus

Abbiamo rimosso lo stile outline su qualche elemento dei form e applicato al suo posto un box-shadow per :focus.

Demo dello stato :focus

L'input d'esempio sopra usa lo stile personalizzato presente nella documentazione per dimostrare lo stato :focus su un .form-control.

Input disabilitati

Aggiungi l'attributo disabled su un input per disabilitarlo e prevenire dunque l'interazione con l'utente, questo modifica anche lo stile in uno leggermente più macabro.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Fieldsets disabilitati

Aggiungi l'attributo disabled ad un <fieldset> per disabilitarne tutti gli elementi all'interno in un colpo solo.

Non intacca il funzionamento dei link <a>

Questa classe cambia soltanto l'estetica dei bottoni <a class="btn btn-default">, non la loro funzionalità. Usa del codice JavaScript per disabilitare i links.

Compatibilità cross-browser

Mentre Bootstrap applicherà questo stile a tutti i browser, Internet Explorer 9 o inferiori non supportano l'attributo disabled su un <fieldset>. Ancora, usa del codice JavaScript per disabilitare i fieldset in questi browser.

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Stati per la convalida

Bootstrap include differenti stili di convalidazione: error, warning, success. Per usarli, aggiungi .has-warning, .has-error, o .has-success all'elemento padre. Ogni .control-label, .form-control, e .help-block all'interno dell'elemento riceveranno lo stile di convalida inserito.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

Con icone opzionali

Puoi anche aggiungere icone di feedback tramite l'aggiunta di una classe extra e l'icona giusta.

Icone e input groups

Quando usi le icone di feedback, presta attenzione al fatto che gli input groups potrebbero richiedere un posizionamento manuale. Aggiusta right: 0; con un valore di pixel appropriato a seconda della larghezza dell'immagine/add-on usato.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Le icone funzionano anche con form orizzontali e in linea.

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Dimensionamento dei controlli

Imposta le altezze usando classi come .input-lg, e imposta le lunghezze usando classi come .col-lg-* (si ragiona in termini di colonne in griglia).

Dimensionamento dell'altezza

Crea controlli per il form alti o bassi, proporzionati alla grandezza dei pulsanti.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Dimensionamento colonna

Racchiudi inputs o qualsiasi altro elemento, in colonne della griglia, per ottenere la lunghezza desiderata.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Testo d'aiuto

Un blocco di testo (d'aiuto) per i controlli del form.

A block of help text that breaks onto a new line and may extend beyond one line.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Bottoni

Opzioni

Usa una qualunque delle classi di bottoni disponibili per creare velocemente un bottone graficamente piacevole.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Dimensioni

Bottoni larghi o piccoli? Aggiungi .btn-lg, .btn-sm, o .btn-xs per dimensionare i pulsanti.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

I bottoni appariranno schiacciati (con uno sfondo più scuro, bordi scuri, e un'ombra interna) quando sono nello stato "active". Per gli elementi <button>, lo si fa attraverso :active. Per gli elementi <a>, lo si fa con .active. Tuttavia, potresti usare .active anche sui <button> ma dovresti replicare lo stato active a livello di programmazione.

Elemento Button

Non hai bisogno di aggiungere :active in quanto è una pseudo-classe, ma se vuoi lo stesso aspetto, prosegui e aggiungi pure .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Elemento Anchor

Aggiungi la classe .active ai bottoni <a>.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Stato Disabled

Fa si che i bottoni appaiano non cliccabili aggiungendo una dissolvenza del 50%.

Elemento button

Aggiungi l'attributo disabled ai bottoni, <button>.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Compatibilità cross-browser

Se aggiungi l'attributo disabled ad un <button>, Internet Explorer 9 o inferiori visualizzeranno il testo grigio con una strana ombra impossibile da sistemare.

Elemento anchor

Aggiungi la classe .disabled ai bottoni <a>.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Qui usiamo .disabled come una "utility class", simile al comune .active, quindi nessun prefisso è richiesto.

Non intacca il funzionamento dei link

Questa classe cambierà soltanto l'aspetto di <a>, non le sue funzionalità. Usa JavaScript per disabilitare, dunque inibire, i link.

Uso specifico al contesto

Mentre le classi dei bottoni possono essere usate sugli elementi <a> e <button>, solo i <button> sono supportati all'interno dei nostri componenti nav e navbar.

Button tags

Usa le classi dei bottoni sugli elementi <a>, <button>, o <input>.

Link
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Rendering cross-browser

Come best practice, raccomandiamo quando possibile l'uso dell'elemento <button> per assicurare una visualizzazione corretta in più browser diversi.

Tra le altre cose, esiste un bug su Firefox che ci impedisce di settare la proprietà line-height per gli elementi <input> di tipo button, quindi non avranno la stessa altezza degli altri bottoni su Firefox.

Immagini

Immagini responsive

Le immagini in Bootstrap 3 possono divenire responsive aggiungendo la classe .img-responsive. Questa applica all'immagine un max-width: 100%; e height: auto; in modo che si ridimensioni per bene rispetto all'elemento padre.

<img src="..." class="img-responsive" alt="Responsive image">

Immagini e forme

Aggiungi le classi all'elemento <img> per dare una forma alle immagini di qualsiasi progetto.

Compatibilità cross-browser

Tieni in mente che ad Internet Explorer 8 manca il supporto per gli angoli arrotondati.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Classi di supporto

Colori contestuali

Trasmetti dei significati attraverso i colori con questa serie di classi di supporto. Si possono applicare ai links e diventeranno più scuri quando il cursore vi si posiziona sopra proprio come negli stili dei link di default.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Affrontare la specificità

Qualche volta le classi di enfasi non possono essere applicate per via della natura specifica di un selettore. Il più delle volte, è sufficiente racchiudere il testo in uno <span> e applicare la classe a questo span.

Sfondi contestuali

Analogamente alle classi contestuali colorate per il testo, facilmente puoi impostare qualsiasi classe contestuale allo sfondo di un elemento. I link diverranno più scuri al passaggio del mouse, proprio come nelle classi di testo.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Icona di chiusura

Usa l'icona di chiusura per dar la possibilità di chiudere avvisi o box modali.

<button type="button" class="close" aria-hidden="true">&times;</button>

Carets

Usa i carets per indicare funzionalità a discesa e la direzione. Nota che il caret di default si inverte automaticamente nei menu dropup (verso l'alto).

<span class="caret"></span>

Float veloci

Sposta con float gli elementi a destra e sinistra con una classe. !important viene incluso per evitare problemi di specificità. Le classi possono anche essere usate come mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Non usare nelle navbars

Per allineare i componenti nelle navbars usa le utility classes, .navbar-left o .navbar-right. Guarda la documentazione sulle navbar per maggiori dettagli.

Centra i blocchi di contenuti

Imposta un elemento display: block e centralo attraverso margin. Disponibile sia come classe che mixin.

<div class="center-block">...</div>
// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

Clearfix

Ripulisci il float da qualsiasi elemento con la classe .clearfix. Utilizza il popolare micro clearfix di Nicolas Gallagher. Può anche essere usato come mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a Mixin
.element {
  .clearfix();
}

Mostrare e nascondere contenuti

Forza un elemento ad essere mostrato o nascosto con l'uso delle classi .show o .hidden. Queste classi usano !important per evitare conflitti di specificità, proprio come nei float. Sono disponibili solo per i blocchi e possono essere usati come mixin.

.hide non ha sempre l'effetto desiderato, alcuni screen reader (per portatori di handicap visivo) possono tener ugualmente conto del contenuto nascosto e leggerlo. Per questo motivo è deprecato a partire dalla versione v3.0.1. Usa al suo posto .hidden o .sr-only.

Inoltre, usando .invisible si può togliere o meno la visibilità ad un elemento, che continua a essere nella pagina e occupare un suo posto (pur se invisibile), ciò significa che non viene influenzata la proprietà display dell'elemento.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Contenuto per gli screen reader

Nascondi un elemento a tutti i dispositivi eccetto agli screen readers con .sr-only. Necessario se vogliamo seguire le best practices sull'accessibilità. Può essere usato anche come mixin.

<a class="sr-only" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
  .sr-only();
}

Immagine di sostituzione

Utilizza la classe .text-hide o il mixin per aiutarti nella sostituzione del contenuto testuale di un elemento con un'immagine di sfondo.

<h1 class="text-hide">Custom heading</h1>
// Usage as a Mixin
.heading {
  .text-hide();
}

Responsive utilities

Per uno sviluppo veloce e compatibile con smartphone, usa queste classi per mostrare e nascondere i contenuti in base al dispositivo attraverso le media query. Sono anche incluse le classi per mostrare/nascondere il contenuto in caso di stampa.

Tenta di usarle su un'unica base in modo da evitare di creare più versioni dello stesso sito. Usali per avere una presentazione complementare per ogni dispositivo. Le Responsive utilities attualmente sono disponibili solo per blocchi (div) e tabelle. Usate con gli elementi di una tabella non funzionano.

Classi disponibili

Usa una singola classe o più combinazioni di classi per mostrare/nascondere il contenuto a differenti dimensioni della finestra.

Device Extra small Phones (<768px) Device Piccoli Tablets (≥768px) Devices Medi Desktops (≥992px) Device grandi Desktops (≥1200px)
.visible-xs Visible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Classi di stampa

Simili alle classi viste sopra, usale per mostrare/nascondere il contenuto durante la stampa.

Class Browser Print
.visible-print Visible
.hidden-print Visible

Banco di prova

Ridimensiona la finestra del tuo browser o carica la pagina su device differenti per testare le responsive utility.

Visibile su...

I segni di spunta verdi indicano che l'elemento è visibile nella tua finestra corrente.

✔ Visible on x-small
✔ Visible on small
Medium ✔ Visible on medium
✔ Visible on large
✔ Visible on x-small and small
✔ Visible on medium and large
✔ Visible on x-small and medium
✔ Visible on small and large
✔ Visible on x-small and large
✔ Visible on small and medium

Nascosto su...

Qui i segni di spunta verdi indicano che l'elemento è nascosto nella tua finestra corrente.

✔ Hidden on x-small
✔ Hidden on small
Medium ✔ Hidden on medium
✔ Hidden on large
✔ Hidden on x-small and small
✔ Hidden on medium and large
✔ Hidden on x-small and medium
✔ Hidden on small and large
✔ Hidden on x-small and large
✔ Hidden on small and medium

Usare Less

Il CSS di Bootstrap è costruito con Less, un preprocessore dotato di funzionalità aggiuntive come variabili, mixins e funzioni per poter compilare il CSS. Coloro che cercano di usare i file sorgenti di Less invece che i file CSS compilati, possono far uso di numerose variabili e mixins presenti (e utilizzate) in tutto il framework.

Le variabili di Griglia e i mixins sono trattati nella sezione sul Grid System.

Compilare Bootstrap

Bootstrap può essere usato in almeno due modi: con i CSS compilati o con i file sorgenti di Less. Per compilare i file di Less, leggi il README che ti aiuta a configurare il tuo ambiente di sviluppo per eseguire i comandi necessari.

Altri strumenti di terze parti possono essere usati e funzionare con Bootstrap, ma non sono supportati ufficialmente dal nostro team.

Variabili

Le variabili sono usate nell'intero progetto come modo per centralizzare e condividere i valori comuni, ad esempio colori, spaziature o font. Dai un'occhiata al Customizer.

Colori

Fai uso di due schemi di colore: grayscale e semantic. I colori in scala di grigio (grayscale) permettono l'accesso rapido alle sfumature di nero mentre i colori semantici (semantic) includono più colori assegnati per dar un significato contestuale.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 60%);   // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Usa una qualunque di queste variabili così come sono o assegnandovi nuovi colori, quelli che più si adattano al tuo progetto.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Impalcatura (Scaffolding)

Una manciata di variabili per poter personalizzare velocemente gli elementi chiave dello scheletro del tuo sito, l'impalcatura.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Personalizza lo stile dei tuoi links con il colore giusto cambiando un solo valore.

// Variables
@link-color:       @brand-primary;
@link-color-hover: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-color-hover;
    text-decoration: underline;
  }
}

Nota che @link-color-hover usa una funzione (un altro fantastico tool offerto da Less), per creare automaticamente il colore adatto all'evento hover (quando il cursore vi si posiziona sopra). Puoi usare darken, lighten, saturate, e desaturate.

Tipografia

Setta facilmente la dimensione del testo, marcatura e altro, con poche variabili. Bootstrap ne fa uso per fornire semplici mixin tipografici.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Icone

Soltanto due variabili per poter personalizzare la posizione e il nome delle tue icone di testo.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Componenti

I componenti di Bootstrap fanno uso di alcune variabili di default per configurare i valori comuni. Qui quelle comunemente più usate.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Vendor mixins

Sono quei mixins che permettono il supporto di più browser. Nel CSS compilato, includono come prefisso, il nome del vendor.

Box-sizing

Resetta il box model del tuo componente con l'uso di un singolo mixin. Guarda anche quest'utile articolo scritto da Mozilla.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Angoli arrotondati

Oggi tutti i browser più moderni supportano la proprietà border-radius. E in quanto tale, non c'è alcun mixin .border-radius(), ma Bootstrap include ugualmente delle scorciatoie per arrotondare velocemente due angoli sul lato di un oggetto.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) shadows

Se la tua utenza usa i browser e i dispositivi più aggiornati, assicurati di usare la proprietà box-shadow così com'è. Se intendi supportare anche vecchie versioni di Android (antecedenti alla v4) e iOS (antecedenti ad iOS 5), usa i mixin deprecati per richiamare il prefisso -webkit necessario.

Il mixin è deprecato a partire dalla versione v3.1.0, siccome Bootstrap non supporta ufficialmente le piattaforme datate che fuoriescono ormai dai comuni standard. Per preservare la retro-compatibilità, Bootstrap continuerà ad usare internamente il mixin fino alla versione v4.

Assicurati di usare colori rgba() nel tuo box shadows così si mescoleranno nel modo più uniforme possibile con lo sfondo.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transizioni

Setta tutte le opzioni per una transizione assieme, o a seconda delle esigenze specifica ritardo e durata a parte.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Trasformazioni

Ruota, scala, trasla (muovi), o inclina qualsiasi oggetto.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animazioni

E' presente un singolo mixin per usare tutte le proprietà d'animazione di CSS3 in un'unica dichiarazione. Per le proprietà individuali si usano altri mixin.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacità

Imposta l'opacità per tutti i browser e fornisce un filter per IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Segnaposto (placeholder)

Esplica meglio cosa viene richiesto nei controlli del form, con un testo posto all'interno di ogni campo.

.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder            { color: @color; } // Firefox 4-18
  &::-moz-placeholder           { color: @color; } // Firefox 19+
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Colonne

Generare colonne all'interno di un singolo elemento tramite CSS.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradienti

Trasforma due colori in un gradiente di sfondo. Meglio ancora, imposta una direzione, usa tre colori, o usa un gradiente radiale. Con un singolo mixin ottieni tutte le sintassi di cui avrai bisogno.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Puoi anche specificare l'angolo del gradiente lineare (standard a due colori):

#gradient > .directional(#333; #000; 45deg);

Se hai bisogno di un gradiente stile "palo da barbiere" (o per intenderci a strisce diagonali). Specifica solamente un colore a cui verrà in seguito applicata una striscia bianca traslucida inclinata.

#gradient > .striped(#333; #000; 45deg);

Alziamo la posta in gioco e usiamo tre colori. Imposta con questi mixins il primo colore, il secondo colore, il punto di stop per il secondo colore (un valore decimale tipo 0.25) e un terzo colore:

#gradient > .vertical-three-colors(#777; #333; .25; #000);
#gradient > .horizontal-three-colors(#777; #333; .25; #000);

Occhio! Nel caso decidessi di rimuovere il gradiente, assicurati di rimuovere ogni filter specifico per IE che hai aggiunto. Puoi farlo usando il mixin .reset-filter() accanto a background-image: none;.

Utility mixins

Gli Utility mixins sono mixins che combinano proprietà CSS altrimenti non collegate per raggiungere un determinato obiettivo.

Clearfix

Scordati di usare class="clearfix" per ogni elemento, aggiungi invece dove appropriato il mixin .clearfix(). Utilizza il micro clearfix di Nicolas Gallager.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Centrare in Orizzontale

Centra qualsiasi elemento all'interno del suo contenitore padre. Richiede che vengano settati width o max-width.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Dimensionatori di supporto

Specifica le dimensioni di un oggetto in modo facilitato.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Textarea ridimensionabili

Configura le opzioni di ridimensionamento per le textarea o qualsiasi altro elemento. Il valore predefinito è dettato dal browser (both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Troncare il testo

Tramite un semplice mixin è possibile troncare il testo e porre un'ellissi (puntini di sospensione che indicano un'omissione). Richiede che l'elemento sia un blocco o un blocco in linea.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Immagini retina

Specifica due percorsi per l'immagine e le dimensioni @1x dell'immagine. Bootstrap fornirà una media query @2x. Se hai molte immagini da presentare, considera la possibilità di scrivere il CSS dell'immagine retina manualmente in una sola media query.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Usare Sass

Bootstrap è costruito su Less, ma è disponibile anche un port ufficiale in Sass. Lo manteniamo su una repository di github separata ed effettuiamo gli aggiornamenti con uno script di conversione.

Cosa include

Dal momento che la versione in Sass ha una repository ed un server differente, così come l'audience stesso, i contenuti del progetto differiscono notevolmente dal progetto originale di Bootstrap. Questo assicura la compatibilità con quanti più sistemi (basati su) Sass possibili.

Percorso Descrizione
lib/ Ruby gem code (Sass configuration, Rails and Compass integrations)
tasks/ Converter scripts (turning upstream Less to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, and font files
Rakefile Internal tasks, such as rake and convert

Visita la repository in Sass per vedere questi file in azione.

Installazione

Per informazioni su come usare e installare la versione Sass di Bootstrap, consulta il readme nella repository GitHub. E' la versione più aggiornata del codice e include informazioni sull'uso con Rails, Compass, e altri progetti Sass standard.

Bootstrap per Sass