Obtenga información sobre las piezas clave de la infraestructura de Bootstrap, incluido nuestro enfoque para un desarrollo web mejor, más rápido y más sólido.

tipo de documento HTML5

Bootstrap hace uso de ciertos elementos HTML y propiedades CSS que requieren el uso del tipo de documento HTML5. Inclúyelo al principio de todos tus proyectos.

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

Móvil primero

Con Bootstrap 2, agregamos estilos compatibles con dispositivos móviles opcionales para aspectos clave del marco. Con Bootstrap 3, hemos reescrito el proyecto para que sea apto para dispositivos móviles desde el principio. En lugar de agregar estilos móviles opcionales, se integran directamente en el núcleo. De hecho, Bootstrap es móvil primero . Los primeros estilos móviles se pueden encontrar en toda la biblioteca en lugar de en archivos separados.

Para garantizar una representación adecuada y el zoom táctil, agregue la etiqueta meta de la ventana gráfica a su archivo <head>.

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

Puede deshabilitar las capacidades de zoom en dispositivos móviles agregando user-scalable=noa la metaetiqueta de la ventana gráfica. Esto deshabilita el zoom, lo que significa que los usuarios solo pueden desplazarse y hace que su sitio se sienta un poco más como una aplicación nativa. En general, no recomendamos esto en todos los sitios, ¡así que tenga cuidado!

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

tipografía y enlaces

Bootstrap establece estilos básicos de visualización, tipografía y enlaces globales. Específicamente, nosotros:

Establecer background-color: #fff;en elbody
Usa los atributos @font-family-base, @font-size-basey @line-height-basecomo nuestra base tipográfica
Establezca el color del enlace global a través de @link-colory aplique subrayados de enlace solo en:hover

Estos estilos se pueden encontrar dentro de scaffolding.less.

Normalizar.css

Para mejorar la representación entre navegadores, usamos Normalize.css , un proyecto de Nicolas Gallagher y Jonathan Neal .

Contenedores

Bootstrap requiere un elemento contenedor para envolver el contenido del sitio y albergar nuestro sistema de cuadrícula. Puede elegir uno de los dos contenedores para usar en sus proyectos. Tenga en cuenta que, debido a paddingy más, ninguno de los contenedores es anidable.

Úselo .containerpara un contenedor de ancho fijo con capacidad de respuesta.

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

Úselo .container-fluidpara un contenedor de ancho completo, que abarque todo el ancho de su ventana gráfica.

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

Bootstrap incluye un primer sistema de cuadrícula fluida móvil con capacidad de respuesta que escala adecuadamente hasta 12 columnas a medida que aumenta el tamaño del dispositivo o de la ventana gráfica. Incluye clases predefinidas para opciones de diseño sencillas, así como poderosos mixins para generar diseños más semánticos .

Introducción

Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido. Así es como funciona el sistema de cuadrícula Bootstrap:

Las filas deben colocarse dentro de un .container(ancho fijo) o .container-fluid(ancho completo) para una alineación y relleno adecuados.
Utilice filas para crear grupos horizontales de columnas.
El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser elementos secundarios inmediatos de las filas.
Las clases de cuadrícula predefinidas como .rowy .col-xs-4están disponibles para crear rápidamente diseños de cuadrícula. También se pueden usar menos mixins para diseños más semánticos.
Las columnas crean medianeras (espacios entre el contenido de la columna) a través de padding. Ese relleno se compensa en filas para la primera y la última columna a través de un margen negativo en .rows.
El margen negativo es la razón por la cual los ejemplos a continuación están anulados. Es para que el contenido dentro de las columnas de la cuadrícula se alinee con el contenido que no es de la cuadrícula.
Las columnas de cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres .col-xs-4.
Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales se ajustará, como una unidad, a una nueva línea.
Las clases de cuadrícula se aplican a dispositivos con anchos de pantalla mayores o iguales a los tamaños de los puntos de interrupción y anulan las clases de cuadrícula destinadas a dispositivos más pequeños. Por lo tanto, por ejemplo, aplicar cualquier .col-md-*clase a un elemento no solo afectará su estilo en dispositivos medianos sino también en dispositivos grandes si una .col-lg-*clase no está presente.

Mire los ejemplos para aplicar estos principios a su código.

Preguntas de los medios

Usamos las siguientes consultas de medios en nuestros archivos Less para crear los puntos de interrupción clave en nuestro sistema de cuadrícula.

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

Ocasionalmente, ampliamos estas consultas de medios para incluir una max-widthpara limitar el CSS a un conjunto más limitado 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) { ... }

Opciones de cuadrícula

Vea cómo funcionan los aspectos del sistema de cuadrícula Bootstrap en múltiples dispositivos con una tabla práctica.

	Dispositivos extrapequeños Teléfonos (<768px)	Dispositivos pequeños Tabletas (≥768px)	Dispositivos medianos Escritorios (≥992px)	Dispositivos grandes Escritorios (≥1200px)
Comportamiento de la cuadrícula	Horizontales en todo momento	Contraído al inicio, horizontal sobre los puntos de interrupción
Ancho del contenedor	Ninguno (automático)	750px	970px	1170px
Prefijo de clase	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de columnas	12
Ancho de columna	Auto	~62 píxeles	~81 píxeles	~97 píxeles
Ancho del canalón	30px (15px en cada lado de una columna)
encajable	Sí
Compensaciones	Sí
Ordenación de columnas	Sí

Ejemplo: apilado en horizontal

Con un solo conjunto de .col-md-*clases de cuadrícula, puede crear un sistema de cuadrícula básico que comienza apilado en dispositivos móviles y tabletas (el rango extra pequeño a pequeño) antes de volverse horizontal en dispositivos de escritorio (medianos). Coloque columnas de cuadrícula en cualquier archivo .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>

Ejemplo: Contenedor de fluido

Convierta cualquier diseño de cuadrícula de ancho fijo en un diseño de ancho completo cambiando su exterior .containera .container-fluid.

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

Ejemplo: móvil y escritorio

¿No quiere que sus columnas simplemente se apilen en dispositivos más pequeños? Use las clases de cuadrícula de dispositivos extra pequeños y medianos agregándolas .col-xs-* .col-md-*a sus columnas. Vea el ejemplo a continuación para tener una mejor idea de cómo 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>

Ejemplo: móvil, tableta, escritorio

Aproveche el ejemplo anterior creando diseños aún más dinámicos y potentes con .col-sm-*clases de tableta.

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

Ejemplo: envoltura de columna

Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales se ajustará, como una unidad, a una nueva línea.

.col-xs-9

.col-xs-4
Dado que 9 + 4 = 13 > 12, este div de 4 columnas de ancho se envuelve en una nueva línea como una unidad contigua.

.col-xs-6
Las columnas subsiguientes continúan a lo largo de la nueva línea.

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

Restablecimientos de columna de respuesta

Con los cuatro niveles de cuadrículas disponibles, es probable que se encuentre con problemas en los que, en ciertos puntos de interrupción, sus columnas no se borran del todo bien ya que una es más alta que la otra. Para arreglar eso, use una combinación de a .clearfixy nuestras clases de utilidad receptivas .

.col-xs-6 .col-sm-3
Cambie el tamaño de su ventana gráfica o revísela en su teléfono para ver un ejemplo.

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

Además de borrar las columnas en los puntos de interrupción de respuesta, es posible que deba restablecer las compensaciones, los empujones o los tirones . Vea esto en acción en el ejemplo de cuadrícula .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Quitar canaletas

Retire las canaletas de una fila y sus columnas con la .row-no-guttersclase.

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

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

.col-xs-6

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

Columnas de compensación

Mover columnas a la derecha usando .col-md-offset-*clases. Estas clases aumentan el margen izquierdo de una columna por *columnas. Por ejemplo, .col-md-offset-4se mueve .col-md-4sobre cuatro columnas.

.col-md-4

.col-md-4 .col-md-desplazamiento-4

.col-md-3 .col-md-desplazamiento-3

.col-md-6 .col-md-desplazamiento-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>

También puede anular las compensaciones de los niveles de cuadrícula 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 de anidamiento

Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .rowconjunto de .col-sm-*columnas dentro de una .col-sm-*columna existente. Las filas anidadas deben incluir un conjunto de columnas que suman 12 o menos (no es necesario que use las 12 columnas disponibles).

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

Cambie fácilmente el orden de nuestras columnas de cuadrícula integradas con clases de modificadores .col-md-push-*..col-md-pull-*

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

.col-md-3 .col-md-tirar-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 y variables

Además de las clases de cuadrícula preconstruidas para diseños rápidos, Bootstrap incluye Less variables y mixins para generar rápidamente sus propios diseños semánticos simples.

Variables

Las variables determinan el número de columnas, el ancho de medianil y el punto de consulta de medios en el que comienzan las columnas flotantes. Los usamos para generar las clases de cuadrícula predefinidas documentadas anteriormente, así como para los mixins personalizados que se enumeran a continuación.

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

mezclas

Los mixins se utilizan junto con las variables de cuadrícula para generar CSS semántico para columnas de cuadrícula individuales.

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

Ejemplo de uso

Puede modificar las variables a sus propios valores personalizados, o simplemente usar los mixins con sus valores predeterminados. Este es un ejemplo del uso de la configuración predeterminada para crear un diseño de dos columnas con un espacio entre ellas.

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

encabezados

Todos los encabezados HTML, <h1>hasta <h6>, están disponibles. .h1Las .h6clases directas también están disponibles, para cuando desea hacer coincidir el estilo de fuente de un encabezado pero aún desea que su texto se muestre en línea.

h1. Encabezado de arranque	Seminegrita 36px
h2. Encabezado de arranque	Seminegrita 30px
h3. Encabezado de arranque	Seminegrita 24px
h4. Encabezado de arranque	Seminegrita 18px
h5. Encabezado de arranque	Seminegrita 14px
h6. Encabezado de arranque	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>

Cree texto secundario más claro en cualquier encabezado con una <small>etiqueta genérica o la .smallclase.

h1. Encabezado Bootstrap Texto secundario

h2. Encabezado Bootstrap Texto secundario

h3. Encabezado Bootstrap Texto secundario

h4. Encabezado Bootstrap Texto secundario

h5. Encabezado Bootstrap Texto secundario

h6. Encabezado 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 de cuerpo

El valor predeterminado global de Bootstrap font-sizees 14px , con un valor line-heightde 1.428 . Esto se aplica a los <body>y todos los párrafos. Además, <p>(los párrafos) reciben un margen inferior de la mitad de su altura de línea calculada (10 px 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, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

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

<p>...</p>

Texto principal del cuerpo

Haga que un párrafo se destaque agregando .lead.

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

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

Construido con menos

La escala tipográfica se basa en dos Less variables en variables.less : @font-size-basey @line-height-base. El primero es el tamaño de fuente base utilizado en todo el texto y el segundo es la altura de línea base. Usamos esas variables y algunas matemáticas simples para crear los márgenes, rellenos y alturas de línea de todo nuestro tipo y más. Personalízalos y Bootstrap se adapta.

Elementos de texto en línea

texto marcado

Para resaltar una secuencia de texto debido a su relevancia en otro contexto, use la <mark>etiqueta.

Puede utilizar la etiqueta de marca paradestacartexto.

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

Texto eliminado

Para indicar bloques de texto que se han eliminado, utilice la <del>etiqueta.

~~Esta línea de texto debe tratarse 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 ya no son relevantes, use la <s>etiqueta.

~~Ésta línea de texto se debe de considerar no correcta.~~

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

texto insertado

Para indicar adiciones al documento, use la <ins>etiqueta.

Esta línea de texto debe tratarse como una adición al documento.

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

Texto subrayado

Para subrayar el texto utilice la <u>etiqueta.

Esta línea de texto aparecerá como subrayada

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

Utilice las etiquetas de énfasis predeterminadas de HTML con estilos ligeros.

Texto pequeño

Para restar énfasis a líneas o bloques de texto, use la <small>etiqueta para establecer el texto en un 85 % del tamaño del principal. Los elementos de encabezado reciben los suyos propios font-sizepara los elementos anidados <small>.

Alternativamente, puede usar un elemento en línea con .smallen lugar de cualquier <small>.

Esta línea de texto debe tratarse como letra pequeña.

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

Audaz

Para enfatizar un fragmento de texto con una fuente de mayor peso.

El siguiente fragmento de texto se muestra en negrita .

<strong>rendered as bold text</strong>

Cursiva

Para enfatizar un fragmento de texto con cursiva.

El siguiente fragmento de texto se muestra en cursiva .

<em>rendered as italicized text</em>

Elementos alternativos

Siéntase libre de usar <b>y <i>en HTML5. <b>está destinado a resaltar palabras o frases sin transmitir una importancia adicional, mientras que <i>es principalmente para voz, términos técnicos, etc.

Clases de alineación

Realinee fácilmente el texto a los componentes con clases de alineación de texto.

Texto alineado a la izquierda.

Texto alineado al centro.

Texto alineado a la derecha.

Texto justificado.

Sin texto de ajuste.

<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

Transforme texto en componentes con clases de capitalización de texto.

Texto en minúsculas.

Texto en mayúsculas.

<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 del <abbr>elemento HTML para abreviaturas y acrónimos para mostrar la versión ampliada al pasar el mouse. Las abreviaturas con un titleatributo tienen un borde inferior de puntos claros y un cursor de ayuda al pasar el mouse, lo que brinda contexto adicional al pasar el mouse y a los usuarios de tecnologías de asistencia.

abreviatura básica

Una abreviatura de la palabra atributo es attr .

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

inicialismo

Agregue .initialisma una abreviatura para un tamaño de fuente ligeramente más pequeño.

HTML es lo mejor desde el pan rebanado.

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

direcciones

Presente la información de contacto del antepasado más cercano o de todo el trabajo. Preserve el formato terminando todas las líneas con <br>.

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

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

cotizaciones en bloque

Para citar bloques de contenido de otra fuente dentro de su documento.

Cita en bloque predeterminada

Envuelva <blockquote>cualquier HTML como la cita. Para citas directas, recomendamos un <p>.

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

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

Opciones de cotización en bloque

Cambios de estilo y contenido para variaciones simples en un estándar <blockquote>.

Nombrar una fuente

Agregue un <footer>para identificar la fuente. Envuelva el nombre del trabajo fuente en <cite>.

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

Alguien famoso en Título fuente

<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

Agregue .blockquote-reversepara una cita en bloque con contenido alineado a la derecha.

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

Alguien famoso en Título fuente

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

Liza

desordenado

Una lista de artículos en los que el orden no importa explícitamente.

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

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

Ordenado

Una lista de elementos en los que el orden sí importa explícitamente.

Lorem ipsum dolor siéntate amet
Consectetur adipiscing elit
entero molestie lorem en massa
Facilisis en aliquet pretium nisl
nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

sin estilo

Elimine el margen predeterminado list-stylee izquierdo en los elementos de la lista (solo elementos secundarios inmediatos). Esto solo se aplica a los elementos de la lista de elementos secundarios inmediatos , lo que significa que también deberá agregar la clase para cualquier lista anidada.

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

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

En línea

Coloque todos los elementos de la lista en una sola línea con display: inline-block;un ligero relleno.

lorem ipsum
Phasellus iaculis
Voluntad nulla

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

Descripción

Una lista de términos con sus descripciones asociadas.

Listas de descripción: Una lista de descripción es perfecta para definir términos.
eusmod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descripción horizontal

Haga términos y descripciones <dl>alineados uno al lado del otro. Comienza apilado como los correos electrónicos predeterminados <dl>, pero cuando la barra de navegación se expande, también lo hacen estos.

Listas de descripción: Una lista de descripción es perfecta para definir términos.
eusmod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod sempre eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Truncamiento automático

Las listas de descripción horizontal truncarán los términos que sean demasiado largos para caber en la columna de la izquierda con text-overflow. En ventanas gráficas más estrechas, cambiarán al diseño apilado predeterminado.

En línea

Envuelva fragmentos de código en línea con <code>.

Por ejemplo, <section>debe envolverse como en línea.

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

Entrada del usuario

Use <kbd>para indicar la entrada que normalmente se ingresa a través del teclado.

Para cambiar de directorio, escriba cdseguido del nombre del directorio.
Para editar la configuración, presione 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

Úselo <pre>para varias líneas de código. Asegúrese de escapar de los corchetes angulares en el código para una representación adecuada.

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

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

Opcionalmente, puede agregar la .pre-scrollableclase, que establecerá una altura máxima de 350 px y proporcionará una barra de desplazamiento en el eje y.

Variables

Para indicar variables utilice la <var>etiqueta.

y = metro x + segundo

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

Salida de muestra

Para indicar la salida de muestra de bloques de un programa, use la <samp>etiqueta.

Este texto está destinado a ser tratado como resultado de muestra de un programa de computadora.

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

Ejemplo básico

Para un estilo básico (relleno ligero y solo divisores horizontales), agregue la clase base .tablea cualquier archivo <table>. Puede parecer súper redundante, pero dado el uso generalizado de tablas para otros complementos como calendarios y selectores de fechas, hemos optado por aislar nuestros estilos de tabla personalizados.

Título de tabla opcional.
#	Primer nombre	Apellido	Nombre de usuario
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

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

filas de rayas

Úselo .table-stripedpara agregar rayas de cebra a cualquier fila de la tabla dentro del archivo <tbody>.

Compatibilidad entre navegadores

Las tablas rayadas se diseñan a través del :nth-childselector CSS, que no está disponible en Internet Explorer 8.

#	Primer nombre	Apellido	Nombre de usuario
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

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

tabla bordeada

Agregue .table-borderedbordes en todos los lados de la tabla y las celdas.

#	Primer nombre	Apellido	Nombre de usuario
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

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

Filas de desplazamiento

Agregue .table-hoverpara habilitar un estado de desplazamiento en las filas de la tabla dentro de un archivo <tbody>.

#	Primer nombre	Apellido	Nombre de usuario
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry	el pájaro	@gorjeo

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

tabla condensada

Agregue .table-condensedpara hacer que las mesas sean más compactas cortando el relleno de celdas por la mitad.

#	Primer nombre	Apellido	Nombre de usuario
1	Marca	Otón	@mdo
2	jacob	Thornton	@grasa
3	larry el pájaro		@gorjeo

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

Clases contextuales

Use clases contextuales para colorear filas de tablas o celdas individuales.

Clase	Descripción
`.active`	Aplica el color flotante a una fila o celda en particular
`.success`	Indica una acción exitosa o positiva.
`.info`	Indica un cambio o acción informativo neutral
`.warning`	Indica una advertencia que podría necesitar atención.
`.danger`	Indica una acción peligrosa o potencialmente negativa

#	Encabezado de columna	Encabezado de columna	Encabezado de columna
1	contenido de la columna	contenido de la columna	contenido de la columna
2	contenido de la columna	contenido de la columna	contenido de la columna
3	contenido de la columna	contenido de la columna	contenido de la columna
4	contenido de la columna	contenido de la columna	contenido de la columna
5	contenido de la columna	contenido de la columna	contenido de la columna
6	contenido de la columna	contenido de la columna	contenido de la columna
7	contenido de la columna	contenido de la columna	contenido de la columna
8	contenido de la columna	contenido de la columna	contenido de la columna
9	contenido de la columna	contenido de la columna	contenido de la columna

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Transmitir significado a las tecnologías de asistencia

El uso de colores para agregar significado a una fila de la tabla o una celda individual solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido mismo (el texto visible en la fila/celda de la tabla correspondiente) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-onlyclase.

Tablas receptivas

Cree tablas receptivas envolviendo cualquiera .tablepara .table-responsivehacer que se desplacen horizontalmente en dispositivos pequeños (menos de 768 px). Cuando vea algo de más de 768 px de ancho, no verá ninguna diferencia en estas tablas.

Recorte/truncamiento vertical

Las tablas receptivas utilizan overflow-y: hidden, que recorta cualquier contenido que vaya más allá de los bordes inferior o superior de la tabla. En particular, esto puede recortar menús desplegables y otros widgets de terceros.

Firefox y conjuntos de campos

Firefox tiene un estilo de conjunto de campos incómodo widthque interfiere con la tabla receptiva. Esto no se puede anular sin un truco específico de Firefox que no proporcionamos en Bootstrap:

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

Para obtener más información, lea esta respuesta de desbordamiento de pila .

#	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla
1	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
2	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
3	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla

#	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla
1	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
2	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
3	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla

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

Ejemplo básico

Los controles de formulario individuales reciben automáticamente un estilo global. Todos los elementos textuales <input>, <textarea>y <select>con .form-controlestán configurados width: 100%;de forma predeterminada. Envuelva las etiquetas y los controles .form-grouppara lograr un espaciado ó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>

No mezcle grupos de formularios con grupos de entrada

No mezcle grupos de formularios directamente con grupos de entrada . En su lugar, anide el grupo de entrada dentro del grupo de formulario.

formulario en línea

Agregue .form-inlinea su formulario (que no tiene que ser un <form>) para controles alineados a la izquierda y de bloque en línea. Esto solo se aplica a los formularios dentro de las ventanas gráficas que tienen al menos 768 px de ancho.

Puede requerir anchos personalizados

Las entradas y selecciones se han width: 100%;aplicado de forma predeterminada en Bootstrap. Dentro de los formularios en línea, lo restablecemos para width: auto;que varios controles puedan residir en la misma línea. Dependiendo de su diseño, es posible que se requieran anchos personalizados adicionales.

Añade siempre etiquetas

Los lectores de pantalla tendrán problemas con sus formularios si no incluye una etiqueta para cada entrada. Para estos formularios en línea, puede ocultar las etiquetas usando la .sr-onlyclase. Existen otros métodos alternativos para proporcionar una etiqueta para las tecnologías de asistencia, como el aria-labelatributo o aria-labelledby. titleSi ninguno de estos está presente, los lectores de pantalla pueden recurrir al uso del placeholderatributo, si está presente, pero tenga en cuenta que placeholderno se recomienda el uso de como reemplazo de otros métodos de etiquetado.

<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 las clases de cuadrícula predefinidas de Bootstrap para alinear etiquetas y grupos de controles de formulario en un diseño horizontal agregando .form-horizontalal formulario (que no tiene que ser un <form>). Al hacerlo, .form-groups cambia para comportarse como filas de cuadrícula, por lo que no es 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>

Controles compatibles

Ejemplos de controles de formulario estándar admitidos en un diseño de formulario de ejemplo.

Entradas

Control de formulario más común, campos de entrada basados en texto. Incluye compatibilidad con todos los tipos de HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tely color.

Se requiere declaración de tipo

Las entradas solo tendrán un estilo completo si typese declaran correctamente.

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

Grupos de entrada

Para agregar texto o botones integrados antes y/o después de cualquier elemento basado en texto <input>, consulte el componente de grupo de entrada .

área de texto

Control de formulario que admite varias líneas de texto. Cambie rowsel atributo según sea necesario.

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

Casillas de verificación y radios

Las casillas de verificación son para seleccionar una o varias opciones en una lista, mientras que las radios son para seleccionar una opción de muchas.

Las casillas de verificación y las radios deshabilitadas son compatibles, pero para proporcionar un cursor "no permitido" al pasar el mouse sobre el elemento principal <label>, deberá agregar la .disabledclase al elemento principal .radio, .radio-inline, .checkboxo .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>

Casillas de verificación y radios en línea

Use las clases .checkbox-inlineo .radio-inlineen una serie de casillas de verificación o radios para los controles que aparecen en la misma línea.

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

Casillas de verificación y radios sin texto de etiqueta

Si no tiene texto dentro del <label>, la entrada se coloca como cabría esperar. Actualmente solo funciona en radios y casillas de verificación que no están en línea. Recuerde proporcionar algún tipo de etiqueta para las tecnologías de asistencia (por ejemplo, usando 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

Tenga en cuenta que muchos menús de selección nativos, a saber, en Safari y Chrome, tienen esquinas redondeadas que no se pueden modificar a través de border-radiuspropiedades.

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

Para <select>los controles con el multipleatributo, se muestran varias opciones de forma predeterminada.

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

Control estático

Cuando necesite colocar texto sin formato junto a una etiqueta de formulario dentro de un formulario, use la .form-control-staticclase en un archivo <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 enfoque

Eliminamos los outlineestilos predeterminados en algunos controles de formulario y aplicamos un box-shadowen su lugar para :focus.

`:focus`Estado de demostración

La entrada de ejemplo anterior utiliza estilos personalizados en nuestra documentación para demostrar el :focusestado en un archivo .form-control.

Estado deshabilitado

Agregue el disabledatributo booleano en una entrada para evitar las interacciones del usuario. Las entradas deshabilitadas aparecen más claras y agregan un not-allowedcursor.

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

Conjuntos de campos deshabilitados

Agregue el disabledatributo a <fieldset>para deshabilitar todos los controles a la <fieldset>vez.

Advertencia sobre la funcionalidad de enlace de`<a>`

De forma predeterminada, los navegadores tratarán todos los controles <input>de formulario nativos ( <select>y <button>elementos) dentro de un <fieldset disabled>como deshabilitados, lo que evitará las interacciones del teclado y el mouse en ellos. Sin embargo, si su formulario también incluye <a ... class="btn btn-*">elementos, estos solo tendrán un estilo de pointer-events: none. Como se indicó en la sección sobre el estado deshabilitado de los botones (y específicamente en la subsección de elementos de anclaje), esta propiedad CSS aún no está estandarizada y no es totalmente compatible con Opera 18 y versiones anteriores, o en Internet Explorer 11, y ganó No impide que los usuarios del teclado puedan enfocar o activar estos enlaces. Entonces, para estar seguro, use JavaScript personalizado para deshabilitar dichos enlaces.

Compatibilidad entre navegadores

Si bien Bootstrap aplicará estos estilos en todos los navegadores, Internet Explorer 11 y versiones anteriores no admiten completamente el disabledatributo en un archivo <fieldset>. Use JavaScript personalizado para deshabilitar el conjunto de campos en estos 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 solo lectura

Agregue el readonlyatributo booleano en una entrada para evitar la modificación del valor de la entrada. Las entradas de solo lectura aparecen más claras (al igual que las entradas deshabilitadas), pero conservan el cursor estándar.

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

Texto de ayuda

Texto de ayuda a nivel de bloque para controles de formulario.

Asociación de texto de ayuda con controles de formulario

El texto de ayuda debe asociarse explícitamente con el control de formulario con el que se relaciona el uso del aria-describedbyatributo. Esto asegurará que las tecnologías de asistencia, como los lectores de pantalla, anuncien este texto de ayuda cuando el usuario enfoca o ingresa el control.

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

Estados de validación

Bootstrap incluye estilos de validación para estados de error, advertencia y éxito en los controles de formulario. Para usar, agregue .has-warning, .has-erroro .has-successal elemento principal. Cualquier .control-label, .form-controly .help-blockdentro de ese elemento recibirán los estilos de validación.

Transmitir el estado de validación a las tecnologías de asistencia y a los usuarios daltónicos

El uso de estos estilos de validación para indicar el estado de un control de formulario solo proporciona una indicación visual basada en colores, que no se transmitirá a los usuarios de tecnologías de asistencia, como lectores de pantalla, ni a los usuarios daltónicos.

Asegúrese de que también se proporcione una indicación de estado alternativa. Por ejemplo, puede incluir una sugerencia sobre el estado en el <label>texto del control de formulario (como es el caso en el siguiente ejemplo de código), incluir un Glyphicon (con el texto alternativo apropiado usando la .sr-onlyclase; consulte los ejemplos de Glyphicon ) o proporcionando un bloque de texto de ayuda adicional . Específicamente para las tecnologías de asistencia, también se puede asignar un aria-invalid="true"atributo a los controles de formulario no 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 iconos opcionales

También puede agregar iconos de comentarios opcionales con la adición de .has-feedbacky el icono de la derecha.

Los iconos de comentarios solo funcionan con <input class="form-control">elementos de texto.

Iconos, etiquetas y grupos de entrada

Se requiere el posicionamiento manual de los iconos de retroalimentación para entradas sin etiqueta y para grupos de entrada con un complemento a la derecha. Le recomendamos encarecidamente que proporcione etiquetas para todas las entradas por motivos de accesibilidad. Si desea evitar que se muestren las etiquetas, escóndalas con la .sr-onlyclase. Si debe prescindir de las etiquetas, ajuste el topvalor del icono de comentarios. Para grupos de entrada, ajuste el rightvalor a un valor de píxel apropiado según el ancho de su complemento.

Transmitir el significado del icono a las tecnologías de asistencia

Para garantizar que las tecnologías de asistencia, como los lectores de pantalla, transmitan correctamente el significado de un ícono, se debe incluir texto oculto adicional con la .sr-onlyclase y asociarlo explícitamente con el control de formulario relacionado con el uso aria-describedby. Alternativamente, asegúrese de que el significado (por ejemplo, el hecho de que hay una advertencia para un campo de entrada de texto en particular) se transmita de alguna otra forma, como cambiar el texto real <label>asociado con el control de formulario.

Aunque los siguientes ejemplos ya mencionan el estado de validación de sus respectivos controles de formulario en el <label>propio texto, la técnica anterior (usando .sr-onlytexto y aria-describedby) se ha incluido con fines 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>

Iconos opcionales en formularios horizontales y en línea

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

Iconos opcionales con `.sr-only`etiquetas ocultas

Si usa la .sr-onlyclase para ocultar un control de formulario <label>(en lugar de usar otras opciones de etiquetado, como el aria-labelatributo), Bootstrap ajustará automáticamente la posición del icono una vez que se haya agregado.

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

Dimensionamiento de controles

Establezca alturas usando clases como .input-lg, y establezca anchos usando clases de columna de cuadrícula como .col-lg-*.

Talla de altura

Cree controles de formulario más altos o más cortos que coincidan con los tamaños de los botones.

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

Cambie rápidamente el tamaño de las etiquetas y forme controles dentro .form-horizontalagregando .form-group-lgo .form-group-sm.

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

Tamaño de columna

Envuelva las entradas en columnas de cuadrícula, o en cualquier elemento principal personalizado, para imponer fácilmente los anchos deseados.

<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

Utilice las clases de botones en un elemento <a>, <button>o <input>.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Uso específico del contexto

Si bien las clases de botón se pueden usar en elementos <a>y <button>, solo <button>los elementos son compatibles con nuestros componentes de navegación y barra de navegación.

Enlaces que actúan como botones

Si los <a>elementos se usan para actuar como botones, activando la funcionalidad en la página, en lugar de navegar a otro documento o sección dentro de la página actual, también se les debe dar un archivo role="button".

Representación entre navegadores

Como práctica recomendada, recomendamos encarecidamente utilizar el <button>elemento siempre que sea posible . para garantizar la representación coincidente entre navegadores.

Entre otras cosas, hay un error en Firefox <30 que nos impide configurar los botones basados line-heighten <input>-, lo que hace que no coincidan exactamente con la altura de otros botones en Firefox.

Opciones

Utilice cualquiera de las clases de botones disponibles para crear rápidamente 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 a las tecnologías de asistencia

El uso de color para agregar significado a un botón solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido mismo (el texto visible del botón) o se incluya a través de medios alternativos, como texto adicional oculto con la .sr-onlyclase.

Tallas

¿Te apetece botones más grandes o más pequeños? Agregue .btn-lg, .btn-smo .btn-xspara tamaños adicionales.

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

Cree botones de nivel de bloque, aquellos que abarcan todo el ancho de un padre, agregando .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

Los botones aparecerán presionados (con un fondo más oscuro, un borde más oscuro y una sombra insertada) cuando estén activos. Para <button>los elementos, esto se hace a través de :active. Para <a>los elementos, se hace con .active. Sin embargo, puede usar .activeon <button>s (e incluir el aria-pressed="true"atributo) si necesita replicar el estado activo mediante programación.

Elemento de botón

No es necesario agregar :active, ya que es una pseudoclase, pero si necesita forzar la misma apariencia, continúe y agregue .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 anclaje

Agregue la .activeclase a los <a>botones.

Enlace principal Enlace

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

Haga que los botones parezcan imposibles de hacer clic desvaneciéndolos con opacity.

Elemento de botón

Agregue el disabledatributo a los <button>botones.

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

Compatibilidad entre navegadores

Si agrega el disabledatributo a un <button>, Internet Explorer 9 y versiones anteriores mostrarán el texto gris con una sombra de texto desagradable que no podemos corregir.

Elemento de anclaje

Agregue la .disabledclase a los <a>botones.

Enlace principal Enlace

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

Usamos .disabledcomo una clase de utilidad aquí, similar a la .activeclase común, por lo que no se requiere prefijo.

Advertencia de funcionalidad de enlace

Esta clase se usa pointer-events: nonepara intentar deshabilitar la funcionalidad de enlace de <a>s, pero esa propiedad CSS aún no está estandarizada y no es totalmente compatible con Opera 18 y versiones anteriores, o en Internet Explorer 11. Además, incluso en navegadores que admiten pointer-events: none, teclado la navegación no se ve afectada, lo que significa que los usuarios de teclados videntes y los usuarios de tecnologías de asistencia aún podrán activar estos enlaces. Entonces, para estar seguro, use JavaScript personalizado para deshabilitar dichos enlaces.

Imágenes receptivas

Las imágenes en Bootstrap 3 se pueden hacer receptivas mediante la adición de la .img-responsiveclase. max-width: 100%;Esto se aplica height: auto;a display: block;la imagen para que se adapte bien al elemento principal.

Para centrar imágenes que usan la .img-responsiveclase, use .center-blocken lugar de .text-center. Consulte la sección de clases auxiliares para obtener más detalles sobre .center-blockel uso.

Imágenes SVG e IE 8-10

En Internet Explorer 8-10, las imágenes SVG .img-responsivetienen un tamaño desproporcionado. Para solucionar esto, agregue width: 100% \9;donde sea necesario. Bootstrap no aplica esto automáticamente ya que causa complicaciones a otros formatos de imagen.

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

Formas de imagen

Agregue clases a un <img>elemento para diseñar imágenes fácilmente en cualquier proyecto.

Compatibilidad entre navegadores

Tenga en cuenta que Internet Explorer 8 no admite esquinas redondeadas.

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

colores contextuales

Transmita significado a través del color con un puñado de clases de utilidad de énfasis. Estos también se pueden aplicar a los enlaces y se oscurecerán al pasar el mouse, al igual que nuestros estilos de enlace predeterminados.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Tratar con la especificidad

A veces, las clases de énfasis no se pueden aplicar debido a la especificidad de otro selector. En la mayoría de los casos, una solución alternativa suficiente es envolver su texto en un <span>con la clase.

Transmitir significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información denotada por el color sea obvia a partir del contenido mismo (los colores contextuales solo se usan para reforzar el significado que ya está presente en el texto/marcado), o se incluye a través de medios alternativos, como texto adicional oculto con la .sr-onlyclase . .

Fondos contextuales

Similar a las clases de color de texto contextual, establezca fácilmente el fondo de un elemento en cualquier clase contextual. Los componentes de anclaje se oscurecerán al pasar el mouse, al igual que las clases de texto.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Tratar con la especificidad

A veces, las clases de fondo contextuales no se pueden aplicar debido a la especificidad de otro selector. En algunos casos, una solución alternativa suficiente es envolver el contenido de su elemento en un <div>con la clase.

Transmitir significado a las tecnologías de asistencia

Al igual que con los colores contextuales , asegúrese de que cualquier significado transmitido a través del color también se transmita en un formato que no sea puramente de presentación.

Cerrar icono

Utilice el icono de cierre genérico para descartar contenido como modales y alertas.

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

Caretas

Use signos de intercalación para indicar la funcionalidad y la dirección del menú desplegable. Tenga en cuenta que el signo de intercalación predeterminado se invertirá automáticamente en los menús desplegables .

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

flotadores rápidos

Haga flotar un elemento a la izquierda o a la derecha con una clase. !importantse incluye para evitar problemas de especificidad. Las clases también se pueden 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 bloques de contenido

Establece un elemento display: blocky céntralo a través de margin. Disponible como mezcla y 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

Borre fácilmente floats agregando .clearfix al elemento principal . Utiliza el micro clearfix popularizado por Nicolas Gallagher. También se puede utilizar como mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

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

// Usage as a mixin
.element {
  .clearfix();
}

Mostrar y ocultar contenido

Obligue a que un elemento se muestre u oculte ( incluso para lectores de pantalla ) con el uso de .showy .hiddenclases. Estas clases se utilizan !importantpara evitar conflictos de especificidad, al igual que los flotantes rápidos . Solo están disponibles para alternar el nivel de bloque. También se pueden utilizar como mixins.

.hideestá disponible, pero no siempre afecta a los lectores de pantalla y está obsoleto a partir de la v3.0.1. Utilice .hiddeno .sr-onlyen su lugar.

Además, .invisiblese puede usar para alternar solo la visibilidad de un elemento, lo que significa displayque no se modifica y el elemento aún puede afectar el flujo del documento.

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

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

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

Lector de pantalla y contenido de navegación del teclado

Oculte un elemento para todos los dispositivos, excepto los lectores de pantalla con .sr-only. Combine .sr-onlycon .sr-only-focusablepara volver a mostrar el elemento cuando esté enfocado (por ejemplo, por un usuario que solo usa el teclado). Necesario para seguir las mejores prácticas de accesibilidad . También se puede utilizar 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();
}

Reemplazo de imagen

Utilice la .text-hideclase o el mixin para ayudar a reemplazar el contenido de texto de un elemento con una imagen de fondo.

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

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

Para un desarrollo optimizado para dispositivos móviles más rápido, use estas clases de utilidades para mostrar y ocultar contenido por dispositivo a través de una consulta de medios. También se incluyen clases de utilidad para alternar contenido cuando se imprime.

Trate de usarlos de forma limitada y evite crear versiones completamente diferentes del mismo sitio. En su lugar, utilícelos para complementar la presentación de cada dispositivo.

Clases disponibles

Use una sola clase o una combinación de las clases disponibles para alternar el contenido entre los puntos de interrupción de la ventana gráfica.

	Dispositivos extrapequeñosTeléfonos (<768px)	Dispositivos pequeñosTabletas (≥768px)	Dispositivos medianosEscritorios (≥992px)	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 de la versión 3.2.0, las .visible-*-*clases para cada punto de interrupción vienen en tres variaciones, una para cada displayvalor de propiedad CSS que se detalla a continuación.

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

Entonces, para xspantallas extra pequeñas ( ), por ejemplo, las .visible-*-*clases disponibles son: .visible-xs-block, .visible-xs-inliney .visible-xs-inline-block.

Las clases .visible-xs, .visible-sm, .visible-mdy .visible-lgtambién existen, pero están obsoletas a partir de la versión 3.2.0 . Son aproximadamente equivalentes a .visible-*-block, excepto con casos especiales adicionales para alternar <table>elementos relacionados.

Imprimir clases

Al igual que las clases receptivas regulares, utilícelas para alternar contenido para imprimir.

Clases	Navegador	Impresión
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Oculto	Visible
`.hidden-print`	Visible	Oculto

La clase .visible-printtambién existe pero está en desuso a partir de v3.2.0. Es aproximadamente equivalente a .visible-print-block, excepto con casos especiales adicionales para <table>elementos relacionados con -.

Casos de prueba

Cambie el tamaño de su navegador o cárguelo en diferentes dispositivos para probar las clases de utilidad receptivas.

Visible en...

Las marcas de verificación verdes indican que el elemento está visible en su ventana gráfica actual.

Extra Pequeño ✔ Visible en extra pequeño

Pequeña ✔ Visible en pequeño

Medio ✔ Visible en medio

Largo ✔ Visible en grande

Extra pequeño y pequeño ✔ Visible en x-pequeño y pequeño

mediano y grande ✔ Visible en mediano y grande

Extra pequeño y mediano ✔ Visible en x-pequeño y mediano

pequeño y grande ✔ Visible en pequeños y grandes

Extrapequeño y grande ✔ Visible en x-pequeño y grande

pequeño y mediano ✔ Visible en pequeñas y medianas

Escondido en...

Aquí, las marcas de verificación verdes también indican que el elemento está oculto en su ventana gráfica actual.

Extra Pequeño ✔ Oculto en extra pequeño

Pequeña ✔ Oculto en pequeño

Medio ✔ Hidden on medium

Large ✔ Oculto en grande

Extra pequeño y pequeño ✔ Hidden on x-small and small

Medium and large ✔ Oculto en mediano y grande

Extra pequeño y mediano ✔ Hidden on x-small and medium

Small and large ✔ Oculto en pequeños y grandes

Extra small and large ✔ Oculto en x-pequeño y grande

pequeño y mediano ✔ Hidden on small and medium

El CSS de Bootstrap se basa en Less, un preprocesador con funcionalidad adicional como variables, mixins y funciones para compilar CSS. Aquellos que buscan usar los archivos Less de origen en lugar de nuestros archivos CSS compilados pueden hacer uso de las numerosas variables y mixins que usamos en todo el marco.

Las variables de cuadrícula y los mixins se tratan en la sección Sistema de cuadrícula .

Compilando Bootstrap

Bootstrap se puede usar al menos de dos maneras: con el CSS compilado o con los archivos Less de origen. Para compilar los archivos Less, consulte la sección Primeros pasos para saber cómo configurar su entorno de desarrollo para ejecutar los comandos necesarios.

Las herramientas de compilación de terceros pueden funcionar con Bootstrap, pero nuestro equipo central no las admite.

Variables

Las variables se utilizan a lo largo de todo el proyecto como una forma de centralizar y compartir valores de uso común como colores, espaciado o pilas de fuentes. Para obtener un desglose completo, consulte el Personalizador .

Colores

Utilice fácilmente dos esquemas de color: escala de grises y semántico. Los colores en escala de grises brindan acceso rápido a los tonos de negro de uso común, mientras que la semántica incluye varios colores asignados a valores contextuales 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;

Utilice cualquiera de estas variables de color tal como están o reasignarlas a variables más significativas para su proyecto.

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

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

Andamio

Un puñado de variables para personalizar rápidamente los elementos clave del esqueleto de su sitio.

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

Enlaces

Diseñe fácilmente sus enlaces con el color correcto con un solo 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;
  }
}

Tenga en cuenta que @link-hover-colorutiliza una función, otra herramienta increíble de Less, para crear automáticamente el color de desplazamiento correcto. Puede utilizar darken, lighten, saturatey desaturate.

Tipografía

Configure fácilmente su tipo de letra, tamaño de texto, interlineado y más con algunas variables rápidas. Bootstrap también hace uso de estos para proporcionar combinaciones tipográficas fáciles.

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

Iconos

Dos variables rápidas para personalizar la ubicación y el nombre de archivo de sus iconos.

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

Componentes

Los componentes de Bootstrap utilizan algunas variables predeterminadas para establecer valores comunes. Aquí están los más 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;

Mezclas de proveedores

Los mixins de proveedores son mixins para ayudar a admitir múltiples navegadores al incluir todos los prefijos de proveedores relevantes en su CSS compilado.

tamaño de caja

Restablezca el modelo de caja de sus componentes con una sola mezcla. Para obtener más información, consulte este útil artículo de Mozilla .

El mixin está obsoleto a partir de v3.2.0, con la introducción de Autoprefixer. Para preservar la compatibilidad con versiones anteriores, Bootstrap continuará usando el mixin internamente hasta 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

Hoy en día, todos los navegadores modernos admiten la border-radiuspropiedad sin prefijo. Como tal, no hay .border-radius()mezcla, pero Bootstrap incluye atajos para redondear rápidamente dos esquinas en un lado particular de un objeto.

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

Caja de sombras (Gota)

Si su público objetivo utiliza los mejores y más recientes navegadores y dispositivos, asegúrese de utilizar la box-shadowpropiedad por su cuenta. Si necesita soporte para dispositivos Android anteriores (anteriores a v4) e iOS (anteriores a iOS 5), use el mixin obsoleto-webkit para seleccionar el prefijo requerido.

El mixin está obsoleto a partir de la versión 3.1.0, ya que Bootstrap no admite oficialmente las plataformas obsoletas que no admiten la propiedad estándar. Para preservar la compatibilidad con versiones anteriores, Bootstrap continuará usando el mixin internamente hasta Bootstrap v4.

Asegúrese de usar rgba()colores en las sombras de su cuadro para que se mezclen de la mejor manera posible con los 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;
}

Transiciones

Mezclas múltiples para mayor flexibilidad. Establezca toda la información de transición con uno, o especifique un retraso y una duración por separado, según sea necesario.

Los mixins están en desuso a partir de v3.2.0, con la introducción de Autoprefixer. Para preservar la compatibilidad con versiones anteriores, Bootstrap continuará usando los mixins internamente hasta 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;
}

Transformaciones

Gire, escale, traslade (mover) o sesgue cualquier objeto.

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

animaciones

Un solo mixin para usar todas las propiedades de animación de CSS3 en una declaración y otros mixins para propiedades individuales.

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

Opacidad

Establezca la opacidad para todos los navegadores y proporcione una filteralternativa para IE8.

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

Texto del marcador

Proporcione contexto para los controles 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

Genere columnas a través de CSS dentro de un solo 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;
}

Gradientes

Convierta fácilmente dos colores en un degradado de fondo. Avanza más y establece una dirección, usa tres colores o usa un degradado radial. Con una sola mezcla obtienes todas las sintaxis prefijadas que necesitarás.

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

También puede especificar el ángulo de un degradado lineal estándar de dos colores:

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

Si necesita un degradado de estilo de rayas de barbero, también es fácil. Simplemente especifique un solo color y superpondremos una franja blanca translúcida.

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

Sube la apuesta y usa tres colores en su lugar. Establezca el primer color, el segundo color, la parada de color del segundo color (un valor porcentual como 25%) y el tercer color con estos mixins:

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

¡Aviso! Si alguna vez necesita eliminar un degradado, asegúrese de eliminar cualquier elemento específico de IE filterque haya agregado. Puede hacerlo usando el .reset-filter()mixin junto con background-image: none;.

Mezclas de utilidad

Los mixins de utilidad son mixins que combinan propiedades de CSS que de otro modo no estarían relacionadas para lograr un objetivo o tarea específicos.

Clearfix

Olvídese de agregar class="clearfix"a cualquier elemento y, en su lugar, agregue el .clearfix()mixin donde corresponda. Utiliza el micro clearfix de Nicolas Gallagher .

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

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

Centrado horizontal

Centre rápidamente cualquier elemento dentro de su padre. Requiere widtho max-widthpor configurar.

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

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

Ayudantes de tallas

Especifique las dimensiones de un objeto más fácilmente.

// 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 fácilmente las opciones de cambio de tamaño para cualquier área de texto o cualquier otro elemento. El comportamiento predeterminado del navegador es normal ( both).

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

Texto truncado

Trunca fácilmente el texto con puntos suspensivos con una sola mezcla. Requiere que el elemento sea blocko inline-blocknivel.

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

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

imágenes retina

Especifique dos rutas de imagen y las dimensiones de la imagen @1x, y Bootstrap proporcionará una consulta de medios @2x. Si tiene muchas imágenes para servir, considere escribir su imagen de retina CSS manualmente en una sola consulta de medios.

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

Si bien Bootstrap se basa en Less, también tiene un puerto Sass oficial . Lo mantenemos en un repositorio GitHub separado y manejamos las actualizaciones con un script de conversión.

Qué está incluido

Dado que el puerto de Sass tiene un repositorio separado y atiende a una audiencia ligeramente diferente, el contenido del proyecto difiere mucho del proyecto principal de Bootstrap. Esto garantiza que el puerto de Sass sea lo más compatible posible con tantos sistemas basados en Sass.

Sendero	Descripción
`lib/`	Código de gemas de Ruby (configuración de Sass, integraciones de Rails y Compass)
`tasks/`	Scripts de conversión (cambiando ascendente Less a Sass)
`test/`	Pruebas de compilación
`templates/`	Manifiesto del paquete Compass
`vendor/assets/`	Sass, JavaScript y archivos de fuentes
`Rakefile`	Tareas internas, como rake y convert

Visite el repositorio de GitHub del puerto de Sass para ver estos archivos en acción.

Instalación

Para obtener información sobre cómo instalar y usar Bootstrap para Sass, consulte el archivo Léame del repositorio de GitHub . Es la fuente más actualizada e incluye información para usar con proyectos Rails, Compass y Sass estándar.

Bootstrap para Sass

CSS

Visión general

tipo de documento HTML5

Móvil primero

tipografía y enlaces

Normalizar.css

Contenedores

Sistema de red

Introducción

Preguntas de los medios

Opciones de cuadrícula

Ejemplo: apilado en horizontal

Ejemplo: Contenedor de fluido

Ejemplo: móvil y escritorio

Ejemplo: móvil, tableta, escritorio

Ejemplo: envoltura de columna

Restablecimientos de columna de respuesta

Quitar canaletas

Columnas de compensación

Columnas de anidamiento

Ordenación de columnas

Menos mixins y variables

Variables

mezclas

Ejemplo de uso

Tipografía

encabezados

h1. Encabezado de arranque

h2. Encabezado de arranque

h3. Encabezado de arranque

h4. Encabezado de arranque

h5. Encabezado de arranque

h6. Encabezado de arranque

h1. Encabezado Bootstrap Texto secundario

h2. Encabezado Bootstrap Texto secundario

h3. Encabezado Bootstrap Texto secundario

h4. Encabezado Bootstrap Texto secundario

h5. Encabezado Bootstrap Texto secundario

h6. Encabezado Bootstrap Texto secundario

Copia de cuerpo

Texto principal del cuerpo

Construido con menos

Elementos de texto en línea

texto marcado

Texto eliminado

Texto tachado

texto insertado

Texto subrayado

Texto pequeño

Audaz

Cursiva

Elementos alternativos

Clases de alineación

Clases de transformación

abreviaturas

abreviatura básica

inicialismo

direcciones

cotizaciones en bloque

Cita en bloque predeterminada

Opciones de cotización en bloque

Nombrar una fuente

Pantallas alternativas

Liza

desordenado

Ordenado

sin estilo

En línea

Descripción

Descripción horizontal

Truncamiento automático

Código

En línea

Entrada del usuario

Bloque básico

Variables

Salida de muestra

Mesas

Ejemplo básico

filas de rayas

`:focus`Estado de demostración

Advertencia sobre la funcionalidad de enlace de`<a>`

Iconos opcionales con `.sr-only`etiquetas ocultas