Bootstrap Cheatsheet

Hoja de trucos RTL ⬀

Contenidos

Tipografía

Documentación

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Título 1

Título 2

Título 3

Título 4

Título 5

Título 6

Este es un párrafo inicial. Se destaca de los párrafos habituales.

Puedes usar la etiqueta de mark para resaltar texto.

Esta línea de texto debe tratarse como texto eliminado.

Esta línea de texto debe tratarse como si ya no fuera precisa.

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

Esta línea de texto se mostrará subrayada.

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

Esta línea aparece como texto en negrita.

Esta línea se muestra como texto en cursiva.

Una cita muy conocida, contenida en un elemento blockquote.

Alguien famoso en Source Title
  • Esta es una lista.
  • Parece completamente sin estilo.
  • Estructuralmente, sigue siendo una lista.
  • Sin embargo, este estilo solo se aplica a elementos secundarios inmediatos.
  • Listas anidadas:
    • no se ven afectados por este estilo
    • seguirá mostrando una viñeta
    • y tener un margen izquierdo apropiado
  • Esto aún puede resultar útil en algunas situaciones.
  • Este es un elemento de la lista.
  • Y otro más.
  • Pero se muestran en línea.

Imágenes

Documentación
Marcador de posición Imagen responsive
Una imagen genérica de marcador de posición cuadrado con un borde blanco alrededor, lo que la hace parecerse a una fotografía tomada con una vieja cámara instantánea. 200x200

Tablas

Documentación
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Clase Título Título
Predeterminado Celda Celda
Primary Celda Celda
Secondary Celda Celda
Success Celda Celda
Danger Celda Celda
Warning Celda Celda
Info Celda Celda
Light Celda Celda
Dark Celda Celda
# Primero Último Manejar
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Figuras

Documentación
Marcador de posición 400x300
Un título para la imagen de arriba.

Formularios

Descripción general

Documentación
Nunca compartiremos tu correo electrónico con nadie más.
Botones de radios

Formularios deshabilitados

Documentación
Botones de radios deshabilitados

Tamaños

Documentación

Grupo de entrada

Documentación
@
@ejemplo.com
https://ejemplos.com/usuarios/
$ .00
Con textarea

Etiquetas flotantes

Documentación

Validación

Documentación
¡Se ve bien!
¡Se ve bien!
@
Elige un nombre de usuario.
Proporciona una ciudad válida.
Selecciona un estado válido.
Proporciona un código postal válido.
Debes aceptar antes de enviar.

Componentes

Acordeón

Documentación

Este es el cuerpo de acordeón del primer elemento. Está oculto de forma predeterminada, hasta que el complemento contraer agrega las clases apropiadas que usamos para diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar mediante transiciones CSS. Puede modificar todo esto con CSS personalizado o sobrescribendo nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede ir dentro de .accordion-body, aunque la transición limita el desbordamiento.

Este es el cuerpo de acordeón del segundo elemento. Está oculto de forma predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede ir dentro de .accordion-body, aunque la transición limita el desbordamiento.

Este es el cuerpo de acordeón del tercer elemento. Está oculto de forma predeterminada, hasta que el complemento collapse agrega las clases apropiadas que usamos para diseñar cada elemento. Estas clases controlan la apariencia general, así como mostrar y ocultar mediante transiciones CSS. Puedes modificar todo esto con CSS personalizado o sobrescribendo nuestras variables predeterminadas. También vale la pena señalar que casi cualquier HTML puede ir dentro de .accordion-body, aunque la transición limita el desbordamiento.

Alertas

Documentación

Insignia

Documentación

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Encabezado de ejemplo Nuevo

Primary Secondary Success Danger Warning Info Light Dark

Botones

Documentación

Tarjeta

Documentación
Marcador de posición Image cap
Título de la tarjeta

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Ve a algún lado
Destacados
Título de la tarjeta

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

Ve a algún lado
Hace 2 días
Título de la tarjeta

Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.

  • Un elemento
  • Un segundo elemento
  • Un tercer elemento
Enlace de tarjeta Otro enlace
Marcador de posición Imagen
Título de la tarjeta

Esta es una tarjeta más amplia con texto de respaldo a continuación como introducción natural al contenido adicional. Este contenido es un poco más largo.

Última actualización hace 3 minutos

Grupo de lista

Documentación
  • Un elemento deshabilitado
  • Un segundo elemento
  • Un tercer elemento
  • Un cuarto elemento
  • Y un quinto
  • Un elemento
  • Un segundo elemento
  • Un tercer elemento
  • Un cuarto elemento
  • Y un quinto
Un elemento de grupo de lista predeterminado simple Un elemento de grupo de lista principal simple Un simple elemento de grupo de lista secundaria Un elemento de grupo de lista de éxito simple Un elemento de grupo de lista de peligros simple Un elemento de grupo de lista de advertencia simple Un elemento de grupo de lista de información simple Un elemento de grupo de lista claro simple Un simple elemento de grupo de lista oscura

Popovers

Documentación

Scrollspy

Documentación

Primer encabezado

Este es un contenido de marcador de posición para la página de scrollspy. Ten en cuenta que a medida que te desplazas hacia abajo en la página, se resalta el enlace de navegación apropiado. Se repite a lo largo del ejemplo del componente. Seguimos agregando más copias de ejemplo aquí para enfatizar el desplazamiento y el resaltado.

Segundo encabezado

Este es un contenido de marcador de posición para la página de scrollspy. Ten en cuenta que a medida que te desplazas hacia abajo en la página, se resalta el enlace de navegación apropiado. Se repite a lo largo del ejemplo del componente. Seguimos agregando más copias de ejemplo aquí para enfatizar el desplazamiento y el resaltado.

Tercer encabezado

Este es un contenido de marcador de posición para la página de scrollspy. Ten en cuenta que a medida que te desplazas hacia abajo en la página, se resalta el enlace de navegación apropiado. Se repite a lo largo del ejemplo del componente. Seguimos agregando más copias de ejemplo aquí para enfatizar el desplazamiento y el resaltado.

Cuarto encabezado

Este es un contenido de marcador de posición para la página de scrollspy. Ten en cuenta que a medida que te desplazas hacia abajo en la página, se resalta el enlace de navegación apropiado. Se repite a lo largo del ejemplo del componente. Seguimos agregando más copias de ejemplo aquí para enfatizar el desplazamiento y el resaltado.

Quinto encabezado

Este es un contenido de marcador de posición para la página de scrollspy. Ten en cuenta que a medida que te desplazas hacia abajo en la página, se resalta el enlace de navegación apropiado. Se repite a lo largo del ejemplo del componente. Seguimos agregando más copias de ejemplo aquí para enfatizar el desplazamiento y el resaltado.

Spinners

Documentación

Toasts

Documentación

Tooltips

Documentación