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.
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!
.fila
, .fila: antes
, y fila: después
se basa en el hackeo de micro clearfix de Nicolas Gallagher..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..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!
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!
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!
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..