Scribd
Cargar
36 vistas24 páginas

Breakpoints y Diseño Responsive en Bootstrap

El documento describe los componentes básicos del diseño responsive en Bootstrap, incluyendo breakpoints, media queries y la cuadrícula. Los breakpoints determinan cómo se comporta el diseño en diferentes resoluciones, y Bootstrap incluye seis breakpoints predeterminados. Las media queries permiten aplicar estilos CSS específicos en diferentes rangos de anchos, y la cuadrícula proporciona una base para el diseño de layouts usando filas y columnas flexibles.

Cargado por

Adrian Sarchioni
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
36 vistas24 páginas

Breakpoints y Diseño Responsive en Bootstrap

El documento describe los componentes básicos del diseño responsive en Bootstrap, incluyendo breakpoints, media queries y la cuadrícula. Los breakpoints determinan cómo se comporta el diseño en diferentes resoluciones, y Bootstrap incluye seis breakpoints predeterminados. Las media queries permiten aplicar estilos CSS específicos en diferentes rangos de anchos, y la cuadrícula proporciona una base para el diseño de layouts usando filas y columnas flexibles.

Cargado por

Adrian Sarchioni
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd

Construye sitios rápidos y responsives con

Bootstrap
Breakpoints
Los puntos de quiebre son los anchos personalizables que determinan
cómo se comporta tu diseño receptivo en las diferentes resoluciones que
adoptará nuestro sistema.

• Los breakpoints son los componentes básicos del diseño responsive.


• Utiliza media queries para diseñar tu CSS por breakpoint.
• Mobile first, el diseño responsive es el objetivo.
Breakpoints disponibles
Bootstrap incluye seis breakpoints predeterminados, a veces denominados niveles
de cuadrícula, para compilar de forma responsive. Estos breakpoints se pueden
personalizar si estás utilizando nuestros archivos fuente Sass.
Media Query
Medidas pre establecidas que proporciona el frame, basadas
principalmente en anchos mínimos del viewport y permite aumentar la
escala de los objetos en las distintas resoluciones.
Media Query – min-widht
Estos SASS lo podemos adaptar a CSS de la siguiente manera:
Media Query – max-widht
Ocasionalmente usamos consultas con medios que van en la otra dirección
(el tamaño de pantalla dado o más pequeño)
Media Query – max-widht
Podemos usar las media query en el otro sentido (un tamaño específico o
más chico).
Media Query - Single breakpoint
También hay media queries y mixins para apuntar a un solo segmento de tamaños
de pantalla utilizando los anchos de breakpoint mínimo y máximo.
Media Query - Entre breakpoints
De manera similar, las media queries pueden abarcar múltiples anchos de
breakpoint:
Contenedores
Son los elementos más básicos de Bootstrap y se usan simpre dentro del sistema de
cuadrícula del frame.
Se usan para:
• Contener
• Rellenar
• Centrar Contenido dentro (a veces)

Si bien se pueden anidar, no es lo más común.

• .container, es el max-widht de cada breakpoint


• .container-fluid, es el 100% width en todos los breakpoint
• .container-{bp}, es el 100% hasta el breakpoint especificado
Contenedores
Contenedores
• Predeterminado

• Responsive

• Fluidos
Grid - Rejilla
Es la base para el armado del layout de cualquier proyecto que
iniciemos en Bootstrap.
¿Cómo funciona el sistema de cuadrícula (Grid)?
• Nuestra cuadrícula admite seis breakpoints responsive.
• Los contenedores centran y rellenan horizontalmente su contenido.
• Las filas son envoltorios para las columnas.
• Las columnas son increíblemente flexibles.
• Los gutters también son responsive y personalizables.
• Las variables Sass, los mapas y los mixins alimentan la cuadrícula.
Columnas con auto-layout
Ajusta los breakpoint automáticamente sin la necesidad de clase
numerada.
Establecer un ancho de columna
Contenido de ancho variable
Clases responsive
Para grids que son iguales en todos los viewports, usamos
directamente .col
Clases responsive – De Vertical a horizontal
Clases responsive – Mezclar y combinar
Combinamos clases para que se adapten a nuestras necesidades
Columnas de fila
Columnas de fila
Anidamiento
Personalización del GRID
• Haciendo uso de las variables y mapeo de SASS, podemos
personalizar la grid.
• Cambiar la cantidad de niveles, las media query y los anchos de los
containers.
Cols & Gutters

Niveles GRID

Luego de modificar el SASS, hay que volver a


compilar.

USAR PX y no rem, em o %

También podría gustarte