Introducción al curso
Repositorio del curso de bootstrap
Bootstrap 4 ¿Qué trae de nuevo esta versión?
¿Que es un framework de frontend?
Nuestro Proyecto: Hola Mundo de Bootstrap
Creando el sitio web
La grilla de Bootstrap
Reto: La grilla de Bootstrap
El footer
El header de nuestro sitio
Creando un carousel de imágenes
Agregando texto informativo del evento
Agregando botones
Las cards de Bootstrap 4
Pastillas de texto
Agregando un contenedor de ancho completo
Los formularios de Bootstrap 4
Agregando un tooltip
Scrollspy: Conociendo la ubicación del usuario en el header
Agregando un modal para comprar tickets
Un nuevo formulario para completar la compra
Deploy a producción
Poniendo nuestro sitio en producción
Conclusiones del curso
You don't have access to this class
Keep learning! Join and start boosting your career
Contributions 42
Questions 1
Hice algunas modificaciones en el modal
Codigo Completo
<form action="">
<div class="row">
<div class="form-label col">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
</div>
</form>
<!-- Alerta -->
<div class="alert alert-warning" role="alert">
Recibiras un correo de confirmacion si ganas el Sorteo!
</div>
<!-- Alerta -->
Brutal curso, he aprendido algo que me llamaba la atención hace mucho y pues sería genial especializarse en esos frameworks que facilitan los procesos de maquetación 🏆
muy buena clase y la manera de utilizar
se termino! y me encanto!!
Así lo hice sencillo
Definitivamente Bootstrap lleva nuestros sitios web a otro nivel.
Genial, gran curso, muy importante
Al agregar un nuevo formulario, tendríamos 2 formularios en la misma pagina , si se hiciera un submit , se enviaría los datos de ambos formularios?
Adaptando el modal con un formulario relacionado:
Excelente curso, no hay más que decir
Así lo hice sencillo
Que otro rollo bootstrap 😃
Seria interesante hacer esta misma pagina con django por ejemplo.
Bootstrap es demasiado útil y práctico. Quiero profundizar más en esto.
Muy buena clase.
Muy buen curso, simple, rápido y sencillo. Sacha es un excelente profesor
Este es el Codigo del modal usando Bootstrap v5.1:
el tag
<form>
debe ser usado con al clase
was-validated
para que funcione la validacion.
<!-- Modal -->
<div class="modal fade" id="modalCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Buy Products</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form class="was-validated">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<!-- <label for="floatingPassword">Password</label> -->
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
</form>
<div class="alert alert-warning" role="alert">
You will be receving an email.
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Maybe Later, thanks</button>
<button type="button" class="btn btn-special">Buy now Bro</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
creo que puedo hacer sitios más bonitos 😃
Para que envia los datos al correo que tiene que hacer tu pagina, o alguien sabe como hacerlo?
+2
buen curso
Excelente curso
Muy buen curso.
No había usado alerts, pero me agrado como se ven.
Brutal el formulario.
Bootstrap ta buenisimo
Yo lo realice de este modo uwu
Me gusto mucho este curso, deberían sacar algunos más…
actualicen el curso
Más Bootstrap más tiempo de vida jaja
Que genial!!
Fácil de utilizar, muchas gracias.
genial todo este curso
Bootstrap es una increíble herramienta para desarrollar, lo usare para desarrollar mi portafolio y subirlo a GitHub
Me encantan estas clases interactivas de verdad siento que aprendo más.
f
Want to see more contributions, questions and answers from the community?