Twitter Bootstrap 101 The Grid

Hoy, echemos un vistazo al sistema de cuadrícula que viene con Twitter Bootstrap y analizaremos su cuadrícula de medios mientras lo hacemos. En el proceso, nos construiremos una pequeña y bonita maqueta para una página de cartera..

Nota: La cuadrícula con la que trabajamos hoy viene con la versión de Bootstrap actual en el momento de la publicación: 1.4.0.


Obtener el codigo

  • Comenzaremos con estos archivos, en función de dónde terminamos con la Parte 1 de esta serie..

Video 3: El sistema de rejilla de Bootstrap

Permítame presentarle la cuadrícula de Bootstrap, que se basa en el sistema de cuadrícula 960. Te animo a aprender jugando con la cuadrícula, usando el archivo hero.html.

Como alternativa, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes!

Temas mencionados

  • El clearfix aplicado a.fila, .fila: antes, y fila: después se basa en el hackeo de micro clearfix de Nicolas Gallagher.
  • El selector .fila> [class * = "span"] es un selector de atributos CSS 2.1. Aquí está la especificación W3C. Vea la útil introducción de Chris Coyier..

Video 4: Diseño de una página de cartera

Ahora vamos a crear nuestra propia página de cartera personalizada. Insertaremos dos videos de YouTube y los organizaremos en un patrón alternativo utilizando el sistema de cuadrícula. Mientras lo hacemos, compartiré cómo calcular los anchos adecuados para ajustar los medios dentro de la cuadrícula..

Como alternativa, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes!


Video 5: Ahora para una cuadrícula de medios

Continuemos desarrollando nuestra página de portafolio. Usaremos la clase red de medios para configurar dos filas de imágenes en miniatura. Y les presentaré el muy útil sitio de imágenes de lugares: Placehold.it.

Como alternativa, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes!


Video 6: Tiempo para algunos CSS personalizados

Con nuestro contenido en su lugar, estamos listos para agregar algunos de nuestros propios estilos personalizados. Vamos a enlazar nuestra propia hoja de estilo, importando los estilos de Bootstrap y agregando la nuestra. Este paso lo tendrá listo para comenzar a funcionar, listo para crear su propio sitio hermosamente personalizado creado con Bootstrap.

Como alternativa, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes!


Próximos pasos?

Están sucediendo cosas emocionantes en la comunidad de desarrollo que ha tomado forma alrededor del proyecto. En unas pocas semanas (en el último informe), Twitter Bootstrap 2.0 se lanzará al mundo e incluirá algunos toques nuevos e interesantes, como una cuadrícula de respuesta. Eso es ciertamente algo para mirar.

Mientras tanto, nos prepararemos para familiarizarnos con lo mejor que tiene Bootstrap para ofrecerle..