Passer au contenu principal Passer à la navigation dans les documents
Check
in English

Personnaliser

Apprenez à thématiser, personnaliser et étendre Bootstrap avec Sass, une multitude d'options globales, un système de couleurs étendu, et plus encore.

Toupet Utilisez nos fichiers source Sass pour tirer parti des variables, des cartes, des mixins et des fonctions.
Choix Personnalisez Bootstrap avec des variables intégrées pour basculer facilement les préférences CSS globales.
Couleur Découvrez et personnalisez les systèmes de couleurs qui prennent en charge l'ensemble de la boîte à outils.
Composants Découvrez comment nous construisons presque tous nos composants de manière réactive et avec des classes de base et de modification.
Variables CSS Utilisez les propriétés personnalisées CSS de Bootstrap pour une conception et un développement rapides et tournés vers l'avenir.
Optimiser Gardez vos projets légers, réactifs et maintenables afin que vous puissiez offrir la meilleure expérience.

Aperçu

Il existe plusieurs façons de personnaliser Bootstrap. Votre meilleur chemin peut dépendre de votre projet, de la complexité de vos outils de construction, de la version de Bootstrap que vous utilisez, de la prise en charge du navigateur, etc.

Nos deux méthodes préférées sont :

  1. Utilisation de Bootstrap via le gestionnaire de packages pour pouvoir utiliser et étendre nos fichiers source.
  2. En utilisant les fichiers de distribution compilés de Bootstrap ou jsDelivr , vous pouvez ajouter ou remplacer les styles de Bootstrap.

Bien que nous ne puissions pas entrer dans les détails ici sur la façon d'utiliser chaque gestionnaire de packages, nous pouvons donner quelques conseils sur l'utilisation de Bootstrap avec votre propre compilateur Sass .

Pour ceux qui souhaitent utiliser les fichiers de distribution, consultez la page de démarrage pour savoir comment inclure ces fichiers et un exemple de page HTML. À partir de là, consultez la documentation pour la mise en page, les composants et les comportements que vous souhaitez utiliser.

Au fur et à mesure que vous vous familiarisez avec Bootstrap, continuez à explorer cette section pour plus de détails sur l'utilisation de nos options globales, l'utilisation et la modification de notre système de couleurs, la manière dont nous construisons nos composants, comment utiliser notre liste croissante de propriétés personnalisées CSS et comment pour optimiser votre code lors de la construction avec Bootstrap.

CSP et SVG intégrés

Plusieurs composants Bootstrap incluent des SVG intégrés dans notre CSS pour styliser les composants de manière cohérente et facile sur tous les navigateurs et appareils. Pour les organisations avec des configurations CSP plus strictes , nous avons documenté toutes les instances de nos SVG intégrés (qui sont tous appliqués via background-image) afin que vous puissiez examiner plus en détail vos options.

Sur la base de la conversation de la communauté , certaines options pour résoudre ce problème dans votre propre base de code incluent le remplacement des URL par des actifs hébergés localement , la suppression des images et l'utilisation d'images en ligne (pas possible dans tous les composants) et la modification de votre CSP. Notre recommandation est d'examiner attentivement vos propres politiques de sécurité et de décider de la meilleure voie à suivre, si nécessaire.