Curso de Bootstrap

Curso de Bootstrap

Instruido por:
Sacha Lifszyc
Sacha Lifszyc
Básico
2 horas de contenido
Ver la ruta de aprendizaje
Platzi Conf 2018 Hawai
Proyecto del curso
Platzi Conf 2018 Hawai

¡Platzi Talks llega por primera vez a Hawaii! Un evento para compartir con nuestra comunidad el conocimiento y experiencia de los expertos que están creando el futuro en internet. Ven a conocer a miembros del Team Platzi, a otros estudiantes de Platzi y a los conferencistas de primer nivel que tenemos para vos. ¡Te esperamos! Puedes ver el proyecto aquí: https://sachalifs.github.io/platzi-bootstrap/

Curso de Bootstrap

Curso de Bootstrap

Progreso del curso:0/21contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/21contenidos(0%)

Introducción al curso

Repositorio del curso

00:15 min

Material Thumbnail

Bootstrap 4 ¿Qué trae de nuevo esta versión?

03:23 min

Material Thumbnail

¿Que es un framework frontend?

02:45 min

Material Thumbnail

Nuestro Proyecto: Hola Mundo de Bootstrap

02:34 min

Creando el sitio web

Material Thumbnail

La grilla de Bootstrap

12:09 min

Material Thumbnail

Reto: La grilla de Bootstrap

05:43 min

Material Thumbnail

El header de nuestro sitio

13:18 min

Material Thumbnail

Creando un carousel de imágenes

07:58 min

Material Thumbnail

Agregando texto informativo del evento

12:51 min

Material Thumbnail

Agregando botones

04:42 min

Material Thumbnail

Las cards de Bootstrap 4

11:44 min

Material Thumbnail

Pastillas de texto

04:38 min

Material Thumbnail

Agregando un contenedor de ancho completo

12:26 min

Material Thumbnail

Los formularios de Bootstrap 4

15:43 min

Material Thumbnail

Agregando un tooltip

04:07 min

Material Thumbnail

Scrollspy: Conociendo la ubicación del usuario en el header

07:23 min

Material Thumbnail

Agregando un modal para comprar tickets

04:47 min

Material Thumbnail

Un nuevo formulario para completar la compra

04:40 min

Deploy a producción

Material Thumbnail

Poniendo nuestro sitio en producción

04:08 min

Material Thumbnail

Conclusiones del curso

00:51 min

nuevosmás votadossin responder
Giselly Romero Nuñez
Giselly Romero Nuñez
Estudiante

Una consulta la clase “.data-offset=[valor]” esta manera no me funciona el Scrollspy.

Alguien me podria ayudar?

Este es mi barra del nav

<nav id="header"class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top"></nav>

Este es mi body

    <body data-spy="scroll"data-target="#navbar"data-offset="57">
    </body>

Acá le quito el active

<divclass="collapse navbar-collapse"id="navbar">
     <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
           <li class="nav-item">
           <a class="nav-link" aria-current="page" 		 
              href="#main">Conferencia</a>
            </li> 
</div>

Que me faltaria

Ah adicional a esto tengo los script

<!-- Optional JavaScript; choose one of the two! --><!-- Option 1: Bootstrap Bundle with Popper --><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"crossorigin="anonymous"></script><!-- Option 2: Separate Popper and Bootstrap JS --><scriptsrc="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"crossorigin="anonymous"></script><scriptsrc="./index.js"></script>
2
Giselly Romero Nuñez
Giselly Romero Nuñez
Estudiante

Una consulta esta bien lo que acaba de hacer Sacha? un texto dentro del div sin etiquetas? Yo lo coloque así y quería saber si estaba mal?

<divclass="col text-center"><p>Anótate como orador para dar una charla ignite. Cuéntanos de que quieres hablar!</p></div>
0
Giselly Romero Nuñez
Giselly Romero Nuñez
Estudiante

una consulta, porque será que el atributo data-pause=“false” no me funciona?

estos son los script que tengo en JavaScrip

<!-- Optional JavaScript; choose one of the two! --><!-- Option 1: Bootstrap Bundle with Popper --><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"crossorigin="anonymous"></script><!-- Option 2: Separate Popper and Bootstrap JS --><!--
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
        -->
1
Giselly Romero Nuñez
Giselly Romero Nuñez
Estudiante

Porque si existe un index css

#footer{
    background: linear-gradient(0deg,#1c3643,#273b4725%,#1e5372);
  }
  
  #footer a{
    color: #FFFFFF;
  }

Porque colocamos estilos de padding pb-4 pt-4 en html??

0
Nicolas Ortiz
Nicolas Ortiz
Estudiante

Con que comando selecciona y luego lo mueve un poco hacia un lado?

2
Nicolas Ortiz
Nicolas Ortiz
Estudiante

Existiendo ya boostrap 5 recomendaria seguir con el curso?
Existira mucha diferencia?

0
Cindy Yuliana Castro Plazas
Cindy Yuliana Castro Plazas
Estudiante

Hola chicos, tengo siempre el mismo dilema, cargo las imagenes para el carrousel le aplico el estilo pero al parecer no carga algun atributo y las imagenes cambian pero hay un salto en la altura.

#main .carousel-inner img{
max-height: 50vh;
object-fit: over;
filter: grayscale(70%);
}

2
bixhiic
bixhiic
Estudiante

hola una preguntita… el fixed-top me funciona bien con respecto a la navegación pero mientras voy haciendo scroll de sección a sección no se resaltan los links pertenecientes a esa sección en el menú, que podría ser?

1
Carlos Alberto De Avila Suro
Carlos Alberto De Avila Suro
Estudiante

Use el atributo data-pause=“false” para no pausar el carrusel con el over del mouse, pero no me funciona. Aqui mi linea por si alguien pudiera ayudarme

<div id=“carousel” class=“carousel slide” data-bs-ride=“carousel” data-pause=“false”>

3
Carlos Alberto De Avila Suro
Carlos Alberto De Avila Suro
Estudiante

¿Alguien podria decirme Por que no me aparece el menu de la amburguesa y las opciones del dropdown?. Gracias de antemano
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link href=“https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6” crossorigin=“anonymous”>

<title>Document</title>

</head>
<body>
<nav class=“navbar navbar-expand-lg navbar-light bg-light”>
<div class=“container-fluid”>
<a class=“navbar-brand” href="#">Navbar</a>
<button class=“navbar-toggler” type=“button” data-bs-toggle=“collapse” data-bs-target="#navbarSupportedContent" aria-controls=“navbarSupportedContent” aria-expanded=“false” aria-label=“Toggle navigation”>
<span class=“navbar-toggler-icon”></span>
</button>
<div class=“collapse navbar-collapse” id=“navbarSupportedContent”>
<ul class=“navbar-nav me-auto mb-2 mb-lg-0”>
<li class=“nav-item”>
<a class=“nav-link active” aria-current=“page” href="#">Home</a>
</li>
<li class=“nav-item”>
<a class=“nav-link” href="#">Link</a>
</li>
<li class=“nav-item dropdown”>
<a class=“nav-link dropdown-toggle” href="#" id=“navbarDropdown” role=“button” data-bs-toggle=“dropdown” aria-expanded=“false”>
Dropdown
</a>
<ul class=“dropdown-menu” aria-labelledby=“navbarDropdown”>
<li><a class=“dropdown-item” href="#">Action</a></li>
<li><a class=“dropdown-item” href="#">Another action</a></li>
<li><hr class=“dropdown-divider”></li>
<li><a class=“dropdown-item” href="#">Something else here</a></li>
</ul>
</li>
<li class=“nav-item”>
<a class=“nav-link disabled” href="#" tabindex="-1" aria-disabled=“true”>Disabled</a>
</li>
</ul>
<form class=“d-flex”>
<input class=“form-control me-2” type=“search” placeholder=“Search” aria-label=“Search”>
<button class=“btn btn-outline-success” type=“submit”>Search</button>
</form>
</div>
</div>
</nav>
</body>
</html>

1