BootStrap, diseño adaptable

No Comments

Extracto

Los media queries permiten la personalización de la presentación basada en un número de condiciones, tales como proporciones, anchos, tipos de diseño, etcétera. Trabajar con Bootstrap permite la definción del comportamiento de nuestras distintas presentaciones para distintos medios.

Abreviaturas usadas

  • Píxel, píxeles (px)
  • Bootstrap (BS)

Dispositivos soportados

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

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 Smartphones480px and below Tablets767px and below Desktops768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Etiqueta META requerida

Para asegurar que los dipositivos muestran las páginas adecuadamente, incluye el viewport de etiqueta meta así:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

A la hora de trabajar…

BS no incluye automáticamente estos media queries, pero entenderlos y añadirlos es muy fácil. Tienes un par de opciones para incluir las características  adaptables de BS:
  1. Usa la versión compilada receptiva bootstrap-responsive.css
  2. Añade @import “responsive.less” y recompila BS.
  3. Modifica y y recompila responsive.less como un archivo separado.
Leo en el manual de BS que por diseño y optimización piensan que todo no debe ser responsive, esa es la causa por la que no lo incluyeron desde el inicio.
Categories: bootstrap

Bootstrap explicación del sistema Grid

No Comments

Extracto

Bootstrap se construye sobre una estructura de 12 columnas virtuales. Estas columnas son adaptables. Además existe la posibilidad de trabajar con anchos fijos y fluidos basados en este sistema. Igualmente existen opciones para convertir nuestro HTML para distintos soportes.

Abreviaturas usadas

  • Bootstrap (BS)
  • Píxel (px)

Sistema Grid

BS proporciona un sistema de 12 columnas con un ancho total de 940px de ancho. Nosotros podemos repartir estas columnas a nuestra conveniencia, por ejemplo:
  • 12 columnas de 1.
  • 4 columnas de 3.
  • 3 columnas de 4.
  • 2 columnas de 6.
  • 1 columna de 12.
  • 1 columna de ocho y otra columna de 4.
  • etcétera…
Como comprobarás siempre suman doce, vamos a crear un grid con dos columnas 1 de cuatro y otra de ocho.

 

</div>

Columnas de compensación

Siempre con la mente en 12 columnas, podemos “compensar” columnas, es decir, dejar espacios en blanco entre las columnas a nuestra voluntad y dependiendo de las necesidades de nuestro diseño. Vamos a crear cuatro columnas, cuatro vacías y otras cuatro columnas.

 

</div>

Columnas Fluídas

Basado en porcentajes, no en píxeles, el funcionamiento y concepto es similar, si bien el class del div es “row-fluid”. Esto permite asegurar las proporciones adecuadas cuando cambiamos de dispositivo. Me refiero a que nuestra página sea consultada por smartphones, tablets, ordenadores… etc.

 

</div>

 

Anidamiento de columnas

Esto nos permite dividir una columna (del ancho que tú elijas) en varias columnas a tu criterio. Una curiosidad: el número de columnas anidadas no es necesario que coincida con el nivel superior, en su lugar tus columnas hijas se reajustarán al 100% de su columna contenedora o columna padre. No obstante eso lo desaconsejo porque dificulta la comprensión del grid. Veamos un ejemplo:
Level 1 of column

Level 2

 

Level 2

</div> </div> </div>

 

Personalización del grid

Existe un archivo llamado variables.less donde las siguientes variables afectan a tus diseños.
  1. @gridColumns, número de columnas, valor por defecto 12.
  2. @gridColumWidth, ancho de cada columna, valor por defecto 60px.
  3. @gridGutterWidth, espacio vacío entre columnas, valor por defecto 20px.
  4. @SiteWidth, cuenta el número de columnas y espacios para poner en ancho correcto, valor por defecto, la suma de todas las columnas y espacios entre éstas.

Plantillas

Plantilla fija

El ancho predeterminado es 940px para cualquier página web proporcionada
<body>

</body>

Plantilla Fluída

Permite una estructura de página flexible, con anchos mínimos y máximos y una barra a la izquierda. Ideal para aplicaciones documentales.

 

</div> </div>

Trabajar con botones desplegables

No Comments

Extracto

Similar a un grupo de botones, se utiliza un etiquetado para los botones desplegables, veamos un ejemplo. Este componente usa otros útiles para refinar el estilo y soportar el dinamismo que le aporta JQuery.

Ejemplo

Categories: bootstrap, desplegables

Trabajar con botones de Bootstrap

No Comments

Extracto

Existen docenas de componentes en Bootstrap para ayudar al programador a mostrar elementos ya preestablecidos. La eficacia de este framework a la hora de usar estos componentes es altísima, y además, no requiere ninguna instalación especial pues forman parte del core. Comprender el funcionamiento de estos componentes es fundamental para realizar luego funciones en PHP que lo generen de forma automática.

Botones

Buenas prácticas

Es recomendable usar los botones bajo las siguientes prácticas:
  • Usa siempre el mismo elemento individual de botones, o pero no los mezcles.
  • No mezcles botones de direrente color.
  • Usa texto y/o iconos pero asegúrate de incluir texto de título y alt donde creas apropiado. Este medida ayuda a los buscadores a enlazar tu links.

Ejemplo de botones

<![CDATA[

1 2 3

]]>

Ejemplo de toolbar

<![CDATA[

1 2 3
4 5 6

]]>

Otros casos

Existen otros casos como el checkbox y radio que también funcionan como botones, como solo un botón puede estar activo, o las casillas de verificación donde cualquier número de botones puede estar activo.
Categories: bootstrap

BootStrap, un producto de Twitter

No Comments

Extracto

BootStrap es un producto de Twitter desarrollado en 2011. La necesidad de trabajar de forma homogenizada sobre un proyecto donde concurren múltiples derarrolladores en el presente y en el futuro, justifica la estructura y el producto de Bootstrap.

Composición

Los elementos de Bootstrap están compuestos por una combinación de HTML, CSS y JavaScript, que gracias a la liberación por parte de Twitter como OpenSource, sufre una constante modificación -mejora- de sus elementos, creándose, incluso, ediciones particulares, muchas de ellas muy espectaculares.
Descarga de Bootstrap en http://getbootstrap.com/, en esta página nos encontramos tres distribuciones, de las cuales nos ocuparemos de dos Bootstrap compiled y Bootstrap sourcecode.

Bootstrap compiled

Quizá la más cómoda para trabajar desde un principio, aunque se te puede quedar corta en cuanto empieces a trabajar con ella. Su árbol de dependencias es este:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

Bootstrap sourcecode

Toda la distribución entera, su árbol de dependencias es el siguiente.
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/

Compilar nuestro Bootstrap

Mediante el comando grunt que podemos instalar así:
  1. Instalar grunt-cli globalmente con npm install -g grunt-cli
  2. Navegar al directorio root de /bootstrap, y allí ejecutar npm install. Npm verá el archivo package.json y automáticamente instalará las dependencias necesarias.

Comandos disponibles de grunt

  • grunt dist, Compila CSS y JavaScript
  • grunt watch. Mira en el directorio less y automáticamente recompila en CSS cualquier cambio que se haya producido en ese directorio.
  • grunt test, Ejecuta JSHint y corre las pruebas QUnit en PhantomJS.
  • grunt docs, Construye y pruebas de CSS, JavaScript y otros activos que se utilizan cuando se ejecuta la documentación a nivel local a través de Jekyll server.
  • grunt, lo recompila absolutamente todo.
Podríamos tener problemas con la instalación de las dependencias o ejecutando los comandos de grunt. Si esto ocurre primero borra el directorio /node_modules/ generado por rpm y entonces re-ejecuta npm install.
Categories: bootstrap