Resumen

Conozca los detalles de las piezas clave de la infraestructura de Bootstrap, incluyendo nuestro enfoque para un desarrollo de internet mejor, más rápido y más potente.

Tipo de doc de HTML5

Bootstrap utiliza ciertos elementos de HTML y propiedades de CSS que necesitan usar el tipo de doc de HTML5. Colóquelo al inicio de todos sus proyectos.

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

Enfoque inicial en dispositivos móviles

En Bootstrap 2, agregamos estilos compatibles con móviles opcionales de aspectos clave de la estructura. En Bootstrap 3, hemos vuelto a escribir el proyecto para que sea compatible con móviles desde el inicio. En vez de agregar estilos opcionales de móviles, están incorporados en la parte nuclear. En realidad, Bootstrap es primero para móviles. Los primeros estilos móviles pueden verse en toda la librería en vez de incluirse en archivos separados.

Para garantizar la generación de gráficos correcta y un funcionamiento correcto de zoom de toque de pantalla, agregue la meta etiqueta de ventanilla de observación a su<head>.

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

Puede desactivar las opciones de zoom en dispositivos móviles al agregar user-scalable=noa la meta etiqueta de ventanilla de observación. Esto desactiva zoom, lo que significa que los usuarios solo pueden desplazarse. Hace que su portal se parezca más una aplicación nativa. En general, no recomendamos esto para todo portal, ¡así que úselo con precaución!

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

Bootstrap establece la pantalla global básica, tipografía y estilos de enlace básicos. Específicamente, hace lo siguiente:

  • Configurar background-color: #fff; en el body.
  • Utilizar los atributos @font-family-base, @font-size-base y @line-height-base como nuestra base tipográfica.
  • Configure el color global de enlaces mediante @link-color y aplique los subrayados de enlace solamente en :hover.

Esto estilos se encuentran en scaffolding.less.

Normalize.css

Para una mejor generación de gráficos en varios navegadores, utilizamos Normalize.css, un proyecto desarrollado por Nicolas Gallagher y Jonathan Neal

Contenedores

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

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

Use .container-fluid for a full width container, spanning the entire width of your viewport.

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

Sistema de cuadrícula

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Introducción

Se utilizan sistemas de cuadrícula para crear distribuciones de página por medio de una serie de filas y columnas que albergan su contenido. El sistema de cuadrícula de Bootstrap funciona así:

  • Se deben colocar filas 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.
  • Se debe colocar el contenido entre columnas y solamente estas pueden ser los hijos inmediatos de las filas.
  • Las clases predefinidas de cuadrícula tales como .row y .col-xs-4 están disponibles para crear distribuciones de cuadrícula rápidamente. Los mixins de Less pueden aplicarse para distribuciones más semánticas.
  • Las columnas crean medianiles (espacios entre el contenido de columnas) mediante padding. Ese relleno se compensa en filas para la primera y última columna mediante un margen negativo en .row.
  • The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
  • Se crean las columnas de cuadrícula al especificar la cantidad doce columnas disponibles que desee generar. Por ejemplo, tres columnas iguales usarían tres .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Las clases de cuadrícula se aplican a dispositivos con anchos de pantalla mayores o iguales a los de punto de quiebre y reemplazan a las clases de cuadrícula que se usan en los dispositivos más pequeños. Por tanto, al aplicar cualquier clase .col-md- a un elemento no solo que se afectará su estilo en dispositivos medianos, sino también en grandes, si no hay una clase .col-lg- presente.

Vea los ejemplos que aplican estos principios a su código.

Consultas de medios

Usamos las siguientes consultas de medio en nuestros archivos Less para crear los puntos de quiebre clave del 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 medio para incluir max-width con el fin de limitar CSS a un conjunto más estrecho 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 los aspectos del sistema de cuadrícula de Bootstrap funcionan en múltiples dispositivos, gracias a un cuadro conveniente.

Dispositivos muy pequeños Teléfonos (<768px) Dispositivos pequeños Tabletas (≥768px) Dispositivos medianos Escritorios (≥992px) Dispositivos grandes Escritorios(≥1200px)
Comportamiento de la cuadrícula Horizontal en todo momento Comprimido al inicio, horizontal encima de los puntos de corte
Ancho de contenedor Ninguno (automático) 750px 970px 1170px
Prefijo de la clase .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Ancho de columna Automático ~62px ~81px ~97px
Ancho de separación 30px (15px en cada lado de columna)
Permite anidado
Desplazamientos
Cambio de orden de columnas

Ejemplo: apilado a horizontal

Al utilizar un conjunto de clases de cuadrícula .col-md-*, usted puede crear un sistema básico de cuadrícula que inicialmente se apila en dispositivos móviles y tabletas (desde las más pequeñas a pequeñas), antes de volverse horizontales en dispositivos de escritorio (medianos). Coloque columnas de cuadrícula en cualquier .row.

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

Ejemplo: contenedor fluido

Convierta cualquier distribución de cuadrícula de ancho fijo en uno de ancho completo al cambiar su .container más externo a .container-fluid.

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

Ejemplo: dispositivos móviles y de escritorio

¿No desea que sus columnas sencillamente se apilen en dispositivos más pequeños? Utilice las clases de cuadrícula de dispositivos más pequeños y medianos al agregar .col-xs-*.col-md-* a sus columnas. Vea el ejemplo siguiente para lograr una idea más clara sobre su funcionamiento.

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

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

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

Ejemplo: dispositivos móviles y de escritorio y tabletas

Básese en el ejemplo anterior para crear incluso distribuciones más dinámicas y potentes con clases de tableta .col-sm-*.

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

Example: Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<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>

Reconfiguración para columnas con respuestas

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

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

Desplazamiento de columnas

Mueva las columnas hacia la derecha, usando clases .col-md-offset-*. Estas clases aumentan el margen izquierdo de una columna por * columnas. Por ejemplo, .col-md-offset-4 mueve .col-md-4 en lo que corresponde a cuatro columnas.

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

Columnas anidadas

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 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>

Cambio de orden de columnas

Puede fácilmente cambiar el orden de nuestras columnas de cuadrícula preconfiguradas con las clases de modificador .col-md-push-* y .col-md-pull-*.

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

Mixins de Less y variables

In addition to prebuilt grid classes for fast layouts, Bootstrap includes Less variables and mixins for quickly generating your own simple, semantic layouts.

Variables

Las variables determinan la cantidad de columnas, el ancho de las separaciones y los puntos de consultas de medios para iniciar las columnas variables. Las utilizamos para generar las clases de cuadrículas predefinidas indicadas antes, además de los siguientes mixin personalizados.

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

Mixins

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

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

Usted puede modificar las variables con sus propios valores personalizados o solo usar los mixin con sus valores predeterminados. Este es un ejemplo del uso de configuraciones predeterminadas para crear un esquema de dos columnas con un espacio entre estas.

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

Tipografía

Encabezados

Todos los encabezados de HTML, <h1> a <h6> están disponibles. Las clases .h1 a .h6 también pueden usarse, cuando desee que el estilo de fuente de un encabezado coincida, pero todavía quiere que su texto se despliegue en línea.

h1. Encabezado de Bootstrap

Seminegrilla 36px

h2. Encabezado de Bootstrap

Seminegrilla 30px

h3. Encabezado de Bootstrap

Seminegrilla 24px

h4. Encabezado de Bootstrap

Seminegrilla 18px
h5. Encabezado de Bootstrap
Seminegrilla 14px
h6. Encabezado de Bootstrap
Seminegrilla 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 un texto secundario más liviano en cualquier encabezado con una <small>etiqueta genérica o la clase .small.

h1. Encabezado de Bootstrap texto secundario

h2. Encabezado de Bootstrap texto secundario

h3. Encabezado de Bootstrap Texto secundario

h4. Encabezado de Bootstrap texto secundario

h5. Encabezado de Bootstrap texto secundario
h5. Encabezado de Bootstrap texto secundario
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Texto del cuerpo

El font-size global predeterminado de Bootstrap es 14px, con una altura de línea line-height de 1.428. Esto se aplica a <body> y a todos los párrafos. Además, <p> (párrafos) recibe un margen inferior de la mitad de su altura de línea calculada (10px de forma predeterminada).

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.

Maecenas 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 inicial del cuerpo

Haga que se destaque un párrafo al agregar .lead.

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

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

Creado con LESS

La escala de tipografía se basa en dos variables Less en variables.less: @font-size-base y @line-height-base. El primero es el tamaño de fuente básico usado en todo lado y el segundo es la altura de línea básica. Utilizamos estas variables y alguna matemática sencilla para crear márgenes, rellenos y alturas de línea de todas nuestras fuentes y mucho más. Si los personaliza, Bootstrap se adapta.

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

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

Deleted text

For indicating blocks of text that have been deleted use the <del> tag.

This line of text is meant to be treated as deleted text.

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

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

This line of text is meant to be treated as no longer accurate.

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

Inserted text

For indicating additions to the document use the <ins> tag.

This line of text is meant to be treated as an addition to the document.

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

Underlined text

To underline text use the <u> tag.

This line of text will render as underlined

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

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

Texto pequeño

Para quitar el énfasis de texto alineado o de bloques, use la etiqueta <small> para configurar el texto a 85 % del tamaño de su predecesor. Los elementos de encabezado reciben su propio font-size para elementos anidados<small>.

Alternativamente, puede usar un elemento alineado con .small en lugar de <small>.

Esta línea de texto debe tratarse como texto de tamaño pequeño.

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

Negrillas

Para enfatizar una sección de texto con un peso mayor de las fuentes.

El siguiente fragmento de texto se despliega como texto en negrillas.

<strong>rendered as bold text</strong>

Cursivas

Sirve para enfatizar una sección de texto con cursivas.

El siguiente fragmento de texto se despliega en cursivas.

<em>rendered as italicized text</em>

Elementos alternativos

Siéntase libre de usar <b> y <i> en HTML5. <b> sirve para destacar frases y palabras sin mostrar una importancia adicional, mientras que <i> se usa principalmente para voz, términos técnicos, etc.

Clases de alineación

Vuelva a alinear fácilmente el texto con respecto a componentes con clases de alineación de texto.

Texto alineado a la izquierda

Texto alineado en el centro

Texto alineado a la derecha

Texto justificado

No wrap text.

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

Transformation classes

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

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

Abreviaturas

La implementación estilizada del elemento <abbr> de HTML para abreviaturas y siglas sirve para que se muestre una versión ampliada, cuando el ratón repose encima. Las abreviaturas con un atributo title tienen un borde inferior con pequeños puntos. Cuando el ratón reposa encima se provee contexto adicional que sirve de ayuda.

Abreviatura básica

Si desea que se despliegue texto ampliado cuando se reposa el ratón por mucho tiempo en una abreviatura, incluya el atributo title con el elemento <abbr>.

Una abreviatura del atributo de palabra es attr.

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

Abreviatura más pequeña

Agregue .initialism a una abreviatura si desea un tamaño de fuente levemente más pequeño.

HTML es lo mejor que se ha creado después del pan en tajadas.

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

Direcciones

Se presenta información de contacto para el predecesor más cercano o para todo el cuerpo de trabajo. Mantenga el formato usando <br> al final de todas las líneas.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Nombre completo
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Bloques de citas

Para citas correspondientes a bloques de contenido de otra fuente incluidos en su documento.

Bloque de citas predeterminado

Envuelva <blockquote> alrededor de to HTML como cita. Para comillas rectas, recomendamos <p>.

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

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

Opciones de bloques de citas

Los cambios de estilo y contenido para variaciones sencillas de un <blockquote> común.

Cómo 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. Integer posuere erat a ante.

Someone famous in Título de la 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>

Despliegues alternativos

Agregue .blockquote-reverse para un bloque de citas con contenido alineado a la derecha.

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

Someone famous in Título de la fuente
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listas

Sin orden

Una lista de ítems en la que el orden no importa explícitamente.

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

Ordenado

Una lista de ítems para la cual el orden importa explícitamente.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Sin estilo

Quite el list-stylepredeterminado y el margen izquierdo de los ítems de listas (solamente los hijos inmediatos).Esto solo se aplica a los ítems de lista de los hijos inmediatos, lo que significa que deberá agregar la clase también para cualquier lista anidada.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

Alineado

Coloque todos los ítems de lista en una sola línea con display: inline-block; y agregue algo de relleno liviano.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<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 los términos.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Descripción horizontal

Logre que los términos y descripciones de <dl> se alineen lateralmente. Inicialmente se apilan, como <dl> predeterminados, pero cuando se expande la barra de navegación, también se extienden estos términos y descripciones.

Listas de descripción
Una lista de descripción es perfecta para definir los términos.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Truncado automático

Las listas de descripción horizontales truncarán los términos que son demasiado largos para caber en la columna izquierda con text-overflow. En las ventanillas de observación más estrechas, se desplegarán los elementos apilados, de la manera predeterminada.

Código

Alineado

Envuelva los fragmentos de código alineados con <code>.

Por ejemplo, se debe envolver <section> como alineado.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Texto digitado por usuarios

Utilice <kbd> para indicar ítems que se digitan normalmente con un teclado.

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

Bloque básico

Utilice <pre> para varias líneas de código. Asegúrese de desactivar cualquier corchete cuadrado del código, para lograr un despliegue correcto.

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

Opcionalmente, puede agregar la clase .pre-scrollable, que fijará una altura máxima de 350px y proveerá una barra de desplazamiento en el eje de las "y".

Variables

For indicating variables use the <var> tag.

y = mx + b

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

Sample output

For indicating blocks sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program.

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

Cuadros

Ejemplo básico

Para estilos básicos o relleno liviano y solamente divisores horizontales, agregue la clase de base .table a cualquier <table>. Puede parecer muy redundante, pero debido al uso generalizado de cuadros para otros plug-in como calendarios y seleccionadores de fecha, decidimos aislar nuestros estilos de cuadro personalizados.

# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

Filas marcadas con franjas

Utilice .table-striped para agregar franjas de cebra a cualquier fila de cuadro del <tbody>.

Compatibilidad con varios navegadores

Los cuadros con franjas logran su estilo mediante el seleccionador de CSS :nth-child, que no está disponible en Internet Explorer 8.

# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

Cuadro con bordes

Agregue .table-bordered para los bordes de todos los lados del cuadro y las celdas.

# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

Filas con inform.al desplazarse el ratón

Agregue .table-hover para permitir un estado de desplazamiento del ratón en las filas de cuadro en el <tbody>.

# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

Cuadro condensado

Agregue .table-condensed para hacer que los cuadros sean más compactos, al disminuir a la mitad el relleno de celdas.

# Nombre Apellido Nombre de usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

Clases contextuales

Utilice clases contextuales para colorear las filas de cuadros o celdas individuales.

Clase Descripción
.active Aplica el color de desplazamiento del ratón a una fila o celda específicas.
.success Indica una acción exitosa o positiva.
.info Indica un cambio o acción informativos neutrales.
.warning Muestra una advertencia que puede hacer falta solucionar.
.danger Indica un acción peligrosa o potencialmente negativa
# Encabezado de columna Encabezado de columna Encabezado de columna
1 Contenido de columna Contenido de columna Contenido de columna
2 Contenido de columna Contenido de columna Contenido de columna
3 Contenido de columna Contenido de columna Contenido de columna
4 Contenido de columna Contenido de columna Contenido de columna
5 Contenido de columna Contenido de columna Contenido de columna
6 Contenido de columna Contenido de columna Contenido de columna
7 Contenido de columna Contenido de columna Contenido de columna
8 Contenido de columna Contenido de columna Contenido de columna
9 Contenido de columna Contenido de columna Contenido de 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>

Cuadros con respuestas

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Firefox and fieldsets

Firefox has some awkward fieldset styling involving width that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we don't provide in Bootstrap:

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

For more information, read this Stack Overflow answer.

# Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro
1 Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro
2 Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro
3 Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro
# Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro Encabezado de cuadro
1 Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro
2 Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro
3 Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro Celda de cuadro
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Formas

Ejemplo básico

Los controles de forma individuales reciben algo de estilos globales. Todos los elementos textuales <input>, <textarea> y<select> con .form-control se configuran como width: 100%;, de forma predeterminada. Envuelva los rótulos y controles en .form-group para un espaciado óptimo.

Ejemplo de texto de ayuda de nivel de bloque aquí.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter 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 combine grupos de forma con los de digitación.

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

Forma alineada

Agregue .form-inline a su <form> para controles alineados a la izquierda y de bloque alineado.Esto solo se aplica a las formas de las ventanillas de observación que tienen un ancho de por lo menos 768px.

Se requieren anchos personalizados.

Las áreas de entradas, selecciones y textos son 100% de ancho de forma predeterminada en Bootstrap. Para usar la forma alineada, debe fijar un ancho en los controles de forma utilizados internamente.

Siempre añada etiquetas

Sus formas no se desplegarán correctamente en lectores de pantalla, si no incluye un rótulo para cada ítem digitado, Para estos formularios alineados, puede ocultar los rótulos utilizando la clase .sr-only.

@
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input class="form-control" type="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" 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>

Forma horizontal

Utilice las clases predefinidas de cuadrícula de Bootstrap para alinear los rótulos y grupos de controles de formas en una distribución horizontal, al agregar .form-horizontal a la forma. Al hacerlo, se cambia .form-group para que se comporte como filas de cuadrícula. En este caso, no se necesita .row.

<form class="form-horizontal" role="form">
  <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 estándar de formas compatibles presentados en un esquema de forma de ejemplo

Ítems digitados

Los campos más comunes de digitación basados en texto para controlar formas incluyen compatibilidad para todos los tipos de HTML5 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel y color.

Declaración de tipos requerida

Los datos digitados tendrán estilos completos solamente si se declara adecuadamente su type.

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

Grupos de datos de digitación

To add integrated text or buttons before and/or after any text-based <input>, check out the input group component.

Área de texto

El control de forma que permite usar varias líneas de texto. Cambie el atributo rowssegún sea necesario.

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

Casilleros de verificación y botones de radio

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or <fieldset>.

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>

Inline checkboxes and radios

Utilice las clases .checkbox-inline o .radio-inline en una serie de casilleros o botones de radio para que los controles aparezcan 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>

Selecciones

Utilice la opción predeterminada o agregue multiplepara desplegar varias opciones a la vez.


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

<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 normal al lado de un rótulo de forma en una forma horizontal, utilice la clase .form-control-static en un <p>

correo@example.com

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</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>

Enfoque para entrada

Quitamos los estilos predeterminados outline de algunos controles de forma y aplicamos un box-shadow de reemplazo para :focus.

Estado de demo de :focus

Los datos digitados del ejemplo anterior utilizan estilos personalizados en nuestra documentación para demostrar el estado de :focus de un .form-control.

Entradas desactivadas

Add the disabled boolean attribute on an input to prevent user input and trigger a slightly different look.

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

Conjuntos de campos desactivados

Agregue el atributo disabled a un conjunto de campo <fieldset> para desactivar todos los controles del <fieldset> a la vez.

Caveat about link functionality of <a>

Our styles use pointer-events: none to try to disable the link functionality of <a class="btn btn-*"> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

Compatibilidad con varios navegadores

Si bien Bootstrap aplicará estos estilos en todos los navegadores, Internet Explorer 9 y anteriores no permiten el uso del atributo disabled en un <fieldset>. Utilice JavaScript para desactivar el conjunto de campos de estos navegadores.

<form role="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>

Readonly inputs

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

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

Estados de validación

Bootstrap incluye estilos de validación para estados de error, advertencia y éxito de los controles de forma. Para usarlo, agregue .has-warning, .has-error o .has-success al elemento padre. Cualquier .control-label, .form-control y .help-block dentro de ese elemento recibirán los estilos de validación.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</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>

Con iconos opcionales

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

Dato digitado con éxito 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">
  <span class="glyphicon glyphicon-ok form-control-feedback"></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">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></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">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Optional icons in horizontal and inline forms

Dato digitado con éxito class="form-horizontal" role="form">
  <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">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
Dato digitado con éxito class="form-inline" role="form">
  <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">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Optional icons with hidden .sr-only labels

For form controls with no visible label, add the .sr-only class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.

<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">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

Control sizing

Tamaños de controles

Fije las alturas con clases como .input-lg y los anchos con clases de columnas de cuadrícula como, por ejemplo, .col-lg-*.

Tamaños de altos

Cree controles de forma más altos o cortos, que coincidan con los tamaños de botón.
<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>

Horizontal form group sizes

Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.

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

Column sizing

Tamaños de columnas

Encapsule las entradas en columnas de cuadrícula, o cualquier elemento padre personalizado, para fácilmente imponer los anchos requeridos.
<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>

Help text

Texto de ayuda

Texto de ayuda a nivel de bloque para los controles de formas
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Botones

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>

Tamaños

¿Desea botones más grandes o más pequeños? Agregue .btn-lg, .btn-sm o .btn-xs en los cuales hay 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, que se extienden en el ancho completo de un predecesor, y para esto agregue .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

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s should you need to replicate the active state programmatically.

Elemento de botón

No hace falta añadir :active porque es una pseudo-clase. Pero si necesita forzar la misma apariencia, adelante, puede agregar .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 clase .active a los botones <a>.

Enlace primario 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 desactivado

Al desvanecer los botones hasta un 50% del color, no se podrá hacer clic en los mismos.

Elemento de botón

Agregue el atributo disabled a los botones <button>.

<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 con varios navegadores

Si usted agregar el atributo disabled a <button>, Internet Explorer 9 y anteriores, el texto se vuelve gris con una sombra poco atractiva, que no podemos solucionar.

Elemento de anclaje

Agregue la clase .disabled a los botones <a>.

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

Utilizamos .disabled como una clase utilitaria, en este caso, que es similar a la clase común .active. Por tanto, no se requiere un prefijo.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.

Uso específico según contexto

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

Etiquetas de botones

Utilice las clases de botón en un elemento <a>, <button> o <input>.

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

Despliegue en varios navegadores

Como mejor práctica, recomendamos enfáticamente utilizar el elemento <button> cuando sea posible para garantizar la generación de gráficos correspondiente de navegadores.

Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Imágenes

Imágenes con respuestas

Las imágenes de Bootstrap 3 pueden modificarse para que tenga reacciones, al agregar la clase .img-responsive. Esto aplica max-width: 100%; y height: auto; a la imagen para que se expanda o contraiga bien según el elemento padre.

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

Image shapes

Añada clases a un elemento <img> para fácilmente estilizar imágenes en cualquier proyecto.

Compatibilidad con varios navegadores

Recuerde que Internet Explorer 8 no permite el uso de esquinas redondas.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Clases de ayudador

Colores contextuales

Exprese el significado con colores gracias a un juego de clases de utilitario de énfasis. También se pueden aplicar a enlaces y hará que los elementos se oscurezcan cuando el ratón se deslizar por encima, 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.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Cómo manejar aspectos específicos.

A veces no se pueden aplicar clases de énfasis debido a las características específicas de otro seleccionador. En casi todos los casos, una posible solución es encapsular su texto en un <span> con la clase.

Fondos contextuales

De forma similar a las clases de color de texto contextual, se puede fijar fácilmente el fondo de un elemento con respecto a cualquier clase contextual. Los componentes de anclaje se oscurecen cuando se desliza el ratón por encima, al igual que sucede con las clases de texto.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

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

Cómo manejar aspectos específicos.

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Icono para cerrar

Utilice el icono genérico para cerrar que desecha contenido como elementos modales y alertas.

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

Caret (circunflejo)

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

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

Flotaciones rápidas

Flote un elemento a la izquierda o derecha con una clase. Se incluye !important para evitar asuntos de características específicas. También se pueden usar las clases 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();
}

No se puede usar en las barras de navegación

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

Bloques de contenido centrado

Fije un elemento como display: block y céntrelo mediante margin. Está disponible como un mixin y clase.

<div class="center-block">...</div>
// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

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

Mostrar y ocultar contenido

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Además, puede usarse .invisible para conmutar solamente la visibilidad de un elemento, lo que significa que su display no se modifica y el elemento puede todavía afectar el flujo del documento.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

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

Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as 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 imágenes

Aplique la clase .text-hide o 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();
}

Utilitarios para respuestas

Para desarrollar rápidamente los componentes más compatibles con móviles, utilice estas clases de utilitarios que ocultan y muestran contenido por dispositivo, mediante consultas de medios. También se incluyen clases de utilitarios para activar o desactivar el contenido de la impresión.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Clases disponibles

Utilice las clases disponibles, por sí solas o combinadas, para activar / desactivar contenido en todos los puntos de corte de las ventanillas.

Dispositivos muy pequeños Teléfonos (<768px) Dispositivos pequeños Tabletas (≥768px) Dispositivos medianos Escritorios (≥992px) Dispositivos grandes Escritorios(≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Clases de impresión

De forma similar a las clases de respuestas normales, utilícelas para activar / desactivar contenido de impresión.

Classes Navegador Impresión
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Casos de prueba

Cambie el tamaño de su navegador o cargue en distintos dispositivos para testear las clases de utilitarios con respuestas.

Visible en...

Los vistos verde indican que el elemento se puede ver en la ventanilla actual.

✔ Visible en muy pequeño
✔ Visible en pequeño
Mediano ✔ Visible en el mediano
✔ Visible on large
✔ Visible en muy pequeño y pequeño
✔ Visible en mediano y grande
✔ Visible en muy pequeño y mediano
✔ Visible en pequeño y grande
✔ Visible en muy pequeño y grande
✔ Visible en pequeño y mediano

Oculto en,,,

Aquí, los vistos verde también indican que el elemento está oculto en su ventanilla actual.

✔ Oculto en muy pequeño
✔ Oculto en pequeño
Mediano ✔ Oculto en el mediano
✔ Oculto en grande
✔ Oculto en muy pequeño y pequeño
✔ Oculto en mediano y grande
✔ Oculto en muy pequeño y mediano
✔ Oculto y pequeño y grande
✔ Oculto en muy pequeño y grande
✔ Oculto en pequeño y mediano

Uso de Less

El CSS de Bootstrap se basó en Less, un preprocesador con funcionalidad adicional como variables, mixin y funciones para compilar CSS. Si buscan usar archivos de fuente de Less en vez de nuestros archivos compilados de CSS, pueden utilizar las diversas variables y mixin que se aplican en toda la estructura de Bootstrap.

Grid variables and mixins are covered within the Grid system section.

Compilación de Bootstrap

Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.

Las herramientas de terceros para compilación pueden funcionar con Bootstrap, pero nuestro equipo principal no brinda soporte técnico para estas.

Variables

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

Colores

Utilice fácilmente dos esquemas de color, la escala de grises y el semántico. Los colores de escala de grises permiten un rápido acceso a tonos de negro usados comúnmente, mientras que el semántico 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: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Puede usar cualquiera de estas variables de color tal como existen 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;
}

Scaffolding (creación de estructuras comunes)

Un juego de variables para rápidamente personalizar los elementos clave de su esquema básico de portal.

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

Cree fácilmente un estilo para 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;
  }
}

Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

Tipografía

Puede fácilmente configurar su tipografía, tamaño de texto, interlineado y más con unas pocas variables rápidas. Bootstrap las aplica para acceder a mixin tipográfico sin dificultades.

@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 con sus iconos.

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

Componentes

Los componentes de todo Bootstrap utilizan algunas variables predeterminadas para configurar los valores comunes. Esto son los más usados.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Mixin de proveedores

Los mixin de proveedores sirven para permitir la compatibilidad con varios navegadores al incluir todos los prefijos pertinentes en su CSS compilado.

Box-sizing

Reconfigure el modelo de caja de sus componentes con un solo mixin. Si desea conocer el contexto, revise un artículo útil de Mozilla.

The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until 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

Actualmente, todos los navegadores modernos permiten el uso de la propiedad sin prefijo border-radius. Por tanto, no hay un mixin .border-radius(), pero Bootstrap incluye accesos directos para redondear rápidamente dos esquinas de un lado específico 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;
}

Sombras (paralelas) de caja

Si su público meta está usando los navegadores y dispositivos más recientes y mejores, asegúrese de solo usar la propiedad box-shadowpor sí sola. Si necesita compatibilidad con una versión previa de Android (antes de v4) y dispositivos iOS anteriores (anteriores a iOS 5) use el mixin ya no actualizado para conseguir el prefijo requerido -webkit.

El mixin ya no se está actualizando desde la versión 3.1.0, porque Bootstrap no es oficialmente compatible con plataformas desactualizadas que no son compatibles con la propiedad estándar. Para mantener la compatibilidad con versiones anteriores, Bootstrap continuará usando el mixin internamente hasta su versión 4.

Asegúrese de usar los colores rgba() en sus sombras de caja para que puedan combinarse sin problemas como fondos posibles.

.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

Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until 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

Girar, escalar, mover o inclinar cualquier objeto.

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animaciones

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

The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacidad

Fije la opacidad para todos los navegadores y provea una solución de filter para IE8.

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

Texto de marcador de posición

Provea contexto para los controles de forma 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 mediante CSS en 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 cualesquiera en un gradiente de fondo. Logre un mayor avance y fije una dirección. Utilice tres colores o una gradiente radial. Con un solo mixin consigue todas las sintaxis prefijas que usted podrá requerir.

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

Puede también indicar el ángulo para una gradiente lineal estándar de dos colores.

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

Si necesita un estilo de franja de peluquero, esto también es fácil. Solo especifique un color y se colocará encima una franja blanca transparente.

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

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

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

¡Información adicional! Si alguna vez requiere quitar una gradiente asegúrese de quitar cualquier filter específico de IE, que pudiera haber agregado. Lo puede hacer al utilizar un mixin .reset-filter() junto con background-image: none;.

Mixin de utilitarios

Los mixin de utilitario son aquellos que combinan propiedades de CSS no relacionadas por otros motivos con el fin de lograr una tarea o meta específicas.

Clearfix

Olvide agregar class="clearfix" a cualquier elemento y más bien añada el mixin .clearfix(), si fuera adecuado. Se utiliza el micro clearfix de Nicolas Gallager

// 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 la configuración de width o max-width.

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

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

Ayudadores para fijar tamaños

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

Configure fácilmente las opciones de cambio de tamaños para cualquier área de texto, o cualquier otro elemento. El comportamiento de navegador normal es el predeterminado (both).

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

Cómo truncar texto

Puede truncar fácilmente el texto con puntos suspensivos, gracias a un solo mixin. Hace falta aplicar al elemento un nivel de block o inline-block.

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

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

Imágenes de retina

Especifique dos rutas de imagen y las dimensiones de imagen @1x y Bootstrap proveerá una consulta de medios @2x. Si tiene muchas imágenes para servir, considere codificar manualmente su CSS de imagen de retira 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);
}

Uso de Sass

Si bien Bootstrap se basa en Less, también tiene una conversión oficial de Sass. La mantenemos actualizada en un repositorio separado de GitHub y manejamos las actualizaciones con pequeños programas de conversión.

Lo que se incluye

Debido a que la conversión de Sass está en un repositorio separado y brinda servicios a un público ligeramente distinto, los contenidos del proyecto son muy diferentes del proyecto principal de Bootstrap. Esto garantiza que la conversión de Sass sea lo más compatible posible con la mayoría de sistemas basados en Sass.

Ruta Descripción
lib/ Código de Ruby Gem (configuración de Sass e integraciones de Rails y Compass)
tasks/ Macros de conversión (para transformar Less principal a Sass)
test/ Pruebas de compilación
templates/ Declaración del paquete de Compass
vendor/assets/ Sass, JavaScript y archivos de fuente
Rakefile Tareas internas como cambios y conversiones

Visite el repositorio de GitHub de conversión de Sass para revisar su funcionamiento.

Instalación

Para 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 usarse con Rails, Compass y proyectos estándar de Sass.

Bootstrap para Sass