Estructura adaptable (Scaffolding)

Boostrap se construye en una tabla de 12 columnas adaptable. También hemos incluido diseños con un ancho fijo o fluido basados en ese sistema.

Requiere doctype HTML5

Bootstrap utiliza los elementos HTML y las propiedades CSS que requieren el uso de un doctype HTML5. Asegúrate de incluirlo al principio de cada página con Bootstrap en tu proyecto.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Tipografía y enlaces

Dentro del archivo scaffolding.less, seteamos una estructura básica, tipografía y estilos de enlaces. Específicamente, nosotros:

  • Eliminamos los márgenes del body
  • Seteamos background-color: white; en el body
  • Usamos los atributos @baseFontFamily, @baseFontSize, y @baseLineHeight como nuestra tipografía básica
  • Seteamos el color de enlaces con @linkColor y aplicamos linea de subrayado al enlace sólo cuando se hace un :hover

Reset via Normalize

En cuanto a Boostrap 2, el reajuste tradicional CSS ha evolucionado para usar elementos desde Normalize.css, un proyecto por Nicolas Gallagher que también tiene el HTML5 Boilerplate.

El nuevo reajuste todavía se puede encontrar en reset.less, pero con muchos de estos elementos han sido suprimidos para ser más breves y exactos.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

El sistema de grids por defecto proporcionado como parte de Boostrap es de 940px de ancho, una tabla de 12 columnas.

También tiene variables adaptables para varios dispositivos y resoluciones: teléfono, Tablets, dispositivos en posición horizontal y netbooks, y pantallas de ordenadores de escritorio.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Como se muestra aquí, el diseño básico se puede crear con dos columnas (grids), cada una suman y abarcan un número de 12 grids fundamentales que definimos como parte de nuestro sistema de tabla.


Columnas de compensación

4
4 offset 4
3 offset 3
3 offset 3
8 offset 4
<div class="row">
  <div class="span4">...</div>
  <div class="span4 offset4">...</div>
</div>

Columnas anidadas

Con el sistema de tabla estático (no-fluido) en Boostrap, la anidación es fácil. Para anidar tu contenido, solo añade el nuevo .row y pon el .span* dentro de la columna existente .span*

Ejemplo

Las filas anidadas deberían incluir un conjunto de grids que se añaden al número de grids de su pariente. Por ejemplo, dos columnas .span3 anidadas deberían colocarse dentro de .span6.

Columna 1 nivel 1
Columna 1 del nivel 2
Columna 2 del nivel 2
<div class="row">
  <div class="span12">
    Level 1 of column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

Columnas fluidas

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Porcentajes, no pixeles

El sistema de tabla fluida utiliza porcentajes para los anchos de la columna en lugar de pixeles fijos. También tiene las mismas variaciones adaptables como nuestro sistema de tabla fija, asegurando proporciones adecuadas para las resoluciones y dispositivos clave de pantalla.

Filas fluidas

Haz cualquier fila fluida simplemente cambiando .row pro .row-fluid. Las columnas permanecerán iguales, haciéndolo muy directo para cambiar entre diseños fijos y fluidos.

Etiquetado

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Anidación fluida

Anidar con tablas fluidas es un poco diferente: el número de columnas anidadas no es necesario que coincida con el nivel superior. En su lugar, tus columnas se reajustan a cada nivel porque cada fila llega al 100% de la grid pariente

Fluida 12
Fluida 6
Fluida 6
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>
Variable Valor por defecto Descripción
@gridColumns 12 Número de columnas
@gridColumnWidth 60px Ancho de cada columna
@gridGutterWidth 20px Espacio negativo entre columnas
@siteWidth Suma de todas las columnas y espacios entre éstas. Cuenta el numero de columnas y espacios para poner el ancho correcto .container-fixed()

Variables en LESS

Creadas en Boostrap hay unas variables útiles para personalizar el sistema de grids por defecto de 940px, explicadas anteriormente. Todas las variables para la tabla se almacenan en variables.less.

Cómo personalizarla

Modificar la tabla significa cambiar las tres variables @grid* recompilar Boostrap. ambia las variables de la tabla en variables.less y utiliza una de las cuatro maneras explicadas para recompilar. Si estás añadiendo más grids, asegúrate de añadir CSS para aquellas en grid.less.

Personalización del grid adaptable

La personalización de la tabla solo funciona a un nivel por defecto, la tabla de 940px. Para mantener los aspectos adaptables de Boostrap, también tendrás que personalizar las tablas en responsive.less.

Plantilla Fija

El diseño simple y por defecto de 9410px para cualquier página web o página porporcionada por un <div class="container">individual.

<body>
  <div class="container">
    ...
  </div>
</body>

Plantilla Fluída

El <div class="container-fluid"> da una estructura de página flexible, con anchos mínimos y máximos, y una barra a la izquierda. Es fantástico para aplicaciones y documentos.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

Responsive devices

¿Qué hacen los medias queries?

MLos media queries permiten la personalización basada en CSS en un número de condiciones – proporciones, anchos, tipo de diseño, etc. – pero normalmente se concentra alrededor del min-width y max-width (mínimo y máximo de ancho).

  • Modifica el ancho de grid en nuestr grid
  • Amontona elementos en lugar de tenerlos suspendido cuando es necesario
  • Ajusta el tamaño de los encabezamientos y del texto para que sea más adecuado para los dispositivos.

tiliza media queries responsablemente y solo como el punto de partida de tus audiencias móviles. Para proyectos más largos, considera las bases de código y no las capas de media queries.

Dispositivos Soportados

Boostrap sostiene media queries útiles en un archivo individual para ayudar que tus proyectos se hagan adecuadamente en diferentes dispositivos y en resoluciones de pantalla. Aquí tienes lo que está incluido:

Etiqueta Ancho de plantilla Ancho de columna Ancho de separación
Smartphones 480px e inferiores Columnas fluidas, sin ancho fijo
Smartphones a Tablets 767px e inferiores Columnas fluidas, sin ancho fijo
Tablets (horizontal) 768px y superiores 42px 20px
Default 980px and up 60px 20px
Pantallas anchas 1200px y superiores 70px 30px

Etiqueta META requerida

Para asegurar que los dispositivos muestran las páginas receptivas adecuadamante, incluye el viewport de etiqueta meta.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Usando los media queries

Boostrap no incluye automáticamente estos media queries, pero entenderlos y añadirlos es muy fácil y requiere una instalación mínimal. Tienes un par de opciones para incluir las características adaptables de Boostrap:

  1. Usa la versión compilada receptiva bootstrap-responsive.css
  2. Añade @import "responsive.less" y recompila Bootstrap
  3. Modifica y recompila responsive.less como un archivo separado

¿Por qué no incluirlo directamente? La verdad es que no es necesario que todo sea adaptable. En lugar de animar a los desarrolladores para que eliminen esta característica, pensamos que era mejor habilitarla.

  // Hasta smartphones de 480px
  @media (max-width: 480px) { ... }

  // de Smartphones a Tablets
  @media (max-width: 768px) { ... }

  // de Tablets a pantallas de desktops
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Pantallas anchas (desktops)
  @media (min-width: 1200px) { .. }

Adaptabilidad (Clases últiles)

¿Qué son?

Para un desarrollo móvil más rápido, utiliza estas clases de utilidad básicas para mostrar y esconder contenido en el dispositivo.

¿Cuándo usarlas?

Úsalas en una base limitada y evita crear versiones totalmente diferentes del mismo sitio. En su lugar, utilízalas para complementar cada presentación del dispositivo.

Por ejemplo, puedes mostrar un elemento <select> para diseños móviles nav, pero no en Tablets o escritorios.

Clases de soporte

Aquí se ve una tabla de las clases que incluimos y su efecto en un diseño media query dado (etiquetado por dispositivo). Se pueden encontrar en responsive.less.

Clase Smartphones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Ejemplo

Ajusta el tamaño de tu navegador o carga en diferentes dispositivos para comprobar las clases en la parte superior.

Visible en...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Oculto en...

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop