Obteniu informació sobre les peces clau de la infraestructura de Bootstrap, inclòs el nostre enfocament per a un desenvolupament web millor, més ràpid i més fort.

Tipus de document HTML5

Bootstrap fa ús de determinats elements HTML i propietats CSS que requereixen l'ús del tipus de document HTML5. Incloeu-lo al principi de tots els vostres projectes.

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

Primer el mòbil

Amb Bootstrap 2, hem afegit estils opcionals adaptats per a mòbils per a aspectes clau del marc. Amb Bootstrap 3, hem reescrit el projecte perquè sigui compatible amb mòbils des del principi. En lloc d'afegir estils mòbils opcionals, s'enfornen directament al nucli. De fet, Bootstrap és mòbil primer . Els estils mòbils primer es poden trobar a tota la biblioteca en comptes d'en fitxers separats.

Per garantir la representació correcta i el zoom tàctil, afegiu la metaetiqueta de la finestra gràfica al vostre fitxer <head>.

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

Podeu desactivar les capacitats de zoom als dispositius mòbils afegint -li user-scalable=noa la metaetiqueta de la finestra gràfica. Això desactiva el zoom, és a dir, els usuaris només poden desplaçar-se i fa que el vostre lloc se senti una mica més com una aplicació nativa. En general, no ho recomanem a tots els llocs, així que aneu amb compte!

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

Tipografia i enllaços

Bootstrap estableix estils bàsics de visualització global, tipografia i enllaços. Concretament, nosaltres:

Situada background-color: #fff;a labody
Utilitzeu els atributs @font-family-base, @font-size-base, i @line-height-basecom a base tipogràfica
Estableix el color de l'enllaç global mitjançant @link-colori aplica només subratllats a l'enllaç:hover

Aquests estils es poden trobar a scaffolding.less.

Normalitzar.css

Per millorar la representació entre navegadors, utilitzem Normalize.css , un projecte de Nicolas Gallagher i Jonathan Neal .

Contenidors

Bootstrap requereix un element de contingut per embolicar el contingut del lloc i allotjar el nostre sistema de graella. Podeu triar un dels dos contenidors per utilitzar en els vostres projectes. Tingueu en compte que, a causa paddingi més, cap dels dos contenidors és encaixable.

Utilitzeu -lo .containerper a un contenidor d'amplada fixa sensible.

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

Utilitzeu .container-fluid-lo per a un contenidor d'amplada completa, que abasti tota l'amplada de la vostra finestra gràfica.

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

Bootstrap inclou un sistema de quadrícula fluid primer mòbil sensible que s'escala adequadament fins a 12 columnes a mesura que augmenta la mida del dispositiu o de la finestra gràfica. Inclou classes predefinides per a opcions de disseny fàcils, així com potents mixins per generar dissenys més semàntics .

Introducció

Els sistemes de quadrícula s'utilitzen per crear dissenys de pàgina mitjançant una sèrie de files i columnes que allotgen el vostre contingut. A continuació es mostra com funciona el sistema de graella Bootstrap:

Les files s'han de col·locar dins d'una .container(amplada fixa) o .container-fluid(amplada total) per a una alineació i un farciment adequats.
Utilitzeu files per crear grups horitzontals de columnes.
El contingut s'ha de col·locar dins de columnes i només les columnes poden ser fills immediats de les files.
Les classes de quadrícula predefinides com .rowi .col-xs-4estan disponibles per fer dissenys de quadrícula ràpidament. També es poden utilitzar menys mixins per a dissenys més semàntics.
Les columnes creen canalons (espais entre el contingut de la columna) mitjançant padding. Aquest farciment es compensa en files per a la primera i l'última columna mitjançant un marge negatiu a .rows.
El marge negatiu és la raó per la qual els exemples següents estan fora de marge. És perquè el contingut dins de les columnes de la quadrícula estigui alineat amb el contingut que no sigui de la quadrícula.
Les columnes de quadrícula es creen especificant el nombre de dotze columnes disponibles que voleu abastar. Per exemple, tres columnes iguals farien servir tres .col-xs-4.
Si es col·loquen més de 12 columnes dins d'una sola fila, cada grup de columnes addicionals, com una unitat, s'ajustarà a una línia nova.
Les classes de quadrícula s'apliquen a dispositius amb amplades de pantalla superiors o iguals a les mides dels punts d'interrupció i anul·len les classes de quadrícula orientades a dispositius més petits. Per tant, per exemple, aplicar qualsevol .col-md-*classe a un element no només afectarà el seu estil en dispositius mitjans sinó també en dispositius grans si .col-lg-*no hi ha una classe.

Mireu els exemples per aplicar aquests principis al vostre codi.

Consultes de mitjans

Utilitzem les consultes multimèdia següents als nostres fitxers Less per crear els punts d'interrupció clau al nostre sistema de graella.

/* 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) { ... }

De tant en tant ampliem aquestes consultes multimèdia per incloure un max-widthper limitar CSS a un conjunt més reduït de dispositius.

@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) { ... }

Opcions de graella

Vegeu com funcionen els aspectes del sistema de graella Bootstrap en diversos dispositius amb una taula pràctica.

	Dispositius molt petits Telèfons (<768 px)	Dispositius petits Tauletes (≥768px)	Dispositius mitjans Escriptoris (≥992 px)	Dispositius grans Escriptoris (≥1200px)
Comportament de la graella	Horizontal en tot moment	Replegat per començar, horitzontal per sobre dels punts d'interrupció
Amplada del contenidor	Cap (automàtic)	750 píxels	970 píxels	1170 píxels
Prefix de classe	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de columnes	12
Amplada de la columna	Automàtic	~62 píxels	~81 píxels	~97 píxels
Amplada del canal	30 px (15 px a cada costat d'una columna)
Encaixable	Sí
Desplaçaments	Sí
Ordenació de columnes	Sí

Exemple: apilat a horitzontal

Mitjançant un únic conjunt de .col-md-*classes de quadrícula, podeu crear un sistema de quadrícula bàsic que comença apilat en dispositius mòbils i tauletes (el rang més petit a petit) abans de convertir-se en horitzontal en dispositius d'escriptori (mitjans). Col·loqueu columnes de quadrícula en qualsevol .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Exemple: recipient de líquid

Convertiu qualsevol disseny de quadrícula d'amplada fixa en un disseny d'amplada completa canviant el vostre més exterior .containera .container-fluid.

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

Exemple: mòbil i escriptori

No voleu que les vostres columnes s'apilin simplement en dispositius més petits? Utilitzeu les classes de graella de dispositius extra petits i mitjans afegint .col-xs-* .col-md-*-les a les vostres columnes. Vegeu l'exemple següent per a una millor idea de com funciona tot.

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

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

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

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

Exemple: mòbil, tauleta, escriptori

Aprofiteu l'exemple anterior creant dissenys encara més dinàmics i potents amb .col-sm-*classes de tauletes.

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

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

.col-xs-6 .col-sm-4

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

Exemple: embolcall de columnes

Si es col·loquen més de 12 columnes dins d'una sola fila, cada grup de columnes addicionals, com una unitat, s'ajustarà a una línia nova.

.col-xs-9

.col-xs-4
Com que 9 + 4 = 13 > 12, aquest div de 4 columnes s'embolica en una línia nova com una unitat contigua.

.col-xs-6
Les columnes posteriors continuen per la nova línia.

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

Restableix la columna responsiva

Amb els quatre nivells de quadrícules disponibles, segur que trobareu problemes en què, en determinats punts d'interrupció, les vostres columnes no s'aclareixen del tot bé, ja que una és més alta que l'altra. Per solucionar-ho, utilitzeu una combinació de a .clearfixi les nostres classes d'utilitat sensibles .

.col-xs-6 .col-sm-3
Canvieu la mida de la vostra finestra gràfica o comproveu-la al telèfon per obtenir un exemple.

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

A més d'esborrar les columnes als punts d'interrupció sensibles, és possible que hàgiu de restablir els desplaçaments, les pressions o les tirades . Vegeu això en acció a l'exemple de quadrícula .

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

Traieu els canalons

Traieu els canals d'una fila i les seves columnes amb la .row-no-guttersclasse.

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

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

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Columnes de compensació

Mou les columnes cap a la dreta amb .col-md-offset-*classes. Aquestes classes augmenten el marge esquerre d'una columna per *columnes. Per exemple, .col-md-offset-4es mou .col-md-4sobre quatre columnes.

.col-md-4

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

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

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

També podeu anul·lar els desplaçaments dels nivells de graella inferiors amb .col-*-offset-0classes.

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

Nidificació de columnes

Per niuar el contingut amb la quadrícula predeterminada, afegiu un .rowconjunt de columnes noves dins d'una columna .col-sm-*existent . .col-sm-*Les files imbricades haurien d'incloure un conjunt de columnes que sumen 12 o menys (no cal que utilitzeu les 12 columnes disponibles).

Nivell 1: .col-sm-9

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

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

Ordenació de columnes

Canvieu fàcilment l'ordre de les nostres columnes de graella integrades amb classes .col-md-push-*i .col-md-pull-*modificadores.

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

Menys mixins i variables

A més de les classes de quadrícula preconstruïdes per a dissenys ràpids, Bootstrap inclou Menys variables i mixins per generar ràpidament els vostres propis dissenys semàntics senzills.

Les variables

Les variables determinen el nombre de columnes, l'amplada del canal i el punt de consulta de mitjans en què començar les columnes flotants. Els fem servir per generar les classes de quadrícula predefinides documentades anteriorment, així com per als mixins personalitzats que s'enumeren a continuació.

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

Mixins

Els mixins s'utilitzen juntament amb les variables de graella per generar CSS semàntic per a columnes de graella individuals.

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

Exemple d'ús

Podeu modificar les variables als vostres propis valors personalitzats o simplement utilitzar els mixins amb els seus valors predeterminats. Aquí teniu un exemple d'ús de la configuració predeterminada per crear un disseny de dues columnes amb un espai entre ells.

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

Encapçalaments

Tots els encapçalaments HTML, <h1>fins a <h6>, estan disponibles. .h1També hi ha disponibles classes a través .h6, per quan voleu fer coincidir l'estil de la lletra d'un encapçalament però encara voleu que el vostre text es mostri en línia.

h1. Encapçalament d'arrencada	Seminegreta 36 píxels
h2. Encapçalament d'arrencada	Seminegreta 30 píxels
h3. Encapçalament d'arrencada	Seminegreta 24 píxels
h4. Encapçalament d'arrencada	Seminegreta 18 píxels
h5. Encapçalament d'arrencada	Seminegreta 14 píxels
h6. Encapçalament d'arrencada	Seminegreta 12 píxels

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

Creeu un text secundari més lleuger en qualsevol encapçalament amb una <small>etiqueta genèrica o la .smallclasse.

h1. Encapçalament Bootstrap Text secundari

h2. Encapçalament Bootstrap Text secundari

h3. Encapçalament Bootstrap Text secundari

h4. Encapçalament Bootstrap Text secundari

h5. Encapçalament Bootstrap Text secundari

h6. Encapçalament Bootstrap Text secundari

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

Còpia del cos

El valor predeterminat global de Bootstrap font-sizeés 14px , amb un valor line-heightde 1.428 . Això s'aplica a <body>i tots els paràgrafs. A més, <p>(els paràgrafs) reben un marge inferior de la meitat de la seva alçada de línia calculada (10 px per defecte).

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.

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

Còpia del cos principal

Feu que un paràgraf destaqui afegint .lead.

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

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

Construït amb menys

L'escala tipogràfica es basa en dues variables Less en variables.less : @font-size-basei @line-height-base. El primer és la mida de lletra base utilitzada a tot arreu i el segon és l'alçada de la línia base. Utilitzem aquestes variables i algunes matemàtiques senzilles per crear els marges, els farciments i les altures de línia de tot el nostre tipus i més. Personalitzeu-los i Bootstrap s'adapta.

Elements de text en línia

Text marcat

Per ressaltar una tirada de text per la seva rellevància en un altre context, utilitzeu l' <mark>etiqueta.

Podeu utilitzar l'etiqueta de marca perressaltartext.

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

Text suprimit

Per indicar blocs de text que s'han eliminat, utilitzeu l' <del>etiqueta.

~~Aquesta línia de text està pensada per ser tractada com a text suprimit.~~

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

Text ratllat

Per indicar blocs de text que ja no són rellevants, utilitzeu l' <s>etiqueta.

~~Aquesta línia de text està pensada per ser tractada com que ja no és precisa.~~

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

Text inserit

Per indicar addicions al document, utilitzeu l' <ins>etiqueta.

Aquesta línia de text està pensada per ser tractada com una addició al document.

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

Text subratllat

Per subratllar el text utilitza l' <u>etiqueta.

Aquesta línia de text es mostrarà tal com està subratllada

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

Feu servir les etiquetes d'èmfasi predeterminades d'HTML amb estils lleugers.

Text petit

Per reduir l'èmfasi en blocs de text o en línia, utilitzeu l' <small>etiqueta per establir el text al 85% de la mida del pare. Els elements d'encapçalament reben els seus propis font-sizeper als elements imbricats <small>.

Alternativament, podeu utilitzar un element en línia amb .smallen lloc de qualsevol <small>.

Aquesta línia de text s'ha de tractar com a lletra petita.

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

Atrevit

Per emfatitzar un fragment de text amb un pes de lletra més pesat.

El fragment de text següent es mostra com a text en negreta .

<strong>rendered as bold text</strong>

Cursiva

Per emfatitzar un fragment de text amb cursiva.

El fragment de text següent es mostra com a text en cursiva .

<em>rendered as italicized text</em>

Elements alternatius

No dubteu a utilitzar-lo <b>i <i>en HTML5. <b>està destinat a ressaltar paraules o frases sense transmetre importància addicional, mentre que <i>és principalment per a veu, termes tècnics, etc.

Classes d'alineació

Realineu fàcilment el text als components amb classes d'alineació de text.

Text alineat a l'esquerra.

Text alineat al centre.

Text alineat a la dreta.

Text justificat.

Sense text d'ajustament.

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

Classes de transformació

Transformeu text en components amb classes de majúscules de text.

Text en minúscula.

Text en majúscula.

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

Abreviatures

Implementació estilitzada de l'element HTML <abbr>per a abreviatures i acrònims per mostrar la versió ampliada al passar el cursor. Les abreviatures amb un titleatribut tenen una vora inferior amb punts lleugers i un cursor d'ajuda al passar el cursor, proporcionant context addicional al passar el cursor i als usuaris de tecnologies d'assistència.

Abreviatura bàsica

Una abreviatura de la paraula atribut és attr .

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

Inicialisme

Afegiu .initialisma una abreviatura per a una mida de lletra una mica més petita.

HTML és el millor des del pa llescat.

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

Adreces

Presenta la informació de contacte de l'avantpassat més proper o de tot el conjunt de treballs. Conserva el format acabant totes les línies amb <br>.

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

Nom complet
[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>

Cites de bloc

Per citar blocs de contingut d'una altra font dins del vostre document.

Cita de bloqueig per defecte

Envolta <blockquote>qualsevol HTML com a cita. Per a cites directes, recomanem un <p>.

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

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

Opcions de cotització en bloc

Canvis d'estil i contingut per a variacions senzilles d'un estàndard <blockquote>.

Anomenament d'una font

Afegiu un <footer>per identificar la font. Emboliqui el nom de l'obra font en <cite>.

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

Algú famós a Source Title

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

Visualitzacions alternatives

Afegiu .blockquote-reverseper a una cita de bloc amb contingut alineat a la dreta.

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

Algú famós a Source Title

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

Llistes

No ordenat

Una llista d'elements en què l'ordre no importa explícitament.

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

<ul>
  <li>...</li>
</ul>

Ordenat

Una llista d'elements en què l'ordre importa explícitament.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at 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>

Sense estil

Elimineu list-styleel marge predeterminat i esquerre dels elements de la llista (només fills immediats). Això només s'aplica als elements de la llista de fills immediats , és a dir, també haureu d'afegir la classe per a les llistes imbricades.

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

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

En linia

Col·loqueu tots els elements de la llista en una sola línia amb display: inline-block;un farcit lleuger.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Descripció

Una llista de termes amb les seves descripcions associades.

Llistes de descripció: Una llista de descripció és perfecta per definir termes.
Euismod: Vestibulum id ligula porta felis euismod sempre 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>

Descripció horitzontal

Feu els termes i les descripcions en <dl>línia al costat de l'altre. Comença apilats com <dl>les s predeterminades, però quan la barra de navegació s'expandeix, també ho fan.

Llistes de descripció: Una llista de descripció és perfecta per definir termes.
Euismod: Vestibulum id ligula porta felis euismod sempre 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>

Truncat automàtic

Les llistes de descripcions horitzontals truncaran els termes massa llargs per cabre a la columna de l'esquerra amb text-overflow. A les finestres més estretes, canviaran al disseny apilat predeterminat.

En linia

Emboliqui fragments de codi en línia amb <code>.

Per exemple, <section>s'hauria d'embolicar en línia.

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

Entrada de l'usuari

Utilitzeu <kbd>per indicar l'entrada que normalment s'introdueix mitjançant el teclat.

Per canviar de directori, escriviu cdseguit del nom del directori.
Per editar la configuració, premeu 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>

Bloc bàsic

S'utilitza <pre>per a diverses línies de codi. Assegureu-vos d'escapar els claudàtors angulars del codi per a una representació adequada.

<p>Text de mostra aquí...</p>

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

Opcionalment, podeu afegir la .pre-scrollableclasse, que establirà una alçada màxima de 350 px i proporcionarà una barra de desplaçament de l'eix Y.

Les variables

Per indicar variables utilitzeu l' <var>etiqueta.

y = m x + b

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

Sortida de mostra

Per indicar la sortida de mostra de blocs d'un programa, utilitzeu l' <samp>etiqueta.

Aquest text està pensat per ser tractat com a mostra de sortida d'un programa informàtic.

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

Exemple bàsic

Per a un estil bàsic (encoixinat lleuger i només divisors horitzontals), afegiu la classe base .tablea qualsevol <table>. Pot semblar super redundant, però donat l'ús generalitzat de taules per a altres connectors com calendaris i selectors de dates, hem optat per aïllar els nostres estils de taules personalitzats.

Subtítol de taula opcional.
#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry	l'ocell	@twitter

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

Files de ratlles

Utilitzeu .table-striped-lo per afegir ratlles de zebra a qualsevol fila de la taula dins del fitxer <tbody>.

Compatibilitat entre navegadors

Les taules amb ratlles s'elaboren mitjançant el :nth-childselector CSS, que no està disponible a Internet Explorer 8.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry	l'ocell	@twitter

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

Taula amb vores

Afegiu .table-borderedles vores a tots els costats de la taula i cel·les.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry	l'ocell	@twitter

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

Passeu el cursor per files

Afegeix .table-hoverper habilitar l'estat de flotació a les files de la taula dins d'un fitxer <tbody>.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry	l'ocell	@twitter

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

Taula condensada

Afegiu .table-condensed-hi per fer les taules més compactes tallant el farciment cel·lular per la meitat.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry l'ocell		@twitter

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

Classes contextuals

Utilitzeu classes contextuals per acolorir files de taules o cel·les individuals.

Classe	Descripció
`.active`	Aplica el color del cursor a una fila o cel·la concreta
`.success`	Indica una acció reeixida o positiva
`.info`	Indica un canvi o acció informativa neutral
`.warning`	Indica un avís que pot necessitar atenció
`.danger`	Indica una acció perillosa o potencialment negativa

#	Encapçalament de la columna	Encapçalament de la columna	Encapçalament de la columna
1	Contingut de la columna	Contingut de la columna	Contingut de la columna
2	Contingut de la columna	Contingut de la columna	Contingut de la columna
3	Contingut de la columna	Contingut de la columna	Contingut de la columna
4	Contingut de la columna	Contingut de la columna	Contingut de la columna
5	Contingut de la columna	Contingut de la columna	Contingut de la columna
6	Contingut de la columna	Contingut de la columna	Contingut de la columna
7	Contingut de la columna	Contingut de la columna	Contingut de la columna
8	Contingut de la columna	Contingut de la columna	Contingut de la columna
9	Contingut de la columna	Contingut de la columna	Contingut de la columna

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

Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat a una fila de taula o una cel·la individual només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut en si (el text visible a la fila/cel·la corresponent de la taula) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.

Taules responsives

Creeu taules responsives embolicant-ne qualsevol .tableper .table-responsivefer-les desplaçar horitzontalment en dispositius petits (menys de 768 píxels). Quan visualitzeu res més gran que 768 píxels d'amplada, no veureu cap diferència en aquestes taules.

Retall/truncament vertical

Les taules responsives fan servir overflow-y: hidden, que retalla qualsevol contingut que va més enllà de les vores inferior o superior de la taula. En particular, això pot retallar menús desplegables i altres ginys de tercers.

Firefox i conjunts de camps

Firefox té un estil de conjunt de camps incòmode widthque interfereix amb la taula sensible. Això no es pot anul·lar sense un hack específic de Firefox que no proporcionem a Bootstrap:

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

Per obtenir més informació, llegiu aquesta resposta de Stack Overflow .

#	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula
1	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula
2	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula
3	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula

#	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula
1	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula
2	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula
3	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula

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

Exemple bàsic

Els controls de formulari individuals reben automàticament un estil global. Tots els elements textuals <input>, <textarea>, i <select>amb .form-controls'estableixen com a width: 100%;per defecte. Emboliqui les etiquetes i els controls per .form-groupobtenir un espai òptim.

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

No barregeu grups de formularis amb grups d'entrada

No barregeu grups de formularis directament amb grups d'entrada . En lloc d'això, niu el grup d'entrada dins del grup de formularis.

Formulari en línia

Afegiu .form-inlineal vostre formulari (que no ha de ser un <form>) per als controls alineats a l'esquerra i de blocs en línia. Això només s'aplica als formularis dins de finestres que tinguin almenys 768 píxels d'amplada.

Pot requerir amplades personalitzades

Les entrades i les seleccions s'han width: 100%;aplicat per defecte a Bootstrap. Dins dels formularis en línia, ho reiniciem width: auto;perquè diversos controls puguin residir a la mateixa línia. Depenent del vostre disseny, és possible que es necessitin amplades personalitzades addicionals.

Afegiu sempre etiquetes

Els lectors de pantalla tindran problemes amb els vostres formularis si no incloeu una etiqueta per a cada entrada. Per a aquests formularis en línia, podeu amagar les etiquetes mitjançant la .sr-onlyclasse. Hi ha altres mètodes alternatius per proporcionar una etiqueta per a tecnologies d'assistència, com ara l' atribut aria-label, aria-labelledbyo . titleSi no hi ha cap d'aquests, els lectors de pantalla poden recórrer a l'ús de l' placeholderatribut, si n'hi ha, però tingueu en compte que placeholderno es recomana l'ús de com a substitut d'altres mètodes d'etiquetatge.

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

Utilitzeu les classes de quadrícula predefinides de Bootstrap per alinear etiquetes i grups de controls de formulari en un disseny horitzontal afegint .form-horizontal-los al formulari (que no ha de ser un <form>). En fer-ho, canvia .form-groups perquè es comporti com a files de quadrícula, de manera que no cal que .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>

Controls compatibles

Exemples de controls de formulari estàndard compatibles amb un disseny de formulari d'exemple.

Entrades

Control de formulari més habitual, camps d'entrada basats en text. Inclou suport per a tots els tipus HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, i color.

Cal declaració de tipus

Les entrades només tindran un estil complet si typees declaren correctament.

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

Grups d'entrada

Per afegir text integrat o botons abans i/o després de qualsevol text basat en text <input>, consulteu el component del grup d'entrada .

Àrea de text

Control de formulari que admet diverses línies de text. Canvieu rowsl'atribut segons sigui necessari.

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

Caselles de selecció i ràdios

Les caselles de selecció serveixen per seleccionar una o diverses opcions en una llista, mentre que les ràdios serveixen per seleccionar una opció entre moltes.

S'admeten les caselles de selecció i les ràdios desactivades, però per proporcionar un cursor "no permès" al passar el cursor del pare <label>, haureu d'afegir la .disabledclasse al pare .radio, .radio-inline, .checkbox, o .checkbox-inline.

Per defecte (apilat)

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

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

Caselles de selecció i ràdios en línia

Utilitzeu les classes .checkbox-inlineo en una sèrie de caselles de selecció o ràdios per als controls que apareixen a la mateixa línia..radio-inline

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

Caselles de selecció i ràdios sense text de l'etiqueta

Si no teniu cap text dins de l' <label>extensió , l'entrada es col·locarà com esperíeu. Actualment només funciona amb caselles de verificació i ràdios no en línia. Recordeu que encara heu de proporcionar algun tipus d'etiqueta per a les tecnologies d'assistència (per exemple, utilitzar 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>

Selecciona

Tingueu en compte que molts menús de selecció nadius, és a dir, a Safari i Chrome, tenen cantonades arrodonides que no es poden modificar mitjançant border-radiuspropietats.

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

Per als <select>controls amb l' multipleatribut, es mostren diverses opcions per defecte.

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

Control estàtic

Quan necessiteu col·locar text sense format al costat d'una etiqueta de formulari dins d'un formulari, utilitzeu la .form-control-staticclasse en un fitxer <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>

Estat de focus

outlineSuprimim els estils predeterminats d'alguns controls de formulari i apliquem una box-shadowal seu lloc per a :focus.

`:focus`Estat de demostració

L'entrada d'exemple anterior utilitza estils personalitzats a la nostra documentació per demostrar l' :focusestat d'un fitxer .form-control.

Estat desactivat

Afegiu l' disabledatribut booleà a una entrada per evitar les interaccions de l'usuari. Les entrades desactivades semblen més clares i afegeixen un not-allowedcursor.

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

Conjunts de camps desactivats

Afegiu l' disabledatribut a a <fieldset>per desactivar tots els controls d' <fieldset>una vegada.

Advertència sobre la funcionalitat de l'enllaç de`<a>`

De manera predeterminada, els navegadors tractaran tots els controls de formularis natius ( <input>, <select>i <button>elements) dins d'un <fieldset disabled>com a desactivats, evitant les interaccions tant del teclat com del ratolí amb ells. Tanmateix, si el vostre formulari també inclou <a ... class="btn btn-*">elements, només se'ls donarà un estil pointer-events: none. Com s'indica a la secció sobre l' estat desactivat per als botons (i específicament a la subsecció per als elements d'ancoratge), aquesta propietat CSS encara no està estandarditzada i no és totalment compatible amb Opera 18 i posteriors, ni a Internet Explorer 11, i va guanyar No impedeix que els usuaris del teclat puguin enfocar o activar aquests enllaços. Així que per estar segur, utilitzeu JavaScript personalitzat per desactivar aquests enllaços.

Compatibilitat entre navegadors

Tot i que Bootstrap aplicarà aquests estils a tots els navegadors, Internet Explorer 11 i posteriors no admeten completament l' disabledatribut en un fitxer <fieldset>. Utilitzeu JavaScript personalitzat per desactivar el conjunt de camps en aquests navegadors.

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

Estat de només lectura

Afegiu l' readonlyatribut booleà a una entrada per evitar la modificació del valor de l'entrada. Les entrades de només lectura semblen més clares (igual que les entrades desactivades), però conserven el cursor estàndard.

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

Text d'ajuda

Text d'ajuda a nivell de bloc per als controls de formulari.

Associar text d'ajuda amb controls de formulari

El text d'ajuda s'ha d'associar explícitament amb el control de formulari al qual es relaciona amb l' aria-describedbyatribut. D'aquesta manera, s'assegurarà que les tecnologies d'assistència, com ara els lectors de pantalla, anunciïn aquest text d'ajuda quan l'usuari es concentri o entri al control.

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

Estats de validació

Bootstrap inclou estils de validació per als estats d'error, advertència i èxit als controls de formulari. Per utilitzar, afegir .has-warning, .has-error, o .has-successa l'element pare. Qualsevol .control-label, .form-control, i .help-blockdins d'aquest element rebran els estils de validació.

Transmissió de l'estat de validació a tecnologies d'assistència i usuaris daltònics

L'ús d'aquests estils de validació per indicar l'estat d'un control de formulari només proporciona una indicació visual basada en colors, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla, ni als usuaris daltònics.

Assegureu-vos que també es proporcioni una indicació alternativa de l'estat. Per exemple, podeu incloure una pista sobre l'estat al <label>text del control de formulari (com és el cas de l'exemple de codi següent), incloure un Glyphicon (amb text alternatiu adequat utilitzant la .sr-onlyclasse - vegeu els exemples de Glyphicon ) o proporcionant un bloc de text d'ajuda addicional . Específicament per a les tecnologies d'assistència, també es pot assignar un aria-invalid="true"atribut als controls de formulari no vàlids.

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

Amb icones opcionals

També podeu afegir icones de comentaris opcionals amb l'addició de .has-feedbacki la icona dreta.

Les icones de comentaris només funcionen amb <input class="form-control">elements textuals.

Icones, etiquetes i grups d'entrada

El posicionament manual de les icones de comentaris és necessari per a les entrades sense etiqueta i per als grups d'entrada amb un complement a la dreta. Us recomanem que proporcioneu etiquetes per a totes les entrades per motius d'accessibilitat. Si voleu evitar que es mostrin etiquetes, amagueu-les amb la .sr-onlyclasse. Si heu de prescindir d'etiquetes, ajusteu el topvalor de la icona de comentaris. Per als grups d'entrada, ajusteu el rightvalor a un valor de píxel adequat en funció de l'amplada del vostre complement.

Transmetre el significat de la icona a les tecnologies d'assistència

Per garantir que les tecnologies d'assistència, com ara els lectors de pantalla, transmetin correctament el significat d'una icona, s'ha d'incloure text ocult addicional a la .sr-onlyclasse i associar-lo explícitament amb el control de formulari amb què es relaciona amb l'ús aria-describedby. Alternativament, assegureu-vos que el significat (per exemple, el fet que hi hagi un avís per a un camp d'entrada de text concret) es transmeti d'una altra forma, com ara canviar el text del <label>control real associat al formulari.

Encara que els exemples següents ja esmenten l'estat de validació dels seus respectius controls de formulari en el <label>propi text, la tècnica anterior (utilitzant .sr-onlytext i aria-describedby) s'ha inclòs amb finalitats il·lustratives.

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

Icones opcionals en formes horitzontals i en línia

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

`.sr-only`Icones opcionals amb etiquetes amagades

Si utilitzeu la .sr-onlyclasse per ocultar un control de formulari <label>(en lloc d'utilitzar altres opcions d'etiquetatge, com ara l' aria-labelatribut), Bootstrap ajustarà automàticament la posició de la icona un cop s'hagi afegit.

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

Control de mida

Estableix altures utilitzant classes com .input-lg, i estableix amplades utilitzant classes de columnes de quadrícula com .col-lg-*.

Mida d'alçada

Creeu controls de formulari més alts o més curts que coincideixin amb la mida dels botons.

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

Mides de grups de formes horitzontals

Mida ràpidament les etiquetes i els controls de formulari .form-horizontalafegint .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>

Mida de la columna

Emboliqui les entrades en columnes de quadrícula o en qualsevol element principal personalitzat per aplicar fàcilment les amplades desitjades.

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

Etiquetes de botons

Utilitzeu les classes de botons en un element <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">

Ús específic del context

Tot i que les classes de botons es poden utilitzar a <a>i <button>elements, només <button>els elements són compatibles amb els nostres components de navegació i barra de navegació.

Enllaços que actuen com a botons

Si els <a>elements s'utilitzen per actuar com a botons, activant la funcionalitat a la pàgina, en lloc de navegar a un altre document o secció dins de la pàgina actual, també se'ls hauria de donar un role="button".

Renderització entre navegadors

Com a pràctica recomanada, us recomanem que utilitzeu l' <button>element sempre que sigui possible per garantir la representació coincident entre navegadors.

Entre altres coses, hi ha un error al Firefox <30 que ens impedeix establir els botons basats line-heighten <input>-, fent que no coincideixin exactament amb l'alçada d'altres botons del Firefox.

Opcions

Utilitzeu qualsevol de les classes de botons disponibles per crear ràpidament un botó amb estil.

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

Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat a un botó només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del propi contingut (el text visible del botó) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.

Mides

Voleu botons més grans o més petits? Afegiu .btn-lg, .btn-sm, o .btn-xsper a mides addicionals.

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

Creeu botons de nivell de bloc, els que abasten tota l'amplada d'un pare, afegint .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>

Estat actiu

Els botons apareixeran premuts (amb un fons més fosc, una vora més fosca i una ombra inserida) quan estiguin actius. Per als <button>elements, això es fa mitjançant :active. Per als <a>elements, es fa amb .active. Tanmateix, podeu utilitzar .activea <button>s (i incloure l' aria-pressed="true"atribut) si necessiteu replicar l'estat actiu mitjançant programació.

Element botó

No cal afegir-hi :active, ja que és una pseudo-classe, però si necessiteu forçar la mateixa aparença, aneu endavant i afegiu .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>

Element d'ancoratge

Afegeix la .activeclasse als <a>botons.

Enllaç principal Enllaç

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

Estat desactivat

Feu que els botons semblin incliquables tornant-los a esvair amb opacity.

Element botó

Afegiu l' disabledatribut als <button>botons.

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

Compatibilitat entre navegadors

Si afegiu l' disabledatribut a un <button>, Internet Explorer 9 i versions posteriors mostraran el text gris amb una ombra de text desagradable que no podem solucionar.

Element d'ancoratge

Afegeix la .disabledclasse als <a>botons.

Enllaç principal Enllaç

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

Aquí fem servir .disabledcom a classe d'utilitat, semblant a la .activeclasse comuna, de manera que no es requereix cap prefix.

Advertència sobre la funcionalitat de l'enllaç

Aquesta classe utilitzapointer-events: none per intentar desactivar la funcionalitat d'enllaç de <a>s, però aquesta propietat CSS encara no està estandarditzada i no és totalment compatible amb Opera 18 i versions posteriors, ni a Internet Explorer 11. A més, fins i tot en navegadors que admeten el pointer-events: noneteclat la navegació no es veu afectada, el que significa que els usuaris de teclat vidents i els usuaris de tecnologies d'assistència encara podran activar aquests enllaços. Així que per estar segur, utilitzeu JavaScript personalitzat per desactivar aquests enllaços.

Imatges sensibles

Les imatges de Bootstrap 3 es poden adaptar a la resposta mitjançant l'addició del.img-responsive classe. Això s'aplica max-width: 100%;, height: auto;i display: block;a la imatge perquè s'ajusti bé a l'element pare.

Per centrar imatges que utilitzen la .img-responsiveclasse, utilitzeu .center-blocken comptes de .text-center.Consulteu la secció de classes d'ajuda per obtenir més detalls sobre .center-blockl'ús.

Imatges SVG i IE 8-10

A Internet Explorer 8-10, les imatges SVG .img-responsivetenen una mida desproporcionada. Per solucionar-ho, afegiuwidth: 100% \9; si cal. Bootstrap no ho aplica automàticament, ja que provoca complicacions a altres formats d'imatge.

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

Formes de la imatge

Afegiu classes a un <img>element per estilitzar fàcilment les imatges en qualsevol projecte.

Compatibilitat entre navegadors

Tingueu en compte que Internet Explorer 8 no té suport per a cantonades arrodonides.

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

Colors contextuals

Transmet el significat a través del color amb un grapat de classes d'utilitat d'èmfasi. Aquests també es poden aplicar als enllaços i s'enfosquiran al passar el cursor igual que els nostres estils d'enllaç predeterminats.

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.

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

Tractament de l'especificitat

De vegades no es poden aplicar classes d'èmfasi a causa de l'especificitat d'un altre selector. En la majoria dels casos, una solució suficient és embolicar el text <span>amb la classe.

Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia del contingut en si (els colors contextuals només s'utilitzen per reforçar el significat que ja està present al text/marcat), o s'inclou a través de mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse. .

Antecedents contextuals

De manera similar a les classes de color de text contextual, establiu fàcilment el fons d'un element a qualsevol classe contextual. Els components d'ancoratge s'enfosquiran en passar el cursor, igual que les classes de text.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Tractament de l'especificitat

De vegades, les classes de fons contextuals no es poden aplicar a causa de l'especificitat d'un altre selector. En alguns casos, una solució suficient és embolicar el contingut de l'element en un <div>amb la classe.

Transmetre significat a les tecnologies d'assistència

Igual que amb els colors contextuals , assegureu-vos que qualsevol significat que es transmet a través del color també es transmet en un format que no sigui purament presentatiu.

Tanca la icona

Utilitzeu la icona genèrica de tancament per descartar contingut com ara modals i alertes.

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

Carets

Utilitzeu els cursors per indicar la funcionalitat i la direcció del menú desplegable. Tingueu en compte que el signe de cursor predeterminat s'invertirà automàticament als menús desplegables .

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

Flotadors ràpids

Flota un element cap a l'esquerra o la dreta amb una classe.!importants'inclou per evitar problemes d'especificitat. Les classes també es poden utilitzar com a mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

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

Centre els blocs de contingut

Establiu un element display: blocki centreu-lomargin . Disponible com a mixin i 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

Esborra fàcilment floats afegint .clearfix a l'element pare . Utilitza el micro clearfix popularitzat per Nicolas Gallagher. També es pot utilitzar com a 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();
}

Mostrar i amagar contingut

Força un element a mostrar-se o amagar ( inclosos els lectors de pantalla ) amb l'ús de .showi .hiddenclasses. Aquestes classes s'utilitzen !importantper evitar conflictes d'especificitat, igual que els flotants ràpids . Només estan disponibles per canviar el nivell de bloc. També es poden utilitzar com a mixins.

.hideestà disponible, però no sempre afecta els lectors de pantalla i està obsolet a partir de la v3.0.1. Utilitzeu .hiddeno .sr-onlyal seu lloc.

A més, .invisiblees pot utilitzar per canviar només la visibilitat d'un element, és a dir, displayno es modifica i l'element encara pot afectar el flux del document.

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

Lector de pantalla i contingut de navegació per teclat

Amaga un element a tots els dispositius excepte als lectors de pantalla amb .sr-only. Combina .sr-onlyamb .sr-only-focusableper tornar a mostrar l'element quan estigui enfocat (p. ex. per un usuari només de teclat). Necessari per seguir les millors pràctiques d'accessibilitat . També es pot utilitzar com a mixins.

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

Substitució d'imatge

Utilitzeu la .text-hideclasse o mixin per ajudar a substituir el contingut del text d'un element per una imatge de fons.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Per a un desenvolupament més ràpid per a mòbils, utilitzeu aquestes classes d'utilitat per mostrar i amagar contingut per dispositiu mitjançant consulta de mitjans. També s'inclouen classes d'utilitat per canviar el contingut quan s'imprimeix.

Intenteu utilitzar-los de manera limitada i eviteu crear versions completament diferents del mateix lloc. En comptes d'això, utilitzeu-los per complementar la presentació de cada dispositiu.

Classes disponibles

Utilitzeu una o una combinació de les classes disponibles per alternar el contingut entre els punts d'interrupció de la vista.

	Dispositius extra petitsTelèfons (<768 píxels)	Dispositius petitsTauletes (≥768 px)	Dispositius mitjansEscriptoris (≥992 px)	Dispositius gransEscriptoris (≥1200px)
`.visible-xs-*`	Visible	Ocult	Ocult	Ocult
`.visible-sm-*`	Ocult	Visible	Ocult	Ocult
`.visible-md-*`	Ocult	Ocult	Visible	Ocult
`.visible-lg-*`	Ocult	Ocult	Ocult	Visible
`.hidden-xs`	Ocult	Visible	Visible	Visible
`.hidden-sm`	Visible	Ocult	Visible	Visible
`.hidden-md`	Visible	Visible	Ocult	Visible
`.hidden-lg`	Visible	Visible	Visible	Ocult

A partir de la v3.2.0, les .visible-*-*classes per a cada punt d'interrupció tenen tres variacions, una per a cada valor de propietat CSS displayque es mostra a continuació.

Grup de classes	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Així, xsper exemple, per a pantalles més petites ( ), les .visible-*-*classes disponibles són: .visible-xs-block, .visible-xs-inline, i .visible-xs-inline-block.

Les classes .visible-xs, .visible-sm, .visible-md, i .visible-lgtambé existeixen, però estan obsoletes a partir de la v3.2.0 . Són aproximadament equivalents a .visible-*-block, excepte amb casos especials addicionals per als <table>elements relacionats amb la commutació.

Classes d'impressió

De manera similar a les classes responsives normals, utilitzeu-les per canviar el contingut per a la impressió.

Classes	Navegador	Imprimir
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Ocult	Visible
`.hidden-print`	Visible	Ocult

La classe .visible-printtambé existeix però està obsoleta a partir de la v3.2.0. És aproximadament equivalent a .visible-print-block, excepte amb casos especials addicionals per als <table>elements relacionats amb -.

Casos de prova

Canvieu la mida del vostre navegador o carregueu en diferents dispositius per provar les classes d'utilitat responsives.

Visible a...

Les marques de verificació verdes indiquen que l'element és visible a la vostra finestra gràfica actual.

Extra petit ✔ Visible en x-small

Petit ✔ Visible en petit

Mitjana ✔ Visible en mitjà

Gran ✔ Visible en gran

Extra petit i petit ✔ Visible en x-petit i petit

Mitjana i gran ✔ Visible en mitjans i grans

Extra petit i mitjà ✔ Visible en x-petit i mitjà

Petits i grans ✔ Visible en petits i grans

Extra petit i gran ✔ Visible en X-petit i gran

Petits i mitjans ✔ Visible en petits i mitjans

Amagat a...

Aquí, les marques de verificació verdes també indiquen que l'element està amagat a la vostra finestra gràfica actual.

Extra petit ✔ Amagat a x-small

Petit ✔ Hidden on small

Mitjana ✔ Hidden on medium

Large ✔ Amagat en gran

Extra petit i petit ✔ Hidden on x-small and small

Medium and large ✔ Ocult en mitjans i grans

Extra petit i mitjà ✔ Hidden on x-small and medium

Small and large ✔ Amagat en petits i grans

Extra small and large ✔ Amagat en x-petit i gran

Petits i mitjans ✔ Hidden on small and medium

El CSS de Bootstrap es basa en Less, un preprocessador amb funcionalitats addicionals com variables, mixins i funcions per compilar CSS. Aquells que vulguin utilitzar els fitxers Less font en lloc dels nostres fitxers CSS compilats poden fer ús de les nombroses variables i mixins que fem servir al llarg del marc.

Les variables de graella i els mixins es cobreixen a la secció Sistema de graella .

Compilant Bootstrap

Bootstrap es pot utilitzar com a mínim de dues maneres: amb el CSS compilat o amb els fitxers Less font. Per compilar els fitxers Less, consulteu la secció Introducció per saber com configurar el vostre entorn de desenvolupament per executar les ordres necessàries.

Les eines de compilació de tercers poden funcionar amb Bootstrap, però el nostre equip principal no les admet.

Les variables

Les variables s'utilitzen durant tot el projecte com una manera de centralitzar i compartir valors d'ús habitual com els colors, l'espaiat o les piles de tipus de lletra. Per obtenir un desglossament complet, consulteu el Personalitzador .

Colors

Utilitzeu fàcilment dos esquemes de colors: escala de grisos i semàntic. Els colors en escala de grisos proporcionen un accés ràpid als tons de negre que s'utilitzen habitualment, mentre que la semàntica inclou diversos colors assignats a valors contextuals significatius.

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

Utilitzeu qualsevol d'aquestes variables de color tal com són o reassigneu-les a variables més significatives per al vostre projecte.

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

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

Bastida

Un grapat de variables per personalitzar ràpidament els elements clau de l'esquelet del vostre lloc.

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

Enllaços

Dissenyeu fàcilment els vostres enllaços amb el color adequat amb un sol valor.

// 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;
  }
}

Tingueu en compte que @link-hover-colorutilitza una funció, una altra eina fantàstica de Less, per crear automàticament el color correcte. Podeu utilitzar darken, lighten, saturatei desaturate.

Tipografia

Configureu fàcilment el tipus de lletra, la mida del text, l'interlineat i molt més amb algunes variables ràpides. Bootstrap també els fa servir per proporcionar mixins tipogràfics fàcils.

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

Icones

Dues variables ràpides per personalitzar la ubicació i el nom de fitxer de les vostres icones.

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

Components

Els components de Bootstrap fan ús d'algunes variables predeterminades per establir valors comuns. Aquests són els més utilitzats.

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

Mixins de venedors

Els mixins de proveïdors són mixins per ajudar a donar suport a diversos navegadors mitjançant la inclusió de tots els prefixos de proveïdors rellevants al vostre CSS compilat.

Mida de caixa

Restabliu el model de caixa dels vostres components amb un sol mixin. Per conèixer el context, consulteu aquest article útil de Mozilla .

El mixin està obsolet a partir de la v3.2.0, amb la introducció de l'Autoprefixer. Per preservar la compatibilitat enrere, Bootstrap continuarà utilitzant el mixin internament fins 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;
}

Cantons arrodonits

Avui tots els navegadors moderns admeten la border-radiuspropietat sense prefix. Com a tal, no hi ha cap .border-radius()mixin, però Bootstrap inclou dreceres per arrodonir ràpidament dues cantonades en un costat determinat d'un objecte.

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

Ombres de caixa (drop).

Si el vostre públic objectiu fa servir els navegadors i dispositius més recents i millors, assegureu-vos d'utilitzar la box-shadowpropietat per si sola. Si necessiteu assistència per a dispositius Android (anteriors a la v4) i iOS (anteriors a iOS 5), utilitzeu el mixin obsolet per recollir el -webkitprefix necessari.

El mixin està obsolet a partir de la v3.1.0, ja que Bootstrap no admet oficialment les plataformes obsoletes que no admeten la propietat estàndard. Per preservar la compatibilitat enrere, Bootstrap continuarà utilitzant el mixin internament fins a Bootstrap v4.

Assegureu-vos d'utilitzar rgba()colors a les ombres de la caixa perquè es barregin el més perfectament possible amb els fons.

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

Transicions

Múltiples mixins per a la flexibilitat. Establiu tota la informació de transició amb una o especifiqueu un retard i una durada separats segons sigui necessari.

Els mixins estan obsolets a partir de la v3.2.0, amb la introducció de l'Autoprefixer. Per preservar la compatibilitat enrere, Bootstrap continuarà utilitzant els mixins internament fins 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;
}

Transformacions

Gira, escala, tradueix (mou) o inclina qualsevol objecte.

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

Animacions

Un únic mixin per utilitzar totes les propietats d'animació de CSS3 en una declaració i altres mixins per a propietats individuals.

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

Opacitat

Establiu l'opacitat per a tots els navegadors i proporcioneu una filteralternativa per a IE8.

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

Text de marcador de posició

Proporcioneu context per als controls de formulari dins de cada camp.

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

Columnes

Genereu columnes mitjançant CSS dins d'un sol element.

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

Gradients

Converteix fàcilment dos colors qualsevol en un degradat de fons. Avança més i defineix una direcció, utilitza tres colors o utilitza un degradat radial. Amb un sol mixin obtindreu totes les sintaxis prefixades que necessitareu.

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

També podeu especificar l'angle d'un degradat lineal estàndard de dos colors:

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

Si necessiteu un degradat d'estil de ratlles de barber, també és fàcil. Només cal que especifiqueu un sol color i superposarem una franja blanca translúcida.

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

Puja l'aposta i utilitza tres colors. Estableix el primer color, el segon color, la parada de color del segon color (un valor percentual com el 25%) i el tercer color amb aquests mixins:

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

Caps amunt! Si mai necessiteu eliminar un degradat, assegureu-vos d'eliminar qualsevol IE específic filterque hàgiu afegit. Podeu fer-ho fent servir el .reset-filter()mixin al costat background-image: none;.

Mescles d'utilitat

Els mixins d'utilitat són mixins que combinen propietats CSS d'una altra manera no relacionades per aconseguir un objectiu o tasca específica.

Clearfix

Oblideu d'afegir class="clearfix"-hi qualsevol element i, en canvi, afegiu-hi el .clearfix()mixin si escau. Utilitza el micro clearfix de Nicolas Gallagher .

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

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

Centrat horitzontal

Centreu ràpidament qualsevol element dins del seu pare. Requereix widtho max-widths'ha de configurar.

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

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

Ajudants de mida

Especifiqueu més fàcilment les dimensions d'un objecte.

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

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

Àrees de text redimensionables

Configura fàcilment les opcions de canvi de mida per a qualsevol àrea de text o qualsevol altre element. Per defecte, el comportament normal del navegador ( both).

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

Truncar el text

Truqueu fàcilment el text amb punts suspensius amb un sol mixin. Requereix que l'element sigui blocko inline-blocknivell.

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

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

Imatges de la retina

Especifiqueu dos camins d'imatge i les dimensions de la imatge @1x, i Bootstrap proporcionarà una consulta multimèdia @2x. Si teniu moltes imatges per publicar, penseu a escriure la vostra imatge de retina CSS manualment en una única consulta multimèdia.

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

Tot i que Bootstrap es basa en Less, també té un port Sass oficial . El mantenim en un repositori GitHub separat i gestionem les actualitzacions amb un script de conversió.

Què inclou

Com que el port Sass té un repo separat i serveix a un públic lleugerament diferent, el contingut del projecte difereix molt del projecte principal Bootstrap. Això garanteix que el port Sass sigui tan compatible amb tants sistemes basats en Sass com sigui possible.

Camí	Descripció
`lib/`	Codi de joia Ruby (configuració Sass, integracions de Rails i Compass)
`tasks/`	Scripts del convertidor (passant aigües amunt de Less a Sass)
`test/`	Proves de compilació
`templates/`	Manifest del paquet de la brúixola
`vendor/assets/`	Fitxers Sass, JavaScript i tipus de lletra
`Rakefile`	Tasques internes, com ara rastrejar i convertir

Visiteu el dipòsit de GitHub del port Sass per veure aquests fitxers en acció.

Instal·lació

Per obtenir informació sobre com instal·lar i utilitzar Bootstrap per a Sass, consulteu el repositori de GitHub readme . És la font més actualitzada i inclou informació per utilitzar-la amb Rails, Compass i projectes estàndard de Sass.

Bootstrap per a Sass

CSS

Visió general

Tipus de document HTML5

Primer el mòbil

Tipografia i enllaços

Normalitzar.css

Contenidors

Sistema de graella

Introducció

Consultes de mitjans

Opcions de graella

Exemple: apilat a horitzontal

Exemple: recipient de líquid

Exemple: mòbil i escriptori

Exemple: mòbil, tauleta, escriptori

Exemple: embolcall de columnes

Restableix la columna responsiva

Traieu els canalons

Columnes de compensació

Nidificació de columnes

Ordenació de columnes

Menys mixins i variables

Les variables

Mixins

Exemple d'ús

Tipografia

Encapçalaments

h1. Encapçalament d'arrencada

h2. Encapçalament d'arrencada

h3. Encapçalament d'arrencada

h4. Encapçalament d'arrencada

h5. Encapçalament d'arrencada

h6. Encapçalament d'arrencada

h1. Encapçalament Bootstrap Text secundari

h2. Encapçalament Bootstrap Text secundari

h3. Encapçalament Bootstrap Text secundari

h4. Encapçalament Bootstrap Text secundari

h5. Encapçalament Bootstrap Text secundari

h6. Encapçalament Bootstrap Text secundari

Còpia del cos

Còpia del cos principal

Construït amb menys

Elements de text en línia

Text marcat

Text suprimit

Text ratllat

Text inserit

Text subratllat

Text petit

Atrevit

Cursiva

Elements alternatius

Classes d'alineació

Classes de transformació

Abreviatures

Abreviatura bàsica

Inicialisme

Adreces

Cites de bloc

Cita de bloqueig per defecte

Opcions de cotització en bloc

Anomenament d'una font

Visualitzacions alternatives

Llistes

No ordenat

Ordenat

Sense estil

En linia

Descripció

Descripció horitzontal

Truncat automàtic

Codi

En linia

Entrada de l'usuari

Bloc bàsic

Les variables

Sortida de mostra

Taules

Exemple bàsic

Files de ratlles

`:focus`Estat de demostració

Advertència sobre la funcionalitat de l'enllaç de`<a>`

`.sr-only`Icones opcionals amb etiquetes amagades