Cards

Una Card es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Si está familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros viejos paneles, pozos y miniaturas. Una funcionalidad similar a esos componentes está disponible como clases de modificadores para tarjetas.

Las Cards admiten una amplia variedad de contenido, incluidas imágenes, texto, grupos de listas, enlaces y más. A continuación veremos un ejemplo de uso.

Esto es un ejemplo de uso de las Cards.

Como este ejemplo podemos realizar muchos más, como poner soperposición de texto a una imagen, colocar textos donde queramos, hacer deltro del card un grupo de listas, etc...

Puede ver estos ejemplos nombrados en la url: Pincha aquí

Buttons

EJEMPLOS

Bootstrap incluye varios estilos de botones predefinidos, cada uno con su propio propósito semántico, con algunos extras incluidos para un mayor control.

Deshabilitar ajuste de texto

Si no desea que el texto del botón se ajuste, puede agregar la .text-nowrapclase al botón. En Sass, puede configurar $btn-white-space: nowrap para deshabilitar el ajuste de texto para cada botón.

Etiquetas de botón

Las .btnclases están diseñadas para ser utilizadas con el button elemento. Sin embargo, también puede usar estas clases en elementos a o input(aunque algunos navegadores pueden aplicar una representación ligeramente diferente).

Cuando se utilizan clases de botón en a elementos que se utilizan para activar la funcionalidad en la página (como el contenido colapsado), en lugar de vincular a nuevas páginas o secciones dentro de la página actual, estos vínculos deben tener una forma role="button" adecuada para transmitir su propósito a las tecnologías de asistencia, como lectores de pantalla

EJEMPLO

Link

Botones de contorno

¿Necesita un botón, pero no los fuertes colores de fondo que traen? Reemplace las clases de modificador predeterminadas con las .btn-outline-*que eliminan todas las imágenes y colores de fondo en cualquier botón.

EJEMPLO

Tenemos muchas mas funciones como la talla del botón especificando btn-lg si queremos un botón grande o btn-sm si queremos un boton pequeño. También podemos deshabilitar el botón especificando disabled.

Alerts

Proporcione mensajes de retroalimentación contextuales para las acciones típicas de los usuarios con el puñado de mensajes de alerta disponibles y flexibles.

EJEMPLO

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Color de enlace

Use la .alert-linkclase de utilidad para proporcionar rápidamente enlaces de colores coincidentes dentro de cualquier alerta.

EJEMPLO

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Iconos

Del mismo modo, puede usar las utilidades de flexbox y los íconos de Bootstrap para crear alertas con íconos. Dependiendo de sus íconos y contenido, es posible que desee agregar más utilidades o estilos personalizados.

EJEMPLO

An example alert with an icon

Dismissing

Con el complemento JavaScript de alerta, es posible descartar cualquier alerta en línea. Así es cómo:

Asegúrese de haber cargado el complemento de alerta o el JavaScript de Bootstrap compilado.
Agregue un botón de cierre y la .alert-dismissibleclase, que agrega relleno adicional a la derecha de la alerta y posiciona el botón de cierre.
En el botón de cerrar, agregue el data-bs-dismiss="alert"atributo, que activa la funcionalidad de JavaScript. Asegúrese de usar el button elemento con él para un comportamiento adecuado en todos los dispositivos.
Para animar las alertas al descartarlas, asegúrese de agregar las clases .fadey ..show

EJEMPLO

Holy guacamole! You should check in on some of those fields below.

Dropdown

Alterne las superposiciones contextuales para mostrar listas de enlaces y más con el complemento desplegable Bootstrap.

Visión de conjunto

Los menús desplegables son superposiciones contextuales que se pueden alternar para mostrar listas de enlaces y más. Se hacen interactivos con el complemento de JavaScript desplegable de Bootstrap incluido. Se alternan al hacer clic, no al pasar el mouse; esta es una decisión de diseño intencional.

Los menús desplegables se basan en una biblioteca de terceros, Popper , que proporciona posicionamiento dinámico y detección de ventana gráfica. Asegúrese de incluir popper.min.js antes del JavaScript de Bootstrap o use bootstrap.bundle.min.js/bootstrap.bundle.jsque contiene Popper. Popper no se usa para posicionar los menús desplegables en las barras de navegación, ya que no se requiere un posicionamiento dinámico.

EJEMPLO

Botón único

Cualquiera .btn se puede convertir en un menú desplegable con algunos cambios de marcado. Así es como puede ponerlos a trabajar con cualquiera de los button elementos:

Y con elementos a :

La mejor parte es que también puedes hacer esto con cualquier variante de botón:

Split button

Del mismo modo, cree menús desplegables de botones divididos con prácticamente el mismo marcado que los menús desplegables de un solo botón, pero con la adición de .dropdown-toggle-split un espacio adecuado alrededor del símbolo de intercalación desplegable.

Como con los botones podemos especificarle la talla ademas de poder desplegar el menu en la dirección que queramos.

En esta web hemos utilizado los dropdowns en el nav para ir a los contenidos mas comodamente.

Spinners

Los "spinners" de Bootstrap se pueden usar para mostrar el estado de carga en sus proyectos. Están construidos solo con HTML y CSS, lo que significa que no necesita JavaScript para crearlos. Sin embargo, necesitará JavaScript personalizado para alternar su visibilidad. Su apariencia, alineación y tamaño se pueden personalizar fácilmente con nuestras increíbles clases de utilidad.

Por motivos de accesibilidad, cada cargador aquí incluye role="status"un archivo span class="visually-hidden"Loading.../span.

EJEMPLO

Hilandero de borde

Con colores

Hilandero creciente

Con colores

Ademos podemos posicionarlo y darle tamaño ademas de añadir spinners a botonos como vamos a ver a continuación:

Navbar

Esto es lo que necesita saber antes de comenzar con la barra de navegación:

Las barras de navegación requieren un envoltorio para las clases .navbarde combinación de colores.navbar-expand{-sm|-md|-lg|-xl|-xxl} y colapso receptivo.
Las barras de navegación y su contenido son fluidos de forma predeterminada. Cambie el contenedor para limitar su ancho horizontal de diferentes maneras.
Utilice nuestras clases de utilidad de espaciado y flexión para controlar el espaciado y la alineación dentro de las barras de navegación.
Las barras de navegación responden de manera predeterminada, pero puede modificarlas fácilmente para cambiar eso. El comportamiento receptivo depende de nuestro complemento Collapse JavaScript.
Garantice la accesibilidad mediante el uso de un elemento nav o, si utiliza un elemento más genérico como un div, agregue un role="navigation" a cada barra de navegación para identificarla explícitamente como una región de referencia para los usuarios de tecnologías de asistencia.
Indique el elemento actual utilizando aria-current="page" para la página actual o aria-current="true" para el elemento actual en un conjunto.

Contenido compatible

Las barras de navegación vienen con soporte integrado para un puñado de subcomponentes. Elija entre los siguientes según sea necesario:

.navbar-brand para el nombre de su empresa, producto o proyecto.
.navbar-nav para una navegación liviana y de altura completa (incluido el soporte para menús desplegables).
.navbar-toggler para usar con nuestro complemento de colapso y otros comportamientos de alternancia de navegación.
Utilidades de flexión y espaciado para cualquier control de formulario y acción.
.navbar-text para agregar cadenas de texto centradas verticalmente.
.collapse.navbar-collapse para agrupar y ocultar el contenido de la barra de navegación por un punto de interrupción principal.
Agregue un opcional .navbar-scroll para configurar max-heighty desplazarse por el contenido de la barra de navegación expandida .

EJEMPLOS

NavBar con icono

NavBar clásico

NavBar con desplegable

NavBar con formulario y botón

En esta web hemos usado una combinación entre un Navbar clásico incluyendo despleglables y un formulario de busqueda.

Toast

Un toast envía notificaciones a tus visitantes con un brindis, un mensaje de alerta ligero y fácilmente personalizable

Los brindis son notificaciones livianas diseñadas para imitar las notificaciones automáticas que se han popularizado en los sistemas operativos móviles y de escritorio. Están construidos con flexbox, por lo que son fáciles de alinear y colocar.

Visión de conjunto

Cosas que debe saber al usar el complemento de tostadas:

Los brindis son opcionales por motivos de rendimiento, por lo que debe inicializarlos usted mismo.
Las tostadas se ocultarán automáticamente si no las especifica autohide: false.

Ejemplos

Toast Clásico

Toast accionado con botón

Ademas este elemento puede posicionarse con otros toast de forma apilada, aplicarle transparencia y cambiar el color del mismo.

List Groups

Los grupos de listas son un componente flexible y potente para mostrar una serie de contenidos. Modifíquelos y amplíelos para que admitan prácticamente cualquier contenido.

Ejemplos

Ejemplo básico

El grupo de lista más básico es una lista desordenada con elementos de lista y las clases adecuadas. Construya sobre él con las opciones que siguen, o con su propio CSS según sea necesario.

An item
A second item
A third item
A fourth item
And a fifth one

Active items

Agregando .active a un .list-group-item para indicar la selección activa actual.

An active item
A second item
A third item
A fourth item
And a fifth one

Con link y botón.

The current link item A second link item A third link item A fourth link item A disabled link item

Numeradas

Subheading
Cras justo odio
14
Subheading
Cras justo odio
14
Subheading
Cras justo odio
14

Em horizontal

An item
A second item
A third item

Con colores

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

En esta web hemos usado este elemento en el menu lateral de navegación

Badge

Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de unidades em y tamaños de fuente relativos. A partir de la v5, las insignias ya no tienen estilos de enfoque o de desplazamiento para los enlaces.

Ejemplo

Encabezados

Example heading New

En botones

En botón posicionado

Con colores de fondo

Primary Secondary Success Danger Warning Info Light Dark

Insignias de píldora

Usamos la clase .rounded-pill de utilidad para hacer que las insignias sean más redondeadas con un border-radius.

Primary Secondary Success Danger Warning Info Light Dark

Antes de comenzar con el componente modal de Bootstrap, asegúrese de leer lo siguiente, ya que nuestras opciones de menú han cambiado recientemente.

Los modales se construyen con HTML, CSS y JavaScript. Se colocan sobre todo lo demás en el documento y eliminan el desplazamiento body para que el contenido modal se desplace en su lugar.
Al hacer clic en el "telón de fondo" modal, se cerrará automáticamente el modal.
Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son compatibles porque creemos que son experiencias de usuario deficientes.
Uso de modales position: fixed, que a veces puede ser un poco particular sobre su representación. Siempre que sea posible, coloque su HTML modal en una posición de nivel superior para evitar posibles interferencias de otros elementos. Es probable que tenga problemas al anidar .modal dentro de otro elemento fijo.
Una vez más, debido a position: fixed, existen algunas advertencias con el uso de modales en dispositivos móviles. Consulte nuestros documentos de soporte del navegador para obtener más información.
Debido a cómo HTML5 define su semántica, el autofocusatributo HTML no tiene efecto en los modales de Bootstrap. Para lograr el mismo efecto, use JavaScript personalizado:

Ejemlos

Componentes modales

A continuación se muestra un ejemplo modal estático position (lo que significa que displayha sido anulado). Se incluyen el encabezado modal, el cuerpo modal (obligatorio para padding) y el pie de página modal (opcional). Le pedimos que incluya encabezados modales con acciones de descarte siempre que sea posible, o proporcione otra acción de descarte explícita.

Demo en vivo

Alterne una demostración modal de trabajo haciendo clic en el botón a continuación. Se deslizará hacia abajo y se desvanecerá desde la parte superior de la página.

Contenido modal variable

Navegación

Bootstrap Inicio Teoria Contenido Interactivo

10 elementos Bootstrap

Cards

Buttons

Alerts

Dropdown

Spinners

Navbar

Toast

List Groups

Badge

Example heading New