Scopri i dettagli sui componenti chiave dell'infrastruttura di Bootstrap, incluso il nostro approccio a uno sviluppo web migliore, più veloce e più forte.

Tipo di documento HTML5

Bootstrap fa uso di alcuni elementi HTML e proprietà CSS che richiedono l'uso del doctype HTML5. Includilo all'inizio di tutti i tuoi progetti.

<!doctype html>
<html lang="en">
  ...
</html>

Mobile prima

Con Bootstrap 2, abbiamo aggiunto stili ottimizzati per dispositivi mobili opzionali per gli aspetti chiave del framework. Con Bootstrap 3, abbiamo riscritto il progetto per renderlo mobile friendly sin dall'inizio. Invece di aggiungere stili mobili opzionali, sono integrati direttamente nel nucleo. In effetti, Bootstrap è mobile first . Gli stili Mobile first possono essere trovati nell'intera libreria invece che in file separati.

Per garantire un rendering e uno zoom al tocco corretti, aggiungi il meta tag viewport al tuo file <head>.

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

Puoi disabilitare le funzionalità di zoom sui dispositivi mobili aggiungendo user-scalable=noal meta tag viewport. Ciò disabilita lo zoom, il che significa che gli utenti possono solo scorrere e fa sì che il tuo sito si senta un po' più simile a un'applicazione nativa. Nel complesso, non lo consigliamo su tutti i siti, quindi fai attenzione!

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

Tipografia e collegamenti

Bootstrap imposta la visualizzazione globale di base, la tipografia e gli stili di collegamento. Nello specifico noi:

Impostare background-color: #fff;ilbody
Utilizza gli attributi @font-family-base, @font-size-base, e @line-height-basecome base tipografica
Imposta il colore del collegamento globale tramite @link-colore applica le sottolineature del collegamento solo su:hover

Questi stili possono essere trovati all'interno di scaffolding.less.

Normalizza.css

Per migliorare il rendering cross-browser, utilizziamo Normalize.css , un progetto di Nicolas Gallagher e Jonathan Neal .

Contenitori

Bootstrap richiede un elemento contenitore per avvolgere i contenuti del sito e ospitare il nostro sistema di griglia. Puoi scegliere uno dei due contenitori da utilizzare nei tuoi progetti. Nota che, a causa di paddinge altro, nessuno dei due container è annidabile.

Utilizzare .containerper un contenitore reattivo a larghezza fissa.

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

Utilizzare .container-fluidper un contenitore a larghezza intera, che copre l'intera larghezza della finestra.

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

Bootstrap include un primo sistema mobile a griglia fluida reattivo che scala in modo appropriato fino a 12 colonne all'aumentare delle dimensioni del dispositivo o del viewport. Include classi predefinite per opzioni di layout semplici, oltre a potenti mixin per generare più layout semantici .

introduzione

I sistemi a griglia vengono utilizzati per creare layout di pagina attraverso una serie di righe e colonne che ospitano i tuoi contenuti. Ecco come funziona il sistema di griglia Bootstrap:

Le righe devono essere posizionate all'interno di una .container(larghezza fissa) o .container-fluid(larghezza intera) per un corretto allineamento e riempimento.
Usa le righe per creare gruppi orizzontali di colonne.
Il contenuto deve essere posizionato all'interno di colonne e solo le colonne possono essere figli immediati di righe.
Classi di griglia predefinite come .rowe .col-xs-4sono disponibili per creare rapidamente layout di griglia. Meno mixin possono essere utilizzati anche per layout più semantici.
Le colonne creano grondaie (spazi tra il contenuto delle colonne) tramite padding. Tale riempimento è sfalsato nelle righe per la prima e l'ultima colonna tramite un margine negativo su .rows.
Il margine negativo è il motivo per cui gli esempi riportati di seguito sono superati. È così che il contenuto all'interno delle colonne della griglia è allineato con il contenuto non della griglia.
Le colonne della griglia vengono create specificando il numero di dodici colonne disponibili che si desidera estendere. Ad esempio, tre colonne uguali userebbero tre .col-xs-4.
Se più di 12 colonne sono posizionate all'interno di una singola riga, ogni gruppo di colonne extra verrà, come un'unica unità, a capo su una nuova riga.
Le classi griglia si applicano ai dispositivi con larghezze dello schermo maggiori o uguali alle dimensioni del punto di interruzione e sostituiscono le classi griglia destinate a dispositivi più piccoli. Pertanto, ad esempio, l'applicazione di una .col-md-*classe a un elemento non influirà solo sul suo stile su dispositivi medi ma anche su dispositivi grandi se una .col-lg-*classe non è presente.

Guarda gli esempi per applicare questi principi al tuo codice.

Query sui media

Usiamo le seguenti media query nei nostri file Less per creare i punti di interruzione chiave nel nostro sistema di griglia.

/* 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 espandiamo queste query multimediali per includere a max-widthper limitare CSS a un insieme più ristretto di dispositivi.

@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

Scopri come funzionano gli aspetti del sistema di griglia Bootstrap su più dispositivi con una pratica tabella.

	Dispositivi extra piccoli Telefoni (<768px)	Piccoli dispositivi Tablet (≥768px)	Dispositivi medi Desktop (≥992px)	Dispositivi di grandi dimensioni Desktop (≥1200px)
Comportamento della griglia	Orizzontale in ogni momento	Compresso all'inizio, orizzontale sopra i punti di interruzione
Larghezza contenitore	Nessuno (automatico)	750px	970px	1170px
Prefisso di classe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# di colonne	12
Larghezza della colonna	Auto	~62px	~81px	~97px
Larghezza della grondaia	30px (15px su ciascun lato di una colonna)
Nidificabile	sì
Compensazioni	sì
Ordinamento delle colonne	sì

Esempio: impilato su orizzontale

Utilizzando un unico insieme di .col-md-*classi di griglia, puoi creare un sistema di griglia di base che inizia impilato su dispositivi mobili e dispositivi tablet (dalla gamma extra piccola a piccola) prima di diventare orizzontale sui dispositivi desktop (medi). Posiziona le colonne della griglia in qualsiasi file .row.

.col-md-1

.col-md-8

.col-md-4

.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 per liquidi

Trasforma qualsiasi layout di griglia a larghezza fissa in un layout a larghezza intera modificando il tuo più esterno .containerin .container-fluid.

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

Esempio: Mobile e desktop

Non vuoi che le tue colonne vengano semplicemente impilate in dispositivi più piccoli? Usa le classi della griglia dei dispositivi extra small e medium aggiungendo .col-xs-* .col-md-*alle tue colonne. Vedi l'esempio qui sotto per un'idea migliore di come funziona.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other 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>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on 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>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Esempio: cellulare, tablet, desktop

Basati sull'esempio precedente creando layout ancora più dinamici e potenti con .col-sm-*le classi tablet.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-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-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Esempio: ritorno a capo delle colonne

Se più di 12 colonne sono posizionate all'interno di una singola riga, ogni gruppo di colonne extra verrà, come un'unica unità, a capo su una nuova riga.

.col-xs-9

.col-xs-4
Poiché 9 + 4 = 13 > 12, questo div a 4 colonne viene avvolto su una nuova riga come un'unità contigua.

.col-xs-6
Le colonne successive continuano lungo la nuova riga.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

La colonna reattiva viene reimpostata

Con i quattro livelli di griglie disponibili, sei destinato a incorrere in problemi in cui, in determinati punti di interruzione, le tue colonne non vengono cancellate del tutto perché una è più alta dell'altra. Per risolvere il problema, usa una combinazione di a .clearfixe le nostre classi di utilità reattive .

.col-xs-6 .col-sm-3
Ridimensiona il tuo viewport o controllalo sul tuo telefono per un esempio.

.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-block"></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>

Oltre alla cancellazione delle colonne nei punti di interruzione reattivi, potrebbe essere necessario reimpostare offset, push o pull . Guardalo in azione nell'esempio della griglia .

<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>

Rimuovere le grondaie

Rimuovi le grondaie da una riga e le sue colonne con la .row-no-guttersclasse.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Colonne di compensazione

Sposta le colonne a destra usando le .col-md-offset-*classi. Queste classi aumentano il margine sinistro di una colonna di *colonne. Ad esempio, .col-md-offset-4si sposta .col-md-4su quattro colonne.

.col-md-4

.col-md-4 .col-md-offset-4

.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>

Puoi anche sostituire gli offset dai livelli di griglia inferiori con .col-*-offset-0le classi.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Colonne di nidificazione

Per annidare i tuoi contenuti con la griglia predefinita, aggiungi un nuovo .rowe un insieme di colonne all'interno di una colonna .col-sm-*esistente . .col-sm-*Le righe nidificate devono includere un set di colonne che si sommano fino a 12 o meno (non è necessario utilizzare tutte le 12 colonne disponibili).

Livello 1: .col-sm-9

Livello 2: .col-xs-8 .col-sm-6

Livello 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Ordinamento delle colonne

Cambia facilmente l'ordine delle nostre colonne della griglia integrate con classi di modifica .col-md-push-*..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>

Meno mixin e variabili

Oltre alle classi di griglia predefinite per layout veloci, Bootstrap include Less variabili e mixin per generare rapidamente i tuoi layout semantici semplici.

Variabili

Le variabili determinano il numero di colonne, la larghezza della grondaia e il punto di media query in cui iniziare le colonne mobili. Li usiamo per generare le classi di griglia predefinite documentate sopra, così come per i mixin personalizzati elencati di seguito.

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

Miscele

I mixin vengono utilizzati insieme alle variabili della griglia per generare CSS semantici per le singole colonne 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 di utilizzo

Puoi modificare le variabili in base ai tuoi valori personalizzati o semplicemente utilizzare i mixin con i loro valori predefiniti. Ecco un esempio di utilizzo delle impostazioni predefinite per creare un layout a due colonne con uno spazio vuoto tra.

.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>

Intestazioni

Tutte le intestazioni HTML, <h1>tramite <h6>, sono disponibili. .h1sono disponibili anche .h6classi, per quando vuoi abbinare lo stile del carattere di un'intestazione ma vuoi comunque che il tuo testo venga visualizzato in linea.

h1. Intestazione Bootstrap	Semigrassetto 36px
h2. Intestazione Bootstrap	Semigrassetto 30px
h3. Intestazione Bootstrap	Semigrassetto 24px
h4. Intestazione Bootstrap	Semigrassetto 18px
h5. Intestazione Bootstrap	Semigrassetto 14px
h6. Intestazione Bootstrap	Semigrassetto 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 un testo secondario più chiaro in qualsiasi intestazione con un <small>tag generico o la .smallclasse.

h1. Intestazione Bootstrap Testo secondario

h2. Intestazione Bootstrap Testo secondario

h3. Intestazione Bootstrap Testo secondario

h4. Intestazione Bootstrap Testo secondario

h5. Intestazione Bootstrap Testo secondario

h6. Intestazione Bootstrap Testo secondario

<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>

Copia del corpo

L'impostazione predefinita globale di Bootstrap font-sizeè 14px , con a line-heightdi 1.428 . Questo si applica a <body>e a tutti i paragrafi. Inoltre, <p>(paragrafi) ricevono un margine inferiore della metà dell'altezza della linea calcolata (10px per impostazione predefinita).

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.

Mecenate 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>

Copia del corpo principale

Fai risaltare un paragrafo aggiungendo .lead.

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

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

Costruito con meno

La scala tipografica si basa su due variabili Less in variabili.less : @font-size-basee @line-height-base. La prima è la dimensione del carattere di base utilizzata in tutto e la seconda è l'altezza della linea di base. Usiamo queste variabili e alcuni semplici calcoli matematici per creare i margini, i padding e le altezze delle linee di tutti i nostri tipi e altro ancora. Personalizzali e Bootstrap si adatta.

Elementi di testo in linea

Testo segnato

Per evidenziare una sequenza di testo a causa della sua rilevanza in un altro contesto, utilizzare il <mark>tag.

È possibile utilizzare il tag mark aevidenziaretesto.

You can use the mark tag to <mark>highlight</mark> text.

Testo cancellato

Per indicare i blocchi di testo che sono stati eliminati utilizzare il <del>tag.

~~Questa riga di testo deve essere trattata come testo cancellato.~~

<del>This line of text is meant to be treated as deleted text.</del>

Testo barrato

Per indicare blocchi di testo non più rilevanti utilizzare il <s>tag.

~~Questa riga di testo deve essere trattata come non più accurata.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Testo inserito

Per indicare le aggiunte al documento utilizzare il <ins>tag.

Questa riga di testo deve essere trattata come un'aggiunta al documento.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Testo sottolineato

Per sottolineare il testo usa il <u>tag.

Questa riga di testo verrà visualizzata come sottolineata

<u>This line of text will render as underlined</u>

Utilizza i tag di enfasi predefiniti di HTML con stili leggeri.

Piccolo testo

Per ridurre l'enfasi in linea o blocchi di testo, utilizzare il <small>tag per impostare il testo all'85% della dimensione del genitore. Gli elementi di intestazione ricevono i propri font-sizeper nidificati<small> .

In alternativa puoi utilizzare un elemento inline con .smallal posto di qualsiasi <small>.

Questa riga di testo deve essere trattata come una stampa fine.

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

Grassetto

Per enfatizzare uno snippet di testo con una grammatura più pesante.

Il seguente frammento di testo viene visualizzato in grassetto .

<strong>rendered as bold text</strong>

Corsivo

Per enfatizzare un frammento di testo in corsivo.

Il seguente frammento di testo viene visualizzato in corsivo .

<em>rendered as italicized text</em>

Elementi alternativi

Sentiti libero di usare <b>e <i>in HTML5. <b>ha lo scopo di evidenziare parole o frasi senza trasmettere ulteriore importanza mentre <i>è principalmente per voce, termini tecnici, ecc.

Classi di allineamento

Riallinea facilmente il testo ai componenti con le classi di allineamento del testo.

Testo allineato a sinistra.

Testo allineato al centro.

Testo allineato a destra.

Testo giustificato.

Nessun testo a capo.

<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>
<p class="text-nowrap">No wrap text.</p>

Classi di trasformazione

Trasforma il testo in componenti con classi di capitalizzazione del testo.

Testo minuscolo.

Testo maiuscolo.

Testo in maiuscolo.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abbreviazioni

Implementazione stilizzata <abbr>dell'elemento HTML per abbreviazioni e acronimi per mostrare la versione estesa al passaggio del mouse. Le abbreviazioni con un titleattributo hanno un bordo inferiore punteggiato chiaro e un cursore di aiuto al passaggio del mouse, fornendo un contesto aggiuntivo al passaggio del mouse e agli utenti delle tecnologie assistive.

Abbreviazione di base

Un'abbreviazione della parola attributo è attr .

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

Inizialismo

Aggiungi .initialisma un'abbreviazione per una dimensione del carattere leggermente più piccola.

L' HTML è la cosa migliore dopo il pane a fette.

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

Indirizzi

Presentare le informazioni di contatto per l'antenato più vicino o l'intero corpo di lavoro. Mantieni la formattazione terminando tutte le righe con <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Nome completo
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

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

Citazioni in blocco

Per citare blocchi di contenuto da un'altra fonte all'interno del documento.

Citazione predefinita

Avvolgi <blockquote>qualsiasi HTML come citazione. Per virgolette semplici, consigliamo un <p>.

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

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

Opzioni tra virgolette

Cambiamenti di stile e contenuto per semplici variazioni su uno standard <blockquote>.

Denominare una fonte

Aggiungi un <footer>per identificare la fonte. Avvolgi il nome del lavoro di origine in <cite>.

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

Qualcuno famoso nel titolo della fonte

<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-reverseper una citazione in blocco con contenuto allineato a destra.

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

Qualcuno famoso nel titolo della fonte

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Elenchi

Non ordinato

Un elenco di elementi in cui l'ordine non è esplicitamente rilevante.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibolo 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>

Ordinato

Un elenco di elementi in cui l'ordine è esplicitamente rilevante .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Senza stile

Rimuovere il margine sinistro e predefinito list-stylesugli elementi dell'elenco (solo figli immediati). Questo si applica solo agli elementi dell'elenco dei figli immediati , il che significa che dovrai aggiungere la classe anche per tutti gli elenchi nidificati.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibolo 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

Posiziona tutti gli elementi dell'elenco su una singola riga con display: inline-block;un leggero riempimento.

Lorem ipsum
Fasello iaculo
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Descrizione

Un elenco di termini con le relative descrizioni.

Elenchi di descrizione: Un elenco di descrizioni è perfetto per definire i termini.
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

Metti in <dl>fila termini e descrizioni fianco a fianco. Inizia impilato come <dl>s predefinito, ma quando la barra di navigazione si espande, fai anche questi.

Elenchi di descrizione: Un elenco di descrizioni è perfetto per definire i termini.
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 sempre 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>

Troncamento automatico

Gli elenchi di descrizioni orizzontali troncheranno i termini troppo lunghi per rientrare nella colonna di sinistra con text-overflow. Nelle viste più strette, passeranno al layout in pila predefinito.

In linea

Avvolgi frammenti di codice in linea con<code> .

Ad esempio, <section>dovrebbe essere avvolto come inline.

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

Input dell'utente

Utilizzare il<kbd> per indicare l'input che in genere viene immesso tramite tastiera.

Per cambiare directory, digitare cdseguito dal nome della directory.
Per modificare le impostazioni, premere ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Blocco di base

Utilizzare <pre>per più righe di codice. Assicurati di sfuggire alle parentesi angolari nel codice per un rendering corretto.

<p>Testo di esempio qui...</p>

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

Puoi facoltativamente aggiungere la .pre-scrollableclasse, che imposterà un'altezza massima di 350 px e fornirà una barra di scorrimento dell'asse y.

Variabili

Per indicare le variabili utilizzare il <var>tag.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Esempio di output

Per indicare blocchi di esempio di output da un programma, utilizzare il <samp>tag.

Questo testo deve essere trattato come output di esempio da un programma per computer.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Esempio di base

Per uno stile di base, con imbottitura leggera e solo divisori orizzontali, aggiungi la classe base .tablea qualsiasi <table>. Può sembrare super ridondante, ma dato l'uso diffuso di tabelle per altri plugin come calendari e raccoglitori di date, abbiamo deciso di isolare i nostri stili di tabella personalizzati.

Didascalia tabella opzionale.
#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table">
  ...
</table>

Righe rigate

Utilizzare .table-stripedper aggiungere strisce zebrate a qualsiasi riga di tabella all'interno di <tbody>.

Compatibilità tra browser

Lo stile delle tabelle a strisce viene eseguito tramite il :nth-childselettore CSS, che non è disponibile in Internet Explorer 8.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table table-striped">
  ...
</table>

Tavolo bordato

Aggiungi .table-borderedi bordi su tutti i lati della tabella e delle celle.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table table-bordered">
  ...
</table>

Righe al passaggio del mouse

Aggiungi .table-hoverper abilitare uno stato al passaggio del mouse sulle righe della tabella all'interno di un file <tbody>.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry	l'uccello	@twitter

<table class="table table-hover">
  ...
</table>

Tavola condensata

Aggiungi .table-condensedper rendere i tavoli più compatti tagliando a metà l'imbottitura delle celle.

#	Nome di battesimo	Cognome	Nome utente
1	Segno	Ottone	@mdo
2	Giacobbe	Thornton	@Grasso
3	Larry l'Uccello		@twitter

<table class="table table-condensed">
  ...
</table>

Classi contestuali

Usa le classi contestuali per colorare le righe della tabella o le singole celle.

Classe	Descrizione
`.active`	Applica il colore al passaggio del mouse a una riga o cella particolare
`.success`	Indica un'azione riuscita o positiva
`.info`	Indica un cambiamento o un'azione informativa neutra
`.warning`	Indica un avviso che potrebbe richiedere attenzione
`.danger`	Indica un'azione pericolosa o potenzialmente negativa

#	Intestazione di colonna	Intestazione di colonna	Intestazione di colonna
1	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
2	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
3	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
4	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
5	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
6	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
7	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
8	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna
9	Contenuto della colonna	Contenuto della colonna	Contenuto della colonna

<!-- 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>

Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato a una riga di tabella oa una singola cella fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni indicate dal colore siano ovvie dal contenuto stesso (il testo visibile nella riga/cella della tabella pertinente) o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.

Tabelle reattive

Crea tabelle reattive avvolgendole .tableper .table-responsivefarle scorrere orizzontalmente su dispositivi di piccole dimensioni (meno di 768 px). Quando visualizzi qualcosa di più grande di 768px di larghezza, non vedrai alcuna differenza in queste tabelle.

Ritaglio/troncamento verticale

Le tabelle reattive utilizzano overflow-y: hidden, che ritaglia qualsiasi contenuto che va oltre i bordi inferiore o superiore della tabella. In particolare, questo può tagliare i menu a discesa e altri widget di terze parti.

Firefox e fieldset

Firefox ha uno stile fieldset imbarazzante widthche interferisce con la tabella reattiva. Questo non può essere ignorato senza un hack specifico per Firefox che non forniamo in Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Per ulteriori informazioni, leggi questa risposta Stack Overflow .

#	Intestazione tabella	Intestazione tabella	Intestazione tabella	Intestazione tabella	Intestazione tabella	Intestazione tabella
1	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella
2	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella
3	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella

#	Intestazione tabella	Intestazione tabella	Intestazione tabella	Intestazione tabella	Intestazione tabella	Intestazione tabella
1	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella
2	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella
3	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Esempio di base

I singoli controlli dei moduli ricevono automaticamente uno stile globale. Tutti gli elementi testuali <input>, <textarea>e <select>con .form-controlsono impostati per width: 100%;impostazione predefinita. Avvolgi etichette e controlli .form-groupper una spaziatura ottimale.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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 mischiare gruppi di moduli con gruppi di input

Non mischiare i gruppi di moduli direttamente con i gruppi di input . Annidare invece il gruppo di input all'interno del gruppo di moduli.

Modulo in linea

Aggiungi .form-inlineal tuo modulo (che non deve essere un <form>) per i controlli allineati a sinistra e inline-block. Questo si applica solo ai moduli all'interno di finestre di almeno 768 pixel di larghezza.

Potrebbe richiedere larghezze personalizzate

Gli input e le selezioni sono stati width: 100%;applicati per impostazione predefinita in Bootstrap. All'interno dei moduli inline, lo reimpostiamo in width: auto;modo che più controlli possano risiedere sulla stessa riga. A seconda del layout, potrebbero essere necessarie larghezze personalizzate aggiuntive.

Aggiungi sempre etichette

I lettori di schermo avranno problemi con i tuoi moduli se non includi un'etichetta per ogni input. Per questi moduli in linea, puoi nascondere le etichette utilizzando la .sr-onlyclasse. Esistono ulteriori metodi alternativi per fornire un'etichetta per le tecnologie assistive, come l' attributo aria-label, aria-labelledbyo . titleSe nessuno di questi è presente, le utilità per la lettura dello schermo possono ricorrere all'utilizzo placeholderdell'attributo, se presente, ma si noti che l'uso placeholderin sostituzione di altri metodi di etichettatura non è consigliato.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" 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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Forma orizzontale

Usa le classi di griglia predefinite di Bootstrap per allineare etichette e gruppi di controlli del modulo in un layout orizzontale aggiungendo .form-horizontalal modulo (che non deve essere un <form>). In questo modo cambia .form-groups in modo che si comporti come righe della griglia, quindi non c'è bisogno di .row.

<form class="form-horizontal">
  <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 di modulo standard supportati in un layout di modulo di esempio.

Ingressi

Controllo modulo più comune, campi di input basati su testo. Include il supporto per tutti i tipi di HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, e color.

Dichiarazione di tipo richiesta

Gli input avranno uno stile completo solo se typevengono dichiarati correttamente.

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

Gruppi di input

Per aggiungere testo o pulsanti integrati prima e/o dopo qualsiasi testo <input>, controlla il componente del gruppo di input .

Area di testo

Controllo modulo che supporta più righe di testo. Modificare rowsl'attributo se necessario.

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

Caselle di controllo e radio

Le caselle di controllo servono per selezionare una o più opzioni in un elenco, mentre le radio servono per selezionare un'opzione tra molte.

Le caselle di controllo e le radio disabilitate sono supportate, ma per fornire un cursore "non consentito" al passaggio del mouse su parent <label>, dovrai aggiungere la .disabledclasse a parent .radio, .radio-inline, .checkboxo .checkbox-inline.

Predefinito (impilato)

<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="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </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>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Caselle di controllo e radio in linea

Usa le classi .checkbox-inlineo .radio-inlinesu una serie di caselle di controllo o radio per i controlli che appaiono sulla stessa riga.

<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>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Caselle di controllo e radio senza testo dell'etichetta

Se non hai testo all'interno di <label>, l'input è posizionato come ti aspetteresti. Attualmente funziona solo con caselle di controllo e radio non in linea. Ricordarsi di fornire comunque una qualche forma di etichetta per le tecnologie assistive (ad esempio, utilizzando aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Seleziona

Nota che molti menu di selezione nativi, in particolare in Safari e Chrome, hanno angoli arrotondati che non possono essere modificati tramite le border-radiusproprietà.

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

Per <select>i controlli con l' multipleattributo, per impostazione predefinita vengono visualizzate più opzioni.

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

Controllo statico

Quando è necessario inserire testo normale accanto all'etichetta di un modulo all'interno di un modulo, utilizzare la .form-control-staticclasse su un <p>.

<form class="form-horizontal">
  <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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Stato di messa a fuoco

outlineRimuoviamo gli stili predefiniti su alcuni controlli dei moduli e applichiamo un box-shadowa al suo posto per :focus.

`:focus`Stato dimostrativo

L'input di esempio sopra utilizza stili personalizzati nella nostra documentazione per dimostrare lo :focusstato su un file .form-control.

Stato disabile

Aggiungi l' disabledattributo booleano su un input per impedire le interazioni dell'utente. Gli input disabilitati appaiono più chiari e aggiungono un not-allowedcursore.

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

Fieldset disabilitati

Aggiungi l' disabledattributo a a <fieldset>per disabilitare tutti i controlli all'interno <fieldset>di contemporaneamente.

Avvertenza sulla funzionalità di collegamento di`<a>`

Per impostazione predefinita, i browser tratteranno tutti i controlli dei moduli nativi ( <input>, <select>e <button>gli elementi) all'interno di a <fieldset disabled>come disabilitati, impedendo interazioni sia con la tastiera che con il mouse su di essi. Tuttavia, se il tuo modulo include anche <a ... class="btn btn-*">elementi, a questi verrà assegnato solo uno stile di pointer-events: none. Come notato nella sezione sullo stato disabilitato per i pulsanti (e in particolare nella sottosezione per gli elementi di ancoraggio), questa proprietà CSS non è ancora standardizzata e non è completamente supportata in Opera 18 e precedenti, o in Internet Explorer 11, e ha vinto non impedisce agli utenti della tastiera di mettere a fuoco o attivare questi collegamenti. Quindi, per sicurezza, usa JavaScript personalizzato per disabilitare tali collegamenti.

Compatibilità tra browser

Sebbene Bootstrap applichi questi stili in tutti i browser, Internet Explorer 11 e versioni precedenti non supportano completamente l' disabledattributo su un file <fieldset>. Usa JavaScript personalizzato per disabilitare il fieldset in questi browser.

<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>

Stato di sola lettura

Aggiungi l' readonlyattributo booleano su un input per impedire la modifica del valore dell'input. Gli input di sola lettura appaiono più chiari (proprio come gli input disabilitati), ma mantengono il cursore standard.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Testo guida

Testo della guida a livello di blocco per i controlli dei moduli.

Associazione del testo della guida ai controlli dei moduli

Il testo della guida deve essere esplicitamente associato al controllo del modulo a cui si riferisce utilizzando l' aria-describedbyattributo. Ciò garantirà che le tecnologie assistive, come le utilità per la lettura dello schermo, annunceranno questo testo della guida quando l'utente si concentra o accede al controllo.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Stati di convalida

Bootstrap include stili di convalida per gli stati di errore, avviso e successo sui controlli dei moduli. Per utilizzare, aggiungere .has-warning, .has-erroro .has-successall'elemento padre. Qualsiasi .control-label, .form-control, e .help-blockall'interno di quell'elemento riceverà gli stili di convalida.

Trasmissione dello stato di convalida alle tecnologie assistive e agli utenti daltonici

L'uso di questi stili di convalida per denotare lo stato di un controllo modulo fornisce solo un'indicazione visiva basata sul colore, che non verrà trasmessa agli utenti di tecnologie assistive, come lettori di schermo, o agli utenti daltonici.

Assicurarsi che venga fornita anche un'indicazione alternativa dello stato. Ad esempio, puoi includere un suggerimento sullo stato nel <label>testo del controllo del modulo stesso (come nel caso dell'esempio di codice seguente), includere un Glyphicon (con un testo alternativo appropriato usando la .sr-onlyclasse - vedere gli esempi di Glyphicon ) o fornendo un blocco di testo della guida aggiuntivo . In particolare per le tecnologie assistive, è anche possibile assegnare un aria-invalid="true"attributo ai controlli dei moduli non validi.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</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>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Con icone opzionali

Puoi anche aggiungere icone di feedback opzionali con l'aggiunta di .has-feedbacke l'icona a destra.

Le icone di feedback funzionano solo con <input class="form-control">elementi testuali.

Icone, etichette e gruppi di input

Il posizionamento manuale delle icone di feedback è necessario per gli ingressi senza etichetta e per i gruppi di ingressi con un componente aggiuntivo sulla destra. Si consiglia vivamente di fornire etichette per tutti gli input per motivi di accessibilità. Se desideri impedire la visualizzazione delle etichette, nascondile con la .sr-onlyclasse. Se devi fare a meno delle etichette, regola il topvalore dell'icona di feedback. Per i gruppi di input, regola il rightvalore su un valore pixel appropriato a seconda della larghezza del tuo componente aggiuntivo.

Trasmettere il significato dell'icona alle tecnologie assistive

Per garantire che le tecnologie assistive, come le utilità per la lettura dello schermo, trasmettano correttamente il significato di un'icona, è necessario includere del testo nascosto aggiuntivo nella .sr-onlyclasse e associarlo esplicitamente al controllo del modulo a cui si riferisce utilizzando aria-describedby. In alternativa, assicurati che il significato (ad esempio, il fatto che sia presente un avviso per un particolare campo di immissione di testo) venga trasmesso in qualche altra forma, ad esempio la modifica del testo dell'effettivo <label>associato al controllo del modulo.

Sebbene gli esempi seguenti menzionino già lo stato di convalida dei rispettivi controlli di forma nel <label>testo stesso, la tecnica di cui sopra (utilizzando .sr-onlytesto e aria-describedby) è stata inclusa a scopo illustrativo.

<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" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</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" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</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" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Icone opzionali nei moduli orizzontali e in linea

<form class="form-horizontal">
  <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" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <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" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Icone opzionali con `.sr-only`etichette nascoste

Se usi la .sr-onlyclasse per nascondere i controlli di un modulo <label>(piuttosto che usare altre opzioni di etichettatura, come l' aria-labelattributo), Bootstrap regolerà automaticamente la posizione dell'icona una volta aggiunta.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Controllo del dimensionamento

Imposta le altezze usando classi come .input-lg, e imposta le larghezze usando classi di colonne della griglia come .col-lg-*.

Taglia in altezza

Crea controlli modulo più alti o più corti che corrispondano alle dimensioni 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>

Dimensioni dei gruppi di moduli orizzontali

Ridimensiona rapidamente le etichette e i controlli dei moduli all'interno .form-horizontalaggiungendo .form-group-lgo .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Dimensionamento della colonna

Avvolgi gli input nelle colonne della griglia o in qualsiasi elemento padre personalizzato per applicare facilmente le larghezze desiderate.

<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>

Etichette a bottone

Utilizzare le classi di pulsanti su un elemento <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">

Utilizzo specifico del contesto

Sebbene le classi di pulsanti possano essere utilizzate su <a>e <button>elementi, solo <button>gli elementi sono supportati all'interno dei nostri componenti nav e navbar.

Collegamenti che fungono da pulsanti

Se gli <a>elementi vengono utilizzati per fungere da pulsanti, attivando la funzionalità in-page, piuttosto che passare a un altro documento o sezione all'interno della pagina corrente, dovrebbero anche ricevere un appropriato role="button".

Rendering cross-browser

Come best practice, consigliamo vivamente di utilizzare l' <button>elemento quando possibile per garantire la corrispondenza del rendering cross-browser.

Tra le altre cose, c'è un bug in Firefox <30 che ci impedisce di impostare i pulsanti basati su line-heightof <input>, facendo sì che non corrispondano esattamente all'altezza degli altri pulsanti su Firefox.

Opzioni

Utilizza una delle classi di pulsanti disponibili per creare rapidamente un pulsante con uno stile.

<!-- 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>

Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato a un pulsante fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come lettori di schermo. Assicurati che le informazioni indicate dal colore siano ovvie dal contenuto stesso (il testo visibile del pulsante) o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.

Taglie

Ti piacciono i pulsanti più grandi o più piccoli? Aggiungi .btn-lg, .btn-sm, o .btn-xsper dimensioni aggiuntive.

<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>

Crea pulsanti a livello di blocco, quelli che si estendono per l'intera larghezza di un genitore, aggiungendo .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>

Stato attivo

I pulsanti appariranno premuti (con uno sfondo più scuro, un bordo più scuro e un'ombra interna) quando sono attivi. Per <button>gli elementi, questo viene fatto tramite :active. Per <a>gli elementi, è fatto con .active. Tuttavia, è possibile utilizzare .activesu <button>s (e includere l' aria-pressed="true"attributo) se è necessario replicare lo stato attivo a livello di codice.

Elemento pulsante

Non c'è bisogno di aggiungere :activein quanto è una pseudo-classe, ma se devi forzare lo stesso aspetto, vai avanti e aggiungi .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 di ancoraggio

Aggiungi la .activeclasse ai <a>pulsanti.

Collegamento primario Collegamento

<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 disabile

Rendi i pulsanti non cliccabili sfumandoli di nuovo con opacity.

Elemento pulsante

Aggiungi l' disabledattributo ai <button>pulsanti.

<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à tra browser

Se aggiungi l' disabledattributo a <button>, Internet Explorer 9 e versioni precedenti renderanno il testo grigio con un'ombra di testo sgradevole che non possiamo correggere.

Elemento di ancoraggio

Aggiungi la .disabledclasse ai <a>pulsanti.

Collegamento primario Collegamento

<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>

Usiamo .disabledcome classe di utilità qui, simile alla .activeclasse comune, quindi non è richiesto alcun prefisso.

Avvertenza sulla funzionalità di collegamento

Questa classe usa pointer-events: noneper provare a disabilitare la funzionalità di collegamento di <a>s, ma quella proprietà CSS non è ancora standardizzata e non è completamente supportata in Opera 18 e precedenti, o in Internet Explorer 11. Inoltre, anche nei browser che supportano pointer-events: none, tastiera la navigazione rimane inalterata, il che significa che gli utenti vedenti della tastiera e gli utenti di tecnologie assistive potranno comunque attivare questi collegamenti. Quindi, per sicurezza, usa JavaScript personalizzato per disabilitare tali collegamenti.

Immagini reattive

Le immagini in Bootstrap 3 possono essere rese reattive tramite l'aggiunta della .img-responsiveclasse. Questo vale max-width: 100%;e height: auto;per display: block;l'immagine in modo che si adatti perfettamente all'elemento genitore.

Per centrare le immagini che utilizzano la .img-responsiveclasse, usa .center-blockinvece di .text-center. Vedere la sezione classi di supporto per maggiori dettagli .center-blocksull'utilizzo.

Immagini SVG e IE 8-10

In Internet Explorer 8-10, le immagini SVG con .img-responsivesono di dimensioni sproporzionate. Per risolvere questo problema, aggiungi width: 100% \9;dove necessario. Bootstrap non lo applica automaticamente poiché causa complicazioni ad altri formati di immagine.

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

Forme dell'immagine

Aggiungi classi a un <img>elemento per applicare facilmente uno stile alle immagini in qualsiasi progetto.

Compatibilità tra browser

Tieni presente che Internet Explorer 8 non supporta gli angoli arrotondati.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Colori contestuali

Trasmetti significato attraverso il colore con una manciata di classi di utilità di enfasi. Questi possono anche essere applicati ai collegamenti e si scuriranno al passaggio del mouse proprio come i nostri stili di collegamento predefiniti.

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.

Mecenate 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à

A volte le classi di enfasi non possono essere applicate a causa della specificità di un altro selettore. Nella maggior parte dei casi, una soluzione sufficiente consiste nell'avvolgere il testo in a <span>con la classe.

Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (i colori contestuali sono usati solo per rafforzare il significato che è già presente nel testo/markup) o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse .

Sfondi contestuali

Simile alle classi di colore del testo contestuale, imposta facilmente lo sfondo di un elemento su qualsiasi classe contestuale. I componenti di ancoraggio si scuriranno al passaggio del mouse, proprio come le classi di testo.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Mecenate 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>

Affrontare la specificità

A volte le classi di background contestuali non possono essere applicate a causa della specificità di un altro selettore. In alcuni casi, una soluzione alternativa sufficiente è racchiudere il contenuto dell'elemento in a <div>con la classe.

Trasmettere significato alle tecnologie assistive

Come per i colori contestuali , assicurati che anche qualsiasi significato veicolato attraverso il colore sia trasmesso in un formato che non sia puramente rappresentativo.

Icona Chiudi

Usa l'icona di chiusura generica per ignorare contenuti come modali e avvisi.

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

Cursori

Usa i punti di inserimento per indicare la funzionalità e la direzione del menu a discesa. Si noti che il cursore predefinito si invertirà automaticamente nei menu a comparsa .

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

Galleggianti veloci

Sposta un elemento a sinistra o a destra con una classe. !importantè incluso per evitare problemi di specificità. Le classi possono essere utilizzate anche come mixin.

<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();
}

Centra i blocchi di contenuto

Impostare un elemento su display: blocke centrarlo tramite margin. Disponibile come mixin e classe.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

Clearfix

Cancella facilmente messaggi floatdi posta elettronica aggiungendo .clearfix all'elemento padre . Utilizza il micro clearfix reso popolare da Nicolas Gallagher. Può essere utilizzato anche 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 i contenuti

Forzare la visualizzazione o la nascondere di un elemento ( anche per le utilità per la lettura dello schermo ) con l'uso di classi .showe . .hiddenQueste classi usano !importantper evitare conflitti di specificità, proprio come i float veloci . Sono disponibili solo per la commutazione a livello di blocco. Possono essere usati anche come mixin.

.hideè disponibile, ma non sempre influisce sulle utilità per la lettura dello schermo ed è deprecato a partire dalla v3.0.1. Usa .hiddeno .sr-onlyinvece.

Inoltre, .invisiblepuò essere utilizzato per attivare o disattivare solo la visibilità di un elemento, il che significa displayche non viene modificato e l'elemento può comunque influenzare il flusso del documento.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

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

Contenuto dello screen reader e navigazione da tastiera

Nascondi un elemento a tutti i dispositivi eccetto per le utilità per la lettura dello schermo con .sr-only. Combina .sr-onlycon .sr-only-focusableper mostrare di nuovo l'elemento quando è focalizzato (ad esempio da un utente che utilizza solo la tastiera). Necessario per seguire le migliori pratiche di accessibilità . Può essere utilizzato anche come mixin.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Sostituzione dell'immagine

Utilizza la .text-hideclasse o il mixin per sostituire il contenuto del testo 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 più rapido e ottimizzato per i dispositivi mobili, utilizza queste classi di utilità per mostrare e nascondere i contenuti per dispositivo tramite query multimediali. Sono incluse anche classi di utilità per alternare il contenuto durante la stampa.

Prova a usarli in modo limitato ed evita di creare versioni completamente diverse dello stesso sito. Invece, usali per completare la presentazione di ogni dispositivo.

Classi disponibili

Utilizza una o una combinazione delle classi disponibili per alternare il contenuto tra i punti di interruzione del viewport.

	Dispositivi extra piccoliTelefoni (<768px)	Piccoli dispositiviCompresse (≥768px)	Dispositivi mediDesktop (≥992px)	Dispositivi di grandi dimensioniDesktop (≥1200px)
`.visible-xs-*`	Visibile	Nascosto	Nascosto	Nascosto
`.visible-sm-*`	Nascosto	Visibile	Nascosto	Nascosto
`.visible-md-*`	Nascosto	Nascosto	Visibile	Nascosto
`.visible-lg-*`	Nascosto	Nascosto	Nascosto	Visibile
`.hidden-xs`	Nascosto	Visibile	Visibile	Visibile
`.hidden-sm`	Visibile	Nascosto	Visibile	Visibile
`.hidden-md`	Visibile	Visibile	Nascosto	Visibile
`.hidden-lg`	Visibile	Visibile	Visibile	Nascosto

A partire dalla v3.2.0, le .visible-*-*classi per ogni punto di interruzione sono disponibili in tre varianti, una per ogni displayvalore della proprietà CSS elencato di seguito.

Gruppo di classi	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Quindi, per gli xsschermi extra piccoli ( ), ad esempio, le .visible-*-*classi disponibili sono: .visible-xs-block, .visible-xs-inline, e .visible-xs-inline-block.

Esistono anche le classi .visible-xs, .visible-sm, .visible-mde .visible-lg, ma sono obsolete a partire dalla v3.2.0 . Sono approssimativamente equivalenti a .visible-*-block, ad eccezione di casi speciali aggiuntivi per la commutazione di <table>elementi correlati.

Classi di stampa

Simile alle normali classi reattive, usa queste per attivare o disattivare il contenuto per la stampa.

Classi	Browser	Stampa
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Nascosto	Visibile
`.hidden-print`	Visibile	Nascosto

La classe .visible-printesiste anche ma è deprecata a partire dalla v3.2.0. È approssimativamente equivalente a .visible-print-block, salvo casi speciali aggiuntivi per <table>elementi correlati.

Casi test

Ridimensiona il browser o carica su dispositivi diversi per testare le classi di utilità reattive.

Visibile su...

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

Piccolissimo ✔ Visibile su x-small

Piccolo ✔ Visibile su piccolo

medio ✔ Visibile su supporto

Di grandi dimensioni ✔ Visibile su grande

Extra piccolo e piccolo ✔ Visibile su x-small e small

Medio e grande ✔ Visibile su medie e grandi dimensioni

Extra piccolo e medio ✔ Visibile su x-piccolo e medio

Piccolo e grande ✔ Visibile su piccoli e grandi

Extra piccolo e grande ✔ Visibile su x-small e large

Piccolo e medio ✔ Visibile su piccole e medie

Nascosto su...

Qui, i segni di spunta verdi indicano anche che l'elemento è nascosto nella vista corrente.

Piccolissimo ✔ Nascosto su x-small

Piccolo ✔ Nascosto su piccolo

medio ✔ Nascosto su medio

Di grandi dimensioni ✔ Nascosto in grande

Extra piccolo e piccolo ✔ Nascosto su x-small e small

Medio e grande ✔ Nascosto su medio e grande

Extra piccolo e medio ✔ Nascosto su x-piccolo e medio

Piccolo e grande ✔ Nascosto su piccoli e grandi

Extra piccolo e grande ✔ Nascosto su x-small e large

Piccolo e medio ✔ Nascosto su piccole e medie

Il CSS di Bootstrap è basato su Less, un preprocessore con funzionalità aggiuntive come variabili, mixin e funzioni per la compilazione di CSS. Coloro che desiderano utilizzare i file Less sorgente invece dei nostri file CSS compilati possono utilizzare le numerose variabili e mixin che utilizziamo in tutto il framework.

Le variabili di griglia ei mixin sono trattati nella sezione Sistema di griglia .

Compilazione Bootstrap

Bootstrap può essere utilizzato in almeno due modi: con il CSS compilato o con i file sorgente Less. Per compilare i file Less, consulta la sezione Guida introduttiva per come configurare il tuo ambiente di sviluppo per eseguire i comandi necessari.

Gli strumenti di compilazione di terze parti possono funzionare con Bootstrap, ma non sono supportati dal nostro team principale.

Variabili

Le variabili vengono utilizzate durante l'intero progetto come un modo per centralizzare e condividere valori di uso comune come colori, spaziatura o pile di caratteri. Per una ripartizione completa, vedere il Customizer .

Colori

Utilizza facilmente due combinazioni di colori: scala di grigi e semantica. I colori in scala di grigi forniscono un rapido accesso alle sfumature di nero comunemente utilizzate, mentre la semantica include vari colori assegnati a valori contestuali significativi.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Usa una di queste variabili di colore così come sono o riassegnale a variabili più significative per il 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

Una manciata di variabili per personalizzare rapidamente gli elementi chiave dello scheletro del tuo sito.

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

Collegamenti

Disegna facilmente i tuoi link con il colore giusto con un solo valore.

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

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

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

Nota che @link-hover-colorutilizza una funzione, un altro fantastico strumento di Less, per creare automaticamente il giusto colore al passaggio del mouse. È possibile utilizzare darken, lighten, saturatee desaturate.

Tipografia

Imposta facilmente il tuo carattere tipografico, la dimensione del testo, l'interlinea e altro con alcune rapide variabili. Bootstrap ne fa uso anche 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

Due variabili rapide per personalizzare la posizione e il nome del file delle tue icone.

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

Componenti

I componenti di Bootstrap utilizzano alcune variabili predefinite per impostare valori comuni. Ecco i più usati.

@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;

Mixin del venditore

I mixin del fornitore sono mixin per supportare più browser includendo tutti i prefissi del fornitore pertinenti nel CSS compilato.

Dimensioni della scatola

Ripristina il modello della scatola dei tuoi componenti con un singolo mixin. Per il contesto, vedere questo utile articolo di Mozilla .

Il mixin è deprecato a partire dalla v3.2.0, con l'introduzione di Autoprefixer. Per preservare la compatibilità con le versioni precedenti, Bootstrap continuerà a utilizzare il mixin internamente fino a Bootstrap v4.

.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 moderni supportano la proprietà senza prefisso border-radius. In quanto tale, non esiste alcun .border-radius()mixin, ma Bootstrap include scorciatoie per arrotondare rapidamente due angoli su un particolare 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;
}

Ombre a scatola (di caduta).

Se il tuo pubblico di destinazione utilizza i browser e i dispositivi più recenti e migliori, assicurati di utilizzare la box-shadowproprietà da sola. Se hai bisogno di supporto per dispositivi Android precedenti (pre-v4) e iOS (pre-iOS 5), usa il mixin deprecato per raccogliere il -webkitprefisso richiesto.

Il mixin è deprecato a partire dalla v3.1.0, poiché Bootstrap non supporta ufficialmente le piattaforme obsolete che non supportano la proprietà standard. Per preservare la compatibilità con le versioni precedenti, Bootstrap continuerà a utilizzare il mixin internamente fino a Bootstrap v4.

Assicurati di utilizzare i rgba()colori nelle ombre della tua scatola in modo che si fondano il più perfettamente possibile con gli sfondi.

.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

Mixin multipli per flessibilità. Imposta tutte le informazioni di transizione con una o specifica un ritardo e una durata separati secondo necessità.

I mixin sono deprecati a partire dalla v3.2.0, con l'introduzione di Autoprefixer. Per preservare la compatibilità con le versioni precedenti, Bootstrap continuerà a utilizzare i mixin internamente fino a Bootstrap v4.

.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-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Trasformazioni

Ruota, ridimensiona, trasla (sposta) 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

Un singolo mixin per l'utilizzo di tutte le proprietà di animazione di CSS3 in una dichiarazione e altri mixin per le singole proprietà.

.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 fornisci un filterfallback per IE8.

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

Testo segnaposto

Fornisci il contesto per i controlli dei moduli all'interno di ogni campo.

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

Colonne

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

.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 facilmente due colori qualsiasi in una sfumatura di sfondo. Diventa più avanzato e imposta una direzione, usa tre colori o usa una sfumatura radiale. Con un singolo mixin ottieni tutte le sintassi prefissate di cui avrai bisogno.

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

Puoi anche specificare l'angolo di un gradiente lineare standard a due colori:

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

Se hai bisogno di un gradiente di stile a strisce da barbiere, anche questo è facile. Basta specificare un singolo colore e sovrapporremo una striscia bianca traslucida.

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

Alza la posta e usa invece tre colori. Imposta il primo colore, il secondo colore, il colore stop del secondo colore (un valore percentuale come 25%) e il terzo colore con questi mixin:

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

Dritta! Se dovessi mai aver bisogno di rimuovere un gradiente, assicurati di rimuovere qualsiasi IE specifico filterche potresti aver aggiunto. Puoi farlo usando il .reset-filter()mixin insieme a background-image: none;.

Mix di utilità

I mixin di utilità sono mixin che combinano proprietà CSS altrimenti non correlate per raggiungere un obiettivo o un'attività specifici.

Clearfix

Dimentica l'aggiunta class="clearfix"a qualsiasi elemento e aggiungi invece il .clearfix()mixin dove appropriato. Utilizza il micro clearfix di Nicolas Gallagher .

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

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

Centratura orizzontale

Centrare rapidamente qualsiasi elemento all'interno del suo genitore. Richiede widtho max-widthda impostare.

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

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

Aiutanti di dimensionamento

Specificare le dimensioni di un oggetto più facilmente.

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

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

Aree di testo ridimensionabili

Configura facilmente le opzioni di ridimensionamento per qualsiasi area di testo o qualsiasi altro elemento. Predefinito per il normale comportamento del browser ( both).

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

Tronca il testo

Tronca facilmente il testo con i puntini di sospensione con un solo mixin. Richiede che l'elemento sia blocko inline-blocklivello.

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

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

Immagini retina

Specificare due percorsi di immagine e le dimensioni dell'immagine @1x e Bootstrap fornirà una query multimediale @2x. Se hai molte immagini da servire, prendi in considerazione la possibilità di scrivere manualmente il CSS dell'immagine retina in un'unica query multimediale.

.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);
}

Sebbene Bootstrap sia basato su Less, ha anche un port Sass ufficiale . Lo manteniamo in un repository GitHub separato e gestiamo gli aggiornamenti con uno script di conversione.

Cosa è incluso

Poiché il port Sass ha un repository separato e serve un pubblico leggermente diverso, i contenuti del progetto differiscono notevolmente dal progetto Bootstrap principale. Ciò garantisce che la porta Sass sia il più compatibile possibile con il maggior numero possibile di sistemi basati su Sass.

Sentiero	Descrizione
`lib/`	Codice Ruby gem (configurazione Sass, integrazioni Rails e Compass)
`tasks/`	Script di conversione (passando a monte da Less a Sass)
`test/`	Prove di compilazione
`templates/`	Manifesto del pacchetto Compass
`vendor/assets/`	Sass, JavaScript e file di caratteri
`Rakefile`	Attività interne, come rastrellare e convertire

Visita il repository GitHub del port Sass per vedere questi file in azione.

Installazione

Per informazioni su come installare e utilizzare Bootstrap for Sass, consultare il file readme del repository GitHub . È la fonte più aggiornata e include informazioni da utilizzare con i progetti Rails, Compass e Sass standard.

Bootstrap per Sass

CSS

Panoramica

Tipo di documento HTML5

Mobile prima

Tipografia e collegamenti

Normalizza.css

Contenitori

Sistema a griglia

introduzione

Query sui media

Opzioni griglia

Esempio: impilato su orizzontale

Esempio: contenitore per liquidi

Esempio: Mobile e desktop

Esempio: cellulare, tablet, desktop

Esempio: ritorno a capo delle colonne

La colonna reattiva viene reimpostata

Rimuovere le grondaie

Colonne di compensazione

Colonne di nidificazione

Ordinamento delle colonne

Meno mixin e variabili

Variabili

Miscele

Esempio di utilizzo

Tipografia

Intestazioni

h1. Intestazione Bootstrap

h2. Intestazione Bootstrap

h3. Intestazione Bootstrap

h4. Intestazione Bootstrap

h5. Intestazione Bootstrap

h6. Intestazione Bootstrap

h1. Intestazione Bootstrap Testo secondario

h2. Intestazione Bootstrap Testo secondario

h3. Intestazione Bootstrap Testo secondario

h4. Intestazione Bootstrap Testo secondario

h5. Intestazione Bootstrap Testo secondario

h6. Intestazione Bootstrap Testo secondario

Copia del corpo

Copia del corpo principale

Costruito con meno

Elementi di testo in linea

Testo segnato

Testo cancellato

Testo barrato

Testo inserito

Testo sottolineato

Piccolo testo

Grassetto

Corsivo

Elementi alternativi

Classi di allineamento

Classi di trasformazione

Abbreviazioni

Abbreviazione di base

Inizialismo

Indirizzi

Citazioni in blocco

Citazione predefinita

Opzioni tra virgolette

Denominare una fonte

Visualizzazioni alternative

Elenchi

Non ordinato

Ordinato

Senza stile

In linea

Descrizione

Descrizione orizzontale

Troncamento automatico

Codice

In linea

Input dell'utente

Blocco di base

Variabili

Esempio di output

Tabelle

Esempio di base

Righe rigate

`:focus`Stato dimostrativo

Avvertenza sulla funzionalità di collegamento di`<a>`

Icone opzionali con `.sr-only`etichette nascoste