Bootstrap est un cadre intéressant ou? Toolkit? offert gratuitement aux développeurs par nul autre que Twitter.com. Selon Twitter, Bootstrap est «conçu pour lancer le développement d'applications Web et de sites».
Aujourd’hui, nous allons nous lancer dans Bootstrap et examiner rapidement certaines des choses qu’il a à offrir. Cela devrait vous aider à déterminer s’il s’agit là d’un autre framework volumineux ou d’un outil extrêmement utile que vous devriez utiliser pour lancer votre prochain projet.
Que pouvez-vous faire avec Bootstrap?
Bootstrap est en quelque sorte un couteau suisse destiné aux développeurs. Il est simplement rempli d'outils et d'utilitaires, dont certains vous seront extrêmement utiles, d'autres que vous ne toucherez jamais.
Le véritable objectif de Bootstrap est de vous faire gagner du temps. Twitter a fait le gros du travail pour vous en recherchant et en mettant en œuvre certains des meilleurs moyens d'effectuer diverses tâches. Ils ont également pris plusieurs mesures pour appliquer des styles de base solides à divers éléments couramment utilisés.
Devez-vous prendre cela comme il est et éteindre votre cerveau critique pendant le développement? Absolument pas! Vous devriez creuser, trouver ce que vous aimez et laisser tomber ou changer ce que vous n'aimez pas. Bootstrap est spécialement conçu pour gérer la personnalisation dans de nombreux cas, alors n'hésitez pas à aller fou et à le personnaliser.
Commencer
Si vous souhaitez implémenter certains des styles avec lesquels nous allons travailler à la volée, vous pouvez simplement créer un lien direct vers le fichier CSS Bootstrap, comme suit:
Nous irons un peu plus loin et approfondirons quelques-uns des fichiers LESS optionnels. Il pourrait donc également être utile de passer simplement par GitHub et de télécharger le projet dans son intégralité.
Une fois que tout est prêt, il est temps d'aller de l'avant et de voir ce que cette chose a à offrir. Je ne ferai pas un tutoriel pas à pas de chaque fonctionnalité de Bootstrap, il est énorme et la documentation devrait vous couvrir. Cela servira simplement comme un aperçu rapide de certaines choses que je trouve utiles sur Bootstrap et comment vous pouvez rapidement et facilement en tirer parti dans votre propre code.
Démo
Cliquez sur le lien ci-dessous pour voir Twitter Bootstrap en action. J'ai construit cet exemple de page en seulement quelques minutes en utilisant les techniques décrites plus bas.
Démo: Cliquez ici pour lancer la démo.
# 1: une grille préfabriquée
La première chose à discuter est la grille. Chaque bon framework en a un et Bootstrap ne fait pas exception. Vous n’êtes pas obligé d’utiliser la grille pour tirer parti de la richesse des styles proposés par Bootstrap, mais c’est l’élément clé pour utiliser cette boîte à outils pour réaliser une mise en page rapide sans presque aucun effort.
Par défaut, la grille a une largeur de 940 pixels et 16 colonnes. Chaque colonne est 40px avec une gouttière de 20px. Comme 960.gs, Blueprint et d’autres, cette grille est un peu lourde et nécessite un balisage que vous n’aimerez peut-être pas, mais au final elle est vraiment facile à utiliser et rend l’utilisation de Bootstrap très simple.
La grille fonctionne principalement sur les classes de lignes et de plages. Les lignes sont explicites, quand vous voulez commencer une nouvelle ligne, créer un div et appliquer la? Rangée? classe. Tout pour cette ligne va dans cette division, quand il est temps pour une autre ligne, fermez l'ancienne et commencez une nouvelle.
Pour chaque div dans une ligne, vous appliquez le? Span #? classe avec? #? étant le nombre de colonnes que la div doit couvrir.
Exemple de grille
Disons que nous nous moquions d'une mise en page utilisant une grande image d'en-tête couvrant toute la largeur du site, au-dessus de quatre colonnes de texte. Le balisage pour cela est simple:
Le style pour cela sera complètement automatisé. Tout ce que vous avez à faire est de déposer du contenu dans le code HTML ci-dessus et vous obtenez une mise en page.
Tout comme 960.gs, la grille Bootstrap prend également en charge l’imbrication et les colonnes. Vous pouvez même rendre la page fluide en lançant le tout dans une div avec un ? fluide de conteneur? classe, ou simplement utiliser ?récipient? pour largeur fixe.
# 2: MOINS
LESS, le préprocesseur CSS de plus en plus réputé, obtient ici un soutien important de la part de Twitter, avec une tonne de prise en charge intégrée. Ils ont vraiment tout mis en oeuvre et ont créé beaucoup de mixins et de variables MOINS pour que vous puissiez travailler immédiatement.
Jetons un coup d'œil à quelques-unes des choses que vous pouvez faire avec Bootstrap et LESS.
Personnaliser la grille
La grille Bootstrap est construite à l'aide de mixins LESS et de maths CSS, ce qui la rend facile à personnaliser. Il suffit de changer quelques variables et tout est mis à jour automatiquement. Par exemple, supposons que vous vouliez une grille de douze colonnes au lieu d'une colonne de seize colonnes. Il vous suffit d'aller dans «variables.less», de rechercher les variables de la grille et de changer le nombre de colonnes en douze. C'est si facile.
CSS3 sans tracas
Bootstrap facilite l'utilisation de quelques-uns de vos trucs CSS3 préférés sans la peine de vous répéter manuellement pour chaque navigateur. Vous trouverez des mixins utiles pour la mise en œuvre de coins arrondis, d'ombres et de transitions.
Il existe également des ressources pour la création de dégradés et de jeux de couleurs utilisant la magie de LESS.
Clearfix
Si vous vous en tenez à la grille prédéfinie, vous ne devriez pas avoir à configurer et à effacer manuellement les flotteurs, mais si vous procédez à votre manière avec la disposition, le mixage clearfix intégré peut vous éviter beaucoup de tracas.
Pour implémenter cela, il suffit de taper ?clearfix ()? dans votre fichier .less. La structure ici reflète la méthode utilisée par Nicolas Gallagher.
# 3: Navigation
L'un des éléments les plus pratiques de Bootstrap est l'impressionnant outil de navigation fourni, que vous pouvez utiliser pour implémenter plusieurs types d'éléments de navigation complexes en quelques secondes.
Navigation principale
Par exemple, il y a une barre de navigation principale impressionnante qui semble nette, permet une personnalisation facile de la marque et reste même avec vous comme votre parchemin (montré ci-dessus en haut). Le balisage semble inutilement lourd, mais il facilite certainement la création d’un menu très sobre (prise en charge des menus déroulants également).
Onglets
Vous pouvez également facilement implémenter un schéma de navigation par onglets. Ce balisage semble beaucoup plus joli et ne pourrait vraiment pas être plus facile. Ajoutez simplement le ? tabs? classe à une liste non ordonnée et vous avez terminé!
Encore plus
Bootstrap ne s'arrête pas là. Vous y trouverez des constructions similaires pour la création de navigation, de pagination, etc. La plupart d'entre eux sont implémentés comme des onglets, avec une classe simple.
N'oubliez pas que tous les styles par défaut peuvent être modifiés. Même si vous n'aimez pas nécessairement le style utilisé, ces outils sont extrêmement utiles pour rendre la structure de base de vos navigations opérationnelle en un rien de temps.
# 4: Galeries
Avec Bootstrap, les galeries d'images sont assez automatisées. Comme avec les onglets, ils nécessitent simplement une liste non ordonnée avec une classe spéciale, dans ce cas ? media-grid?. Lorsque ceci est appliqué, la galerie effectue automatiquement le travail de mise en page en tenant compte de la taille de vos images. Cela dit, Twitter recommande d'utiliser des tailles telles que 90, 210 et 330, qui fonctionnent bien avec la mise en page.
Conclusion
Cet article a pour but de vous donner un bref aperçu de certains des excellents outils disponibles dans Twitter Bootstrap. Que vous recherchiez un moyen rapide de réaliser une mise en page complexe ou que vous recherchiez simplement de jolis éléments d'interface utilisateur, tels que des onglets et des boutons, Bootstrap vous couvre.
Il y a des choses ici et là avec lesquelles je pourrais ne pas être d'accord, mais dans l'ensemble, je pense que Twitter a réussi à créer un ensemble d'outils réellement utiles. Je suis toujours ravi de voir des sociétés offrir gratuitement des ressources précieuses à la communauté des concepteurs de sites Web. Connaissez-vous des outils similaires d'autres entreprises? Faites-nous savoir dans les commentaires ci-dessous.
Bootstrap
Bootstrap est une boîte à outils open source pour le développement avec HTML, CSS et JS. Notre série propose des astuces et des idées pour travailler avec Bootstrap, ainsi que des collections de modèles inspirants pour commencer rapidement!