Cómo usar tarjetas Bootstrap 5
Este artículo ilustrará el uso de tarjetas de arranque cubriendo los siguientes aspectos:
- Cómo crear una tarjeta simple?
- Cómo crear un encabezado y pie de página de una tarjeta?
- Cómo crear una tarjeta con contenido?
- Cómo crear una tarjeta con una imagen?
- Cómo crear un botón en una tarjeta?
- Cómo diseñar la tarjeta?
- Cómo crear una tarjeta con superposiciones de imagen?
- Cómo crear grupos de listas en la tarjeta?
- Cómo crear una barra de navegación en la tarjeta?
Cómo crear una tarjeta simple?
El "tarjeta"Clase con el"cuerpo de cartas"Se utiliza para hacer una tarjeta simple.
Pasemos el ejemplo para obtener una mejor comprensión.
Ejemplo
En el archivo HTML, siga los pasos para crear una tarjeta simple:
- Agrega un "" elemento y asignarlo una clase "envase". Este es un bloque de construcción básico que contiene relleno y alineación con el contenido dentro de un dispositivo específico.
- Entonces, asignarlo una clase "tarjeta"Utilizado para crear una tarjeta básica.
- Para especificar el contenido dentro de la tarjeta, cree un DIV con la clase "cuerpo de cartas"Eso contiene los datos necesarios de la tarjeta:
Tarjeta Linuxhint
Una tarjeta en Bootstrap 5 es un cuadro con relleno alrededor de su texto y un borde.
Producción
Cómo crear un encabezado y pie de página de una tarjeta?
El "cabezal" y el "footerSe utilizan clases para establecer el encabezado de la tarjeta y el pie de página. Para hacerlo:
- Establezca el elemento con la clase "envase" y "M-4".
- Ajuste el DIV con la clase "tarjeta".
- Establezca el encabezado de la tarjeta utilizando la clase "cabezal".
- La información de la tarjeta se coloca utilizando el "footer"Clase en el pie de página de la tarjeta:
Tarjeta Bootstrap 5
Escuela Linuxhint
Una tarjeta en Bootstrap 5 es un cuadro con un borde y relleno alrededor del texto.
Contacto: xxx-xxx-xxxx
Producción
Cómo crear una tarjeta con contenido?
Puede agregar contenido a la tarjeta utilizando el "cuerpo de cartas"Contenedor de contenido extensible. Las clases mencionadas a continuación deben incluirse en esta clase:
- "título de la tarjeta"Ajusta el título de la tarjeta.
- "texto de la tarjeta"Describe el texto con las propiedades de estilo en la página.
- "enlace de tarjetas"Asocia un enlace de otra fuente en la página:
Tarjeta Linuxhint
Linuxhint es un excelente sitio web de tutorial.
Lección introductoria
Visite nuestro sitio web
Producción
Cómo crear una tarjeta con una imagen?
La forma más popular de diseñar una tarjeta es agregar una imagen a la tarjeta. Para hacerlo, el bootstrap "Tarjeta-IMG-TOPLa clase se utiliza de la siguiente manera:
Escuela Linuxhint
Para obtener más información, visite nuestro sitio web oficial.
haga clic aquí
Contacto: xxx-xxx-xxxx
Producción
Cómo crear un botón en una tarjeta?
El elemento del botón se puede agregar a la tarjeta. Para este propósito, implementa el "btn"Clase dentro del elemento. El "btn-primario"Indica la acción principal en un grupo de botones y le agrega un peso visual adicional:
Escuela Linuxhint
Para obtener más información, visite nuestro sitio web oficial.
haga clic aquí
Contacto: xxx-xxx-xxxx
Producción
Cómo diseñar la tarjeta?
Para peinar el contenedor de tarjetas de arranque, muchas clases se pueden utilizar así:
Linuxhint
Título de la tarjeta principal
Proporcionamos artículos y videos conferencias al mundo.
Linuxhint
Título de la tarjeta principal
Proporcionamos artículos y videos conferencias al mundo.
Producción
Cómo crear una tarjeta con superposiciones de imagen?
El "sobrecarga de tarjetasLa clase ajusta la imagen como fondo. Para utilizarlo, en primer lugar, configure la imagen de la tarjeta utilizando el "" etiqueta. Además, el ancho de la imagen se establece como "100%":
Departamento de video
Proporcionamos videos de alta calidad sobre temas de informática.
Más información
Producción
Cómo crear grupos de listas en la tarjeta?
Para identificar los elementos del grupo en una tarjeta, implementa el DIV "envase" clase. Luego, agregue un contenedor "div" junto con la clase "tarjeta".
Para crear una lista, aplique el "" y ""Etiquetas con clases apropiadas:
- Html
- Oreja
- Javascript
La siguiente es la descripción de las clases de bote de arranque anteriores:
- Para crear grupos de listas, el bootstrap "grupo de listasLa clase se puede aplicar. Ayuda a especificar una lista de contenido para la tarjeta.
- Agregando el "Flush-Group-Flush", Puede mostrar los elementos del grupo de la lista de borde a borde en un contenedor principal, yo.mi., tarjetas. Para hacerlo, elimina las esquinas redondeadas y las fronteras.
- El "ítems de grupos de lista"Define los elementos de la lista.
Producción
Cómo crear una barra de navegación en la tarjeta?
También puede agregar una barra de navegación a las tarjetas. Más específicamente, se crea una barra de navegación adecuada y bien alineada utilizando varias clases:
Tarjeta de salud
Siga la guía para su registro
Registro
Aquí:
- "NAV NAV-TabsLa clase se utiliza para crear pestañas de navegación.
- "Tabón de cabezal"La clase ayuda a diseñar las pestañas en el encabezado de la tarjeta.
- "ítem de navegación"Proporciona un estilo a los elementos de navegación.
- "enlace de navegación"Se utiliza para establecer el enlace de otros bloques de navegación.
Producción
Eso se trataba de usar las clases de bootstrap para crear tarjetas bien formatadas.
Conclusión
Bootstrap 5 utiliza numerosas clases para estilo y crear las tarjetas. Estas clases ayudan a ajustar la información en un formato estructurado. Algunas de las clases son "título de la tarjeta","texto de la tarjeta","cabezal","footer", y muchos más. Estas clases ofrecen funcionalidades, como especificar el título, el texto, el encabezado y el pie de página de la tarjeta. Este artículo ha demostrado cómo usar tarjetas Bootstrap 5 con diferentes funcionalidades.