Bootstrap est l'un des frameworks frontaux HTML / CSS / JS les meilleurs et les plus utilisés. Presque tous les développeurs Web qui ont créé un site Web ou deux ont entendu parler de ce cadre populaire. Il offre tellement de composants et de ressources prêts à l'emploi que Bootstrap peut considérablement accélérer le développement de votre application.

comment coder un robot

Meilleures pratiques pour accélérer le développement de vos applications avec Bootstrap Tweet

Tout bon développeur est soucieux d'économiser chaque seconde dans son processus de développement. Être efficace signifie un déploiement plus rapide - plus nous déployons tôt et souvent, plus vite nos utilisateurs finaux obtiennent un meilleur produit. Par conséquent, passer quelques heures ou quelques jours à planifier le processus et la stratégie peut nous faire gagner non seulement quelques minutes, mais de nombreuses heures.

Personnellement, je travaille avec ce framework depuis 4 ans sur 90% de mes projets. Dans cet article, je voudrais partager avec vous quelques conseils qui peuvent vous aider à accélérer le développement de votre application sans manquer certaines des fonctionnalités impressionnantes de Bootstrap.

Comprendre Bootstrap

Même s'il s'agit d'un framework avec lequel il est très facile de démarrer, ne vous laissez pas berner par sa simplicité à première vue. Avant de vous lancer dans un projet, passez du temps à jouer avec le framework et à vous familiariser avec les éléments clés de son infrastructure et ses composants passionnants. Cela aidera à éviter Les 10 erreurs Bootstrap les plus courantes .

Consacrez une heure à lire la documentation sur le site de Bootstrap ou apprenez-en plus grâce à un excellent article sur le blog d'ApeeScape, Qu'est-ce que Bootstrap? Un court didacticiel sur le quoi, le pourquoi et le comment. Et, excellent article Bootstrap 3 trucs et astuces que vous ne connaissez peut-être pas sur scotch.io.

Si vous trouvez que lire de la documentation est une tâche ennuyeuse et que vous préférez lire du code à la place, le meilleur endroit pour commencer est Site Web de Bootstrap . Ouvrez votre inspecteur Web, parcourez le code source du site et vérifiez chaque bloc de code et ses éléments. C'est probablement l'un des moyens les meilleurs et les plus rapides pour comprendre les bases.

Creusez dans la structure de la page et découvrez comment les mises en page sont construites.

...

… Redimensionnez la fenêtre de votre navigateur ou utilisez le redimensionneur de fenêtres de Chrome pour en savoir plus sur les utilitaires de requête multimédia.

/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

… Et comment et quand les utiliser, familiarisez-vous avec les classes de colonnes pour obtenir les meilleurs résultats de conception réactive.

Left column Right column

Jetez un œil à W3Schools où vous trouverez un référence complète de Bootstrap de toutes les classes CSS, composants et plugins JavaScript - le tout avec des exemples «Essayez-le vous-même»:

• Le système de grille de Bootstrap a expliqué: grilles dans Bootstrap
• Classes CSS de base: typographie , boutons , formulaires et éléments de formulaire , classes d'assistance , images , les tables
• Composants individuels: glyphicons , listes déroulantes , navs .

Inspectez le code source et essayez de vous familiariser avec autant de noms de classes que possible. Découvrez leurs cas d'utilisation: comment, quand et pourquoi. Cela vous aidera à avancer plus rapidement lors de l'écriture HTML et du style des éléments de l'interface utilisateur. En savoir plus sur ces composants vous aidera à éviter de gonfler vos feuilles de style avec beaucoup de code en double inutile. Gardez-le mince et propre en utilisant et en réutilisant des composants existants, au lieu d'en créer trop de nouveaux qui font la même chose que ceux qui existent déjà dans le cadre.

En savoir plus sur les composants Bootstrap vous aidera à éviter de gonfler vos feuilles de style Tweet

Ceci est particulièrement important lorsque vous travaillez dans une équipe de plusieurs développeurs. Assurez-vous de ne pas finir par écrire des tonnes de code dupliqué en créant trop de styles pour le même cas à chaque fois encore et encore lors de la traduction de nouvelles conceptions dans le code. Garder le développement de l'interface utilisateur cohérent et bien documenté avec les guides de style de l'interface utilisateur peut également ajouter quelques nœuds au travail d'équipe productif. De plus, vous constaterez que lors de l'ajout de nouvelles fonctionnalités ou pages à votre application, vous avancerez avec moins de frustration. J'ai été impliqué dans plus d'une douzaine de grands projets, et en comparaison, j'ai vu un certain nombre de cas où le framework était littéralement piraté et chaque fois que le nouveau code CSS était ajouté, il cassait l'interface utilisateur sur d'autres pages. Ce serait assez épuisant de parcourir tout le site et de corriger ces types de bogues. De plus, pensez au coût et à tout l'argent dépensé en temps supplémentaire pour les développeurs et en aide au contrôle qualité.

7 erreurs de style les plus courantes pour perdre du temps

1. Lors du centrage du texte ou des divs

Si vous avez besoin de centrer un div et / ou un contenu, vous pouvez utiliser l'une de ces classes:

Utilisation centre de texte

I am centered text

… ou bloc central

I am centered text

ne pas .centre ou

comment faire un bot discord 2018

2. Lors du changement de la taille de la police

Si vous avez besoin de polices plus petites ou plus grandes, vous pouvez utiliser l'une de ces classes:

I'm bigger paragraph text.

I'm smaller paragraph text.

Au cas où vous auriez besoin d'en-têtes plus grands ou plus petits, n'oubliez pas .x1 , .h2 , .h3 , .h4 , .h5 , .h6 , .petit . Utilisez-le comme ceci:

Bigger Title with .h1

Smaller Title with .small

3. Lors du nettoyage des flotteurs ou en forçant des éléments à nettoyer eux-mêmes leurs enfants

Pas besoin de créer des classes comme .clear, vous pouvez toujours utiliser Bootstrap .clearfix au lieu.

...

4. Lors de la suppression des marges de classe .row

Utilisez simplement .clearfix au lieu de définir vos propres styles (ou pire, en utilisant des styles en ligne):

...

5. Lors de la suppression du style ou de l'intégration de listes non ordonnées et d'autres éléments

Supprimer la valeur par défaut style liste et marge gauche sur les éléments de la liste. Cela s'applique uniquement aux éléments de liste enfants immédiats. Au cas où vous auriez besoin d'appliquer la même chose pour les listes imbriquées, vous devrez également ajouter le nom de la classe à celles-ci.

• ...

• ...

De même, pour les cases à cocher ou les boutons radio, nous avons .checkbox-inline et .radio-en ligne .

Et vous pouvez toujours ajouter .form-inline à vos formulaires (qui n'a pas besoin d'être a) pour les contrôles alignés à gauche et en bloc en ligne.

6. Lors du dimensionnement des boutons

Envie de boutons plus grands ou plus petits? Ajouter .btn-lg , .btn-sm , ou .btn-xs pour des tailles supplémentaires.

7. Lors du flottement et de l'alignement des éléments vers la droite ou la gauche

Faites flotter un élément vers la gauche ou la droite avec une classe. !important est inclus pour éviter les problèmes de spécificité. Les classes peuvent également être utilisées comme mixins avec n'importe quel préprocesseur CSS.

Utilisation .pull-droite , .pull-gauche , .text-right , .text-gauche au lieu de .droite , .la gauche , flotteur gauche , .right-float .

... ...

Réalignez facilement le texte aux composants avec des classes d'alignement de texte.

Left aligned text.

Right aligned text.

Ne pas personnaliser directement les fichiers de base du framework

Lorsque je travaillais sur de gros projets, j'ai trouvé que la meilleure façon d'utiliser efficacement le framework est de s'en inspirer et de ne pas personnaliser directement ses fichiers de base. Ce concept est similaire à d'autres plates-formes et bibliothèques que vous pourriez utiliser pour le projet.

type de fichier txt carte cvv 2017

Bien que, si vous créez un petit site et que vous disposez d'une maquette de conception qui ne nécessite pas beaucoup de modifications ou de mises à jour, vous constaterez peut-être que la personnalisation du cadre en fonction de vos besoins est une meilleure option. Par exemple, vous pouvez supprimer tout ce dont vous n'avez pas besoin directement dans les fichiers du framework, ou vous pouvez accéder à la section de personnalisation du site de Bootstrap où vous pouvez facilement configurer tous les composants, variables et plugins jQuery pour obtenir votre très propre version. Dans ce cas, vous pouvez accélérer le développement de votre site et réduire le temps de stylisation ou de gestion des remplacements.

Cependant, si vous démarrez ou travaillez sur un grand site avec plusieurs développeurs ou plus, il est préférable de garder les choses séparées et bien organisées. Déplacez les fichiers du framework en dehors du dossier CSS personnalisé principal et conservez-le dans un dossier non-edit non-version et supprimez le CSS inutilisé en utilisant les plugins Grunt ou Gulp grunt-uncss ou gulp-uncss. Une autre alternative pour le garder séparé est de le servir via CDN. Le fait que le code du framework soit séparé et intact vous offre une option meilleure et plus rapide lors de la mise à niveau vers la dernière version. Cela permet également de minimiser un certain nombre de problèmes d'évolutivité et de style, ou d'être ralenti lors de la réalisation d'ajouts avec des modifications rapides et continues de l'interface utilisateur.

Utilisez des outils d'échafaudage tels que Yeoman ou Slush, et des gestionnaires de packages tels que Bower, Python's pip, Node’s NPM ou Ruby Gems, car ils font bien plus que d'ajouter des fichiers au chemin de votre application. J'apprécie vraiment la puissance de Bower - il peut certainement faire un peu plus que simplement télécharger un fichier ou deux. L'utilisation d'un gestionnaire de packages est une bonne idée car il est fort probable que la complexité de votre projet augmentera et que le nombre de plug-ins tiers et la façon dont vous les maintenez deviendront insensés et prendront du temps. Bower vous aidera à garder une trace de chaque plugin et de ses dépendances, y compris tout ce qui est lié à Bootstrap.

Utiliser les ressources d'amorçage disponibles pour le développement d'applications

La popularité de Bootstrap s'accompagne d'une multitude de ressources utiles: articles, didacticiels, plug-ins et extensions tiers, modèles, créateurs de thèmes, etc. Que vous recherchiez de l'inspiration ou des extraits de code, vous disposerez de tout ce dont vous avez besoin pour accélérer vos progrès.

On pourrait penser qu’avec autant de ressources disponibles, tout le monde en profiterait et l’utiliserait à travers ses projets, mais croyez-le ou non - ce n’est pas le cas. Certains développeurs perdent leur temps et ralentissent la progression du projet en ignorant certains extraits de code ou ressources. Bien que vous ne devriez pas simplement copier et coller aveuglément, vous devez comprendre les bonnes parties et les adapter à votre style de codage et à vos besoins techniques. La capacité de trouver et de trier de bonnes ressources et de pouvoir les utiliser efficacement est également une compétence et nécessite des années d'expérience et de connaissances.

Vous trouverez ci-dessous une liste de ressources utiles pour commencer:

Modèles, thèmes et plugins

Thèmes officiels des créateurs de Bootstrap: themes.getbootstrap.com .

Marketplaces avec thèmes et modèles Bootstrap premium: wrapbootstrap.com , themeforest.net , creativemarket.com/themes/bootstrap .

Thèmes et modèles Bootstrap gratuits: startbootstrap.com , www.bootstrapzero.com , shapebootstrap.net/free-templates .

«The Big Badass List» - une liste de 319 ressources Bootstrap utiles: bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

BootstrapUI écrit en pur AngularJS par l'équipe AngularUI.

ReactJS

Réagir-Bootstrap est une bibliothèque de composants frontaux réutilisables. Vous obtiendrez l'apparence et la convivialité de Twitter Bootstrap, mais avec un code beaucoup plus propre, via le framework React.js de Facebook.

Django

Intégration de Bootstrap 3 avec Django: https://github.com/dyve/django-bootstrap3

Jekyll

Jekyll-Bootstrap est un échafaudage de blog complet pour les blogs basés sur Jekyll.

WordPress

Thème de démarrage WordPress Sage avec un flux de travail de développement frontal moderne. Basé sur HTML5 Boilerplate, gulp, Bower et Bootstrap.

Conception matérielle

Conception matérielle pour Bootstrap est un thème pour Bootstrap 3 qui vous permet d'utiliser le nouveau Google Material Design dans votre framework frontal préféré.

migration de données à partir de systèmes existants

Conclusion

Bootstrap est l'un des meilleurs frameworks disponibles qui vous offre de nombreux outils et ressources pour accélérer et accélérer votre processus de développement d'applications.

Cela vous permet d'économiser de nombreuses heures / jours de travail lors de la conception et du codage d'une interface utilisateur impressionnante. Chaque composant et plugin est complètement documenté avec des exemples en direct et des blocs de code pour une utilisation et une personnalisation plus faciles. Il est fortement recommandé par de nombreux développeurs et très populaire pour le prototypage et la production. C'est un très bon outil pour créer des sites Web réactifs adaptés aux mobiles. Bootstrap vous donne un excellent point de départ pour de nombreux types de projets, la possibilité de le remettre à un designer et dites «faites en sorte que ce soit élégant!» sans qu'ils aient besoin de pirater leur chemin à travers le code. Plus important encore, il vous permet de développer la structure en premier et de traiter les polices, les couleurs et les styles fantaisistes plus tard. Prenez le temps d'étudier ce qu'il peut faire et soyez intelligent sur la meilleure façon de l'utiliser afin que vous puissiez arriver plus rapidement où vous le souhaitez.