Twitter Bootstrap 101 Personnaliser

La page de personnalisation, intégrée à la documentation de Twitter Bootstrap, constitue un moyen rapide d'implémenter un jeu de couleurs personnalisé, une typographie personnalisée et plusieurs autres personnalisations CSS. Bien sûr, l’approche la plus puissante consiste à travailler directement avec les fichiers LESS de Bootstrap. Mais avec quelques ajustements rapides, et pour ceux qui préfèrent travailler en CSS simple, cette page vous offre un excellent moyen de relancer vos personnalisations..


Personnaliser les couleurs et la typographie

Dans ce screencast, je vais vous expliquer comment convertir un site Bootstrap de base en un jeu de couleurs sombres. Nous lui donnerons une barre de navigation plus grande et nous intégrerons une paire de polices Web Google. Le processus est rapide et assez indolore!

Dans une courte vidéo de suivi, je vais vous montrer comment vérifier les erreurs susceptibles de perturber la création de vos fichiers CSS personnalisés. Vous devrez faire attention à ceux-ci et pouvoir y retourner et les réparer quand ils se produiront. Je vais vous montrer comment c'est fait.

En fin de compte, beaucoup d’entre vous trouveront un excellent moyen de lancer le processus pour vos conceptions personnalisées..


Vous pouvez également télécharger la vidéo ou vous abonner à YouTube via Webdesigntuts + screencasts.

Surveillez les erreurs!

Même une petite faute de frappe peut introduire une erreur dans le processus de personnalisation. Vous devrez rechercher un fichier "error.txt". S'il apparaît à côté de votre CSS personnalisé, vous devrez l'ouvrir et l'utiliser pour vous aider à trouver et à corriger les entrées générant des erreurs dans la page Personnaliser. Permettez-moi de vous montrer un exemple!


Vous pouvez également télécharger la vidéo ou vous abonner à YouTube via Webdesigntuts + screencasts.

Ressources

Au cours de ces vidéos, nous avons utilisé:

  • Page de personnalisation de Bootstrap
  • Google Web Fonts

Vous pouvez également trouver utile de référencer les valeurs de couleur et de typographie utilisées dans le screencast: