Share
Bienvenue dans cette série couvrant l'interface utilisateur de Twitter Bootstrap (BS) et CSS.
Dans mon livre, Twitter Bootstrap Succinctement, j'ai jeté les bases du travail initial et démarré avec Bootstrap 2.
Depuis la publication de ce livre, Bootstrap 3 est devenu la version grand public.
Dans cette série, nous allons continuer à nous appuyer sur ce travail préparatoire et à utiliser BS v3. Nous verrons en quoi les choses diffèrent et, à mesure que nous explorons les nouvelles fonctionnalités, nous verrons qu'une grande partie de ce qui était présent dans la v2 est toujours applicable à la v3..
Si vous n'avez pas encore lu le livre sur Bootstrap 2, je vous encourage à le faire, car j'y ferai référence à divers moments de la série..
Pourquoi? Je pense que pour comprendre l’ensemble du paysage Bootstrap, vous devez l’examiner dès le début. Vous devez être capable de comprendre ce qu’il s’est fixé et comment.
Vous pourrez simplement suivre cette série et apprendre les bases de BS v3, mais vous obtiendrez une compréhension plus profonde et meilleure si vous lisez d'abord le livre v2.
Alors qu'est-ce qui a changé de v2 à v3?
Beaucoup.
Le principal changement entre les deux versions est que la v3 est désormais "Mobile First". Bootstrap v2 était un kit CSS de mise en page réactif, mais ses fonctionnalités mobiles et réactives occupaient toujours la deuxième place par rapport à ses fonctionnalités d'interface utilisateur riches. En fait, pour que le contenu réactif fonctionne correctement, vous deviez inclure un deuxième fichier CSS dont le seul but était d'activer les fonctionnalités réactives, mobiles et rien d'autre..
Dans la v3, toute cette situation a été complètement inversée. L'ensemble de la structure est désormais compatible avec les appareils mobiles et réactif, et il vous faut maintenant un travail supplémentaire pour adapter vos présentations à de plus grands formats d'écran. Ne vous méprenez pas, cela ne représente en aucun cas une énorme quantité de travail. La plupart de ce que vous devez changer consiste simplement à échanger des classes et à structurer correctement votre balisage HTML..
L'autre changement majeur concerne la dénomination des classes et des appels d'API. La plupart des noms de classe introduits dans la v2 sont maintenant obsolètes ou ont été renommés en un nom plus approprié..
Un effort important a également été consenti pour renommer les classes afin de les rendre plus cohérentes. Par exemple, dans la v2, pour les éléments qui ciblaient la couleur d'erreur RED, nous avions les classes suivantes:
Accentsconagua
btn-danger erreur de texte erreur .important .important .Erreur progrès-danger Désormais, dans la v3, ceux-ci ont été consolidés afin que les noms soient similaires pour tous les composants, comme suit:
btn-danger texte-danger .danger .danger barre de progression-danger Comme vous pouvez le constater, la cohérence est désormais un acteur majeur dans les classes v3 et de nombreux autres changements similaires ont été apportés dans l’ensemble du cadre..
Il y a eu pas mal de changements mineurs aussi. Par exemple, le modèle de boîte utilisé par Bootstrap a été considérablement amélioré, tous les éléments utilisant maintenant boîte à bordure comme modèle de dimensionnement de boîte CSS par défaut.
Le système de grille a également été étendu et amélioré et, au lieu d'être un système de grille monolithique avec des classes facultatives, il est maintenant composé de quatre niveaux de tailles de grille spécifiquement destinés aux téléphones, tablettes, ordinateurs de bureau et grands ordinateurs de bureau..
Tous les éléments JavaScript ont également été répartis en noms afin de réduire les conflits avec d’autres codes JavaScript; les événements disponibles sont maintenant mieux nommés pour refléter leur objectif et sont beaucoup plus clairement documentés.
Modaux et Barres de navigation la réactivité a été considérablement améliorée et, avec les changements de nom des classes, les classes de dimensionnement de tous les composants (Inc Modals de navigation) ont été alignées.
En ce qui concerne les composants, certains des composants les plus anciens et les moins fréquemment utilisés ont été déconseillés et supprimés, le plus notable étant le Accordéon composant. Mais ne désespérez pas, l'accordéon a été remplacé par un tout nouveau panneau pliable composant qui est beaucoup plus flexible que son prédécesseur.
Nous avons aussi une nouvelle, étroite Jumbotron, Nouveau panneau types, groupes de listes et bien plus.
Enfin, le changement qui toutes les personnes remarquerez l'aspect et la convivialité: TWB V3 est plat. Il a une nouvelle couleur, nouvelle interface, mais avec des coins arrondis à plat.
Les classes de survol n’ont plus d’effets dégradés, et les barres et boutons de progression ne paraissent plus semi-3D comme dans la v2. Au lieu de cela, les responsables de Twitter Bootstrap ont décidé de faciliter la personnalisation de l'aspect et de la convivialité des éléments contenus dans le CSS..
Les responsables ont même mis à disposition un thème «Bootstrap» qui fait que la v3 ressemble au design v2 original pour vous aider à démarrer. Dans la dernière partie de cette série, je vais vous montrer à quel point il est simple de passer outre les différentes classes, et comment vous pouvez modifier le thème du thème plat pour lui donner votre apparence..
Pour l'instant cependant, si vous voulez une expérience v2, vous devez vous assurer d'inclure également le fichier CSS approprié, le cas échéant. Si vous voulez vous en tenir à la v3 par défaut, vous n'avez besoin de rien de plus..
Lorsque BS2 a été lancé, le seul moyen de l'obtenir était de le télécharger sur le site Web du projet. Cela a été largement couvert dans le premier livre avec une discussion en profondeur de exactement quels fichiers étaient dans le fichier zip et pourquoi.
Étant donné que tant de personnes utilisaient Bootstrap, les utilisateurs de MaxCDN ont pu le mettre à disposition gratuitement sur un CDN. Cette tradition s'est poursuivie dans la base de code v3 et vous pouvez désormais obtenir simplement l'installation v3 standard choisie à l'aide des balises de script HTML suivantes:
Si vous utilisez les versions CDN, n'oubliez pas que vous devrez également vous assurer d'inclure une copie récente de JQuery. aucune des fonctionnalités BS3 JS ne fonctionnera à moins que vous ne le fassiez.
En plus du lien CDN, il existe désormais un téléchargement direct sur le site getbootstrap.com, non seulement pour le bundle standard JavaScript & CSS décrit dans le livre précédent, mais également pour un lien direct vers un fichier zip de Less ”sources et une conversion en“ Sass ”pour ceux qui voudraient pouvoir inclure une version personnalisable du kit entièrement basée sur des variables dans votre propre système de construction en utilisant des outils tels que Grunt pour automatiser des tâches.
En plus des nouvelles sources, vous pouvez désormais utiliser Bower pour installer tout ce dont vous avez besoin à l’aide des éléments suivants à partir de la ligne de commande des dossiers de votre projet:
bower installer bootstrap
Bower est un système d’échafaudage et d’emballage HTML conçu pour automatiser une grande partie de la plaque de la chaudière d’application. Vous n'avez pas besoin de le comprendre pour comprendre BS v3, mais une recherche rapide dans Google sur «Bower» vous donnera de nombreuses références pour approfondir votre compréhension..
Sur une note similaire, BS v3 peut également être installé à l'aide du gestionnaire de packages NuGet si vous travaillez dans Visual Studio. Comme Bower, cela automatisera une grande partie du processus d'installation et de configuration des fichiers requis. Soyez prudent, car de nombreux packages Bootstrap sont disponibles dans NuGet, dont certains vous occasionneront plus de travail qu'ils ne vous en épargnent..
Enfin, le personnaliseur TWB est toujours disponible. Il a été considérablement restructuré et reconstruit pour offrir plus d'options et un regard plus facile et plus intuitif sur ce que vous changez et pourquoi..
En fait, il est désormais si facile de modifier des éléments à l'aide du personnalisateur que votre concepteur ou votre équipe de concepteurs peut effectuer 90% du travail nécessaire pour définir les couleurs et la stratégie de marque de votre téléchargement avant même que les fichiers requis ne soient téléchargés. Cela permet à votre service de conception de commencer immédiatement à faire des choix de couleurs et de disposition, tout en travaillant sur les mises en page et le code supplémentaire pour l'interactivité requise. Ensuite, il vous suffit simplement de remplacer vos fichiers par défaut par les fichiers fournis par vos concepteurs, et un changement de thème instantané doit avoir lieu..
Officiellement, BS v3 ne prend en charge que les derniers navigateurs compatibles HTML 5 et Internet Explorer 10 et supérieur..
En réalité, le cadre prend également en charge IE8 et IE9; Cependant, certaines fonctionnalités de CSS3 et HTML5 ne fonctionnent pas comme prévu. En particulier, si vous voulez que les éléments sensibles fonctionnent correctement, vous devez utiliser respond.js, que vous pouvez télécharger depuis ce dépôt GitHub.
Une fois que vous ajoutez répondre pour votre projet, il s’agit essentiellement d’une attente générale de ce qui a été ajouté et n’a pas été ajouté aux différents navigateurs, à différents moments.
Les parties les plus remarquées comme manquantes sont les suivantes:
Pour IE8:
rayon de la frontière est ne pas prise en charge.boîte ombre est ne pas prise en charge.transformer est ne pas prise en charge.transition est ne pas prise en charge.espace réservé le texte est ne pas prise en charge.Cela signifie essentiellement que le texte de substitution dans les éléments d'entrée n'apparaît pas et que tout ce qui utilise des coins arrondis ou des ombres portées, ou toute forme de transition ou de transformation sur l'élément, ne s'affichera pas correctement..
Pour IE9:
rayon de la frontière est prise en charge.boîte ombre est prise en charge.transformer est pris en charge (mais uniquement avec -Mme préfixe).transition est ne pas prise en charge.espace réservé le texte est ne pas prise en charge.Les choses sont légèrement améliorées en ce qui concerne IE9: les angles arrondis et les ombres portées vont bien, et les transformations fonctionneront aussi, à condition qu'elles aient également une -Mme version préfixe.
Les transitions et les espaces réservés sur les éléments d'entrée manquent malheureusement encore.
La matrice de support officielle pour la version actuelle de BS3 dans les navigateurs actuels se présente comme suit:
| Chrome | Firefox | C'EST À DIRE | Opéra | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✗ | ✗ | ||
| iOS | ✓ | ✗ | ✓ | ||
| Mac OS X | ✓ | ✓ | ✓ | ✓ | |
| les fenêtres | ✓ | ✓ | ✓ | ✓ | ✗ |
Si vous ciblez IE9 et IE8 et utilisez respond.js pour soutenir ces efforts, veuillez prendre en compte les points suivants:
Vous devrez vous référer au respond.js docs si vous hébergez des CSS, etc. sur un domaine différent (par exemple, un CDN) afin d'atténuer les problèmes inter-domaines.
La sécurité du navigateur vous causera des problèmes avec fichier:// et @importation références de ressources basées.
Propre à @importation est-ce respond.js ne peut pas lire les règles correctement, ce qui est important pour les utilisateurs de Drupal, car Drupal utilise @importation assez lourdement.
Les anciens modes de compatibilité IE empêcheront Bootstrap de fonctionner complètement, pas seulement avec respond.js, soyez donc prudent si vous testez la compatibilité avec les versions antérieures en utilisant un IE moderne en mode émulation - les résultats seront probablement ne pas soyez ce que vous attendez.
Ce tutoriel représente un chapitre de Bootstrap 3 Succinctly, un eBook gratuit de l’équipe de Syncfusion..
