Personnalisation Bootstrap CSS
Je viens juste de commencer avec Bootstrap de Twitter et je me demande quelles sont les meilleures pratiques en matière de personnalisation. Je souhaite développer un système qui tirera parti de toute la puissance d’un modèle CSS ( Bootstrap ou autre), être complètement (et facilement) modifiable, être durable (c.-à-d. - lorsque la prochaine version de Bootstrap sera publiée sur Twitter, je ne dois pas tout recommencer à zéro.
Par exemple, je veux ajouter des images d’arrière-plan à la navigation supérieure. On dirait qu'il y a 3 façons de s'y prendre:
- Modifiez les classes .topbar dans bootstrap.css. Cela ne me plaît pas particulièrement parce que je vais avoir beaucoup d’éléments .topbar et que je ne veux pas nécessairement les modifier tous de la même manière.
- Créez de nouvelles classes avec mes images d'arrière-plan et appliquez les deux styles (le nouveau et le bootstrap à mon élément). Cela peut créer des conflits de styles, ce qui pourrait être évité en séparant la classe .topbar en classes séparées. et ensuite seulement en utilisant les morceaux qui ne sont pas abordés par ma classe personnalisée. Encore une fois, cela nécessite plus de travail que j'estime nécessaire et, même s'il est flexible, il ne me permettra pas de mettre à jour facilement bootstrap.css lorsque Twitter publiera la prochaine Versement.
- Utilisez des variables dans .LESS pour réaliser la personnalisation. D'emblée, cela semble être une bonne approche, mais je n'ai pas utilisé. MOINS de préoccupations de compiler des CSS sur le client et de la durabilité du code.
Bien que j'utilise Bootstrap, cette question peut être généralisée à n’importe quel modèle CSS.
Merci d'avance pour votre contribution.
La meilleure chose à faire est.
1. Branchez Twitter-bootstrap à partir de github et clonez localement.
ils changent très rapidement la bibliothèque/le framework (ils divergent en interne. Certains préfèrent library, je dirais que c'est un framework, car changez votre mise en page à partir du moment où vous la chargez sur votre page). Eh bien ... le bricolage/clonage vous permettra de récupérer facilement les nouvelles versions à venir.
2. Ne modifiez pas le fichier bootstrap.css
Cela va vous compliquer la vie lorsque vous devrez mettre à niveau bootstrap (et vous devrez le faire).
. Créez votre propre fichier css et écrasez-le à tout moment. bootstrap)
si ils définissent une barre supérieure avec, disons, color: black; mais vous voulez que ce soit blanc, créez un nouveau sélecteur très spécifique pour cette barre top et utilisez cette règle sur la barre top spécifique. Pour un tableau par exemple, ce serait <table class="zebra-striped mycustomclass">. Si vous déclarez votre fichier css après bootstrap.css _, cela écrasera tout ce que vous voulez.
Je pense que la méthode officiellement privilégiée consiste maintenant à utiliser Less et à remplacer dynamiquement le fichier bootstrap.css (à l'aide de less.js) ou à recompiler le fichier bootstrap.css (à l'aide de Node ou du compilateur Less).
À partir de Bootstrap docs , voici comment redéfinir les styles bootstrap.css de manière dynamique:
Téléchargez le dernier Less.js et incluez son chemin (et Bootstrap) dans le fichier
<head>.<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>Pour recompiler les fichiers .less, enregistrez-les et rechargez votre page. Less.js les compile et les stocke dans un stockage local.
Ou si vous préférez compiler statiquement un nouveau fichier bootstrap.css avec vos styles personnalisés (pour les environnements de production):
Installez l'outil de ligne de commande LESS via Node) et exécutez la commande suivante:
$ lessc ./less/bootstrap.less > bootstrap.css
Mise à jour 2019 - Bootstrap 4
Je revisite ceci Bootstrap pour 4.x, qui utilise maintenant SASS au lieu de LESS. En général, il y a 2 façons de personnaliser Bootstrap ...
1. Remplacements CSS simples
Une façon de personnaliser consiste simplement à utiliser CSS pour remplacer Bootstrap CSS. Pour des raisons de maintenabilité, les personnalisations CSS sont placées dans un custom.css fichier, de sorte que le bootstrap.css reste inchangé. La référence à la custom.css suit après le bootstrap.css pour que les dérogations fonctionnent ...
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
Ajoutez simplement les modifications nécessaires dans le CSS personnalisé. Par exemple...
/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control {
border-radius: 0;
}
Avant (bootstrap.css)
Après (avec custom.css)
Lors de la personnalisation, vous devez comprendre Spécificité CSS . Remplacement dans le custom.css doivent utiliser des sélecteurs aussi spécifiques que le bootstrap.css.
Notez qu'il n'est pas nécessaire d'utiliser
!important_ dans le CSS personnalisé, à moins que vous ne surchargiez l’une des classes de l’utilitaire Bootstrap . spécificité CSS fonctionne toujours pour une classe CSS pour en remplacer une autre.
2. Personnaliser en utilisant SASS
Si vous connaissez SASS (et vous devriez utiliser cette méthode), vous pouvez personnaliser Bootstrap avec votre posséder custom.scss. Il y a un section dans le Bootstrap docs qui explique cela, cependant le docs n'explique pas comment utiliser les variables existantes dans votre custom.scss. Par exemple, changeons la couleur de fond du corps en #eeeeee, et modifie/annule le bleu primary couleur contextuelle en Bootstrap's $purple variable ...
/* custom.scss */
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
/* -------begin customization-------- */
/* simply assign the value */
$body-bg: #eeeeee;
/* use a variable to override primary */
$theme-colors: (
primary: $purple
);
/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
Cela fonctionne également pour créer de nouvelles classes personnalisées . Par exemple, ici, j’ajoute purple aux couleurs du thème qui créent tout le CSS pour btn-purple, text-purple, bg-purple, alert-purple, etc...
/* add a new purple custom color */
$theme-colors: (
purple: $purple
);
https://www.codeply.com/go/7XonykXFvP
Avec SASS, vous devez @ importer bootstrap après les personnalisations pour les faire fonctionner ! Une fois que le SASS est compilé en CSS (, vous devez utiliser un compilateur SASS: node-sass, gulp-sass, npm webpack, etc. ), le CSS résultant est le Bootstrap personnalisé. Si vous êtes pas familier avec SASS, vous pouvez personnaliser Bootstrap en utilisant un outil comme celui-ci constructeur de thème que j'ai créé.
Personnalisé Bootstrap Démo (SASS)
Note: Contrairement à 3.x, Bootstrap 4.x ne propose pas d’outil de personnalisation officiel. Vous pouvez cependant télécharger la grille uniquement ( CSS ou utiliser un autre outil de construction personnalisé 4.x reconstruire le Bootstrap 4 CSS comme vous le souhaitez.
Apparenté, relié, connexe:
Comment étendre/modifier (personnaliser) Bootstrap 4 avec SASS
Comment changer la bootstrap primaire?
Comment créer un nouvel ensemble de styles de couleur dans Bootstrap 4 avec sass
Comment personnaliser Bootstrap
Depuis la réponse de Pabluez en décembre, il existe désormais un meilleur moyen de personnaliser Bootstrap.
Utilisez: Bootswatch pour générer votre bootstrap.css
Bootswatch construit le Twitter Bootstrap) habituel à partir de la dernière version (quel que soit le contenu installé dans le répertoire bootstrap)], mais importe également vos personnalisations. Cela facilite son utilisation. la dernière version de Bootstrap, tout en conservant des CSS personnalisées, sans rien changer à votre HTML, vous pouvez simplement balayer les fichiers boostrap.css.
Vous pouvez utiliser le template bootstrap de
qui inclut tous les fichiers bootstrap .less. Vous pouvez ensuite modifier les variables/mettre à jour le moins de fichiers que vous le souhaitez et il compilera automatiquement le fichier css. Lors du déploiement, compilez le fichier moins en css.
J'ai récemment écrit un post à propos de la façon dont je l'ai fait à dacity ces deux dernières années. Cette méthode nous a permis de mettre à jour Bootstrap chaque fois que nous voulions le faire sans avoir de conflit de fusion, de travail jeté, etc. etc.
Le post va plus en profondeur avec des exemples, mais l'idée de base est la suivante:
- Conservez une copie vierge de bootstrap) et écrasez-la en externe.
- Modifiez un fichier (variables.less de bootstrap) pour inclure vos propres variables.
- Créez votre fichier de site @include bootstrap.less, puis vos remplacements.
Cela signifie que vous devez utiliser LESS et le compiler en CSS avant de l'expédier au client (LESS côté client si capricieux, et je l'évite généralement), mais il est EXTREMEMENT bon pour la maintenabilité/l'évolutivité, et obtenir la compilation LESS est vraiment très facile. . Le code de github lié a un exemple utilisant grunt, mais il existe de nombreuses façons d'y parvenir, même les interfaces graphiques, si c'est ce que vous recherchez.
En utilisant cette solution, votre exemple de problème ressemblerait à ceci:
- Changez la couleur de la barre de navigation avec @ navbar-inverse-bg dans vos variables.less (pas avec bootstrap)
- Ajoutez vos propres styles de barre de navigation à votre fichier bootstrap_overrides.less, en écrasant tout ce dont vous avez besoin au fur et à mesure.
- Bonheur.
Lorsque vient le temps de mettre à niveau votre bootstrap, il vous suffit d’échanger la copie originale bootstrap) et tout fonctionnera toujours (si bootstrap apporte des modifications besoin de mettre à jour vos dérogations, mais vous devrez le faire quand même)
Un article de blog avec visite virtuelle est ici .
Exemple de code sur github est ici .
La meilleure option à mon avis est de compiler un fichier LESS personnalisé comprenant bootstrap.less, un fichier personnalisé variables.less et vos propres règles:
- Clone bootstrap dans votre dossier racine:
git clone https://github.com/twbs/bootstrap.git - Renommez-le "bootstrap"
- Créez un fichier package.json: https://Gist.github.com/jide/8440609
- Créez un fichier Gruntfile.js: https://Gist.github.com/jide/8440502
- Créer un dossier "moins"
- Copier bootstrap/less/variables.less dans le dossier "less"
- Changer le chemin de la police:
@icon-font-path: "../bootstrap/fonts/"; - Créez un fichier style.less personnalisé dans le dossier "less" qui importe bootstrap.less et votre fichier variables.less personnalisé: https://Gist.github.com/jide/8440619
- Courir
npm install - Courir
grunt watch
Maintenant, vous pouvez modifier les variables comme vous le souhaitez, remplacez les règles bootstrap dans votre fichier style.less personnalisé. Si un jour vous souhaitez mettre à jour le fichier bootstrap, vous pouvez remplacer l'ensemble bootstrap dossier!
EDIT: j'ai créé un Bootstrap boilerplate en utilisant cette technique: https://github.com/jide/bootstrap-boilerplate
Utilisez MOINS avec Bootstrap ...
Voici les docs Bootstrap pour savoir comment utiliser LESS
(ils ont déménagé depuis les réponses précédentes)