Share
Aujourd’hui, examinons le système de grille fourni avec Twitter Bootstrap et examinons leur grille médiatique en même temps. Au cours du processus, nous nous construirons une belle petite maquette pour une page de portefeuille..
Remarque: La grille sur laquelle nous travaillons aujourd'hui contient la version actuelle de Bootstrap au moment de la publication: 1.4.0.
Permettez-moi de vous présenter la grille de Bootstrap, basée sur le système de grille 960. Je vous encourage à apprendre en jouant avec la grille, en utilisant le fichier hero.html.
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes.!
Accentsconagua
.rangée, .rangée: avant, et rangée: après est basé sur le micro hack de clearfix de Nicolas Gallagher..rangée> [class * = "span"] est un sélecteur d'attribut CSS 2.1. Voici les spécifications du W3C. Voir l'introduction utile de Chris Coyier.Créons maintenant notre propre page de portefeuille personnalisée. Nous intégrerons deux vidéos YouTube et les organiserons en alternance à l'aide du système de grille. Ce faisant, je vais vous expliquer comment calculer les largeurs appropriées pour l’ajustement des supports dans la grille..
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes.!
Continuons à développer notre page de portefeuille. Nous allons utiliser la classe grille des médias configurer deux rangées de vignettes. Et je vais vous présenter le très utile site placehold-image: Placehold.it.
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes.!
Avec notre contenu en place, nous sommes prêts à ajouter certains de nos propres styles personnalisés. Lions notre propre feuille de style, importons les styles de Bootstrap et ajoutons les nôtres. Cette étape vous permettra de commencer à fonctionner et de créer votre propre site Bootstrap construit de manière personnalisée..
Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes.!
Il se passe des choses passionnantes dans la communauté du développement qui a pris forme autour du projet. Dans quelques semaines (au dernier rapport), Twitter Bootstrap 2.0 sera publié dans le monde entier. Il comportera de nouvelles touches intéressantes, notamment: une grille réactive. C'est certainement quelque chose à rechercher.
En attendant, nous nous préparerons en nous familiarisant pleinement avec le meilleur de ce que Bootstrap a à offrir.
