À première vue, Bootstrap semble assez simple . Et en effet, il n'est pas difficile de commencer à utiliser Bootstrap. Il y a un très bien écrit Documentation Bootstrap avec de nombreux exemples de code HTML, CSS et JavaScript. La plupart des écueils importants y sont mentionnés, mais certaines erreurs sont néanmoins assez subtiles ou ont des causes ambiguës. Parce que Bootstrap semble très simple et facile à utiliser, de nombreux développeurs se précipitent dans le cadre et des erreurs se produisent.
état de l'industrie musicale
Nous examinerons 10 des erreurs, problèmes et idées fausses de Bootstrap les plus courants lorsque les développeurs commenceront à l'utiliser.
Erreur de démarrage commune n ° 1: idées fausses de base sur le framework
Il y a quelques idées fausses sur la Cadre Bootstrap que les gens ont. Cela peut être dû au fait qu’il n’est pas clairement annoncé sur le site Bootstrap ou parce que les gens ne prennent pas assez de temps pour lire la documentation. Le fait est que parfois les développeurs se retrouvent dans le coin en train de mal faire des choses, puis blâment le framework. Alors, clarifions certains faits de base.
Bootstrap est complet, mais il n'est ni énorme ni énorme. Bootstrap est fourni avec des modèles de conception HTML et CSS de base qui incluent de nombreux composants d'interface utilisateur courants. Ceux-ci incluent la typographie, les tableaux, les formulaires, les boutons, les glyphicons, les listes déroulantes, les boutons et les groupes d'entrée, la navigation, la pagination, les étiquettes et les badges, les alertes, les barres de progression, les modaux, les onglets, les accordéons, les carrousels et bien d'autres. Vous pouvez en choisir et en choisir quelques-uns, et avec sa configuration par défaut, générez rapidement une interface utilisateur qui gère plusieurs navigateurs, appareils et résolutions avec un bon format.
Bootstrap ne fera pas tout pour vous, mais il fournit un ensemble de paramètres par défaut raisonnables parmi lesquels choisir et il aidera les développeurs à se concentrer davantage sur le travail de développement que de se soucier de la conception, et les aidera à mettre en place un site Web de qualité et à fonctionner rapidement. Cela permet un prototypage rapide, mais cela ne limite pas les développeurs sur le chemin.
Il est suffisamment extensible pour que chacun puisse l'ajuster à ses besoins. Au début, Bootstrap avait quelques limitations, et à l'époque, il était compliqué d'étendre les styles par défaut. Mais à mesure que le cadre mûrissait, l'extensibilité s'est également améliorée.
Erreur commune de Bootstrap # 2: Penser que vous n'avez pas besoin de connaître CSS pour utiliser Bootstrap, et que vous n'avez pas besoin d'un concepteur
Si vous pensez que si vous utilisez Bootstrap, vous n'aurez pas besoin de connaître CSS, vous vous trompez. Tout développeur front-end doit apprendre le CSS et le HTML5. Bootstrap supprime de nombreuses parties CSS délicates des épaules des développeurs (comme les préfixes spécifiques aux fournisseurs) et offre un style de base par défaut, mais vous devez toujours comprendre CSS. Vous n'avez pas besoin de savoir comment fonctionnent les requêtes multimédias, mais vous devez comprendre le fonctionnement de la conception réactive. Bootstrap n'est pas destiné à vous apprendre le CSS, mais il peut vous aider si vous le souhaitez. L'examen du code source en LESS ou SASS est un excellent point de départ.
Sur un sujet similaire, vous n’avez pas besoin d’être un concepteur et vous pouvez affirmer que vous n’avez pas besoin d’un concepteur avec Bootstrap. Cependant, si possible, utilisez l'aide d'un concepteur. Une plainte courante contre Bootstrap est que tous les sites Bootstrap se ressemblent et qu'il est facile de se retrouver avec un site Web qui ressemble à n'importe quel autre site Bootstrap. Mais cela n’a pas besoin d’être vrai. Des millions de sites Web sur le Web sont en cours de création avec Bootstrap. De grandes vitrines sur la façon dont différents designs peuvent être réalisés peuvent être trouvées sur le Expo Bootstrap , qui rassemble les sites créés avec Bootstrap. Jetez un coup d'œil, inspirez-vous et commencez à créer votre propre variante de conception.
Erreur commune de Bootstrap # 3: Modification du fichier CSS Bootstrap
Pour le rendre clair et simple: faites ne pas modifier le bootstrap.css fichier.
Si vous modifiez le bootstrap.css fichier, les choses vont se compliquer très vite. La conception entière se cassera lorsque vous voudrez mettre à niveau les fichiers Bootstrap. Vous pouvez écraser dans votre propre feuille de style les couleurs de bootstrap par défaut, les styles, les marges, les rembourrages, tout. Il n'est pas nécessaire de toucher le bootstrap.css feuille de style du tout.
Vous ne connaissez pas LESS ou SASS? Pas de problème, vous pouvez créer votre propre fichier CSS et écraser ce que vous voulez de l'original bootstrap.css feuille de style. Tout comme nous l'avons mentionné dans l'erreur précédente, connaître le CSS est obligatoire. Créez votre nouveau sélecteur CSS, utilisez-le dans le HTML et tant que vous déclarez vos classes CSS après les styles Bootstrap, vos définitions écraseront les valeurs par défaut de Bootstrap.
Vous voulez toujours en savoir plus et approfondir? Je vous suggère fortement et vous encourage à le faire. Utilisez le code source Bootstrap LESS. Vous comprendrez mieux ce qui se passe et où se passe-t-il si vous utilisez la source LESS et non le CSS statique.
Erreur Bootstrap commune # 4: utiliser tout ce que Bootstrap offre
Comme mentionné précédemment, Bootstrap est complet. Il propose de nombreux composants d'interface utilisateur, des modèles de conception HTML et CSS et des plugins JavaScript. Mais s'il vous plaît, soyez sélectif. Vous n'êtes pas obligé d'utiliser toutes les fonctionnalités de Bootstrap.
Cela est particulièrement vrai pour les plugins. Choisissez et choisissez uniquement les plugins qui ont du sens, et n'utilisez pas tout parce que cela a l'air sympa et cool. Votre site Web peut être facilement exagéré. Considérez pour un début que vous n'incluez pas bootstrap.js du tout, et créez un site en utilisant uniquement du HTML et du CSS. Et puis, ajoutez des composants uniquement si nécessaire pour des rôles spécifiques, un par un.
Erreur Bootstrap commune n ° 5: mauvaise utilisation d'une invite modale
Les modaux Bootstrap offrent des invites de dialogue flexibles avec les fonctionnalités minimales requises et sont fournis avec des valeurs par défaut intelligentes. Bien que le mode modal soit facile à utiliser et offre une personnalisation riche, il y a quelques choses que nous devons garder à l'esprit pour éviter les abus courants.
Affichage de plusieurs invites modales à la fois
Bootstrap ne prend pas en charge les modaux qui se chevauchent. Un seul modal à la fois peut être visible. L'affichage de plus d'un modal à la fois peut être réalisé, mais cela nécessite l'écriture d'un code personnalisé pour gérer cela correctement.
Le modal Bootstrap apparaît en arrière-plan
Si le conteneur modal ou son élément parent a une position fixe ou relative, le modal ne s'affichera pas correctement. Assurez-vous toujours qu'aucun positionnement spécial n'est appliqué au conteneur modal et à ses éléments parents. La meilleure pratique consiste à placer le code HTML d'un modal juste avant la balise de fermeture, ou mieux encore dans une position de premier niveau dans le document juste après la balise d'ouverture. C'est le meilleur moyen d'éviter que d'autres composants n'affectent l'apparence et la fonctionnalité du modal.
Modal sur les appareils mobiles
Il y a quelques mises en garde dont les développeurs doivent tenir compte lorsqu'ils traitent des modaux sur appareils mobiles avec claviers virtuels . Cela est particulièrement vrai pour appareils iOS , où il existe un bogue de rendu qui ne met pas à jour la position des éléments fixes lorsque le clavier virtuel est déclenché. Ceci n'est pas géré par Bootstrap, il appartient donc au développeur de gérer ces situations dans le code de la meilleure façon pour l'application en question.
Erreur d'amorçage commune n ° 6: problème de composant du bouton d'entrée de fichier
Bootstrap n'a pas de composant désigné pour un bouton de téléchargement de fichier. Une solution simple et élégante utilisant uniquement HTML et CSS peut être obtenue avec l'exemple de code suivant:
Browse .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } Il existe de nombreux exemples pour obtenir un effet similaire. Cet exemple de code est emprunté à Cory LaViska, et sur son site vous pouvez lire un plus détaillé explication de ce problème . Il existe également un exemple étendu avec plus de fonctionnalités utilisant du code JavaScript supplémentaire.
Erreur d'amorçage courante n ° 7: se compliquer trop avec JavaScript et ignorer les attributs «data-»
Les concepteurs, ou simplement les développeurs JavaScript novices, peuvent très facilement se plonger dans le développement Web et créer des pages Web en utilisant uniquement HTML, CSS et Bootstrap. S'ils ne sont pas très bons en codage, ils peuvent tomber dans le piège de l'utilisation abusive de JavaScript ou simplement de la complication excessive. Il est important de préciser que tous les plugins Bootstrap peuvent être utilisés uniquement via l'API de balisage, sans pour autant écrire un une seule ligne de JavaScript. Il s'agit de l'API de première classe de Bootstrap et devrait être votre première considération lors de l'utilisation de plugins.
Par exemple, nous pouvons activer une boîte de dialogue modale sans écrire de JavaScript simplement en définissant data-toggle='modal' sur un élément de contrôleur comme un bouton ou une ancre, et passez des paramètres supplémentaires en utilisant data- les attributs. Dans le code ci-dessous, nous ciblons le code HTML avec l'ID #myModal. Nous avons spécifié que le modal ne se ferme pas lorsque l'utilisateur clique en dehors du modal à l'aide de data-backdrop option, et nous avons désactivé l'événement de touche d'échappement qui ferme un modal avec data-keyboard option. Le tout dans une seule ligne de code HTML:
Launch my modal Erreur commune Bootstrap # 8: Ignorer les outils qui facilitent le développement Bootstrap
Des erreurs se produisent et chaque développeur les commet occasionnellement. C'est inévitable, mais c'est la façon dont vous traitez l'erreur qui compte. L'équipe Bootstrap a remarqué en regardant le suivi des problèmes que les gens faisaient plus souvent des erreurs. C’est pourquoi ils ont essayé d’automatiser le processus de développement. Le résultat est Bootlint , un outil de linting HTML pour les projets Bootstrap. Bootlint peut être utilisé dans le navigateur ou à partir de la ligne de commande via Node.js, et il vérifiera automatiquement les pages Web Bootstrapped pour de nombreuses erreurs d'utilisation communes de Bootstrap. L'ajout de Bootlint à votre chaîne d'outils de développement Web peut éliminer de nombreuses erreurs courantes qui ralentissent généralement le développement d'un projet.
Si vous souhaitez contribuer au projet Bootstrap, cela vaut la peine de vérifier Rorschach . Rorschach est un bot de vérification de cohérence de demande d'extraction Bootstrap, qui exécute quelques vérifications à chaque nouvelle demande d'extraction. Si une vérification de cohérence échoue, elle laisse un commentaire informatif sur la demande d'extraction expliquant l'erreur et comment la corriger, puis ferme la demande d'extraction.
Erreur commune Bootstrap # 9: problèmes d'incompatibilité avec IE8 et les anciens navigateurs
Bootstrap est conçu pour fonctionner au mieux dans les derniers navigateurs de bureau et mobiles. Les navigateurs plus anciens peuvent afficher des composants et des éléments de style différent, mais tout doit être entièrement fonctionnel. La prise en charge inclut Internet Explorer 8 et 9, avec une note importante que certaines propriétés CSS3 et éléments HTML5 ne sont pas entièrement pris en charge par ces navigateurs.
un cadre de processus utilisé pour gérer le travail sur des produits complexes dans des environnements complexes est appelé
Pour obtenir une prise en charge complète d'Internet Explorer 8 et d'autres navigateurs plus anciens, vous devez utiliser un polyfill pour les requêtes multimédias CSS3 Respond.js , Cale HTML 5 qui permet l'utilisation d'éléments HTML5, et un IEtag approprié dans la tête HTML pour s'assurer que IE ne fonctionne pas en mode de compatibilité. Votre tête HTML à la fin devrait ressembler à ceci:
... En cas de Respond.js, attention aux points suivants mises en garde dans les environnements de développement et de production.
Erreur commune Bootstrap # 10: Ignorer les meilleures pratiques
L'une des questions courantes sur le débordement de pile est de savoir comment ouvrir le menu déroulant Bootstraps au survol plutôt qu'au clic. Bien que la solution à cette question ne soit pas compliquée et puisse être effectuée en utilisant uniquement du CSS, elle n'est pas recommandée. Cette fonctionnalité a été volontairement laissée en dehors du cadre, et il s'agit d'une décision de conception prise par l'équipe de développement. Encore une fois, cela peut être fait, mais il faut comprendre les répercussions et comprendre que les meilleures pratiques existent, en particulier pour les frameworks mobiles first. Le raisonnement derrière ce problème spécifique est que faire fonctionner les choses en survol n'aide pas les utilisateurs qui ont des appareils tactiles. Sur ces appareils, il n'y a pas de survol, seulement des événements tactiles. Ainsi, cela ne fonctionnera pas correctement sur les appareils tactiles.
Conclusion des erreurs Bootstrap
J'espère que ce petit guide Bootstrap vous aidera à éviter certaines des erreurs courantes, à clarifier les idées fausses habituelles et à tirer le meilleur parti du cadre. Gardez à l'esprit que Bootstrap n'est pas pour tout le monde, ni pour chaque projet. Lors du choix d'un framework, vous devez prendre un certain temps pour lire la documentation, et vous devez passer du temps à jouer avec le framework pour avoir une meilleure idée et une meilleure image de son fonctionnement. Ceci est également valable pour Bootstrap.
Lis le Documentation , jouez et expérimentez avec les échantillons, maîtrisez les bases et amusez-vous à créer de nouveaux et beaux designs.
