Recientemente, publicamos una pieza titulada 5 herramientas increíblemente útiles incorporadas en Twitter Bootstrap, que analizó la estructura básica del marco de Bootstrap de Twitter y lo guió a través de la implementación de algunos de los componentes principales.
Twitter acaba de lanzar Bootstrap 2.0, una actualización tan grande que equivale a una reescritura casi completa. Hay bastantes nuevas características y juguetes para jugar, pero el verdadero techo de cartel es que el marco ahora es completamente sensible. Únase a nosotros para ver cómo funciona la nueva cuadrícula y qué otras funciones nuevas se han agregado. Aprenderá cómo implementar Bootstrap en sus proyectos y también aprenderá algunas técnicas CSS extremadamente útiles que puede usar en cualquier lugar.
Manifestación
Estaremos hablando de varias características nuevas de Bootstrap hoy. Si desea verlos en acción, pase por la demostración en vivo a continuación.
Manifestación: Haga clic aquí para lanzar.
Implementando la Grilla Responsiva
El aspecto más importante de Twitter Bootstrap es, por supuesto, que ahora es totalmente sensible. Si aún está etiquetando todo el movimiento de respuesta como una moda tonta con la esperanza de que finalmente pueda omitir el aprendizaje de las técnicas necesarias, no tiene suerte. El diseño receptivo está en camino de convertirse en una práctica estándar en lugar de ser "agradable de tener". Añadir. Realmente no es tan complicado como podría pensar y las herramientas como Bootstrap lo hacen aún más fácil.
La nueva cuadrícula de respuesta tiene doce columnas de ancho y funciona como la cuadrícula de dieciséis columnas de Bootstrap 1. Si alguna vez lo has usado alguna Antes del sistema de red, entonces te sentirás como en casa, ya que aquí no hay nada demasiado destrozado.
Para implementar la cuadrícula, prácticamente sigues los mismos pasos que siempre hiciste. Comience con un contenedor div, luego cree una fila y llene esa fila con span (x) divs. Dado que es una cuadrícula de doce columnas, solo asegúrate de que los números en una fila sumen hasta doce. Prueba cuatro? Span3? divs, un? span9? con un? span3? o incluso simplemente un recto? span12? para cruzar todo el camino. Aquí hay un ejemplo rápido:
Lo anterior representa una rejilla estática. Seguirá siendo receptivo, simplemente no responderá a cada cambio de tamaño de la ventana del navegador, solo a los establecidos por las consultas de los medios. Si quieres una rejilla fluida, usa las clases de fluidos:
Las consultas de los medios
Las consultas de medios incluidas se enumeran a continuación, comenzando desde el móvil y avanzando hacia arriba. Básicamente, cada una entra y cambia el tamaño de las columnas para que el diseño vuelva a ser más apropiado para la ventana gráfica.
- @media (ancho máximo: 480px)
- @media (ancho máximo: 768px)
- @media (ancho mínimo: 768 píxeles) y (ancho máximo: 980 píxeles)
- @media (ancho máximo: 980px)
- @media (ancho mínimo: 980px)
- @media (ancho mínimo: 1200 px)
La primera consulta de medios (480px e inferior) se dirige a los teléfonos inteligentes y prácticamente divide todo en una única columna de 100% de ancho. Esto puede ser un poco demasiado simplificado para sus gustos, pero la belleza de los marcos como este es que solo son sugerencias, se recomienda que personalice el contenido de su corazón.
La siguiente consulta de medios se enfoca en las tabletas verticales con un rango de 480px a 768px, luego hasta 980px para tablets horizontales y en escritorios estándar y pantallas grandes.
Para la cuadrícula estática, las columnas individuales comienzan en 70px de ancho, luego saltan a 60px y finalmente bajan a 42px antes de ir al 100% de ancho para dispositivos móviles.
Consejo: Agarra la descarga correcta
Curiosamente, las consultas de medios no están incluidas en la descarga predeterminada desde la página de inicio de Bootstrap. Si los quieres, tendrás que tomar la descarga de GitHub.
Buen uso del selector de valor de atributo
Si revisa el código de las consultas de medios, puede aprender uno o dos trucos. Por ejemplo, los desarrolladores han implementado un ejemplo sólido del "Selector de valor de atributo de la subcadena arbitraria", del cual escribí en los selectores de CSS: Just the Tricky Bits.
Bootstrap tiene muchas clases que usan la palabra? Span? (span1, span2, etc.), y en lugar de escribir cada uno individualmente, el ASAVS los captura de una sola vez con este elegante código: [class * =? span?]. Este selector realmente busca en el HTML y encuentra algo con? Span? En el nombre de la clase, independientemente de lo que sigue. Incluso una clase de? Spansomethingtotallycrazy? sería el objetivo.
Transformación de contenido
Si bien el núcleo de las consultas de los medios es reagrupar las columnas, también hay mucho más en juego aquí. Los desarrolladores se han tomado el tiempo de reestructurar muchos de los elementos para que se transformen a medida que cambia el tamaño de la ventana gráfica.
Por ejemplo, los menús de navegación cambian de manera drástica cuando los está viendo en una tableta o teléfono inteligente. Para ver un ejemplo, pruebe la página de inicio de Bootstrap. A tamaño completo, el menú de navegación es una simple lista horizontal de enlaces de texto.
Sin embargo, en una tableta o teléfono inteligente, el texto se borra y se reemplaza con un botón en la parte superior derecha de la pantalla.
Al tocar el botón se expandirá la nueva área de menú. Aquí tenemos una lista vertical de enlaces, que permite áreas más grandes para hacer toques.
Imágenes Responsivas
El menú de navegación no es lo único que cambia de tamaño con las vistas; también lo hacen muchos otros objetos, desde botones simples hasta objetos más complicados como carruseles de imágenes. Para llevar a cabo el cambio de tamaño automático de las imágenes, Twitter ha tomado el "ancho máximo: 100% ;? ruta. Aquí está el fragmento completo:
Esto hace que, a medida que esas columnas y filas se redimensionen a sí mismas, el ancho de la imagen sea máximo en el ancho de la columna principal. Observe también el modo de interpolación -ms: bicúbico ;? línea. Esta es una propiedad bastante oscura que esencialmente hace que el cambio de tamaño de la imagen sea más suave en IE.
Más cosas nuevas
La funcionalidad de respuesta es, sin duda, la característica más nueva y mejorada de Bootstrap, pero hay mucho más aquí para entusiasmarse. Aquí están tres de mis artículos favoritos:
Barras de progreso
Bootstrap ahora tiene barras de progreso compatibles con el navegador que son muy fáciles de implementar. Solo inserta un fragmento como el de abajo:
El? Ancho: 30%? Aquí se asemeja a cuán lejos estará la barra de progreso. Si desea cambiarlo a medio lleno, simplemente escriba 50%.
Grupos de botones
Los grupos de botones se parecen un poco a la navegación de navegación, ya que son botones individuales que están todos juntos juntos. Normalmente, esto requiere una buena parte del código para lograrlo. No solo tiene que diseñar el tema general del botón, también debe hacer que el primer y el último botón sean diferentes.
Con Bootstrap, todo lo que necesitas son algunos enlaces con el? Btn? clase dentro de un grupo? btn? div.
Carruseles
Los antiguos complementos de JavaScript de Bootstrap se han renovado y se han agregado algunos completamente nuevos. Mi favorito aquí es el nuevo carrusel de jQuery. El código de ejemplo a continuación puede parecer considerable, pero si lo desglosas es bastante simple. El contenido de la diapositiva se lanza en el? .Item? div y un título opcional se pueden agregar. La navegación se lanza al final.
Conclusión
Cuando una empresa grande como Twitter publica un recurso gratuito, es una apuesta para construir su flujo de trabajo a su alrededor. Un problema importante es que no se puede saber con certeza qué tan bien se mantendrá a largo plazo. Afortunadamente, parece que Bootstrap es, por ahora al menos, una prioridad bastante alta en Twitter. La nueva versión representa una enorme cantidad de tiempo y esfuerzo y realmente se nota. Esto se está convirtiendo en un repetitivo extremadamente extenso.
Personalmente, estoy convencido de que Twitter consideró necesario tomar Bootstrap responsivo. Esto definitivamente ayudará a promover la causa del diseño responsivo que funciona bien no solo en todos los navegadores principales, sino también en todos los dispositivos principales.
Deja un comentario a continuación y déjanos saber qué piensas de Bootstrap 2.0. ¿Has probado la primera versión? ¿Cuáles son tus mejoras favoritas?