CSS
Impostazioni CSS globali, elementi HTML fondamentali progettati e migliorati con classi estensibili e un sistema di griglia avanzato.
Panoramica
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>Sistema a griglia
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-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Esempio: contenitore 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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-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.
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.
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 > 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.
Ridimensiona il tuo viewport o controllalo sul tuo telefono per un esempio.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-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>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-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>Tipografia
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 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 gli elementi 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]
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.
<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.
<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.
Codice
In linea
Avvolgi frammenti di codice in linea con <code>.
Ad esempio,
<section>dovrebbe essere avvolto come inline.
For example, <code><section></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 + ,
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><p>Sample text here...</p></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>Tabelle
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 selettori di date, abbiamo deciso di isolare i nostri stili di tabella personalizzati.
| # | Nome di battesimo | Cognome | Nome utente |
|---|---|---|---|
| 1 | Segno | Ottone | @mdo |
| 2 | Giacobbe | Thornton | @Grasso |
| 3 | Larry | l'uccello |
<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 |
<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 |
<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 |
<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 | ||
<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>Le forme
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 basato su <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—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—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 del 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 del modulo e applichiamo un box-shadowa al suo posto per :focus.
:focusStato 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 class="sr-only" 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-onlyetichette 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.
(successo)
@
(successo)
<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>Bottoni
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>, facendoli non corrispondere 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
Immagini reattive
Le immagini in Bootstrap 3 possono essere rese reattive tramite l'aggiunta della .img-responsiveclasse. Questo vale max-width: 100%;,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 su.center-block sull'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">Classi di aiuto
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">×</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();
}Utilità reattive
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 | CSSdisplay |
|---|---|
.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
✔ Visibile su x-small e small
✔ Visibile su medie e grandi dimensioni
✔ Visibile su x-piccolo e medio
✔ Visibile su piccoli e grandi
✔ Visibile su x-small e large
✔ Visibile su piccole e medie
Nascosto su...
Qui, i segni di spunta verdi indicano anche che l'elemento è nascosto nella vista corrente.
Usando di meno
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.
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.
.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à.
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.
.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);
}Usando Sass
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.