La grilla de Bootstrap

Clase 5 de 21 • Curso de Bootstrap 4

Contenido del curso

Introducción al curso

Creando el sitio web

Deploy a producción

Tomar examen

Comentarios

Leonardo David Martinez Hernandez

student•

WOOOWWW cuanto tiempo ahorrado!!!! Yo sugiero que las personas que no conocen como hacer un sistema de grillas, no pasen directamente a usar Bootstrap, es importante que entiendan que es realmente lo que Bootstrap hace y que deje de parecer magia XD. Esto con la intención de que cuando exista algo que el framework no pueda solucionar o no sea exactamente lo que necesitan, podamos superar el reto.

Este consejo realmente aplica para todas estas tecnologías que facilitan el uso de las herramientas base, hablando en desarrollo web: html, css y javascript.

Saludos!!

Esteban Casallas

student•

si, es super importante entenderlo, buen aporte !

Max Felipe Hess Alvarez

student•

Estoy de acuerdo, ayudan un monton pero siempre es bueno entender las bases de como funcionan para utilizarlos de manera mas profesional y personalizable y ovbiamente si uno tiene las bases no se queda con dudas de por que o como es cada cosa.

Enrique Garcia Stave

student•

Apuntes: Bootstrap maneja un sistema de 12 grillas (o cuadriculas) que pueden gestionarse con las clases “.row” (para filas) o “.col” (para columnas). En cada fila, puede haber un máximo de 12 columnas (en caso de que hayan mas de 12, la columna subsiguiente se ubicara en la siguiente fila). - Container Nos crea un contenedor con un ancho fijo (ancho máximo) en cada uno de los tamaños de dispositivo.

- Container-fluidNos crea un contenedor (igual que el anterior) pero sin un ancho fijo aparente, por lo que ocuparía todo el ancho de la pantalla. Breakpoints: Son puntos de ruptura en el diseño web responsive en los que la pantalla cambia de layout.

Daniel Esteves

student•

Excelente resumen Enrique, ¿qué opinas sobre crear un repositorio en Github donde juntes cada uno de los que hiciste por clase en uno solo?

Juan C Felizzola

student•

Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios al usar nuestro sistema de grillas predeterminado.

.container: ancho fijo
.container-fluid: ancho fluido

El sistema de grillas de Bootstrap usa una serie de contenedores, filas y columnas para diseñar y alinear el contenido. Está construido con flexbox y responde completamente.

Daniel Esteves

student•

¡Hola! Excelente síntesis, ¿tienes más? Considera hacer un repo en Github para que los demás estudiantes puedan servirse de tu gran trabajo!

Michael Steven Viloria García

student•

eso esta en la documentacion

Jorge Ulises Basurto Arriaga

student•

Grisha! Jajaja

John Edward León Muñoz

student•

Extensión para VS Code recomendada:

Michelle Verano

student•

Sasha es un crack, uno de los mejores profesores. Incredible.

Daniel Esteves

student•

Es uno de los mejores profesores de Platzi. Él también dicta el de Fundamentos de JS (muy recomendado tomarlo)

Jesus Adrian Berrio Valdes

student•

Deberían actualizar este curso ya, actualmente estamos en bootstrap 5 y si lees la documentación hay demasiadas cosas nuevas que este curso no toca

Jhony Alexis Martinez Garcia

student•

Si cierto, estoy aprendiendo Bootstrap y la última versión es la 5, busque para profundizar un curso en Platzi, pero no han actualizado mucho.

Platzi Team

student•

Porque Bootstrap aún utiliza JQuery?

David Toca

student•

Cuanto se creo bootstrap jquery era muy popular, y sus mantenedores han decidido seguir usarlo (supongo que una migracion en este punto seria muy dispendiosa)

Franklin Gil

student•

migrar bootstrap, seria desarrollar de nuevo los componentes y seria un cambio para la plataforma twitter.

Puede una de las reazones…

Fortunato Jesus Caraballo Herrera

student•

FALTA ACTUALIZAR

Christian David Sánchez

student•

(

Daniel Esteves

student•

Qué dices Cristian, ¿crees que es mejor este sistema de grillas que el nativo de CSS?

Christian David Sánchez

student•

Unicamente he utilizado la grilla de bootstrap.

Jose L. Figueroa

student•

Los **Containers ** son el elemento más básico dentro del Grid System de Bootstrap.

El **container ** es el que va a contener a la rejilla, el cual tiene un ancho fijo, y permanecerá así dependiendo de la resolución de los dispositivos donde se esté desplegando el sitio.

El container-fluid aprovecha el 100% del espacio que tengamos disponible, no importando la resolución donde estemos viendo el sitio web.

Dentro del **container ** se deben de incluir las filas con la clase row y las columnas con la clase col.

Cada rejilla tiene como máximo 12 columnas, a menos a que lo modifiquemos.

Al no especificar el ancho de las columnas, éstas se lo repartiran equitativamente.

Daniel Esteves

student•

¡Hola! Excelente síntesis, ¿tienes más? Considera hacer un repo en Github para que los demás estudiantes puedan servirse de tu gran trabajo!

Carlos Ferrer

student•

He escrito unas lineas para poder monitorizar en todo momento cual es el tramo de tamaño de pantalla actual. Es una especie de navbar fijo. A medida que redimensionamos la pantalla del navegador, cuando se produce un break point , se actualiza el mensaje en el navbar, indicando el tramo de pixels.

<body>
    <div id="windowSizeTest" class="text-center p-0 m-0 " style="font-weight: bold; border: 1px solid black; color: white; position: fixed;top: 0; z-index: 100;width:100%; height:35px">
      
      <span id="xs" class="d-block d-sm-none"  style="background-color: rgb(34, 124, 197); width:100%; height:35px">1)XS: Extra Small (0 a 575 px)</span>
      <span id="sm" class="d-none  d-sm-block d-md-none"  style="background-color: rgb(28, 61, 134); width:100%; height:35px">2)SM: Small (575 a 768 px)</span>
      <span id="md" class="d-none  d-md-block d-lg-none"  style="background-color: rgb(64, 7, 138); width:100%; height:35px">3)MD: Medium (768 a 992)</span>
      <span id="lg" class="d-none  d-lg-block d-xl-none"  style="background-color: rgb(161, 18, 161);width:100%; height:35px">4)LG: Large (992 a 1200 px)</span>
      <span id="xl" class="d-none  d-xl-block" style="background-color: rgb(145, 16, 16);width:100%; height:35px">5)XL: Extra Large (1200 a ∞  px)</span>
    
    </div>

He colocado el código al principio del body, depués en la siguente etiqueta he aplicado un margin-top 35 para evitar que el navbar se superponga:

  <header style="margin-top: 35px;">

Queda una cosa así: ![](

Espero que resulte útil 🙂

Juan Esteban Galvis

student•

Cuando sabes CSS-grid te sientes genial haciendo esas grillas tu mismo, pero hay que aceptar que esto ayuda y facilita demasiado el trabajo.

Muy útil y de una vez responsive design

Diego Rodriguez

student•

pense que no era necesario aprender boostrap hoy en dia pero este curso me esta pareciendo muy interesante

Juan Esteban Muñoz

student•

Increible todo lo que se puede ahorrar con este framework

Max Felipe Hess Alvarez

student•

En resumen esto es tan potente que uno le dice adios a las medias query para las grillas :)

José Rubial

student•

el sistema de grillas de Bootstrap se basa en 12 columnas repartidas a lo largo de la pantalla

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

para utilizar esta herramienta debemos ir creando fillas con la clase .row y seccionarla en anchos con la clase .col

las filas y las columnas viven dentro d elo que se conoce como un container.

los container pueden ser

.container: va agregando un margen acorde al ancho de la pantalla
.container-fluid: abarca el 100% del ancho de la pantalla

Daniel Esteves

student•

¡Hola! Excelente síntesis, ¿tienes más? Considera hacer un repo en Github para que los demás estudiantes puedan servirse de tu gran trabajo!

Daniel Espinoza

student•

<div class="container" style="background: red;">
		<div class="row">
			<div class="col" style="border: 1px solid">
				1
			</div>
			<div class="col" style="border: 1px solid">
				2
			</div>
			<div class="col" style="border: 1px solid">
				3
			</div>
		</div>
	</div>
	<div class="container" style="background: blue;">
		<div class="row">
			<div class="col" style="border: 1px solid">
				1
			</div>
			<div class="col" style="border: 1px solid">
				2
			</div>
		</div>
	</div>
	<div class="container" style="background: #0059FF;">
		<div class="row">
			<div class="col-3" style="border: 1px solid">
				1
			</div>
			<div class="col-9" style="border: 1px solid">
				2
			</div>
		</div>
	</div>```

Cristian Camilo Alvarado Beltrán

student•

Hola. buen curso. Pero seria bueno que lo actualizaran. me ha si do de gran ayuda en mi trabajo. pero actualicenlo por favor.

Karla

student•

Me encantó esto. Estoy emocionada por aprender Bootstrap 👌

Daniel Alejandro Cumaco Robayo

student•

Yo estaba aburrido, ya no queria saber mas de HTML y CSS, yo solo queria ser Backend, hasta que vi este video lol

Karla

student•

Me gusta porque es rápido para maquetar proyectos y se ve muy bonito.

<body>
    <div id="windowSizeTest" class="text-center p-0 m-0 " style="font-weight: bold; border: 1px solid black; color: white; position: fixed;top: 0; z-index: 100;width:100%; height:35px">
      
      <span id="xs" class="d-block d-sm-none"  style="background-color: rgb(34, 124, 197); width:100%; height:35px">1)XS: Extra Small (0 a 575 px)</span>
      <span id="sm" class="d-none  d-sm-block d-md-none"  style="background-color: rgb(28, 61, 134); width:100%; height:35px">2)SM: Small (575 a 768 px)</span>
      <span id="md" class="d-none  d-md-block d-lg-none"  style="background-color: rgb(64, 7, 138); width:100%; height:35px">3)MD: Medium (768 a 992)</span>
      <span id="lg" class="d-none  d-lg-block d-xl-none"  style="background-color: rgb(161, 18, 161);width:100%; height:35px">4)LG: Large (992 a 1200 px)</span>
      <span id="xl" class="d-none  d-xl-block" style="background-color: rgb(145, 16, 16);width:100%; height:35px">5)XL: Extra Large (1200 a ∞  px)</span>
    
    </div>

<div class="container" style="background: red;">
		<div class="row">
			<div class="col" style="border: 1px solid">
				1
			</div>
			<div class="col" style="border: 1px solid">
				2
			</div>
			<div class="col" style="border: 1px solid">
				3
			</div>
		</div>
	</div>
	<div class="container" style="background: blue;">
		<div class="row">
			<div class="col" style="border: 1px solid">
				1
			</div>
			<div class="col" style="border: 1px solid">
				2
			</div>
		</div>
	</div>
	<div class="container" style="background: #0059FF;">
		<div class="row">
			<div class="col-3" style="border: 1px solid">
				1
			</div>
			<div class="col-9" style="border: 1px solid">
				2
			</div>
		</div>
	</div>```

La grilla 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