Récemment, nous avons publié un article intitulé 5 outils incroyablement utiles intégrés à Twitter Bootstrap, qui examinait la structure de base du cadre Bootstrap de Twitter et vous expliquait comment mettre en œuvre certains des composants principaux.
Twitter vient de publier Bootstrap 2.0, une mise à jour si importante qu'elle équivaut à une réécriture presque complète. Il y a pas mal de nouvelles fonctionnalités et de nouveaux jouets à jouer, mais la vraie vedette est que le framework est maintenant totalement réactif. Rejoignez-nous pendant que nous creusons pour voir comment fonctionne la nouvelle grille et quelles autres nouvelles fonctionnalités intéressantes ont été ajoutées. Vous apprendrez à implémenter Bootstrap dans vos projets et vous apprendrez également des techniques CSS extrêmement pratiques que vous pourrez utiliser n'importe où.
Démo
Nous allons parler de plusieurs nouvelles fonctionnalités de Bootstrap aujourd'hui. Si vous voulez les voir en action, passez à la démonstration en direct ci-dessous.
Démo: Cliquez ici pour lancer.
Implémentation de la grille réactive
L'aspect le plus important de Twitter Bootstrap est bien sûr qu'il est maintenant totalement réactif. Si vous continuez à qualifier l'ensemble du mouvement réactif de manie stupide dans l'espoir de pouvoir finalement ignorer l'apprentissage des techniques requises, vous ne pourrez pas vous aider. Le design réactif est en passe de devenir une pratique standard au lieu d'être un "plaisir d'avoir". Ajouter. Ce n'est vraiment pas aussi compliqué que vous ne le pensez et des outils comme Bootstrap facilitent encore plus les choses.
La nouvelle grille sensible a une largeur de douze colonnes et fonctionne un peu comme la grille à seize colonnes de Bootstrap 1. Si vous avez déjà utilisé tout système de grille avant, alors vous vous sentirez comme à la maison car rien ne brise trop la Terre ici.
Pour mettre en œuvre la grille, vous suivez à peu près les mêmes étapes que vous avez toujours suivies. Commencez par un div de conteneur, puis créez une ligne et remplissez-la avec des div de span (x). Étant donné qu'il s'agit d'une grille de douze colonnes, assurez-vous simplement que les nombres dans une ligne totalisent douze. Essayez quatre? Span3? divs, un? span9? avec un? span3? ou même juste une ligne droite? span12? aller tout au long. Voici un exemple rapide:
Ce qui précède représente une grille statique. Il restera toujours réactif, il ne répondra simplement pas à chaque changement minute de la taille de la fenêtre du navigateur, mais uniquement à ceux définis par les requêtes multimédia. Si vous voulez une grille de fluide, utilisez les classes de fluide:
Les requêtes de médias
Les requêtes multimédia incluses sont répertoriées ci-dessous, en commençant par mobile et en remontant. Fondamentalement, chacun entre et modifie la taille des colonnes pour redistribuer la mise en page en quelque chose de plus approprié pour la fenêtre d'affichage.
- @media (largeur maximale: 480px)
- @media (max-width: 768px)
- @media (min-width: 768px) et (max-width: 980px)
- @media (largeur maximale: 980px)
- @media (largeur minimale: 980px)
- @media (min-width: 1200px)
La première requête multimédia (480px et moins) cible les smartphones et divise le tout en une seule colonne, 100% largeur. Cela peut sembler un peu trop simpliste selon vos goûts, mais la beauté des frameworks comme celui-ci est qu’ils ne sont que des suggestions, il vous est conseillé de les personnaliser comme vous le souhaitez.
La requête multimédia suivante cible les tablettes portrait de 480px à 768px, puis jusqu'à 980px pour les tablettes panoramiques et sur des ordinateurs de bureau et des écrans de grande taille.
Pour la grille statique, les colonnes individuelles commencent à 70px de large, puis descendent à 60px et enfin à 42px avant d’avoir une largeur de 100% pour les appareils mobiles.
Astuce: saisissez le bon téléchargement
Chose intéressante, les requêtes multimédia ne sont pas incluses dans le téléchargement par défaut à partir de la page d'accueil Bootstrap. Si vous les voulez, vous devez récupérer le téléchargement GitHub.
Utilisation du sélecteur de valeur d'attribut de Nice
Si vous extrayez le code pour les requêtes de support, vous pourriez apprendre une astuce intéressante ou deux. Par exemple, les développeurs ont implémenté un bon exemple du "sélecteur de valeur d'attribut de sous-chaîne arbitraire", que j'ai décrit dans CSS Selectors: Just the Tricky Bits.
Bootstrap a beaucoup de classes qui utilisent le mot? Span? (span1, span2, etc.) et plutôt que de les saisir individuellement, l'ASAVS les saisit tous en une fois avec ce morceau de code sophistiqué: [class * =? span?]. Ce sélecteur creuse en fait le code HTML et trouve quelque chose avec? Span? dans le nom de la classe, peu importe ce qui suit. Même une classe de? Spansomethingtotallycrazy? serait ciblé.
Transformation du contenu
Bien que le cœur des requêtes des médias consiste à redistribuer les colonnes, il se passe encore beaucoup de choses ici. Les développeurs ont en effet pris le temps de restructurer de nombreux éléments afin qu'ils se transforment à mesure que la taille de la fenêtre d'affichage change.
Par exemple, les menus de navigation changent considérablement lorsque vous visualisez sur une tablette ou un smartphone. Pour voir un exemple, testez la page d'accueil Bootstrap. En taille réelle, le menu de navigation est une simple liste horizontale de liens de texte.
Sur une tablette ou un smartphone, le texte est effacé et remplacé par un bouton en haut à droite de l'écran.
Appuyez sur le bouton pour développer la nouvelle zone de menu. Nous avons ici une liste verticale de liens, ce qui permet d’établir de plus grandes zones exploitables.
Images réactives
Le menu de navigation n’est pas la seule chose qui change de taille avec les fenêtres, mais de nombreux autres objets, des boutons simples aux objets plus complexes comme les carrousels d’images. Pour retirer les images en redimensionnant automatiquement, Twitter a pris la "largeur maximale: 100%;" route. Voici l'extrait complet:
Cela fait en sorte que, lorsque ces colonnes et ces lignes se redimensionnent, la largeur de l'image atteindra la largeur de la colonne parent. Notez également le? -Ms-interpolation-mode: bicubic ;? ligne. C'est une propriété assez obscure qui rend essentiellement le redimensionnement d'image plus lisse dans IE.
Plus de nouvelles choses
La fonctionnalité responsive est sans aucun doute la nouveauté la plus cool de Bootstrap, mais il y en a beaucoup plus ici pour vous enthousiasmer Voici trois de mes articles préférés:
Barres de progression
Bootstrap dispose désormais de barres de progression compatibles avec tous les navigateurs et extrêmement faciles à mettre en œuvre. Il suffit d'insérer un extrait comme celui ci-dessous:
La largeur: 30%? ici ressemble à quel point le long de la barre de progression sera. Si vous voulez changer cela à moitié plein, tapez 50%.
Groupes de boutons
Les groupes de boutons ressemblent un peu à la navigation dans le fil d'Ariane en ce sens qu'ils sont des boutons individuels qui se froncent. Normalement, cela prend une bonne partie du code à retirer. Non seulement vous devez attribuer un style au thème général des boutons, mais vous devez également différencier le premier et le dernier bouton.
Avec Bootstrap, tout ce dont vous avez besoin sont quelques liens avec le? Btn? classe à l'intérieur d'un? btn-groupe? div.
Carrousels
Les anciens plugins JavaScript Bootstrap ont été réaménagés et de tout nouveaux ont été ajoutés. Mon préféré ici est le nouveau carrousel jQuery. L'exemple de code ci-dessous peut sembler volumineux, mais si vous le décomposez, c'est assez simple. Le contenu de la diapositive est jeté dans le? .Item? div et une légende optionnelle peuvent être ajoutés. La navigation est lancée à la fin.
Conclusion
Lorsqu'une grande entreprise telle que Twitter fournit une ressource gratuite, c'est un pari que de créer votre flux de travail autour de cela. Un problème majeur est que vous ne pouvez pas savoir avec certitude à quel point il sera maintenu à long terme. Heureusement, il semble que Bootstrap soit, du moins pour le moment, une priorité assez élevée sur Twitter. La nouvelle version représente une énorme quantité de temps et d’efforts et cela se voit vraiment. Cela se transforme en un passe-partout extrêmement étendu.
Je suis personnellement ravi que Twitter ait jugé nécessaire de prendre Bootstrap responsive. Cela contribuera sans aucun doute à la création d'un design réactif qui fonctionne bien non seulement pour tous les principaux navigateurs, mais également pour tous les principaux périphériques.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de Bootstrap 2.0. Avez-vous essayé la première version? Quelles sont vos améliorations préférées?