Les 10 erreurs de démarrage les plus courantes commises par les développeurs

À première vue, Bootstrap semble assez simple. Et en effet, il n'est pas difficile de commencer à utiliser Bootstrap. Il existe une documentation Bootstrap très bien écrite avec de nombreux exemples de code HTML, CSS et JavaScript. La plupart des pièges 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 framework, et donc des erreurs se produisent.

Nous examinerons 10 des erreurs, problèmes et idées fausses les plus courants de Bootstrap lorsque les développeurs commencent à l'utiliser.

Erreur commune Bootstrap # 1: idées fausses de base sur le framework

Il existe certaines idées fausses de base sur le framework 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 à faire des choses mal, puis blâment le framework. Alors clarifions quelques 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 glyphes, 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 quelques-uns et, avec sa configuration par défaut, générer rapidement une interface utilisateur qui gère plusieurs navigateurs, appareils et résolutions avec un format agréable.

Bootstrap ne fera pas tout pour vous, mais il fournit un ensemble de valeurs par défaut raisonnables parmi lesquelles 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 à obtenir un site Web attrayant et opérationnel rapidement. Cela permet un prototypage rapide, mais cela ne limite pas les développeurs en cours de route.

Il est suffisamment extensible pour que chacun puisse l'adapter à ses besoins. Au début, Bootstrap avait certaines limites, et à l'époque, il était compliqué d'étendre les styles par défaut. Mais à mesure que le cadre mûrissait, l'extensibilité s'améliorait également.

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 CSS et HTML5. Bootstrap supprime de nombreuses parties CSS délicates des épaules des développeurs (comme les préfixes spécifiques au fournisseur) 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 comment fonctionne 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 dans 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 construction avec Bootstrap. De superbes vitrines sur la façon dont différentes conceptions peuvent être réalisées peuvent être trouvées sur Bootstrap Expo, qui rassemble des sites construits avec Bootstrap. Jetez un coup d'œil, inspirez-vous et commencez à créer votre propre variante de design.

Erreur commune Bootstrap #3 : Modification du fichier CSS Bootstrap

Pour faire simple : Ne modifiez pas le fichier bootstrap.css .

Si vous apportez des modifications au fichier bootstrap.css , les choses se compliqueront très rapidement. L'ensemble de la conception se cassera lorsque vous souhaiterez mettre à niveau les fichiers Bootstrap. Vous pouvez écraser dans votre propre feuille de style les couleurs, les styles, les marges, les rembourrages, tout. Il n'est pas du tout nécessaire de toucher à la feuille de style bootstrap.css .

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 la feuille de style bootstrap.css d'origine. Tout comme nous l'avons mentionné dans l'erreur précédente, connaître 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 plonger plus profondément ? Je vous suggère et vous encourage vivement à le faire. Utilisez le code source Bootstrap LESS. Vous comprendrez mieux ce qui se passe et où se trouve quoi si vous utilisez la source LESS et non le CSS statique.

Erreur commune de Bootstrap #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 ça a l'air sympa et cool. Votre site Web peut être facilement surchargé. Considérez pour commencer que vous n'incluez pas du tout le fichier bootstrap.js et créez un site en utilisant simplement HTML et CSS. Et puis, ajoutez des composants uniquement selon les besoins pour des rôles spécifiques, un par un.

Erreur commune de Bootstrap #5 : Utiliser une invite modale à mauvais escient

Les modaux Bootstrap offrent des invites de dialogue flexibles avec les fonctionnalités minimales requises, et il est livré avec des valeurs par défaut intelligentes. Bien que modal soit facile à utiliser et offre une personnalisation riche, il y a quelques points que nous devons garder à l'esprit pour éviter les abus courants.

Afficher plus d'une invite modale à la fois

Bootstrap ne prend pas en charge les modaux qui se chevauchent. Un seul modal à la fois peut être visible. Il est possible d'afficher plus d'un modal à la fois, mais cela nécessite l'écriture d'un code personnalisé pour le gérer 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 HTML d'un modal juste avant la balise de fermeture </body> , ou mieux encore dans une position de niveau supérieur dans le document juste après la balise d'ouverture <body> . 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

Les développeurs doivent être conscients de certaines mises en garde lorsqu'ils traitent avec des modaux sur des appareils mobiles dotés de claviers virtuels. Cela est particulièrement vrai pour les appareils iOS, où un bogue de rendu existe 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 courante 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 :

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .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 de la façon d'obtenir un effet similaire. Cet exemple de code est emprunté à Cory LaViska, et sur son site vous pouvez lire une explication plus détaillée de ce problème. Il existe également un exemple étendu avec plus de fonctionnalités qui utilise du code JavaScript supplémentaire.

Erreur commune de bootstrap n°7 : compliquer excessivement 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 doués pour le codage, ils peuvent tomber dans le piège d'une mauvaise utilisation de JavaScript ou simplement d'une complication excessive. Il est important de préciser que tous les plugins Bootstrap peuvent être utilisés uniquement via l'API de balisage, sans écrire 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 code JavaScript simplement en définissant data-toggle="modal" sur un élément de contrôleur comme un bouton ou une ancre, et en passant des paramètres supplémentaires à l'aide d'attributs de data- . Dans le code ci-dessous, nous ciblons le code HTML avec l'ID #myModal . Nous avons spécifié que le modal ne se fermera pas lorsque l'utilisateur cliquera en dehors du modal en utilisant l'option data-backdrop , et nous avons désactivé l'événement de touche d'échappement qui ferme un modal avec l'option data-keyboard . Tout en une seule ligne de code HTML :

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Erreur commune de Bootstrap #8 : Ignorer les outils qui facilitent le développement de Bootstrap

Des erreurs se produisent et chaque développeur en fait de temps en temps. C'est inévitable, mais c'est la façon dont vous gérez 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 Bootstrap pour de nombreuses erreurs d'utilisation courantes 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, il vaut la peine de vérifier Rorschach. Rorschach est un bot de vérification de l'intégrité des requêtes d'extraction Bootstrap, qui exécute quelques vérifications à chaque nouvelle requête 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 d'amorçage courante n° 9 : problèmes d'incompatibilité avec IE8 et les navigateurs plus anciens

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.

Pour obtenir une prise en charge complète d'Internet Explorer 8 et d'autres navigateurs plus anciens, vous devez utiliser un polyfill pour CSS3 Media Queries Respond.js, HTML 5 shim qui permet l'utilisation d'éléments HTML5 et une balise IE <meta> appropriée dans l'en-tête HTML pour assurez-vous qu'IE ne s'exécute pas en mode de compatibilité. Votre tête HTML à la fin devrait ressembler à ceci :

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

Dans le cas de Respond.js , méfiez-vous des mises en garde suivantes dans les environnements de développement et de production.

Erreur commune Bootstrap #10 : Ignorer les meilleures pratiques

L'une des questions courantes sur Stack Overflow est de savoir comment faire en sorte que le menu déroulant Bootstraps s'ouvre au survol plutôt qu'au clic. Bien que la solution à cette question ne soit pas compliquée et puisse être réalisée en utilisant uniquement CSS, elle n'est pas recommandée. Cette fonctionnalité a été délibérément 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 de tels 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 de bootstrap

J'espère que ce petit guide Bootstrap vous aidera à éviter certaines des erreurs courantes, à dissiper les idées fausses habituelles et à tirer le meilleur parti du framework. Gardez à l'esprit que Bootstrap n'est pas pour tout le monde, ni adapté à tous les projets. Lorsque vous choisissez un framework, vous devez prendre le temps de lire la documentation, et vous devez passer du temps à jouer avec le framework pour avoir une meilleure idée et une meilleure idée de son fonctionnement. Ceci est également valable pour Bootstrap.

Lisez la documentation, jouez et expérimentez avec les exemples, maîtrisez les bases et amusez-vous à créer de nouveaux et magnifiques designs.