Bootstrap lanzó su versión v4.0.0-alpha.6

Clase 25 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Contenido del curso

¡Hemos renovado este curso!

1
¿Dónde aprender frontend actualizado?
00:17 min

Bienvenido al curso

Foundation

Bootstrap

Conclusiones

Contenido complementario

Tomar examen

Hoy Bootstrap lazó su versión 4.0.0-alpha.6 la cual trae algunos pequeños cambios.

Durante el curso utilizamos la versión 4.0.0-alpha.3

No hay grandes cambios pero para seguir el curso y no tener errores, asegúrate de estar usando los archivos adecuadors.

El index.html del proyecto debe comenzar siendo así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">

    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
  </body>
</html>

Y que más adelante, tu archivo bootstrap-flex.min.css sea como el archivo que se encuentra en el material de Grillas Flex con Bootstrap de este curso

Te sugiero de todas maneras, que intentes seguir el curso usando siempre la última versión y leyendo la documentación cuando te encuentres con algún problema.

De esa manera estarás aprendiendo lo que hace un desarrollador todos los días: leer y entender documentación para avanzar en sus proyectos.

Si lo haces, te invito a que dejes en los comentarios del video cómo lo lograste para compartir tu solución con el resto de los alumnos.

Cualquier dura que tengas, no olvides dejar un comentario en este material o haciéndome mención en Twitter con @slifszyc

Comentarios

Ricardo Garrido Cruz

student•

El comentario de “Leer y entender” es muy cierto, muchas veces seguimos con el proyecto sin saber lo que estamos haciendo del todo bien, solo avanzamos rápido para “ver avances” y al ultimo termina uno con un proyecto que ya no sabemos ni como arreglarlo.

Cesar Octavio de Jesus Meza Carrillo

student•

Grachas Sacha, Empece con la version 4.x el dia de hoy, veamos como seguimos

Alexander Valencia

student•

ahora bootstrap es mucho mejor

José Reyes

company_admin•

ahora que tomo e Curso… la version 4 ya fue liberada…

Diego Forero

Team Platzi•

Libero la beta-2 aun no es la versión final.

José Reyes

company_admin•

gracias, por la aclaracion

Balam Omaña

student•

Gracias sacha!!

Emmanuel Octavio Martinez C

student•

¿Y actualmente valdrá la pena tomar este curso de bootstrap? ¿O ya cambio demasiado?

Diego Forero

Team Platzi•

Los conceptos como tal funcionan pero si han cambiado varias cosas mas que todo en la parte de JavaScript.

Gabriel Alvarez

student•

pero igual es bueno tener conocimientos, sabemos que todo con el tiempo cambia, pero el conceptos es el mismo o me equivoco?

Roberto Del Valle

student•

Gracias!

Natalia

student•

hola !
son los unicos cambios si el curso lo estamos haciendo ahora ?

Diego Forero

Team Platzi•

No, Bootstrap sigue haciendo cambios ya que sigue en estado alpha/beta.

Natalia

student•

me gustaria hacer otra consulta, genere una carpeta contenedora (como la de platzishop, pero con otro nombre) luego dentro de ella hice dos archivos uno index.html y el otro app.css y no puedo generar que se relacionen de ninguna forma, es decir que no puedo cambiar su color de background ni nada,podrias verlo para ayudarme a dectectar el error ?

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">

    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap lanzó su versión v4.0.0-alpha.6

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap