Obtén información sobre as pezas clave da infraestrutura de Bootstrap, incluíndo o noso enfoque para un desenvolvemento web mellor, máis rápido e máis forte.

Tipo de documento HTML5

Bootstrap fai uso de certos elementos HTML e propiedades CSS que requiren o uso do doctype HTML5. Inclúeo ao comezo de todos os teus proxectos.

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

Primeiro o móbil

Con Bootstrap 2, engadimos estilos opcionais compatibles con móbiles para aspectos clave do cadro. Con Bootstrap 3, reescribimos o proxecto para que sexa compatible con dispositivos móbiles desde o principio. En lugar de engadir estilos móbiles opcionais, están cocidos no núcleo. De feito, Bootstrap é primeiro móbil . Os primeiros estilos móbiles pódense atopar en toda a biblioteca en lugar de en ficheiros separados.

Para garantir a representación correcta e o zoom táctil, engade a metaetiqueta da ventana gráfica ao teu <head>.

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

Podes desactivar as capacidades de zoom en dispositivos móbiles engadindo user-scalable=noá metaetiqueta da vista. Isto desactiva o zoom, o que significa que os usuarios só poden desprazarse e fai que o teu sitio se sinta un pouco máis como unha aplicación nativa. En xeral, non recomendamos isto en todos os sitios, así que teña coidado!

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

Tipografía e ligazóns

Bootstrap establece estilos básicos de visualización global, tipografía e ligazón. En concreto, nós:

Establecer background-color: #fff;nobody
Use os atributos @font-family-base, @font-size-base, e @line-height-basecomo a nosa base tipográfica
Establece a cor da ligazón global mediante @link-colore só aplica subliñado da ligazón:hover

Estes estilos pódense atopar en scaffolding.less.

Normalizar.css

Para mellorar a representación entre navegadores, usamos Normalize.css , un proxecto de Nicolas Gallagher e Jonathan Neal .

Contenedores

Bootstrap require un elemento de contedor para envolver o contido do sitio e albergar o noso sistema de grella. Podes escoller un dos dous recipientes para usar nos teus proxectos. Teña en conta que, debido a paddinge máis, ningún dos dous recipientes é axustable.

Utilízase .containerpara un contedor de ancho fixo sensible.

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

Utilízao .container-fluidpara un contedor de ancho completo, que abarque todo o ancho da túa ventana gráfica.

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

Bootstrap inclúe un primeiro sistema de reixa de fluídos móbiles sensibles que se escala adecuadamente ata 12 columnas a medida que aumenta o tamaño do dispositivo ou da ventana gráfica. Inclúe clases predefinidas para opcións de deseño sinxelas, así como mixins potentes para xerar deseños máis semánticos .

Introdución

Os sistemas de cuadrícula úsanse para crear deseños de páxina a través dunha serie de filas e columnas que albergan o teu contido. Así é como funciona o sistema de reixa Bootstrap:

As filas deben colocarse dentro dun .container(ancho fixo) ou .container-fluid(ancho total) para o aliñamento e o recheo adecuados.
Use filas para crear grupos horizontais de columnas.
O contido debe colocarse dentro das columnas e só as columnas poden ser fillas inmediatas das filas.
As clases de grade predefinidas como .rowe .col-xs-4están dispoñibles para facer rapidamente deseños de grade. Tamén se poden usar menos mixins para deseños máis semánticos.
As columnas crean canaletas (ocos entre o contido das columnas) mediante padding. Ese recheo desprázase en filas para a primeira e a última columna mediante unha marxe negativa en .rows.
A marxe negativa é o motivo polo que os exemplos seguintes están superados. É para que o contido das columnas da grella estea aliñado con contido que non sexa da grella.
As columnas de grade créanse especificando o número de doce columnas dispoñibles que desexa abarcar. Por exemplo, tres columnas iguais usarían tres .col-xs-4.
Se se colocan máis de 12 columnas nunha soa fila, cada grupo de columnas adicionais envolverase, como unha unidade, nunha nova liña.
As clases de cuadrícula aplícanse a dispositivos con anchos de pantalla superiores ou iguais aos tamaños dos puntos de interrupción e anulan as clases de grade dirixidas a dispositivos máis pequenos. Polo tanto, por exemplo, aplicar calquera .col-md-*clase a un elemento non só afectará o seu estilo en dispositivos medianos senón tamén en dispositivos grandes se unha .col-lg-*clase non está presente.

Consulta os exemplos para aplicar estes principios ao teu código.

Consultas de medios

Usamos as seguintes consultas multimedia nos nosos ficheiros Less para crear os puntos de interrupción clave no noso sistema de grella.

/* 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 cando en vez ampliamos estas consultas multimedia para incluír un max-widthpara limitar CSS a un conxunto máis reducido de dispositivos.

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

Opcións de reixa

Vexa como funcionan os aspectos do sistema de reixa Bootstrap en varios dispositivos cunha táboa útil.

	Dispositivos extra pequenos Teléfonos (<768 px)	Dispositivos pequenos Tabletas (≥768 px)	Dispositivos medianos Escritorios (≥992 px)	Dispositivos grandes Escritorios (≥1200px)
Comportamento da reixa	Horizontal en todo momento	Contraído para comezar, horizontal por riba dos puntos de interrupción
Ancho do recipiente	Ningún (automático)	750 píxeles	970 píxeles	1170 píxeles
Prefixo de clase	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de columnas	12
Ancho da columna	Automático	~62 píxeles	~81 píxeles	~97 píxeles
Ancho de canalón	30px (15px a cada lado dunha columna)
Encaixable	Si
Compensacións	Si
Ordenación de columnas	Si

Exemplo: apilado a horizontal

Usando un único conxunto de .col-md-*clases de cuadrícula, podes crear un sistema de cuadrícula básico que comeza apilado en dispositivos móbiles e tabletas (o rango extra pequeno ou pequeno) antes de converterse en horizontal en dispositivos de escritorio (medianos). Coloque columnas de grade en calquera .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>

Exemplo: recipiente de fluído

Converte calquera deseño de cuadrícula de ancho fixo nun deseño de ancho completo cambiando o máis externo .containera .container-fluid.

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

Exemplo: móbil e escritorio

Non queres que as túas columnas simplemente se apilen en dispositivos máis pequenos? Use as clases de cuadrícula de dispositivos extra pequenas e medianas engadindo .col-xs-* .col-md-*ás súas columnas. Vexa o seguinte exemplo para ter unha mellor idea de como funciona todo.

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

Exemplo: móbil, tableta, escritorio

Constrúe o exemplo anterior creando deseños aínda máis dinámicos e potentes con .col-sm-*clases de tabletas.

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

Exemplo: axuste de columnas

Se se colocan máis de 12 columnas nunha soa fila, cada grupo de columnas adicionais envolverase, como unha unidade, nunha nova liña.

.col-xs-9

.col-xs-4
Dado que 9 + 4 = 13 > 12, este div de 4 columnas engádese nunha nova liña como unha unidade contigua.

.col-xs-6
As columnas posteriores continúan pola nova liña.

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

Restablece as columnas sensibles

Cos catro niveis de cuadrículas dispoñibles, seguramente tes problemas nos que, en certos puntos de interrupción, as túas columnas non se borran ben xa que unha é máis alta que a outra. Para solucionalo, use unha combinación de a .clearfixe as nosas clases de utilidade receptivas .

.col-xs-6 .col-sm-3
Cambia o tamaño da túa ventana gráfica ou compróbaa no teu teléfono para ver un exemplo.

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

Ademais de borrar columnas nos puntos de interrupción sensibles, é posible que necesites restablecer as compensacións, os empuxóns ou os pulls . Vexa isto en acción no exemplo da grella .

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

Columnas de compensación

Move as columnas cara á dereita usando .col-md-offset-*clases. Estas clases aumentan a marxe esquerda dunha columna por *columnas. Por exemplo, .col-md-offset-4móvese .col-md-4sobre catro columnas.

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

Tamén pode anular as compensacións dos niveis de grade inferiores con .col-*-offset-0clases.

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

Columnas aniñadas

Para aniñar o teu contido coa grade predeterminada, engade unha nova .rowe un conxunto de columnas dentro dunha columna .col-sm-*existente . .col-sm-*As filas anidadas deben incluír un conxunto de columnas que suman ata 12 ou menos (non é necesario que use as 12 columnas dispoñibles).

Nivel 1: .col-sm-9

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

Nivel 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ón de columnas

Cambia facilmente a orde das nosas columnas de grade integradas con clases .col-md-push-*e modificadores..col-md-pull-*

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

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

Menos mixins e variables

Ademais das clases de cuadrícula preconstruídas para deseños rápidos, Bootstrap inclúe Menos variables e mixins para xerar rapidamente os teus propios deseños semánticos sinxelos.

Variables

As variables determinan o número de columnas, o ancho do canal e o punto de consulta de medios no que comezar as columnas flotantes. Usamos estes para xerar as clases de cuadrícula predefinidas documentadas anteriormente, así como para as mesturas personalizadas listadas a continuación.

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

Mixins

Os mixins úsanse xunto coas variables da grella para xerar CSS semántico para columnas de grella individuais.

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

Exemplo de uso

Podes modificar as variables aos teus propios valores personalizados ou simplemente usar os mixins cos seus valores predeterminados. Aquí tes un exemplo de uso da configuración predeterminada para crear un deseño de dúas columnas cun espazo entre eles.

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

Títulos

Todos os títulos HTML, <h1>a través <h6>de , están dispoñibles. .h1a través .h6de clases tamén están dispoñibles, para cando quere combinar o estilo de fonte dun título pero aínda así quere que o seu texto se amose en liña.

h1. Título de bootstrap	Seminegrita 36px
h2. Título de bootstrap	Seminegrita 30px
h3. Título de bootstrap	Seminegrita 24px
h4. Título de bootstrap	Seminegrita 18px
h5. Título de bootstrap	Seminegrita 14px
h6. Título de bootstrap	Seminegrita 12px

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

Crea un texto secundario máis claro en calquera título cunha <small>etiqueta xenérica ou a .smallclase.

h1. Título de Bootstrap Texto secundario

h2. Título de Bootstrap Texto secundario

h3. Título de Bootstrap Texto secundario

h4. Título de Bootstrap Texto secundario

h5. Título de Bootstrap Texto secundario

h6. Título de Bootstrap Texto secundario

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

Copia do corpo

O valor predeterminado global de Bootstrap font-sizeé 14px , cun valor line-heightde 1.428 . Isto aplícase a <body>todos os parágrafos. Ademais, os <p>(parágrafos) reciben unha marxe inferior da metade da súa altura de liña calculada (10px por defecto).

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, is not commodo luctus, ninsi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

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

<p>...</p>

Copia do corpo principal

Fai que un parágrafo destaque engadindo .lead.

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

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

Construído con menos

A escala tipográfica baséase en dúas variables Menos en variables.less : @font-size-basee @line-height-base. O primeiro é o tamaño da fonte base empregado en todo e o segundo é a altura da liña base. Usamos esas variables e algunhas matemáticas sinxelas para crear as marxes, recheos e alturas de liña de todo o noso tipo e moito máis. Personalízaos e Bootstrap adáptase.

Elementos de texto en liña

Texto marcado

Para resaltar unha serie de texto debido á súa relevancia noutro contexto, use a <mark>etiqueta.

Podes usar a etiqueta mark paradestacartexto.

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

Texto eliminado

Para indicar os bloques de texto que foron eliminados, use a <del>etiqueta.

~~Esta liña de texto está destinada a ser tratada como texto eliminado.~~

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

Texto tachado

Para indicar bloques de texto que xa non son relevantes use a <s>etiqueta.

~~Esta liña de texto está destinada a ser tratada como xa non precisa.~~

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

Texto inserido

Para indicar adicións ao documento use a <ins>etiqueta.

Esta liña de texto está destinada a ser tratada como unha adición ao documento.

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

Texto subliñado

Para subliñar o texto use a <u>etiqueta.

Esta liña de texto mostrarase como subliñada

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

Fai uso das etiquetas de énfase predeterminadas de HTML con estilos lixeiros.

Texto pequeno

Para quitar o énfase en liña ou en bloques de texto, usa a <small>etiqueta para establecer o texto nun 85 % do tamaño do pai. Os elementos de título reciben os seus propios para os elementos font-sizeaniñados .<small>

Alternativamente, pode usar un elemento en liña con .smallen lugar de calquera <small>.

Esta liña de texto está destinada a ser tratada como letra pequena.

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

Negriña

Para enfatizar un fragmento de texto cun grosor de letra máis pesado.

O seguinte fragmento de texto represéntase como texto en negra .

<strong>rendered as bold text</strong>

Cursivas

Para enfatizar un fragmento de texto con cursiva.

O seguinte fragmento de texto represéntase como texto en cursiva .

<em>rendered as italicized text</em>

Elementos alternativos

Non dubides en usar <b>e <i>en HTML5. <b>está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>é principalmente para voz, termos técnicos, etc.

Clases de aliñamento

Realiñe facilmente o texto aos compoñentes con clases de aliñamento de texto.

Texto aliñado á esquerda.

Texto aliñado ao centro.

Texto aliñado á dereita.

Texto xustificado.

Sen texto axustado.

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

Clases de transformación

Transformar texto en compoñentes con clases de maiúsculas de texto.

Texto en minúscula.

Texto en maiúscula.

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

Abreviaturas

Implementación estilizada do <abbr>elemento HTML para abreviaturas e acrónimos para mostrar a versión ampliada ao pasar o cursor. As abreviaturas cun titleatributo teñen un bordo inferior de puntos claros e un cursor de axuda ao pasar o cursor, o que proporciona un contexto adicional ao pasar o cursor e aos usuarios de tecnoloxías de asistencia.

Abreviatura básica

Unha abreviatura da palabra atributo é attr .

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

Inicialismo

Engadir .initialisma unha abreviatura para un tamaño de letra lixeiramente menor.

HTML é o mellor desde o pan rebanado.

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

Enderezos

Presenta a información de contacto do antepasado máis próximo ou de todo o traballo. Conserva o formato rematando todas as liñas con <br>.

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

Nome completo
[email protected]

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

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

Citas de bloque

Para citar bloques de contido doutra fonte dentro do seu documento.

Presuposto de bloque predeterminado

Envolve <blockquote>calquera HTML como cita. Para as comiñas rectas, recomendamos 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>

Opcións de cotización en bloque

Cambios de estilo e contido para variacións sinxelas dun estándar <blockquote>.

Nomear unha fonte

Engade un <footer>para identificar a fonte. Envolve o nome da obra de orixe en <cite>.

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

Alguén famoso en 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>

Pantallas alternativas

Engadir .blockquote-reversepara unha cita de bloque con contido aliñado á dereita.

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

Alguén famoso en Source Title

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

Listas

Sen orde

Unha lista de elementos nos que a orde non importa explícitamente.

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

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

Ordenado

Unha lista de elementos nos que a orde importa explícitamente.

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

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

Sen estilo

list-styleElimina a marxe predeterminada e esquerda dos elementos da lista (só fillos inmediatos). Isto só se aplica aos elementos de lista fillos inmediatos , o que significa que tamén terás que engadir a clase para calquera lista aniñada.

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

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

En liña

Coloca todos os elementos da lista nunha soa liña con display: inline-block;algo de recheo.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

Descrición

Unha lista de termos coas súas descricións asociadas.

Listas de descricións: Unha lista de descricións é perfecta para definir termos.
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>

Descrición horizontal

Fai termos e descricións en <dl>liña xuntos. Comeza apilado como <dl>s predeterminados, pero cando a barra de navegación se expande, tamén o fan.

Listas de descricións: Unha lista de descricións é perfecta para definir termos.
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>

Truncado automático

As listas de descricións horizontais truncarán os termos que son demasiado longos para caber na columna da esquerda con text-overflow. Nas vistas máis estreitas, cambiarán ao deseño apilado predeterminado.

En liña

Envolve fragmentos de código en liña con <code>.

Por exemplo, <section>debería envolverse como en liña.

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

Entrada do usuario

Use o <kbd>para indicar a entrada que normalmente se introduce mediante o teclado.

Para cambiar de directorio, escriba cdseguido do nome do directorio.
Para editar a configuración, prema 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>

Bloque básico

Use <pre>para varias liñas de código. Asegúrate de escapar de calquera corchete angular do código para unha representación correcta.

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

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

Opcionalmente, pode engadir a .pre-scrollableclase, que establecerá unha altura máxima de 350 px e proporcionará unha barra de desprazamento no eixe Y.

Variables

Para indicar variables use a <var>etiqueta.

y = m x + b

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

Saída da mostra

Para indicar a saída de mostra de bloques dun programa, use a <samp>etiqueta.

Este texto está destinado a ser tratado como mostra de saída dun programa informático.

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

Exemplo básico

Para un estilo básico (recheo lixeiro e só divisores horizontais) engade a clase base .tablea calquera <table>. Pode parecer super redundante, pero dado o uso xeneralizado de táboas para outros complementos como calendarios e selectores de datas, optamos por illar os nosos estilos de táboas personalizadas.

Título opcional da táboa.
#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

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

Filas a raias

Utilízao .table-stripedpara engadir franxas de cebra a calquera fila da táboa dentro do <tbody>.

Compatibilidade entre navegadores

As táboas con raias son estilizadas mediante o :nth-childselector CSS, que non está dispoñible en Internet Explorer 8.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

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

Mesa con bordes

Engade .table-borderedos bordos en todos os lados da táboa e das celas.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

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

Pasa as filas

Engadir .table-hoverpara activar un estado de paso nas filas da táboa dentro dun <tbody>.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

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

Táboa condensada

Engade .table-condensedpara facer as táboas máis compactas cortando o recheo celular á metade.

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

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

Clases contextuais

Use clases contextuais para colorear filas de táboas ou celas individuais.

Clase	Descrición
`.active`	Aplica a cor do rato a unha fila ou cela determinada
`.success`	Indica unha acción exitosa ou positiva
`.info`	Indica un cambio ou acción informativa neutral
`.warning`	Indica un aviso que pode necesitar atención
`.danger`	Indica unha acción perigosa ou potencialmente negativa

#	Encabezado da columna	Encabezado da columna	Encabezado da columna
1	Contido da columna	Contido da columna	Contido da columna
2	Contido da columna	Contido da columna	Contido da columna
3	Contido da columna	Contido da columna	Contido da columna
4	Contido da columna	Contido da columna	Contido da columna
5	Contido da columna	Contido da columna	Contido da columna
6	Contido da columna	Contido da columna	Contido da columna
7	Contido da columna	Contido da columna	Contido da columna
8	Contido da columna	Contido da columna	Contido da columna
9	Contido da columna	Contido da columna	Contido da 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>

Transmitir significado ás tecnoloxías de asistencia

Usar a cor para engadir significado a unha fila da táboa ou unha cela individual só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrate de que a información indicada pola cor é obvia desde o propio contido (o texto visible na fila ou cela da táboa correspondente) ou está incluída a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.

Táboas sensibles

Crea táboas receptivas envolvendo calquera .tablepara .table-responsiveque se despracen horizontalmente en dispositivos pequenos (menos de 768 píxeles). Cando ves algo máis de 768 píxeles de ancho, non verás ningunha diferenza nestas táboas.

Recorte/truncamento vertical

As táboas sensibles fan uso de overflow-y: hidden, que recorta calquera contido que vaia máis aló dos bordos inferior ou superior da táboa. En particular, isto pode cortar os menús despregables e outros widgets de terceiros.

Firefox e conxuntos de campos

Firefox ten un estilo de conxunto de campos incómodo widthque interfire coa táboa de resposta. Isto non se pode anular sen un hack específico de Firefox que non proporcionamos en Bootstrap:

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

Para obter máis información, lea esta resposta de Stack Overflow .

#	Título da táboa	Título da táboa	Título da táboa	Título da táboa	Título da táboa	Título da táboa
1	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa
2	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa
3	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa

#	Título da táboa	Título da táboa	Título da táboa	Título da táboa	Título da táboa	Título da táboa
1	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa
2	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa
3	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa

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

Exemplo básico

Os controis de formularios individuais reciben automaticamente un estilo global. Todos os elementos textuais <input>, <textarea>, e <select>con .form-controlestán configurados como width: 100%;predeterminados. Envolve as etiquetas e os controis .form-grouppara un espazo óptimo.

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

Non mesture grupos de formularios con grupos de entrada

Non mesture grupos de formularios directamente con grupos de entrada . Pola contra, aniñe o grupo de entrada dentro do grupo de formularios.

Formulario en liña

Engade .form-inlineao teu formulario (que non ten que ser un <form>) para os controis de bloques aliñados á esquerda e en liña. Isto só se aplica aos formularios dentro de ventanas gráficas que teñan polo menos 768 píxeles de ancho.

Pode requirir anchos personalizados

As entradas e seleccións width: 100%;aplicáronse por defecto en Bootstrap. Dentro dos formularios en liña, restablecemos isto para width: auto;que varios controis poidan residir na mesma liña. Dependendo do seu deseño, poden ser necesarios anchos personalizados adicionais.

Engade sempre etiquetas

Os lectores de pantalla terán problemas cos teus formularios se non inclúes unha etiqueta para cada entrada. Para estes formularios en liña, pode ocultar as etiquetas usando a .sr-onlyclase. Existen outros métodos alternativos para proporcionar unha etiqueta para tecnoloxías de asistencia, como o atributo aria-label, aria-labelledbyou . titleSe ningún destes está presente, os lectores de pantalla poden recorrer ao uso do placeholderatributo, se está presente, pero teña en conta que placeholdernon se recomenda o uso de como substituto doutros métodos de etiquetaxe.

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

Use as clases de grade predefinidas de Bootstrap para aliñar etiquetas e grupos de controis de formulario nun deseño horizontal engadindo .form-horizontalao formulario (que non ten que ser un <form>). Ao facelo, cambia .form-groups para comportarse como filas de grade, polo que non é necesario .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>

Controis compatibles

Exemplos de controis de formulario estándar admitidos nun deseño de formulario de exemplo.

Entradas

Control de formulario máis común, campos de entrada baseados en texto. Inclúe compatibilidade con todos os tipos HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, e color.

Requírese declaración de tipo

As entradas só terán un estilo completo se typese declaran correctamente.

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

Grupos de entrada

Para engadir texto ou botóns integrados antes e/ou despois de calquera baseado en texto <input>, consulta o compoñente do grupo de entrada .

Área de texto

Control de formulario que admite varias liñas de texto. Cambia rowso atributo segundo sexa necesario.

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

Caixas de verificación e radios

As caixas de verificación son para seleccionar unha ou varias opcións nunha lista, mentres que as radios son para seleccionar unha opción de entre moitas.

Admítense as caixas de verificación e as radios desactivadas, pero para proporcionar un cursor "non permitido" ao pasar o cursor do pai <label>, terás que engadir a .disabledclase ao pai .radio, .radio-inline, .checkboxou .checkbox-inline.

Predeterminado (apilado)

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

Caixas de verificación e radios en liña

Use as clases .checkbox-inlineou .radio-inlinenunha serie de caixas de verificación ou radios para os controis que aparecen na mesma liña.

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

Caixas de verificación e radios sen texto de etiqueta

Se non tes texto dentro do <label>, a entrada sitúase como esperarías. Actualmente só funciona en caixas de verificación e radios non en liña. Lembra aínda fornecer algún tipo de etiqueta para as tecnoloxías de asistencia (por exemplo, usar 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

Teña en conta que moitos menús de selección nativos, especialmente en Safari e Chrome, teñen esquinas redondeadas que non se poden modificar mediante border-radiuspropiedades.

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

Para <select>os controis co multipleatributo, móstranse varias opcións por defecto.

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

Control estático

Cando necesites colocar texto sinxelo xunto a unha etiqueta de formulario dentro dun formulario, usa a .form-control-staticclase nun <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>

Estado de foco

Eliminamos os outlineestilos predeterminados nalgúns controis de formulario e aplicamos un box-shadowno seu lugar para :focus.

`:focus`Estado de demostración

A entrada de exemplo anterior usa estilos personalizados na nosa documentación para demostrar o :focusestado nun .form-control.

Estado desactivado

Engade o disabledatributo booleano nunha entrada para evitar as interaccións do usuario. As entradas desactivadas aparecen máis claras e engaden un not-allowedcursor.

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

Conxuntos de campos desactivados

Engade o disabledatributo a <fieldset>para desactivar todos os controis <fieldset>dunha soa vez.

Aviso sobre a funcionalidade da ligazón de`<a>`

De xeito predeterminado, os navegadores tratarán todos os controis de formularios nativos ( e <input>elementos ) dentro dunha como desactivados, evitando as interaccións do teclado e do rato neles. Non obstante, se o teu formulario tamén inclúe elementos, só se lles dará un estilo . Como se indicou na sección sobre o estado desactivado dos botóns (e concretamente na subsección para os elementos de ancoraxe), esta propiedade CSS aínda non está estandarizada e non se admite totalmente en Opera 18 e posteriores, nin en Internet Explorer 11, e gañou non impide que os usuarios do teclado poidan enfocar ou activar estas ligazóns. Polo tanto, para estar seguro, usa JavaScript personalizado para desactivar tales ligazóns.<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Compatibilidade entre navegadores

Aínda que Bootstrap aplicará estes estilos en todos os navegadores, Internet Explorer 11 e anteriores non admiten totalmente o disabledatributo nun ficheiro <fieldset>. Use JavaScript personalizado para desactivar o conxunto de campos nestes navegadores.

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

Estado de só lectura

Engade o readonlyatributo booleano nunha entrada para evitar a modificación do valor da entrada. As entradas de só lectura parecen máis claras (igual que as entradas desactivadas), pero conservan o cursor estándar.

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

Texto de axuda

Texto de axuda a nivel de bloque para controis de formulario.

Asociar texto de axuda con controis de formulario

O texto de axuda debe estar asociado explícitamente co control de formulario co que se relaciona usando o aria-describedbyatributo. Isto garantirá que as tecnoloxías de asistencia, como os lectores de pantalla, anunciarán este texto de axuda cando o usuario se concentre ou entre no control.

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

Estados de validación

Bootstrap inclúe estilos de validación para os estados de erro, aviso e éxito nos controis de formulario. Para usar, engadir .has-warning, .has-errorou .has-successao elemento pai. Calquera .control-label, .form-control, e .help-blockdentro dese elemento recibirán os estilos de validación.

Transmitir o estado de validación a tecnoloxías de asistencia e usuarios daltónicos

Usar estes estilos de validación para indicar o estado dun control de formulario só proporciona unha indicación visual baseada en cores, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla, nin aos usuarios daltónicos.

Asegúrese de que tamén se proporciona unha indicación alternativa do estado. Por exemplo, pode incluír unha suxestión sobre o estado no <label>propio texto do control de formulario (como é o caso no seguinte exemplo de código), incluír un Glyphicon (con texto alternativo apropiado usando a .sr-onlyclase; consulte os exemplos de Glyphicon ) ou proporcionando un bloque de texto de axuda adicional . Específicamente para tecnoloxías de asistencia, tamén se pode asignar un aria-invalid="true"atributo aos controis de formularios non válidos.

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

Con iconas opcionais

Tamén pode engadir iconas de comentarios opcionais coa adición de .has-feedbacke a icona dereita.

As iconas de comentarios só funcionan con <input class="form-control">elementos textuais.

Iconas, etiquetas e grupos de entrada

O posicionamento manual das iconas de comentarios é necesario para entradas sen etiqueta e para grupos de entrada cun complemento á dereita. Recoméndase encarecidamente que proporcione etiquetas para todas as entradas por motivos de accesibilidade. Se queres evitar que se mostren etiquetas, escóndeas coa .sr-onlyclase. Se debes prescindir das etiquetas, axusta o topvalor da icona de comentarios. Para os grupos de entrada, axusta o rightvalor a un valor de píxel adecuado dependendo do ancho do complemento.

Transmitir o significado da icona ás tecnoloxías de asistencia

Para garantir que as tecnoloxías de asistencia, como os lectores de pantalla, transmitan correctamente o significado dunha icona, débese incluír texto adicional oculto na .sr-onlyclase e asociarse explícitamente ao control de formulario co que se relaciona usando aria-describedby. Alternativamente, asegúrate de que o significado (por exemplo, o feito de que hai unha advertencia para un campo de entrada de texto en particular) se transmita noutra forma, como cambiar o texto do real <label>asociado ao control do formulario.

Aínda que os seguintes exemplos xa mencionan o estado de validación dos seus respectivos controis de formulario no <label>propio texto, a técnica anterior (usando .sr-onlytexto e aria-describedby) incluíuse con fins ilustrativos.

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

Iconas opcionais en formas horizontais e en liña

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

Iconas opcionais con `.sr-only`etiquetas ocultas

Se usas a .sr-onlyclase para ocultar un control de formulario <label>(en lugar de usar outras opcións de etiquetaxe, como o aria-labelatributo), Bootstrap axustará automaticamente a posición da icona unha vez que se engade.

<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 tamaño

Establece alturas usando clases como .input-lg, e establece anchos usando clases de columnas de grade como .col-lg-*.

Tamaño de altura

Crea controis de formulario máis altos ou máis curtos que coincidan co tamaño dos botóns.

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

Tamaños de grupos de formas horizontais

Dimensiona rapidamente as etiquetas e os controis .form-horizontalde formularios engadindo .form-group-lgou .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>

Tamaño da columna

Envolve as entradas en columnas de grade ou en calquera elemento principal personalizado para aplicar facilmente os anchos desexados.

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

Etiquetas de botón

Use as clases de botón nun elemento <a>, <button>, ou <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">

Uso específico do contexto

Aínda que se poden usar clases de botón en <a>e <button>elementos, só <button>os elementos son compatibles nos nosos compoñentes nav e navbar.

Ligazóns que actúan como botóns

Se os <a>elementos se usan para actuar como botóns, activando a funcionalidade na páxina, en lugar de navegar a outro documento ou sección da páxina actual, tamén se lles debería dar un role="button".

Representación entre navegadores

Como mellor práctica, recomendamos encarecidamente usar o <button>elemento sempre que sexa posible para garantir a representación coincidente entre navegadores.

Entre outras cousas, hai un erro en Firefox <30 que nos impide configurar os botóns baseados line-heighten <input>-o que fai que non coincidan exactamente coa altura doutros botóns de Firefox.

Opcións

Use calquera das clases de botóns dispoñibles para crear rapidamente un botón con estilo.

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

Transmitir significado ás tecnoloxías de asistencia

Usar cor para engadir significado a un botón só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías de asistencia, como lectores de pantalla. Asegúrate de que a información indicada pola cor é obvia desde o propio contido (o texto visible do botón) ou está incluída a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase.

Tallas

Apetece botóns máis grandes ou pequenos? Engade .btn-lg, .btn-sm, ou .btn-xspara tamaños adicionais.

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

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

Estado activo

Os botóns aparecerán presionados (cun fondo máis escuro, bordo máis escuro e sombra inserida) cando estean activos. Para <button>os elementos, isto faise mediante :active. Para <a>os elementos, faise con .active. Non obstante, podes usar .activeen <button>s (e incluír o aria-pressed="true"atributo) se precisas replicar o estado activo mediante programación.

Elemento botón

Non é necesario engadir :active, xa que é unha pseudo-clase, pero se precisa forzar a mesma aparencia, vai adiante e engade .active.

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

Elemento de ancoraxe

Engade a .activeclase aos <a>botóns.

Ligazón principal Ligazón

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

Estado desactivado

Fai que os botóns parezan incliquábeis desfacendoos de novo con opacity.

Elemento botón

Engade o disabledatributo aos <button>botóns.

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

Compatibilidade entre navegadores

Se engades o disabledatributo a un <button>, Internet Explorer 9 e as versións anteriores mostrarán o texto en gris cunha sombra de texto desagradable que non podemos solucionar.

Elemento de ancoraxe

Engade a .disabledclase aos <a>botóns.

Ligazón principal Ligazón

<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í usamos .disabledcomo clase de utilidade, similar á .activeclase común, polo que non se require ningún prefixo.

Aviso sobre a funcionalidade da ligazón

Esta clase utilízase pointer-events: nonepara tentar desactivar a función de ligazón de <a>s, pero esa propiedade CSS aínda non está estandarizada e non se admite totalmente en Opera 18 e posteriores, nin en Internet Explorer 11. Ademais, mesmo en navegadores que admiten o pointer-events: noneteclado , a navegación non se ve afectada, o que significa que os usuarios de teclado videntes e os usuarios de tecnoloxías de asistencia aínda poderán activar estas ligazóns. Polo tanto, para estar seguro, usa JavaScript personalizado para desactivar tales ligazóns.

Imaxes sensibles

As imaxes de Bootstrap 3 pódense facer compatibles coa adición da .img-responsiveclase. Isto aplícase max-width: 100%;, height: auto;e display: block;á imaxe para que se escala ben ao elemento pai.

Para centrar imaxes que usan a .img-responsiveclase, use .center-blocken lugar de .text-center. Consulte a sección de clases auxiliares para obter máis detalles sobre o .center-blockseu uso.

Imaxes SVG e IE 8-10

En Internet Explorer 8-10, as imaxes SVG .img-responsiveteñen un tamaño desproporcionado. Para solucionar isto, engade width: 100% \9;cando sexa necesario. Bootstrap non aplica isto automaticamente xa que provoca complicacións noutros formatos de imaxe.

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

Formas da imaxe

Engade clases a un <img>elemento para peinar facilmente as imaxes en calquera proxecto.

Compatibilidade entre navegadores

Teña en conta que Internet Explorer 8 carece de soporte para cantos redondeados.

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

Cores contextuais

Transmite significado a través da cor cun puñado de clases de utilidade de énfase. Tamén se poden aplicar ás ligazóns e escureceranse ao pasar o cursor do mesmo xeito que os nosos estilos de ligazóns predeterminados.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Tratar a especificidade

Ás veces non se poden aplicar clases de énfase debido á especificidade doutro selector. Na maioría dos casos, unha solución suficiente é envolver o texto nunha <span>clase coa clase.

Transmitir significado ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (as cores contextuais só se usan para reforzar o significado que xa está presente no texto/marcado) ou se inclúe a través de medios alternativos, como o texto adicional oculto coa .sr-onlyclase. .

Fondos contextuais

Semellante ás clases de cor de texto contextual, establece facilmente o fondo dun elemento para calquera clase contextual. Os compoñentes da ancoraxe escureceranse ao pasar o cursor, igual que as clases de texto.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Tratar a especificidade

Ás veces non se poden aplicar clases de fondo contextuais debido á especificidade doutro selector. Nalgúns casos, unha solución suficiente é envolver o contido do elemento nunha <div>clase coa clase.

Transmitir significado ás tecnoloxías de asistencia

Do mesmo xeito que coas cores contextuais , asegúrate de que calquera significado transmitido a través da cor tamén se transmita nun formato que non sexa meramente de presentación.

Pechar icona

Usa a icona de peche xenérico para descartar contido como modais e alertas.

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

Caretas

Use os cursores para indicar a función e a dirección do menú despregable. Teña en conta que o cursor predeterminado invertirase automaticamente nos menús despregables .

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

Flotadores rápidos

Fai flotar un elemento á esquerda ou á dereita cunha clase. !importantinclúese para evitar problemas de especificidade. As clases tamén se poden usar como 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();
}

Centrar os bloques de contido

Establece un elemento display: blocke centralo mediante margin. Dispoñible como mixin e clase.

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

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

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

Clearfix

Borra s facilmente floatengadindo .clearfix ao elemento principal . Utiliza o micro clearfix popularizado por Nicolas Gallagher. Tamén se pode usar como mestura.

<!-- 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 e ocultar contido

Forzar un elemento a mostrarse ou ocultarse ( incluído para lectores de pantalla ) co uso de .showe .hiddenclases. Estas clases úsanse !importantpara evitar conflitos de especificidade, igual que os flotantes rápidos . Só están dispoñibles para cambiar o nivel de bloque. Tamén se poden usar como mixins.

.hideestá dispoñible, pero non sempre afecta aos lectores de pantalla e está en desuso a partir da v3.0.1. Use .hiddenou .sr-onlyno seu lugar.

Ademais, .invisiblepódese usar para cambiar só a visibilidade dun elemento, o que significa displayque non se modifica e que o elemento aínda pode afectar o fluxo do documento.

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

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

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

Lector de pantalla e contido de navegación por teclado

Ocultar un elemento a todos os dispositivos excepto aos lectores de pantalla con .sr-only. Combínalo .sr-onlycon .sr-only-focusablepara mostrar o elemento de novo cando estea enfocado (por exemplo, por un usuario só con teclado). Necesario para seguir as mellores prácticas de accesibilidade . Tamén se pode usar como 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ón da imaxe

Use a .text-hideclase ou mixin para axudar a substituír o contido do texto dun elemento por unha imaxe de fondo.

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

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

Para un desenvolvemento máis rápido para móbiles, utiliza estas clases de utilidade para mostrar e ocultar contido por dispositivo mediante consulta multimedia. Tamén se inclúen clases de utilidade para alternar o contido cando se imprime.

Tenta utilizalos de forma limitada e evita crear versións completamente diferentes do mesmo sitio. En cambio, utilízaos para complementar a presentación de cada dispositivo.

Clases dispoñibles

Use unha única ou unha combinación das clases dispoñibles para alternar o contido entre os puntos de interrupción das vistas.

	Dispositivos extra pequenosTeléfonos (<768px)	Pequenos dispositivosTabletas (≥768 px)	Dispositivos medianosEscritorios (≥992 px)	Dispositivos grandesEscritorios (≥1200px)
`.visible-xs-*`	Visible	Oculto	Oculto	Oculto
`.visible-sm-*`	Oculto	Visible	Oculto	Oculto
`.visible-md-*`	Oculto	Oculto	Visible	Oculto
`.visible-lg-*`	Oculto	Oculto	Oculto	Visible
`.hidden-xs`	Oculto	Visible	Visible	Visible
`.hidden-sm`	Visible	Oculto	Visible	Visible
`.hidden-md`	Visible	Visible	Oculto	Visible
`.hidden-lg`	Visible	Visible	Visible	Oculto

A partir da versión 3.2.0, as .visible-*-*clases para cada punto de interrupción teñen tres variacións, unha para cada displayvalor de propiedade CSS que se indica a continuación.

Grupo de clases	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Así, para as pantallas extra pequenas ( xs), por exemplo, as .visible-*-*clases dispoñibles son: .visible-xs-block, .visible-xs-inline, e .visible-xs-inline-block.

As clases .visible-xs, .visible-sm, .visible-md, e .visible-lgtamén existen, pero están en desuso a partir da v3.2.0 . Son aproximadamente equivalentes a .visible-*-block, excepto con casos especiais adicionais para os <table>elementos relacionados con alternar.

Clases de impresión

Do mesmo xeito que as clases responsive habituais, úsaas para cambiar o contido para imprimir.

Clases	Navegador	Imprimir
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Oculto	Visible
`.hidden-print`	Visible	Oculto

A clase .visible-printtamén existe pero está obsoleta a partir da v3.2.0. É aproximadamente equivalente a .visible-print-block, excepto con casos especiais adicionais para <table>elementos relacionados.

Casos de proba

Cambia o tamaño do teu navegador ou carga en diferentes dispositivos para probar as clases de utilidade receptivas.

Visible en...

As marcas de verificación verdes indican que o elemento está visible na túa ventana gráfica actual.

Extra pequeno ✔ Visible en x-small

Pequena ✔ Visible en pequeno

Medio ✔ Visible en medio

Grande ✔ Visible en grande

Extra pequeno e pequeno ✔ Visible en x-pequeno e pequeno

Mediano e grande ✔ Visible en medianas e grandes

Extra pequeno e mediano ✔ Visible en x-pequeno e mediano

Pequenas e grandes ✔ Visible en pequenos e grandes

Extra pequeno e grande ✔ Visible en x-pequeno e grande

Pequenas e medianas ✔ Visible en pequenos e medianos

Oculto en...

Aquí, as marcas de verificación verdes tamén indican que o elemento está oculto na túa ventana gráfica actual.

Extra pequeno ✔ Oculto en x-small

Pequena ✔ Oculto en pequeno

Medio ✔ Oculto no medio

Grande ✔ Oculto en grande

Extra pequeno e pequeno ✔ Oculto en x-pequeno e pequeno

Mediano e grande ✔ Oculto en medianas e grandes

Extra pequeno e mediano ✔ Hidden on x-small and medium

Small and large ✔ Oculto en pequenos e grandes

Extra small and large ✔ Oculto en x-pequeno e grande

Pequenas e medianas ✔ Hidden on small and medium

O CSS de Bootstrap está construído sobre Less, un preprocesador con funcionalidades adicionais como variables, mixins e funcións para compilar CSS. Aqueles que queiran usar os ficheiros de Less fonte en lugar dos nosos ficheiros CSS compilados poden facer uso das numerosas variables e mixins que usamos en todo o framework.

As variables de reixa e as mesturas están tratadas na sección Sistema de reixa .

Compilación de Bootstrap

Bootstrap pódese usar polo menos de dous xeitos: co CSS compilado ou cos ficheiros Less fonte. Para compilar os ficheiros Less, consulte a sección Introdución para saber como configurar o seu contorno de desenvolvemento para executar os comandos necesarios.

As ferramentas de compilación de terceiros poden funcionar con Bootstrap, pero o noso equipo principal non as admite.

Variables

As variables utilízanse ao longo de todo o proxecto como unha forma de centralizar e compartir valores de uso habitual como cores, espazos ou pilas de fontes. Para obter un desglose completo, consulta o Personalizador .

Cores

Use facilmente dous esquemas de cores: escala de grises e semántica. As cores en escala de grises proporcionan un acceso rápido aos tons de negro de uso habitual, mentres que as semánticas inclúen varias cores asignadas a valores contextuais significativos.

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

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

Usa algunha destas variables de cor tal e como son ou reasignalas a variables máis significativas para o teu proxecto.

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

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

Estadas

Un puñado de variables para personalizar rapidamente os elementos clave do esqueleto do teu sitio.

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

Ligazóns

Crea facilmente as túas ligazóns coa cor correcta cun só 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;
  }
}

Teña en conta que @link-hover-colorusa unha función, outra ferramenta fantástica de Less, para crear automaticamente a cor correcta. Podes usar darken, lighten, saturatee desaturate.

Tipografía

Establece facilmente o tipo de letra, o tamaño do texto, o interlineado e moito máis con algunhas variables rápidas. Bootstrap tamén fai uso destes para proporcionar mesturas tipográficas sinxelas.

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

Iconas

Dúas variables rápidas para personalizar a localización e o nome do ficheiro das túas iconas.

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

Compoñentes

Os compoñentes de Bootstrap fan uso dalgunhas variables predeterminadas para establecer valores comúns. Aquí están os máis utilizados.

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

Os mixins de provedores son mixins para axudar a admitir varios navegadores incluíndo todos os prefixos de provedores relevantes no teu CSS compilado.

Tamaño de caixa

Restablece o modelo da caixa dos teus compoñentes cunha única mestura. Para obter contexto, consulta este útil artigo de Mozilla .

O mixin está obsoleto a partir da v3.2.0, coa introdución do Autoprefixer. Para preservar a compatibilidade con versións anteriores, Bootstrap continuará usando o mixin internamente ata Bootstrap v4.

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

Esquinas redondeadas

Hoxe todos os navegadores modernos admiten a border-radiuspropiedade sen prefixos. Polo tanto, non hai .border-radius()mestura, pero Bootstrap inclúe atallos para redondear rapidamente dúas esquinas nun lado concreto dun obxecto.

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

Sombras de caixa (drop).

Se o teu público obxectivo está a usar os navegadores e dispositivos máis recentes e mellores, asegúrate de usar só a box-shadowpropiedade. Se necesitas compatibilidade con dispositivos Android (anteriores á versión 4) e iOS (anteriores a iOS 5), utiliza o mixin obsoleto para recoller o -webkitprefixo necesario.

O mixin está obsoleto a partir da versión 3.1.0, xa que Bootstrap non admite oficialmente as plataformas obsoletas que non admiten a propiedade estándar. Para preservar a compatibilidade con versións anteriores, Bootstrap continuará usando o mixin internamente ata Bootstrap v4.

Asegúrate de usar rgba()cores nas sombras das túas caixas para que se combinen o máis perfectamente posible cos fondos.

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

Transicións

Múltiples mixins para flexibilidade. Establece toda a información de transición cun único ou especifique un atraso e unha duración separados segundo sexa necesario.

Os mixins quedan obsoletos a partir da v3.2.0, coa introdución do Autoprefixer. Para preservar a compatibilidade con versións anteriores, Bootstrap continuará usando os mixins internamente ata 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;
}

Transformacións

Xira, escala, traduce (move) ou sesga calquera obxecto.

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

Animacións

Un único mixin para usar todas as propiedades de animación de CSS3 nunha declaración e outros mixins para propiedades individuais.

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

Opacidade

Establece a opacidade para todos os navegadores e proporciona unha filteralternativa para IE8.

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

Texto do marcador de posición

Proporcione contexto para os controis de formulario dentro de cada campo.

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

Columnas

Xera columnas mediante CSS dentro dun único elemento.

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

Degradados

Converte facilmente dúas cores calquera nun degradado de fondo. Avanza e define unha dirección, usa tres cores ou usa un degradado radial. Cunha única mestura obterás todas as sintaxes prefixadas que necesitarás.

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

Tamén pode especificar o ángulo dun degradado lineal estándar de dúas cores:

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

Se necesitas un degradado de estilo barbeiro, tamén é sinxelo. Só ten que especificar unha única cor e superpoñeremos unha franxa branca translúcida.

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

Sube a aposta e usa tres cores no seu lugar. Establece a primeira cor, a segunda cor, a parada de cor da segunda cor (un valor porcentual como o 25 %) e a terceira cor con estas mesturas:

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

Aviso! Se algunha vez necesitas eliminar un degradado, asegúrate de eliminar calquera elemento específico de IE filterque poidas engadir. Podes facelo usando o .reset-filter()mixin xunto a background-image: none;.

Mixins de utilidade

Os mixins de utilidade son mixins que combinan propiedades CSS non relacionadas para acadar un obxectivo ou tarefa específica.

Clearfix

Esqueza engadir class="clearfix"a calquera elemento e, no seu lugar, engade o .clearfix()mixin onde corresponda. Usa o micro clearfix de Nicolas Gallagher .

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

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

Centrado horizontal

Centra rapidamente calquera elemento dentro do seu pai. Requírese widthou max-widtha configurar.

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

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

Axudantes de dimensionamento

Especifica máis facilmente as dimensións dun obxecto.

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

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

Áreas de texto redimensionables

Configure facilmente as opcións de cambio de tamaño para calquera área de texto ou calquera outro elemento. O comportamento predeterminado do navegador é normal ( both).

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

Texto truncado

Trunca facilmente o texto cunha elipsis cunha única mestura. Require elemento para ser blockou inline-blocknivel.

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

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

Imaxes da retina

Especifique dúas rutas de imaxe e as dimensións da imaxe @1x, e Bootstrap proporcionará unha consulta multimedia @2x. Se tes moitas imaxes para publicar, considera escribir a túa imaxe CSS de retina manualmente nunha única consulta multimedia.

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

Aínda que Bootstrap está construído en Less, tamén ten un porto Sass oficial . Mantémolo nun repositorio GitHub separado e xestionamos as actualizacións cun script de conversión.

Que está incluído

Dado que o porto de Sass ten un repositorio separado e atende a un público lixeiramente diferente, o contido do proxecto difire moito do proxecto principal de Bootstrap. Isto garante que o porto Sass sexa o máis compatible con tantos sistemas baseados en Sass como sexa posible.

Camiño	Descrición
`lib/`	Código de xema Ruby (configuración Sass, integracións Rails e Compass)
`tasks/`	Scripts de conversión (conversión de Less a Sass)
`test/`	Probas de compilación
`templates/`	Manifesto do paquete de compás
`vendor/assets/`	Sass, JavaScript e ficheiros de fontes
`Rakefile`	Tarefas internas, como rastrexar e converter

Visita o repositorio de GitHub do porto Sass para ver estes ficheiros en acción.

Instalación

Para obter información sobre como instalar e usar Bootstrap para Sass, consulte o readme do repositorio de GitHub . É a fonte máis actualizada e inclúe información para usar con Rails, Compass e proxectos estándar de Sass.

Bootstrap para Sass

CSS

Visión xeral

Tipo de documento HTML5

Primeiro o móbil

Tipografía e ligazóns

Normalizar.css

Contenedores

Sistema de reixa

Introdución

Consultas de medios

Opcións de reixa

Exemplo: apilado a horizontal

Exemplo: recipiente de fluído

Exemplo: móbil e escritorio

Exemplo: móbil, tableta, escritorio

Exemplo: axuste de columnas

Restablece as columnas sensibles

Columnas de compensación

Columnas aniñadas

Ordenación de columnas

Menos mixins e variables

Variables

Mixins

Exemplo de uso

Tipografía

Títulos

h1. Título de bootstrap

h2. Título de bootstrap

h3. Título de bootstrap

h4. Título de bootstrap

h5. Título de bootstrap

h6. Título de bootstrap

h1. Título de Bootstrap Texto secundario

h2. Título de Bootstrap Texto secundario

h3. Título de Bootstrap Texto secundario

h4. Título de Bootstrap Texto secundario

h5. Título de Bootstrap Texto secundario

h6. Título de Bootstrap Texto secundario

Copia do corpo

Copia do corpo principal

Construído con menos

Elementos de texto en liña

Texto marcado

Texto eliminado

Texto tachado

Texto inserido

Texto subliñado

Texto pequeno

Negriña

Cursivas

Elementos alternativos

Clases de aliñamento

Clases de transformación

Abreviaturas

Abreviatura básica

Inicialismo

Enderezos

Citas de bloque

Presuposto de bloque predeterminado

Opcións de cotización en bloque

Nomear unha fonte

Pantallas alternativas

Listas

Sen orde

Ordenado

Sen estilo

En liña

Descrición

Descrición horizontal

Truncado automático

Código

En liña

Entrada do usuario

Bloque básico

Variables

Saída da mostra

Táboas

Exemplo básico

Filas a raias

Compatibilidade entre navegadores

`:focus`Estado de demostración

Aviso sobre a funcionalidade da ligazón de`<a>`

Iconas opcionais con `.sr-only`etiquetas ocultas