Share
Et nous arrivons enfin au dernier tutoriel de la série, qui vous montrera comment créer des jeux de couleurs personnalisés..
Si vous vous souvenez du début, lorsque nous examinions les principaux changements, j'ai mentionné que les auteurs de BS avaient fourni un fichier supplémentaire pour que BS3 ressemble à BS2, plutôt que d'utiliser son aspect plat..
Tout au long de cette série, nous avons utilisé l'apparence plate par défaut de BS3, mais si vous téléchargez la version JavaScript préconstruite de BS3 à partir du site Web Bootstrap, vous trouverez un nouveau fichier dans l'archive que vous téléchargez, appelé bootstrap-theme.css.
Si vous liez ce fichier à votre projet immédiatement après l’inclusion du fichier bootstrap.css principal, vous constaterez que même si vous utilisez maintenant le nouveau BS3, l’apparence de votre application ressemble toujours à celle de BS2..
Les auteurs ont compris que l’un des principaux obstacles à l’adoption de BS3 dans les nouvelles applications était son incapacité à le personnaliser de manière personnalisée, mais facilement..
Si vous utilisiez LESS ou même Sass (BS3 étant désormais doté de liaisons Sass), le problème ne se posait pas. Vous avez simplement ouvert les sources LESS, peaufiné les variables et les Mixins dont vous aviez besoin, puis géré le compilateur LESS pour obtenir votre nouveau script CSS..
Malheureusement, tout le monde n'a pas utilisé MOINS; En fait, de nombreux développeurs et concepteurs n’avaient que la possibilité de télécharger et d’inclure les vieux fichiers CSS et JavaScript précompilés, il fallait donc trouver un meilleur moyen de le faire..
Le premier changement consistait à ouvrir l’ensemble des sources Less à un outil de personnalisation intégré à la page directement sur le site principal de Bootstrap, mais ce n’est pas une nouveauté; vous avez pu utiliser cette page auparavant d'une manière limitée. Avec BS3, cependant, l’outil de personnalisation Moins a fait l’objet d’une refonte complète et vous pouvez maintenant redéfinir tout que BS3 utilise, depuis les tailles de police et les polices de caractères, en passant par les tailles de grille, les points de déclenchement et les jeux de couleurs contextuelles de base.
En fait, il n'y a plus rien qui ne puisse être changé avant de décider de télécharger votre nouveau CSS personnalisé, comme le montre l'image suivante:
Capture d'écran de la moitié supérieure du nouvel outil de personnalisationEn raison de la taille même de l'outil, il est impossible d'afficher l'intégralité de ce didacticiel, mais il est assez facile d'y accéder. Il suffit d’aller sur le site Bootstrap et de cliquer sur Personnaliser dans la barre de menu supérieure. Vous verrez également que vous disposez de nombreuses autres options, telles que les plug-ins JavaScript et les kits d'outils à inclure, les composants à inclure et le style de base que vous ne souhaitez peut-être pas..
Par exemple, si tout ce que vous voulez utiliser est le système de grille et rien d'autre, vous pouvez simplement sélectionner uniquement le système de grille et désélectionner tous les autres composants..
Le site BS3 générera alors uniquement le code requis à inclure, sans plus. C’est une aubaine pour ceux qui se plaignent que tous les sites Bootstrap se ressemblent, car cela signifie que votre site n’a absolument pas à ressembler au reste. Vous pouvez simplement utiliser les éléments dont vous avez besoin et utiliser vos propres éléments pour tout le reste.
Il existe deux autres manières de personnaliser votre construction. La première consiste à prendre la feuille de style CSS supplémentaire "thème d'amorçage", à en faire une copie, puis à modifier les styles à votre guise. Ce n'est pas aussi facile que d'utiliser les outils de personnalisation, mais ce n'est pas aussi difficile que l'alternative..
La plupart des noms de classes et des paramètres que vous souhaitez modifier pour marquer votre marque personnelle dans BS3 sont déjà séparés dans le thème BS2; le moyen le plus rapide de procéder à des expérimentations consiste donc simplement à créer une page de prototypage avec les principaux contrôles et éléments. vous souhaitez changer, puis créez un lien dans votre copie du thème BS2.
Si vous utilisez Node et quelque chose comme Bower, cela devient encore plus facile, car vous pouvez utiliser le rechargement en direct, puis regardez votre exemple de page changer en temps quasi réel lorsque vous peaufinez votre version personnalisée de la feuille de thème..
La deuxième manière est légèrement plus complexe et, comme décrit dans la documentation BS3, se présente sous deux formes: personnalisations légères et personnalisations lourdes..
Un exemple de personnalisation de la lumière consiste à ajouter une classe de couleur contextuelle à l'élément button. Par exemple, si vous vouliez ajouter btn-sky à côté du btn-info, btn-primaire, etc., vous pouvez définir une seule feuille de style contenant les règles suivantes:
.btn-sky, .btn-sky: survol, .btn-sky: actif color: # 000000; texte-ombre: 0 -1px 0 rgba (0, 0, 0, 2); couleur de fond: # AAD4FF; bordure: 1px noir uni; .btn-sky background-repeat: repeat-x; image d'arrière-plan: dégradé linéaire (haut, # 00FFFF 0%, # FFFF00 100%); .btn-sky: survol position-arrière-plan: 0 -10px;
Une fois ajouté et lié correctement, il devrait ressembler à ceci:
Sortie de l'exemple de code, lorsqu'il est utilisé avec l'exemple de personnalisationLorsqu'il est utilisé avec une balise de bouton normale de la manière suivante:
La partie la plus difficile de l’utilisation de cette méthode consiste à parcourir les feuilles de style CSS de base pour rechercher les noms que vous souhaitez remplacer; ce n'est pas exactement difficile, juste à bout de souffle.
Une fois que vous en avez un, tel que le bouton ci-dessus, ou que vous avez trouvé et copié une alerte, un panneau, une liste ou une autre classe, vous pouvez facilement créer un modèle pouvant être réutilisé chaque fois que vous souhaitez ajouter une classe personnalisée à cette classe. type.
Les personnalisations lourdes ne sont pas très différentes des personnalisations légères; la principale différence est que vous remplacez toute la classe.
Ainsi, par exemple, vous trouvez toutes les classes liées à btn, copiez-les, modifiez-les et incluez-les séparément.
La nouvelle architecture au sein de la structure BS3 signifie qu’une fois que vous connaissez les sélecteurs cibles et leurs frères, il est facile de créer une substitution. Comme je l'ai déjà indiqué, le fichier bootstrap-theme contient déjà une grande partie de ce que vous voudrez peut-être modifier de toute façon. Si ce n'est pas une option, essayez des sites tels que Bootswatch.com:
Capture d'écran du thème Sweet and Cherry de Bootswatch.comDe nombreux autres ont un choix de milliers de thèmes, gratuits ou payants. Il n’ya donc aucune excuse pour que votre site Bootstrap ait le même aspect que celui de tout le monde..
J'espère que cette série vous a plu et qu'elle vous aide à devenir un meilleur développeur avec Bootstrap 3. Dans ce nouveau monde de web design réactif, BS3 est un framework à ne pas prendre à la légère. Il représente de nombreuses recherches effectuées par l'un des les plus grandes entreprises de médias sociaux existantes, et est utilisé pour alimenter la plupart de leurs sites destinés au public.
Si vous souhaitez me contacter et me poser des questions sur le livre, on peut généralement me trouver sur Twitter sous le nom @shawty_ds. Vous pouvez également me trouver généralement sur LinkedIn ou dans le groupe d’utilisateurs Linked.NET (Lidnug) que j’aide à gérer..
Jusqu'à la prochaine fois, restez calme et continuez à démarrer.
Ce tutoriel représente un chapitre de Bootstrap 3 Succinctly, un eBook gratuit de l’équipe de Syncfusion..
Accentsconagua