Nuestro Proyecto: Hola Mundo de Bootstrap

Resumen

Vamos a sitio web oficial de Bootstrap en getbootstrap.com . Cualquier duda que tengas sobre los componentes y su uso que no se respondan en este curso, lo puedes encontrar en la sección de Documentation del sitio de Bootstrap.

Néstor José Silva Castillo

student•

Es importante precisar que existen 2 formas para utiliza bootstrap:

1. Mediante el CDN: En este video, Sacha copia la plantilla de inicio que, contiene la referencia a los css y a 3 archivos javascript. Dentro de los cJS están:
**a. **La referencia a JQuery (Sí, utiliza JQuery para las funciones que css, por obvias razones no podría implementar)
b. Referencia a Popper.JS: Esta herramienta nos sirve para crear los popUps (esos mensajes flotantes que se muestran al posicionar el cursor en un lugar predeterminado)
**c. **Finalmente llama al JS de bootstrap.

Por otro lado, noten que cada referencia contiene un .min dentro de sus nombres (por ejemplo; bootstrap.min.css, …jquery-3.3.1.slim.min.js, etc) que no es más que la versión minificada(sin espacios) de
cada archivo de código.

2. Descargando todos los archivos comprimidos:
Otra de las opciones es descargando todos los archivos que componen Bootstrap, esta opción es interesante ya que te permite trabajar sin conexión a internet, cosa que no puedes hacer con laa opción anterior.

Jhon Carlos Colorado Angulo

student•

Gracias por la aclaración. No sabía lo de los Popper.JS

Jose L. Figueroa

student•

Gracias, tampoco conocía lo de Popper.JS

Juan Camilo Valencia Silva

student•

Aquí el update de Bootstrap v5.2 🙋🏻‍♂️

<!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">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h2>Test Bootstrap 5.2</h2>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

Rodolfo Castellanos Casas

student•

Gracias

Kevin Anzola

student•

gracias bro !!!

Carlos Gómez Mont

student•

Visual Studio TEAM 😃

Harold David Avila Sabogal

student•

presente

Daniel Esteves

student•

Visual Studio Code es lo que deberías usar antes que cualquier otro editor. Viene con más funcionalidades y complementos, así como también menos errores 💪🏼

Enrique Garcia Stave

student•

Apuntes: Para acceder a usar Bootstrap, nos dirigimos a la pagina https://getbootstrap.com/ y podemos descargar la carpeta que contiene toda la usabilidad del framework (HTML, CSS JS) o simplemente podemos agregar los enlaces CDN para su uso. Enlace de descarga y CDN: https://getbootstrap.com/docs/4.3/getting-started/download/

Daniel Esteves

student•

Excelente aporte Enrique. Prueba también Tailwind y Foundation, ambos frameworks tan útiles como Bootstrap

Ricardo Andres Zambrano Cuaicuan

student•

Buen aporte

Jonathan Guidi

student•

Hola gente! Es clave saber y comprender que por más que el curso sea de Bootstrap 4, y hoy en día exista Bootrstrap 5.3. Este framework css, funciona igual.. Es decir que el sistema de grillas se implementa de la misma forma que en la version 4, existen diferencias en otras cosas como nuevos componentes por parte de la version 5, etc.. A lo que voy, es que de todas formas, aprendes a pesar de ser un curso desactualizado!

Leonard Mendoza

student•

que resulta mejor para mi página en vivo, tener los archivos de bootstrap descargados en el proyecto o usar los CDN?

Juan C Felizzola

student•

Lo recomendable es añadir los enlaces a los archivos JS y CSS en el <head> de tu documento. Es mucho mejor usar los enlaces de un CDN ya que los usuarios que visiten tu página probablemente tengan ya esos archivos en su caché y no necesiten volverlos a descargar, disminuyendo dramáticamente el tiempo de carga de tu web.

Respuesta de:

Harold David Avila Sabogal

student•

Que buena información muchas gracias

Jeferson Stiven Parra Mahecha

student•

Bootstrap también se puede descargar por medio de Composer.

Adrian Lima

student•

No es muy recomendable, porque tocaría descargar cada actualización y eso si es que te enteras de ella.

Tomas Goldenberg

student•

Hola comunidad!! interesados en crear un grupo de wsp para consultar todo tipo de cuestiones front end comenten! Otra consulta bootstrap es una herramienta vigente? pregunto porque vi que tiene usos con jquery pero no se mucho sobre este framework

Juan Esteban Galvis

student•

Hola! interesante la propuesta del grupo.

Respecto a Bootstrap si todavía es vigente, además de estarse actualizando, la comunidad también puede colaborar dado que es de código abierto.

Tomas Goldenberg

student•

buenisimo juan! muchas gracias!

https://platzi.com/comunidad/grupo-de-wsp/

aca acabo de hacer la propuesta en el foro para ver si tiene mas repercucion!!

Miguel Angel Lozano Alvarez

student•

Alguna extencion de Bootstrap para vsCode

Deymer Hernandez

student•

Esta es excelente: https://www.tutorialesprogramacionya.com/bootstrap4ya/detalleconcepto.php?punto=70&codigo=70&inicio=60

Juan Diego Silva Garcia

student•

Pregunta en que casos es bueno usar CDN, Descargar los archivos o utilizar un manejador de paquetes como NPM?

Diego Forero

Team Platzi•

Un CDN es bueno usarlo cuando es una librería que es muy usada, esto es porque cuando visiten tu sitio probablemente ya visitaron otro sitio que tenia usaba esa misma librería y la va a tener en cache del navegador lo que va a mejorar el tiempo de carga de tu sitio, el usar un gestor de paquetes como NPM ayuda a replicar de manera fácil el entorno de desarrollo o producción, por ejemplo si llega un desarrollador nuevo al equipo, simplemente ejecuta npm install y ya tiene el entorno listo, de lo contrario tiene que bajar todas las librerías a mano.

Juan Guillermo Perez Cardozo

student•

para iniciar esta bien llamar la libreria por cdn, luego agregarias los .min necesarios

Jonathan David Olivos

student•

¿Qué es cdn y .min?

Facundo Nicolás García Martoni

teacher•

Un CDN (Content Delivery Network) es una red de servidores que tienen almacenados archivos que puedes utilizar en tus proyectos, como por ejemplo el framework Bootstrap. Lo que hace tu computadora es conectarse al servidor más cercano para utilizar ese archivo sin tener que guardarlo en tu propio servidor. Un ".min" es generalmente un archivo de CSS "minificado", es decir, un código al que se le quitaron los espacios, saltos de línea, comentarios, etc. para que pese menos y sea leído con mayor rapidez por el navegador. Espero que mi respuesta te haya ayudado 😉

Joel Vicente Nieto Gómez

student•

Ya esta disponible la versión 4.5 Bootstrap: https://getbootstrap.com/docs/4.5/getting-started/download/

Andrés Alejandro Ramos Uyaban

student•

También esta la versión 5 que aún es alpha . Saludos

Danilo Fernandez

student•

Excelente, gracias.

Jaime Diaz

student•

Hola compañeros,
haciendo mención sobre los famosos modales/popups, les hago la pregunta:
¿Bootstrap provee clases para lograr maquetar ventanas modales pero que NO sean estáticos sino popups arrastrables (con el mouse)?
Me han hecho una petición sobre esta característica que muy poco se ve ya en cuanto a los modales y quisiera saber si los compañeros saben si Bootstrap soporta tal características, o de lo contrario, saben de alguna librería externa para lograr tal finalidad.
Desde ya, muchas gracias.

Pablo Domínguez Durán

student•

Hola, esas características no las trae boostrap pero que yo sepa se pueden implmentar fácilmente con algún otro framework de JS o incluso con jQuery.

Harold David Avila Sabogal

student•

Gracias por la información

Salvador C. Melendez

student•

¿Como puedo hacer para agregar un botón personalizado en custom-front.css?

Diego Forero

Team Platzi•

Debes crear las clases que quieras usar para ese botón y luego en el html creas el boton y usas las clases definidas.

Juan Manuel Hincapié

student•

Versión 5.3

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h2>Hello, world!</h2>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

Wilson Marino Pablo Mendez

student•

Actualmente ya esta la versión 4.2

Daniel Esteves

student•

Y sigue progresando, ya estamos con la 4.3. Prueba también Tailwind y Foundation, ambos frameworks tan útiles como Bootstrap

Juan Camilo Valencia Silva

student•

5.2 Jeje

Héctor Aguilar Mogollan

student•

ya de inicio parece facil, haber que tal, me gusta mucho usar css, pero estoy aprendiendo esto para hacer cosas mas rapido!

Joel Dominguez Merino

student•

Es mi caso, me gusta mucho hacer CSS puro. Pero hay veces que me gustaría hacer algunas practicas más rápido sobretodo ahora que me encuentro estudiando Javascript. Le quiero dar una oportunidad a los Frameworks, haber como sale esto :)

Kathion Vega

student•

link del sitio oficial de Bootstrap4

Harold David Avila Sabogal

student•

Muchas Gracias

Daniel Esteves

student•

¡Hola! Prueba también Tailwind y Foundation, ambos frameworks tan útiles como Bootstrap

camilo Rincon

student•

Excelente inicio, gracias Platzi y Sacha.

Daniel Esteves

student•

Excelente! Luego de tanto tiempo de haber tomado el curso, ¿Todavía recuerdas lo que aprendiste? Cuéntame, tu retroalimentación nos sirve mucho

Darwin Jiménez Hernández

student•

Grande Mangel Rogel!

Rodrigo Cuenca Mayuri

student•

jaja nada que ver xd

<!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">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h2>Test Bootstrap 5.2</h2>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h2>Hello, world!</h2>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

Nuestro Proyecto: Hola Mundo de Bootstrap

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