Maquetación con Bootstrap

1 Resumen general

1.1 Enfoque móvil primero

Para garantizar una representación adecuada y el zoom táctil, es necesario agregar la etiqueta meta del viewport dentro de <head>.

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

En navegadores de dispositivos móviles, desactivar la función de zoom (zooming) para el viewport estableciendo el atributo meta como user-scalable=no. Esto permite que los usuarios solo puedan desplazarse por la pantalla, haciendo que su sitio web se sienta más como una aplicación nativa. Tenga en cuenta que no recomendamos esta función para todos los sitios web, dependiendo de sus necesidades específicas.

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

1.2 Normalize.css

Bootstrap incluye Normalize.css para normalizar estilos entre navegadores.

1.3 Contenedores de diseño

Bootstrap requiere que el contenido de la página y el sistema de cuadrícula estén envueltos en un contenedor .container. Ofrecemos dos clases para este propósito. Tenga en cuenta que debido a propiedades como padding, estas clases de contenedor no se pueden anidar.

La clase .container se utiliza para contenedores de ancho fijo con diseño responsivo.

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

La clase .container-fluid se utiliza para contenedores de ancho completo que ocupan todo el viewport.

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

2 Sistema de cuadrícula

Bootstrap proporciona un sistema de cuadrícula fluido y responsivo, priorizando dispositivos móviles. A medida que aumenta el tamaño de la pantalla o viewport, el sistema se divide automáticamente en hasta 12 columnas.

2.1 Introducción al sistema de cuadrícula

El sistema de cuadrícula se utiliza para crear diseños de página mediante combinaciones de filas (row) y columnas (column), donde se puede colocar el contenido. A continuación, se explica cómo funciona el sistema de cuadrícula de Bootstrap:

Las "filas" deben estar contenidas en un .container (ancho fijo) o .container-fluid (ancho completo) para darles la alineación y relleno adecuados.
Las "columnas" se crean horizontalmente dentro de una "fila".
El contenido debe colocarse dentro de las "columnas", y solo las "columnas" pueden ser elementos directos de una "fila".
Clases predefinidas como .row y .col-xs-4 se pueden usar para crear rápidamente diseños de cuadrícula. También se pueden usar los mixins definidos en el código fuente de Bootstrap para crear diseños semánticos.
Las "columnas" tienen un padding que crea el espacio (gutter) entre ellas. El margin negativo en el elemento .row compensa el padding del elemento .container, lo que a su vez compensa el padding de las "columnas" contenidas en la "fila".
El margin negativo es por qué el ejemplo siguiente sobresale. El contenido en las columnas de la cuadrícula se alinea en una fila.
Las columnas del sistema de cuadrícula especifican su rango asignando valores del 1 al 12. Por ejemplo, tres columnas del mismo ancho se pueden crear con tres .col-xs-4.
Si una "fila" contiene más de 12 "columnas", los elementos de las "columnas" adicionales se colocarán como un bloque en una nueva fila.
Las clases de cuadrícula se aplican a dispositivos con un ancho de pantalla mayor o igual que el punto de interrupción, y se sobrescriben para dispositivos más pequeños. Por lo tanto, aplicar cualquier clase .col-md-* a un elemento funcionará para dispositivos con un ancho de pantalla mayor o igual que el punto de interrupción, y se sobrescribirá para dispositivos más pequeños.

2.2 Parámetros de la cuadrícula

	Pantallas pequeñas Móvil (<768px)	Pantallas medianas Tableta (≥768px)	Pantallas grandes Escritorio (≥992px)	Pantallas extra grandes Escritorio grande (≥1200px)
Ancho máximo de `.container`	Ninguno (automático)	750px	970px	1170px
Prefijo de clase	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
Ancho máximo de columna	Automático	~62px	~81px	~97px

2.3 Uso del sistema de cuadrícula

Usando un único conjunto de clases .col-md-*, puedes crear un sistema de cuadrícula básico que en dispositivos móviles y tabletas (pentallas pequeñas) se apilan verticalmente, pero en pantallas de escritorio (medianas) se organizan horizontalmente. Todas las "columnas" deben colocarse dentro de un .row.

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

2.4 Diferentes anchos para diferentes pantallas

<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>
  <!-- Opcional: limpiar las columnas XS si el contenido no coincide en altura -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

2.5 Desplazamiento de columnas

Usando las clases .col-md-offset-*, puedes desplazar columnas hacia la derecha. Estas clases en realidad agregan un margen izquierdo al elemento actual usando el selector *. Por ejemplo, la clase .col-md-offset-4 desplaza el elemento .col-md-4 hacia la derecha en 4 anchos de columna.

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

2.6 Reordenamiento de columnas

Usando las clases .col-md-push-* y .col-md-pull-* puedes cambiar fácilmente el orden de las columnas.

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

3 Tipografía

3.1 Encabezados

Todas las etiquetas de encabezado de HTML, de <h1> a <h6>, se pueden usar. Además, se proporcionan las clases .h1 a .h6 para aplicar el estilo de encabezado a texto con atributos en línea (inline).

<h1>h1. Título Bootstrap</h1>
<h2>h2. Título Bootstrap</h2>
<h3>h3. Título Bootstrap</h3>
<h4>h4. Título Bootstrap</h4>
<h5>h5. Título Bootstrap</h5>
<h6>h6. Título Bootstrap</h6>

Dentro de los encabezados también puedes incluir la etiqueta <small> o elementos con la clase .small para marcar subtítulos.

<h1>h1. Título Bootstrap <small>Texto secundario</small></h1>
<h2>h2. Título Bootstrap <small>Texto secundario</small></h2>
<h3>h3. Título Bootstrap <small>Texto secundario</small></h3>
<h4>h4. Título Bootstrap <small>Texto secundario</small></h4>
<h5>h5. Título Bootstrap <small>Texto secundario</small></h5>
<h6>h6. Título Bootstrap <small>Texto secundario</small></h6>

3.2 Destacar

Agregando la clase .lead puedes hacer que un párrafo destaque.

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

3.3 Alineación

<p class="text-left">Texto alineado a la izquierda.</p>
<p class="text-center">Texto centrado.</p>
<p class="text-right">Texto alineado a la derecha.</p>
<p class="text-justify">Texto justificado.</p>
<p class="text-nowrap">Texto sin salto de línea.</p>

3.4 Cambio de capitalización

<p class="text-lowercase">Texto en minúsculas.</p>
<p class="text-uppercase">Texto en mayúsculas.</p>
<p class="text-capitalize">Texto con primera letra mayúscula.</p>

3.5 Citas

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

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
> 
>  <footer>Alguien famoso en <cite title="Título de la Fuente">Título de la Fuente</cite></footer>

> ...

3.6 Listas

Lista sin estilo

- ...

Lista en línea

- ...

Lista descriptiva horizontal

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

4 Código

4.1 Código en línea

Envuelve fragmentos de código con estilo en línea usando la etiqueta ``.

Por ejemplo, &lt;section&gt; debe ser envuelto como código en línea.

4.2 Entrada de usuario

Marca el contenido ingresado por el usuario mediante el teclado con la etiqueta <kbd>.

Para cambiar de directorio, escribe <kbd>cd</kbd> seguido del nombre del directorio.<br>
Para editar configuraciones, presiona <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

4.3 Bloques de código

Para múltiples líneas de código, usa la etiqutea <pre>. Para una correcta visualización del código, asegúrate de escapar los caracteres de corchete.

&lt;p&gt;Texto de muestra aquí...&lt;/p&gt;

También puedes usar la clase .pre-scrollable, que establece max-height en 350px y muestra una barra de desplazamiento vertical.

4.4 Variables

Marca las variables con la etiqueta <var>.

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

4.5 Salida de programa

Marca el contenido de salida del programa con la etiqueta <samp>.

<samp>Este texto debe tratarse como salida de ejemplo de un programa de computadora.</samp>

5 Tablas

5.1 Básica

Agrega la clase .table a cualquier etiqueta `


### 5.2 Tablas con franjas


### 5.3 Tablas con bordes


### 5.4 Efecto hover


### 5.5 Tablas compactas


### 5.6 Clases de estado

Estas clases de estado permiten establecer colores para filas o celdas.

| Clase | Descripción |
|---|---|
| `.active | Color cuando se pasa el ratón sobre la fila o celda |
| `.success` | Identifica una acción exitosa o positiva |
| `.info` | Identifica mensajes informativos o acciones comunes |
| `.warning` | Identifica una advertencia o requiere atención del usuario |
| `.danger` | Identifica una acción peligrosa o potencialmente negativa |

### 5.7 Tablas responsivas

Envuelve cualquier elemento `.table` en un elemento `.table-responsive` para crear una tabla responsiva que se desplace horizontalmente en dispositivos pequeños (menos de 768px). Cuando el ancho de la pantalla es mayor a 768px, la barra de desplazamiento horizontal desaparece.

6 Formularios
----

### 6.1 Ejemplo básico

Los controles de formulario individuales se estilizan automáticamente. Todos los elementos `<input>`, `<textarea>` y `<select>` con la clase `.form-control` tendrán `width: 100%` por defecto. Envuelve las etiquetas `label` y los controles mencionados en `.form-group` para obtener la mejor alineación.

Dirección de correo

Contraseña

Entrada de archivo

Texto de ayuda a nivel de bloque aquí.

Marcame

Enviar


### 6.2 Formulario en línea

Agrega la clase `.form-inline` al elemento `<form>` para alinear su contenido a la izquierda y hacer que los controles se comporten como `inline-block`. Solo es adecuado cuando el viewport tiene al menos 768px de ancho (en viewports más pequeños, el formulario se colapsa).

### 6.3 Formulario horizontal

Agregando la clase `.form-horizontal` al formulario y usando las clases de cuadrícula predefinidas de Bootstrap, puedes colocar las etiquetas `label` y los controles en una disposición horizontal. Esto cambia el comportamiento de `.form-group` para que actúe como una fila (row) en el sistema de cuadrícula, por lo que no necesitas agregar `.row` adicionalmente.

Correo

Contraseña

Recuérdame

Iniciar sesión


### 6.4 Controles de formulario

#### Campos de entrada

Incluyen la mayoría de los controles de formulario, campos de texto, y soportan todos los tipos de entrada HTML5: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel` y `color`.

Solo los controles de entrada con el atributo `type` configurado correctamente recibirán los estilos adecuados.

#### Área de texto

Control de formulario que admite múltiples líneas de texto. Puedes cambiar el atributo `rows` según sea necesario.

#### Casillas de verificación y botones de radio

Estilo por defecto

La opción uno es esto y aquello—asegúrate de incluir por qué es genial

La opción dos está deshabilitada

La opción uno es esto y aquello—asegúrate de incluir por qué es genial

La opción dos puede ser otra cosa y al seleccionarla se deseleccionará la opción uno

La opción tres está deshabilitada


Casillas y botones de radio en línea


Casillas y botones de radio sin texto


#### Lista desplegable

1 2 3 4 5


#### Contenido estático

Si necesitas colocar texto sin formato y una etiqueta `label` en la misma línea de un formulario, agrega la clase `.form-control-static` al elemento `<p>`.

Correo

correo@ejemplo.com

Conrtaseña


#### Texto de ayuda

Entrada con texto de ayuda

... Un bloque de texto de ayuda que se rompe en una nueva línea y puede extenderse más allá de una línea.


#### Estados de validación

Bootstrap define estilos para los estados de validación de los controles de formulario, como error, advertencia y éxito. Para usarlos, agrega las clases `.has-warning`, `.has-error` o `.has-success` al elemento padre. Cualquier elemento `.control-label`, `.form-control` y `.help-block` contenido dentro de este elemento heredará estos estilos de estado de validación.

Entrada con éxito

Un bloque de texto de ayuda que se rompe en una nueva línea y puede extenderse más allá de una línea.

Entrada con advertencia

Entrada con error

Casilla con éxito

Casilla con advertencia

Casilla con error


#### Agregar iconos adicionales

También puedes agregar iconos adicionales a los campos de entrada según su estado de validación. Simplemente configura la clase correspondiente `.has-feedback` y agrega el icono correcto.

Entrada con éxito

(éxito)


#### Tamaños de controles

Puedes configurar la altura de los controles con clases como `.input-lg`, y el ancho con clases como `.col-lg-*`.

Tamaños de altura

Crear controles de formulario más grandes o más pequeños para que coincidan con los tamaños de los botones.

... ... ...


Tamaños de grupos de formularios horizontales

Agregando las clases `.form-group-lg` o `.form-group-sm`, puedes configurar rápidamente el tamaño de las etiquetas `label` y los controles de formulario contenidos en `.form-horizontal`.

Etiqueta grande

Etiqueta pequeña


7 Botones
----

### 7.1 Etiquetas o elementos que pueden usarse como botones

Agrega clases de botón (button class) a elementos `<a>`, `<button>` o `<input>` para usar los estilos proporcionados por Bootstrap.

Enlace Botón


### 7.2 Estilos predefinidos

Predeterminado

Primario

Éxito

Información

Advertencia

Peligro

--> Deemphasize un botón haciéndolo parecer un enlace mientras mantiene el comportamiento del botón --> Enlace


### 7.3 Tamaños

¿Necesitas botones de diferentes tamaños? Usa `.btn-lg`, `.btn-sm` o `.btn-xs` para obtener botones de diferentes tamaños.

Agregando la clase `.btn-block` a un botón, puedes estirarlo al 100% del ancho del elemento padre, y el botón se convierte en un elemento de bloque (block).

### 7.4 Estado activo

Agrega la clase `.active`.

### 7.5 Estado deshabilitado

Agrega el atributo `disabled` al elemento `<button>` para que muestre el estado deshabilitado.

Para botones creados a partir del elemento `<a>`, agrega la clase `.disabled`.

8 Imágenes
----

### 8.1 Imágenes responsivas

En la versión 3 de Bootstrap, puedes hacer que las imágenes admitan un diseño responsivo agregando la clase `.img-responsive`. Esto establece esencialmente `max-width: 100%;`, `height: auto;` y `display: block;` en la imagen, permitiendo que se escale mejor dentro de su elemento padre.

Si necesitas centrar horizontalmente una imagen que usa la clase `.img-responsive`, usa la clase `.center-block`, no `.text-center`.

Imagen responsiva


### 8.2 Formas de imagen


9 Clases auxiliares
-----

### 9.1 Color de texto

... ... ... ... ... ...


### 9.2 Color de fondo

... ... ... ... ...


### 9.3 Símbolo de triángulo


### 9.4 Flotación

... ...


### 9.5 Centrar contenido

...


### 9.6 Limpiar flotación

Puedes fácilmente limpiar la flotación (`float`) agregando la clase `.clearfix` al elemento padre.

...


### 9.7 Mostrar u ocultar contenido