Contenedores en Bootstrap

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

Clase anteriorSiguiente clase

Resumen

Veamos los componentes de Bootstrap,

Bootstrap soporta 5 tamaños extrasmall, small, medium, large, extra large

.container, crea un contenedor con padding.

.container-fluid, crea un contenedor que ocupa todo el ancho disponible

David Camacho

student•

Bootstrap a diferencia de Foundation tiene mayor cantidad de Brakepoints, en BBootstrap podemos utilizar 5, los cuales son:

Extra Small: < 544px
Small: 544px - 768px
Medium: 768px - 992px
Large: 992px - 1200px
Extra Large: > 1200px

Esto hace mas simple el codigo de foundation pero es una ventaja tener mas Breakpoints ya que podemos adaptarnos a mas dispositivos.

En Boostrap tenemos dos tipos de containers:

- <div class="container">

Esta clase nos proporciona un margen a los costados, es como que si ocupara 10 columnas y nos deja una a los lados

- <div class="container-fluid">

Este container nos elimina ese margen, de manera tal que ocupa el 100% del ancho.

Paul Santaria

student•

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { … }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

Paul Santaria

student•

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { … }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { … }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { … }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { … }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { … }

Platzi Team

student•

Bootstrap en su version estable v4.0.0 solo establece 5 puntos de corte para el diseño en dipositivos, estos son:

// Dispositivos extra pequeños (teléfonos de retrato, menores que 576px)
// No existe un media query debido a que este es el estandar en Bootstrap

// Dispositivos pequeños (teléfonos apaisados, 576px y mayores)
@media (min-width: 576px) { ... }

// Dispositivos medianos (tabletas, 768px y mayores)
@media (min-width: 768px) { ... }

// Dispositivos grandes (de escritorio, 992px y mayores)
@media (min-width: 992px) { ... }

// Dispositivos extra grandes (grandes  de escritorio, 1200px y mayores)
@media (min-width: 1200px) { ... }

Clases de contenedores en bootstrap:

.container: este contenedor aplica un margen a ambos lados del contenedor centrándolo en la ventana.
.container-fluid: a diferencia de la clase .container, esta clase elimina esos márgenes, ocupando todo el espacio horizontal diponible.

Loredana Ursu

student•

Hola. En la nueva version de Bootstrap 4-alpha.6 han quitado el xs de la columna col-xs. Se ha quedado en col.

Miguel Gutiérrez Rodríguez

student•

container: El contenedor ocupará el ancho de la pantalla que sea razonable, dependiendo el tamaño de la pantalla del dispositivo.

container-fluid: El contenedor siempre ocupará todo el ancho disponible de la pantalla.

Jose L. Figueroa

student•

Para Bootstrap 4.1.3, que es el que uso mientras veo el curso, se tienen los siguientes breakpoints:

Extra Small: < 576px
Small: 576px - 768px
Medium: 768px - 992px
Large: 992px - 1200px
Extra Large: > 1200px

Y como resumen, se manejan 2 tipos de containers:

Container. Centra el contenido de la página que éste contenga.
Container Fluid. Ocupa el 100% siempre de la pantalla, todo el tamaño que tengamos disponible.

Alexander Valencia

student•

.container

.conatiner-fluid

Jorge Luis Paiva Huamán

student•

CSS vs SCSS. El archivo de estilos _grid mostrado en el Inspector (06:32') no tiene extension css :-0

Daniel Adolfo Ordoñez Rubio

student•

:nerd_face: Bootstrap utiliza SASS (archivos .scss) para manejar variables y funciones que facilitan el manejo del estilo en módulos. Curso de Sass

Jorge Luis Paiva Huamán

student•

Supongo que el 544px obedece al máximo ancho de dispositivos móviles vigentes. Pero cómo haces cuando estas dimensiones varían en el tiempo o incluimos muchos los break points por cada caso?

Fernando Gonzales

student•

esta cortado el video? en el comienzo informa una duracion de 7:45 en 7:35 se corta

Ricardo Azpeitia P.

student•

Prueba con el server B

Uriel Ramírez

student•

Hey Fanndo, todo me va bien. ¿Te pasa en Ambos Servers?

Juan David lemus Rubiano

student•

muchachos algo que le falto explicar a sacha es que el container lo que hace es como centrar el contenido que quede una margen en lado y lado el container-fluid quita estos margenes de lado y lado y queda el contenido sin centrar se organiza en toda la pantalla, esto es como para que entiendan que es container y container-fluid

Usuario anónimo

user•

¿ Cómo logras que se escriba header#header-container ?

Diego Forero

Team Platzi•

Busca un plugin que se llama emmet, lo instalas dependiendo del editor de texto que uses.

Usuario anónimo

user•

Gracias! Lo probaré

Contenedores en Bootstrap

¡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

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

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman