Primer Slide
Descripción del primer slide.
Segundo Slide
Descripción del segundo slide.
Tercer Slide
Descripción del tercer slide.
¡Bienvenido a MiSitio!
Este es un ejemplo simple de una página web utilizando Bootstrap 4.
Hay muchas opciones interesantes que puedes explorar usando Bootstrap 4 para enriquecer una página web. Aquí tienes algunos ejemplos que podrías considerar:
1. Tarjetas (Cards)
Utiliza tarjetas para mostrar información de manera organizada y atractiva. Pueden incluir imágenes, títulos, textos y botones de acción.
2. Accordion y Colapsables
Perfectos para mostrar contenido que el usuario puede expandir y colapsar. Ideales para FAQ, secciones de contenido extenso, o listas de características.
3. Modales (Modals)
Ventanas emergentes para mostrar mensajes importantes, formularios, videos, o cualquier otro contenido adicional.
4. Listas de Precios
Un diseño de tabla de precios con diferentes planes y características. Útil para servicios, productos, o suscripciones.
5. Galería de Imágenes
Un diseño de galería responsiva que muestre imágenes en una cuadrícula ajustable.
6. Progress Bars y Spinners
Para indicar el progreso de una acción o la carga de contenido. Útiles para procesos largos o complejos.
7. Alertas y Notificaciones
Mensajes de alerta que pueden utilizarse para mostrar información importante, errores, advertencias o confirmaciones.
8. Tablas de Datos
Tablas estilizadas para mostrar datos de manera clara y estructurada, con opciones de ordenamiento, paginación y búsqueda.
9. Badges y Tags
Pequeños elementos de interfaz que pueden usarse para mostrar estados, notificaciones, o categorías.
10. Formularios Avanzados
Formularios con validaciones en vivo, selectores de fecha y hora, sliders de rango, y más.
11. Breadcrumbs
Indicadores de navegación que muestran la ubicación de una página dentro de la jerarquía del sitio.
12. Carrusel de Testimonios
Un carrusel que muestre comentarios o testimonios de clientes, útil para marketing y credibilidad.
13. Secciones de Preguntas Frecuentes (FAQ)
Una lista de preguntas comunes con respuestas, organizada de manera clara y accesible.
14. Mapa Interactivo
Una sección con un mapa interactivo, por ejemplo, utilizando Google Maps, para mostrar ubicaciones o direcciones.
15. Iconos y Botones Sociales
Botones para compartir en redes sociales o seguir perfiles, utilizando iconos reconocibles.
Ejemplos de Diferentes Tipos de Botones
Barra con 6 Botones de Link
Barra con 6 Botones de Link Oscuros
Ejemplo de Tabs
Contenido de la pestaña de Inicio.
Contenido de la pestaña de Perfil.
Contenido de la pestaña de Contacto.
Ejemplo de Tabs Laterales
Contenido de la pestaña de Inicio.
Contenido de la pestaña de Perfil.
Contenido de la pestaña de Contacto.
Explicación del Audio
Esta es una descripción detallada del contenido del audio. Aquí puedes proporcionar información adicional, contexto o cualquier detalle relevante que quieras compartir con los oyentes.
Título de la Sección
Esta es una descripción detallada relacionada con la imagen. Aquí puedes proporcionar información adicional, contexto o cualquier detalle relevante que quieras compartir con los lectores.
Título del Video
Esta es una descripción detallada relacionada con el video. Aquí puedes proporcionar información adicional, contexto o cualquier detalle relevante que quieras compartir con los espectadores.
Título de la Playlist
Esta es una descripción de la playlist de YouTube. Aquí puedes ofrecer un resumen de los videos incluidos, el tema general o cualquier información relevante para los usuarios que deseen explorar el contenido de la lista de reproducción.
Formulario de Ejemplo 1 columna
Formulario de Ejemplo 2 columnas
Formulario de Ejemplo 3 columnas
Sección de Tarjetas
Título de la Tarjeta 1
Descripción breve de lo que contiene esta tarjeta. Puede ser un resumen de contenido, producto o servicio.
Título de la Tarjeta 2
Esta tarjeta también incluye una breve descripción, junto con un botón de llamada a la acción.
Título de la Tarjeta 3
Otra tarjeta con descripción y un enlace para ver más detalles sobre el contenido presentado.
Ejemplo de Accordion y Colapsables
Ejemplo de Modales
Nuestras Tarifas
Plan Básico
$9 / mes
- 10 usuarios incluidos
- 2 GB de almacenamiento
- Soporte por email
- Acceso a la comunidad
Plan Estándar
$29 / mes
- 50 usuarios incluidos
- 10 GB de almacenamiento
- Soporte prioritario
- Acceso a webinars
Plan Premium
$49 / mes
- Usuarios ilimitados
- 100 GB de almacenamiento
- Soporte 24/7
- Acceso a todas las funciones
Galería de Imágenes
Título de la Imagen 1
Descripción breve de la imagen 1.
Título de la Imagen 2
Descripción breve de la imagen 2.
Título de la Imagen 3
Descripción breve de la imagen 3.
Título de la Imagen 4
Descripción breve de la imagen 4.
Título de la Imagen 5
Descripción breve de la imagen 5.
Título de la Imagen 6
Descripción breve de la imagen 6.
1. Barra de Progreso Básica
2. Barra de Progreso con Diferentes Colores
3. Barra de Progreso con Varios Segmentos
4. Barra de Progreso Animada
5. Barra de Progreso con Listras
6. Barra de Progreso Pequeña
7. Spinner de Carga Básico
8. Spinner de Carga Creciente
9. Spinner de Carga con Diferentes Colores
10. Spinner de Carga Pequeño
1. Alerta de Éxito
2. Alerta de Información
3. Alerta de Advertencia
4. Alerta de Peligro
5. Alerta con Título
Encabezado de Alerta
Esta es una alerta con un encabezado y más texto para proporcionar más detalles sobre el mensaje.
6. Alerta con Cierre
7. Alerta con Enlace
8. Alerta Oscura
9. Alerta de Luz
10. Alerta con Texto Adicional y Separador
Advertencia
Este es un ejemplo de una alerta con texto adicional. Puedes agregar más detalles aquí.
Recuerda revisar todo antes de proceder.
1. Tabla de Datos Básica
Tabla de Datos Básica
| # | Nombre | Apellido | |
|---|---|---|---|
| 1 | Juan | Pérez | juan.perez@example.com |
| 2 | Maria | García | maria.garcia@example.com |
| 3 | Carlos | Hernández | carlos.hernandez@example.com |
2. Tabla con Filas y Columnas Rayadas
Tabla de Datos con Filas Rayadas
| # | Producto | Categoría | Precio |
|---|---|---|---|
| 1 | Televisor | Electrónica | $500 |
| 2 | Sofá | Muebles | $700 |
| 3 | Libro | Literatura | $20 |
3. Tabla con Bordes y Estilos Personalizados
Tabla de Datos con Bordes
| # | Nombre de Usuario | Registro | Estado |
|---|---|---|---|
| 1 | user123 | 01/01/2024 | Activo |
| 2 | jane_doe | 15/02/2024 | Pendiente |
| 3 | john_smith | 20/03/2024 | Inactivo |
1. Badge Básico
Primario
2. Badge Secundario
Secundario
3. Badge de Éxito
Éxito
4. Badge de Peligro
Peligro
5. Badge de Advertencia
Advertencia
6. Badge de Información
Información
7. Badge Claro
Claro
8. Badge Oscuro
Oscuro
9. Badge con Texto Dinámico
Nuevos Mensajes 4
10. Badge en Botón
1. Carrusel de Testimonios Básico
2. Carrusel de Testimonios con Imágenes de Clientes
“Increíble calidad y entrega rápida. Muy satisfecho con la compra.”
– Juan Pérez
“Excelente servicio al cliente. Resolveron todas mis dudas.”
– Maria García
“Productos de alta calidad a precios razonables. Muy recomendable.”
– Carlos Hernández
1. Sección de FAQ con Accordion
Preguntas Frecuentes
2. Sección de FAQ con Pestañas (Tabs)
Preguntas Frecuentes
¿Qué métodos de pago aceptan?
Aceptamos todas las principales tarjetas de crédito, PayPal y transferencias bancarias. Para más detalles, visita nuestra página de métodos de pago.
¿Ofrecen descuentos por volumen?
Sí, ofrecemos descuentos para pedidos al por mayor. Por favor, contacta con nuestro equipo de ventas para más información.
¿Realizan envíos internacionales?
Sí, enviamos a más de 50 países. Los tiempos de entrega y los costos de envío pueden variar según la ubicación. Consulta nuestra página de envíos internacionales para más detalles.
¿Cuánto cuesta el envío?
El costo del envío se calcula en el momento de la compra, basado en el peso del paquete y la ubicación de envío. Ofrecemos tarifas de envío estándar y exprés.
¿Puedo cambiar un producto?
Sí, puedes cambiar un producto dentro de los 30 días posteriores a la compra, siempre que esté en su estado original y no utilizado. Los cambios están sujetos a la disponibilidad de stock.
¿Cómo devuelvo un artículo?
Para devolver un artículo, sigue las instrucciones en nuestra página de devoluciones. Asegúrate de incluir toda la documentación requerida y utiliza el método de envío especificado.
Facebook
Twitter
Twitter
Instagram
Instagram
LinkedIn
LinkedIn
YouTube
YouTube
Pinterest
Pinterest
Snapchat
Snapchat
WhatsApp
WhatsApp
TikTok
TikTok
Reddit
Reddit
Tumblr
Tumblr
Vimeo
Vimeo
Dribbble
Dribbble
GitHub
GitHub
Slack
Slack
Spotify
Spotify
Discord
Discord
Telegram
Telegram
Behance
Behance
Medium