Personnalisation des tendances, des outils et des cadres de mises en page d'amorçage

Bootstrap est actuellement le framework front-end numéro un et facilement le moyen le plus rapide de créer des mises en page. Il existe depuis des années et des développeurs tiers ont même publié leurs propres ressources en ligne. Ces ressources vont de thèmes gratuits à plugins et frameworks détaillés.

Dans cet article, je voudrais partager une poignée de ces ressources et bonnes pratiques pour les développeurs qui veulent aller plus loin avec Bootstrap.

Tous les les ressources de ce post sont gratuites, afin que vous puissiez les utiliser comme bon vous semble. Même si vous n'avez jamais utilisé Bootstrap, vous êtes sûr de trouver ici quelque chose qui vous aidera à démarrer..

Restyling avec Bootstrap

La bibliothèque Bootstrap par défaut est livrée avec son propre design unique ça a l'air fantastique. Il est largement connu sur le Web et vous pouvez facilement savoir quand un site Web est en utilisant des éléments Bootstrap traditionnels.

Mais vous pouvez aussi refaites vous-même ces éléments utiliser le code de Bootstrap comme base de votre mise en page.

Il y a quelques façons différentes tu peux le faire:

Ajoutez votre propre feuille de style pour écraser la valeur par défaut.
Personnalisez la sortie de BootStrap afin que vous n'obteniez que les éléments souhaités.
Combinez avec des add-ons et des plugins / thèmes.

Cette dernière option est la plus courante et c'est l'une des raisons pour lesquelles Bootstrap a connu une croissance aussi rapide.

Certes, je suis aussi un grand fan de leur outil de personnalisation car il est totalement gratuit et vous donne tellement de contrôle sur les fonctionnalités que vous souhaitez utiliser.

Il existe une multitude de ressources pour BootStrap 3/4, créées par des développeurs tiers, il est donc plus facile que jamais de créez vos propres dispositions uniques BootStrap sans écrire beaucoup de code.

Plugins et add-ons

Comme Bootstrap est livré avec une bibliothèque JavaScript massive, il est assez facile de étendre les fonctionnalités JavaScript. Et les développeurs l’ont certainement fait avec leurs propres plugins, dont beaucoup sont publiés gratuitement en ligne..

Ce sont mes favoris que tous supporte nativement Bootstrap. Beaucoup d'entre eux courir sur jQuery, ils sont donc faciles à personnaliser si vous connaissez votre chemin dans la bibliothèque jQuery.

Validateur de formulaire

La première place est ma préférée plugin de validation de formulaire, validateur de formulaire. Il tourne sur jQuery et supporte tout un tas de frameworks frontaux: Bootstrap, Foundation, Pure, UIKit, etc..

Vous pouvez ajouter manuellement un nombre quelconque de 51 validateurs à n'importe quelle forme sur votre site. Cela signifie que les visiteurs devront satisfaire à ces exigences de validation avant de pouvoir soumettre le contenu..

De nombreux formulaires de contact utilisent ces validateurs pour besoin d'adresses e-mail de travail. Mais, vous pouvez également les utiliser pour des images ou des mots de passe, à peu près tout ce que votre Bootstrap-heart désire.

Sélecteur de date / heure

Cueilleurs de date sont également une douleur énorme à coder vous-même. De nombreux formulaires n'utilisent que des menus déroulants pour les paramètres jour / mois / année, mais vous pouvez également utiliser cette option. Bootstrap date picker plugin pour vous épargner les tracas.

C'est complètement open-source et fonctionne sur la bibliothèque Bootstrap 3.x. Vous remarquerez aussi soutient à la fois la date et le temps en utilisant un autre plugin jQuery, Moment.js.

Globalement, cette bibliothèque est fantastique pour avoir un sélecteur de date actif. Il a beaucoup de dépendances mais, heureusement, vous n'aurez pas besoin d'écrire beaucoup de code pour le faire fonctionner.

Nombre d'étoiles

Voici une autre fonctionnalité intéressante pour classement par étoiles sur le Web. Vous pouvez ajouter un à cinq étoiles n'importe où sur votre site, en utilisant la bibliothèque Bootstrap pour les comportements JavaScript.

Lorsque l'utilisateur survole ces étoiles, l'affichage change, quelle que soit la note attribuée à la position du curseur. Puis, en un clic, l’utilisateur vote et attribue un nombre d’étoiles., y compris les demi-étoiles.

Ce plugin est définitivement compliqué à mettre en place parce que vous pouvez changer beaucoup de paramètres par défaut pour des techniques plus avancées. Mais, vous pouvez voir une simple démonstration en direct pour évaluer si ce plugin de classement par étoiles s’adapte à votre site..

WATABLE

Bootstrap est livré avec son propre style de disposition de table pour afficher des données tabulaires sur le frontend. Mais avec le Plugin WATable, vous pouvez ajouter un tas de fonctionnalités supplémentaires à vos tables Bootstrap.

C'est l'un des plugins jQuery les plus détaillés et voici quelques-unes des fonctionnalités que vous pouvez ajouter:

Pagination personnalisée.
Tri des colonnes.
Filtrage des données.
Effets d'animation de table.
Vérifier pour sélectionner des lignes entières.

WATable est décrit comme un Couteau suisse des plugins de table et je suis d'accord avec cette description. Le fait qu'il supporte Bootstrap n'est que la cerise sur le gâteau.

C'étaient certains de mes plugins préférés, mais il y en a tellement d'autres. Vous pouvez parcourir encore plus sur cette page si vous êtes curieux.

Les frameworks bootstrap

Bootstrap est en réalité un grand framework car il permet aux utilisateurs personnaliser les styles HTML et CSS par défaut avec quelques cours.

Mais les développeurs ont pris la bibliothèque BootStrap par défaut et ont ajouté leurs propres styles pour créer des frameworks encore plus grands qui travailler comme des thèmes, vous n'avez donc pas besoin de relancer Bootstrap à partir de zéro.

Heureusement, ils sont tous gratuits et fonctionnent tous sur les classes BootStrap par défaut..

Bootflat

Le framework BootStrap le plus connu est peut-être Interface utilisateur bootflat cette suit la tendance du design plat.

Ça marche avec toutes les fonctionnalités par défaut de Bootstrap, y compris tous les composants JavaScript. Les principales différences sont plus dans conception et structure où les éléments de page utilisent des palettes de couleurs plates pour s'éloigner des styles de dégradés de Bootstrap.

Bootflat n'a pas été surutilisé beaucoup, afin que vous puissiez ajouter ce cadre sur n'importe quelle page de destination ou page d'accueil pour créer un look unique pour votre site.

C'est 100% gratuit et vient même avec un pipette à couleurs, afin que vous puissiez trouver des jeux de couleurs plats pour correspondre à votre mise en page.

Merde fait

Ce kit d'interface utilisateur étonnamment émoussé construit également sur la bibliothèque Bootstrap 3 et est publié gratuitement sur GitHub.

Get Shit Done vient de l'équipe de Creative Tim où ils vendent quelques ressources premium. Ce kit d'interface utilisateur spécifique a une version pro mais ce n'est pas du tout nécessaire.

La version open-source a plus que suffisant pour tout le monde et vous pouvez consulter la démo en direct pour voir à quoi ça ressemble dans le navigateur.

Conception du matériel Bootstrap

Une autre tendance de conception populaire est La conception matérielle de Google. C’est un langage de conception conçu à l’origine pour les concepteurs d’applications Android, mais a depuis répandre sur le web et a recueilli beaucoup de soutien de la part des concepteurs UI / UX.

Cet incroyable framework de matériaux Bootstrap utilise les fonctionnalités de conception des matériaux pour: construire un style de design personnalisé hors de la bibliothèque de Bootstrap.

Par défaut, il prend en charge tout dans BootStrap 3 et est actuellement en cours de retouche pour prendre également en charge Bootstrap 4. Vous pouvez en apprendre plus sur la page d’accueil officielle qui contient de la documentation et des démonstrations..

Une bibliothèque similaire que vous pourriez essayer est MDBootstrap, bien que je trouve cela un peu plus difficile de travailler avec.

Bootplus

Google a créé le langage de conception des matériaux, mais ils ont également leurs propres styles pour nombre de leurs outils et applications Web..

Bootplus imite le style d'interface Google+, ainsi que de nombreux documents d'aide de Google, Google Drive et des applications Web similaires. Il présente les mêmes fonctionnalités que Bootstrap, y compris les grilles, les styles de présentation, les styles d'élément et les composants JavaScript..

Vous pouvez même parcourir une démonstration sur le site pour voir la différences entre Bootplus et l'interface utilisateur Bootstrap d'origine. Pour une ressource gratuite, Bootplus est vaste et il est parfait pour ceux qui aiment les techniques de conception de Google..

Outils et ressources

Enfin, je voudrais plonger dans les nombreux outils gratuits pour personnalisation et création de mises en page Bootstrap.

Ces outils sont tous des applications Web et beaucoup d'entre eux sont même open source sur GitHub. Ils sont conçus pour vous faire gagner du temps et vous aider à concevoir d'incroyables dispositions Bootstrap sans trop de code..

Éditeur en direct

Le libre Éditeur Live Bootstrap est l'un des meilleurs outils pour les concepteurs non techniques. Si vous ne savez pas comment coder, vous pouvez toujours compter sur ce constructeur Bootstrap pour créer une mise en page complète à partir de zéro..

Il fonctionne directement dans votre navigateur et vous pouvez même choisir parmi des modèles prédéfinis pour commencer.

Les options de la barre latérale vous permettent de ajouter certaines valeurs CSS si vous connaissez un codage frontal. Mais, vous pouvez également utiliser l'interface graphique pour modifier les couleurs, les polices, les tailles et pratiquement tout ce que vous aimez.

Une fois que vous avez terminé, Cliquez sur “Obtenir le thème” et vous pouvez copier / coller les styles CSS mis à jour dans votre propre projet. Un moyen super facile de relooker Bootstrap sans avoir à tout recoder.

Formateur

C'est gratuit Générateur de formulaire bootstrap est un outil de navigation glisser-déposer qui vous permet de créer des formulaires Bootstrap à partir de zéro.

Encore une fois ne nécessite aucune connaissance en codage et vous avez un accès complet à tous les éléments Bootstrap 3. Il suffit de sélectionner l'élément souhaité et de le faire glisser dans la zone de gauche. À partir de là, vous pouvez tout changer, du texte de substitution à la classe CSS..

De loin le constructeur de formulaire le plus cool que j'ai jamais vu et c'est 100% gratuit!

BootSwatchr

Un autre outil gratuit que j'aime beaucoup est BootSwatchr. Il repose sur le framework Bootstrap et vous permet de mise à jour des couleurs, styles de thème, et le disposition générale de la page.

Ce que j’aime dans cette application, c’est la façon dont elle vient avec un galerie gratuite de styles préconçus.

Donc, vous pouvez télécharger un design qui quelqu'un d'autre a déjà fait ou vous pouvez l'utiliser comme point de départ pour personnaliser votre propre thème.

Avancer

Bootstrap ne fait que croître en popularité, le moment est donc propice pour plonger dans ce cadre. Heureusement, il existe des dizaines de plugins, de frameworks et d'outils gratuits que vous pouvez utiliser pour accélérer le processus de développement..

Dans cet article, je viens de montrer la partie émergée de l'iceberg. Si vous ne voyez rien d'utile ici, adressez-vous à Google et voyez ce que vous pouvez trouver d'autre.