CSS
Impostazioni CSS globali, elementi HTML stilizzati e migliorati con classi estensibili, ed un sistema di griglia avanzato.
Impostazioni CSS globali, elementi HTML stilizzati e migliorati con classi estensibili, ed un sistema di griglia avanzato.
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.
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>
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:
background-color: #fff;
sul body
@font-family-base
, @font-size-base
, e @line-height-base
come base tipografica@link-color
e li sottolinea solo ad :hover
Questi stili si trovano all'interno di scaffolding.less
.
Per un rendering migliore su più browser differenti, usiamo Normalize.css, un progetto di Nicolas Gallagher e Jonathan Neal.
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>
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.
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:
.container
(fixed-width) o del .container-fluid
(full-width) per un allineamento e un padding corretto..row
e .col-xs-4
per la creazione rapida dei layout a griglia. Per layout semantici si possono usare anche i mixin di Less.padding
. Questo padding si compensa nelle righe per la prima e l'ultima colonna con un margine negativo sulle .row
s..col-xs-4
.Guarda gli esempi per applicare questi principi al tuo codice.
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) { ... }
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-
.
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
.
<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>
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>
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.
<!-- 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>
Costruito sull'esempio precedente creando layouts ancora più dinamici con le classi per tablet .col-sm-*
.
<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>
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.
<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>
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.
<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>
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.
<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>
Facilmente puoi cambiare l'ordine delle colonne in griglia con le classi .col-md-push-*
e .col-md-pull-*
.
<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>
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.
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;
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));
}
}
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>
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>
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>
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>
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à.
Usa i tag HTML di enfasi presenti di default per uno stile leggero e pulito.
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>
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>
Per enfatizzare un pezzetto di testo in italico.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
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.
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>
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.
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>
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>
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>
.
<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>
Per citare blocchi di contenuti di un'altra fonte all'interno del tuo documento.
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>
Lo stile e il contenuto si differenziano con piccole variazioni rispetto alla citazione <blockquote>
standard.
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.
<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>
Aggiungi .blockquote-reverse
per una citazione che abbia il contenuto spostato sulla destra.
<blockquote class="blockquote-reverse">
...
</blockquote>
Una lista di elementi in cui l'ordine non conta particolarmente.
<ul>
<li>...</li>
</ul>
Una lista di elementi in cui l'ordine conta.
<ol>
<li>...</li>
</ol>
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.
<ul class="list-unstyled">
<li>...</li>
</ul>
Piazza tutti gli elementi della lista su una singola linea con display: inline-block;
e un leggero padding.
<ul class="list-inline">
<li>...</li>
</ul>
Una lista di termini, ognuno con la sua descrizione associata.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Fai in modo che i termini e le descrizioni siano l'una a fianco all'altra con <dl>
.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
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.
Racchiudi piccoli pezzi di codice con <code>
.
<section>
should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
Usa il tag <kbd>
per indicare input che solitamente vengono inseriti da tastiera.
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
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><p>Sample text here...</p></pre>
Facoltativamente potresti aggungere la classe .pre-scrollable
, che imposterà la max-height a 350px e fornirà una barra di scorrimento orizzontale.
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 |
<table class="table">
...
</table>
Usa la classe .table-striped
per aggiungere delle striature zebrate ad ogni riga della tabella all'interno del <tbody>
.
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 |
<table class="table table-striped">
...
</table>
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 |
<table class="table table-bordered">
...
</table>
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 |
<table class="table table-hover">
...
</table>
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 |
<table class="table table-condensed">
...
</table>
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>
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>
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.
<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 direttamente gruppi di form con gruppi di input. Invece, annida il gruppo di input dentro al gruppo di form.
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.
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.
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>
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>
Esempi di controlli standard di un form in un layout d'esempio.
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
.
Gli input verranno visualizzati correttamente solo se il loro type
è propriamente dichiarato.
<input type="text" class="form-control" placeholder="Text input">
Per integrare testo o bottoni prima e/o dopo ogni <input>
testuale, guarda il componente input group.
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>
I checkboxes servono a selezionare una o più opzioni in una lista mentre i radios servono per selezionare una sola opzione fra quelle presenti.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—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>
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>
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>
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>
Abbiamo rimosso lo stile outline
su qualche elemento dei form e applicato al suo posto un box-shadow
per :focus
.
:focus
L'input d'esempio sopra usa lo stile personalizzato presente nella documentazione per dimostrare lo stato :focus
su un .form-control
.
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>
Aggiungi l'attributo disabled
ad un <fieldset>
per disabilitarne tutti gli elementi all'interno in un colpo solo.
<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.
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>
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>
Puoi anche aggiungere icone di feedback tramite l'aggiunta di una classe extra e l'icona giusta.
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>
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).
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>
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>
Un blocco di testo (d'aiuto) per i controlli del form.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
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>
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>
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.
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>
Aggiungi la classe .active
ai bottoni <a>
.
<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>
Fa si che i bottoni appaiano non cliccabili aggiungendo una dissolvenza del 50%.
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>
Se aggiungi l'attributo disabled
ad un <button>
, Internet Explorer 9 o inferiori visualizzeranno il testo grigio con una strana ombra impossibile da sistemare.
Aggiungi la classe .disabled
ai bottoni <a>
.
<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.
Questa classe cambierà soltanto l'aspetto di <a>
, non le sue funzionalità. Usa JavaScript per disabilitare, dunque inibire, i link.
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.
Usa le classi dei bottoni sugli elementi <a>
, <button>
, o <input>
.
<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">
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.
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">
Aggiungi le classi all'elemento <img>
per dare una forma alle immagini di qualsiasi progetto.
Tieni in mente che ad Internet Explorer 8 manca il supporto per gli angoli arrotondati.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
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>
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.
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>
Usa l'icona di chiusura per dar la possibilità di chiudere avvisi o box modali.
<button type="button" class="close" aria-hidden="true">×</button>
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>
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();
}
Per allineare i componenti nelle navbars usa le utility classes, .navbar-left
o .navbar-right
. Guarda la documentazione sulle navbar per maggiori dettagli.
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();
}
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();
}
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();
}
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();
}
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();
}
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.
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 | Hidden | Hidden | Hidden |
.visible-sm |
Hidden | Visible | Hidden | Hidden |
.visible-md |
Hidden | Hidden | Visible | Hidden |
.visible-lg |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden | Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden | Visible | Visible |
.hidden-md |
Visible | Visible | Hidden | Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
Simili alle classi viste sopra, usale per mostrare/nascondere il contenuto durante la stampa.
Class | Browser | |
---|---|---|
.visible-print |
Hidden | Visible |
.hidden-print |
Visible | Hidden |
Ridimensiona la finestra del tuo browser o carica la pagina su device differenti per testare le responsive utility.
I segni di spunta verdi indicano che l'elemento è visibile nella tua finestra corrente.
Qui i segni di spunta verdi indicano che l'elemento è nascosto nella tua finestra corrente.
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.
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.
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.
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;
}
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
.
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;
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";
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;
Sono quei mixins che permettono il supporto di più browser. Nel CSS compilato, includono come prefisso, il nome del vendor.
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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})";
}
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
}
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;
}
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;
.
Gli Utility mixins sono mixins che combinano proprietà CSS altrimenti non collegate per raggiungere un determinato obiettivo.
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();
}
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();
}
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); }
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;
}
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();
}
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);
}
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.
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.
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.