Bootstrap es un marco interesante o? Kit de herramientas? ofrecido a los desarrolladores completamente gratis por nada menos que Twitter.com. Según Twitter, Bootstrap está diseñado para impulsar el desarrollo de aplicaciones y sitios web.
Hoy vamos a saltar a Bootstrap y echar un vistazo rápido a algunas de las cosas que tiene para ofrecer. Esto debería ayudarte a decidir si esto es solo otro marco inflado o una herramienta increíblemente útil que deberías usar para comenzar tu próximo proyecto.
¿Qué puedes hacer con Bootstrap?
Bootstrap es una especie de navaja suiza para desarrolladores. Simplemente está cargado con herramientas y utilidades, algunas de las cuales le resultarán extremadamente útiles, otras nunca las tocará.
El objetivo real detrás de Bootstrap es ahorrarle tiempo. Twitter ha hecho el trabajo pesado por ti al investigar e implementar algunas de las mejores formas de realizar varias tareas. También han dado varios pasos hacia la aplicación de estilos básicos sólidos a varios elementos de uso común.
¿Debería tomar esto como está y apagar su cerebro crítico durante el desarrollo? ¡Absolutamente no! Debes profundizar, encontrar lo que te gusta y deshacerte o cambiar lo que no. Bootstrap está específicamente diseñado para manejar la personalización en muchos casos, así que siéntase libre de volverse loco y personalícelo.
Empezando
Si desea implementar algunos de los estilos con los que estaremos trabajando sobre la marcha, simplemente puede hacer un enlace directo al archivo CSS de Bootstrap así:
Iremos un paso más allá y profundizaremos en algunos de los archivos LESS opcionales, por lo que también podría ser útil pasar por GitHub y descargar el proyecto completo.
Una vez que tenga todo eso listo, es hora de seguir adelante y ver qué tiene que ofrecer esta cosa. No iré a través de un tutorial paso a paso de cada característica única en Bootstrap, es bastante grande y la documentación debería tenerlo cubierto. Esto simplemente servirá como una descripción general rápida de algunas de las cosas que me parecen útiles sobre Bootstrap y cómo puede aprovecharlas rápida y fácilmente en su propio código.
Manifestación
Haga clic en el enlace de abajo para ver Twitter Bootstrap en acción. Construí esta página de muestra en solo unos minutos utilizando las técnicas que veremos a continuación.
Manifestación: Haga clic aquí para iniciar la demostración.
# 1: una cuadrícula pre-construida
Lo primero que deberíamos discutir es la grilla. Todo buen framework tiene uno y Bootstrap no es una excepción. No tiene que usar la cuadrícula para beneficiarse de la gran cantidad de estilos que ofrece Bootstrap, pero es el elemento clave para usar este kit de herramientas para realizar un diseño rápido de la página casi sin esfuerzo.
Por defecto, la cuadrícula es de 940px de ancho con 16 columnas. Cada columna es de 40 px con un canal de 20 px. Al igual que 960.gs, Blueprint y otros, esta cuadrícula es un poco pesada y requiere un margen de marcado que no amas, pero al final es realmente fácil de usar y facilita el uso de Bootstrap.
La cuadrícula funciona principalmente en clases de filas y tramos. Las filas se explican por sí mismas, cuando desee comenzar una nueva fila, cree un div y aplique la fila? clase. Todo para esa fila va en ese div, cuando es hora de otra fila, cierre la antigua y comience una nueva.
Para cada div dentro de una fila, aplica el? Span #? clase con? #? siendo el número de columnas que desea que el div abarque.
Ejemplo de cuadrícula
Digamos que nos estábamos burlando de un diseño que usaba una imagen de encabezado grande que cubría todo el ancho del sitio sobre cuatro columnas de texto. El marcado para esto es simple:
El estilo para esto será completamente automatizado. Todo lo que tienes que hacer es colocar algo de contenido en el código HTML anterior y tienes un diseño.
Al igual que 960.gs, la cuadrícula Bootstrap también admite anidación y columnas. Incluso puede hacer que la página sea fluida lanzando todo a un div con una ? contenedor-fluido? clase, o simplemente usar ?¿envase? para ancho fijo.
# 2: MENOS
LESS, el cada vez más famoso preprocesador de CSS, recibe un gran respaldo de Twitter con una tonelada de soporte integrado. Realmente han hecho todo lo posible y han creado muchos MEZCLAS y variables para que pueda trabajar de inmediato.
Echemos un vistazo rápido a algunas de las cosas que puedes hacer con Bootstrap y LESS.
Personaliza la Grilla
La cuadrícula Bootstrap está construida con LESS mixins y CSS math, por lo que es fácil de personalizar. Simplemente cambia un par de variables y todo se actualiza automáticamente. Por ejemplo, digamos que desea una cuadrícula de doce columnas en lugar de una columna de dieciséis, simplemente ingrese en "variables.less", encuentre las variables de la cuadrícula y cambie el número de columnas a doce. Es fácil.
CSS3 sin la molestia
Bootstrap facilita el uso de algunos de sus trucos favoritos de CSS3 sin el dolor de repetirse manualmente para cada navegador. Encontrarás combinaciones útiles para implementar esquinas redondeadas, sombras y transiciones.
También hay recursos para crear degradados y esquemas de color utilizando la magia de MENOS.
Clearfix
Si se adhiere a la cuadrícula precompilada, no debería tener que configurar manualmente y eliminar flotadores, pero si sigue su propio camino con el diseño, la combinación de Clearfix incorporada puede ahorrarle muchos problemas.
Para implementar esto, todo lo que tienes que hacer es escribir ? .clearfix ()? en su archivo .less. La estructura aquí refleja el método utilizado por Nicolas Gallagher.
# 3: Navegación
Una de las piezas más convenientes de Bootstrap es el increíble conjunto de herramientas de navegación que puede utilizar para implementar varios tipos diferentes de elementos de navegación complejos en segundos.
Navegación Principal
Por ejemplo, hay una barra de navegación principal impresionante que se ve nítida, permite una marca personalizada fácil e incluso permanece con usted como su desplazamiento (que se muestra arriba en la parte superior). El marcado parece innecesariamente pesado, pero seguro que hace que sea fácil crear un menú realmente elegante (soporte para menús desplegables también incluidos).
Pestañas
También puede implementar fácilmente un esquema de navegación con pestañas. Este marcado se ve mucho mejor y realmente no podría ser más fácil. Simplemente añada el ?¿pestañas? clase a una lista desordenada y listo!
Aún más
Bootstrap no se detiene ahí. En él encontrará construcciones similares para crear navegación de navegación, paginación y más. La mayoría de estos se implementan como pestañas, con una clase simple.
Recuerde que todos los estilos predeterminados se pueden cambiar, por lo que incluso si no le gusta el estilo utilizado, estas herramientas son extremadamente útiles para que la estructura básica de sus navegaciones esté en funcionamiento en muy poco tiempo.
# 4: Galerías
Con Bootstrap, las galerías de imágenes son bastante automatizadas. Al igual que con las pestañas, simplemente requieren una lista desordenada con una clase especial, en este caso ¿Media-grilla?. Con esto aplicado, la galería realiza automáticamente el trabajo de diseño teniendo en cuenta el tamaño de sus imágenes. Dicho esto, Twitter recomienda usar tamaños como 90, 210 y 330, que funcionan bien con el diseño.
Conclusión
Este artículo está destinado a darle una breve mirada a algunas de las excelentes herramientas que están disponibles para usted en Twitter Bootstrap. Ya sea que esté buscando una forma rápida de realizar un diseño complejo o simplemente desee algunos elementos agradables de la interfaz de usuario como pestañas y botones, Bootstrap lo tiene cubierto.
Hay cosas aquí y allá con las que podría no estar de acuerdo, pero en general creo que Twitter ha logrado crear un conjunto de herramientas realmente útiles. Siempre me emociona ver a las empresas que ofrecen recursos valiosos para la comunidad de diseño web de forma gratuita. ¿Conoces alguna herramienta similar de otras empresas? Háganos saber en los comentarios a continuación.
Oreja
Bootstrap es un conjunto de herramientas de código abierto para desarrollar con HTML, CSS y JS. ¡Nuestra serie presenta sugerencias e ideas para trabajar con Bootstrap, y colecciones inspiradoras de plantillas para comenzar rápidamente!