Personnalisation du modèle CSS Bootstrap

Je ne fais que commencer avec Bootstrap de Twitter et je me demande quelles sont les «meilleures pratiques» pour la personnalisation. Je veux développer un système qui profitera de toute la puissance d'un modèle css (Bootstrap ou autre), sera complètement (et facilement) modifiable, sera durable (c'est-à-dire - quand la prochaine version de Bootstrap sortira de Twitter, je ne le ferai pas) Il faut recommencer.

Par exemple, je souhaite ajouter des images d'arrière-plan à la navigation supérieure. Il semble qu'il existe 3 façons de procéder:

1. Modifiez les classes .topbar dans bootstrap.css. Je n'aime pas particulièrement cela parce que j'aurai beaucoup d'éléments .topbar et je ne veux pas nécessairement les modifier tous de la même manière.
2. 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 style, qui pourraient être évités en décapant la classe .topbar en classes séparées et en utilisant uniquement les éléments qui ne sont pas suivis par ma classe personnalisée. Encore une fois, cela nécessite plus de travail que je pense que cela devrait être nécessaire et, bien que flexible, cela ne me permettra pas de mettre à jour facilement bootstrap.css lorsque Twitter publiera le prochain épisode.
3. Utilisez des variables dans .LESS pour réaliser la personnalisation. Offhand cela semble être une bonne approche mais n'ayant pas utilisé. MOINS J'ai des inquiétudes concernant la compilation de css sur le client et 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. dériver twitter-bootstrap de github et cloner localement.

ils changent très rapidement la bibliothèque / le framework (ils divergent en interne. Certains préfèrent la bibliothèque, 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 ... forking / 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 devez mettre à niveau bootstrap (et vous devrez le faire).

3. Créez votre propre fichier css et écrasez-le chaque fois que vous voulez des éléments d'amorçage d'origine

s'ils définissent une barre supérieure avec, disons, color: black;mais que vous la voulez blanche, créez un nouveau sélecteur très spécifique pour cette barre supérieure et utilisez cette règle sur la barre supérieure spécifique. Pour une table 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.

Mise à jour 2019 - Bootstrap 4

Je revisite cette question de personnalisation Bootstrap pour 4.x, qui utilise maintenant SASS au lieu de LESS. En général, il existe 2 façons de personnaliser Bootstrap ...

1. Remplacements CSS simples

Une façon de personnaliser consiste simplement à utiliser CSS pour remplacer le CSS Bootstrap. Pour des raisons de maintenabilité, les personnalisations CSS sont placées dans un custom.cssfichier séparé , de sorte que le bootstrap.cssreste inchangé. La référence à ce qui custom.csssuit après le bootstrap.csspour que les remplacements 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)

Lorsque vous effectuez des personnalisations, vous devez comprendre la spécificité CSS . Remplace la custom.cssnécessité d'utiliser des sélecteurs aussi spécifiques que le bootstrap.css.

Notez qu'il n'est pas nécessaire de l'utiliser !importantdans le CSS personnalisé, sauf si vous remplacez l'une des classes de l'utilitaire Bootstrap . La spécificité CSS fonctionne toujours pour qu'une classe CSS en remplace une autre.

2. Personnalisez à l'aide de SASS

Si vous connaissez SASS (et que vous devriez utiliser cette méthode), vous pouvez personnaliser Bootstrap avec le vôtre custom.scss. Il existe une section dans la documentation Bootstrap qui explique cela, mais la documentation n'explique pas comment utiliser les variables existantes dans votre custom.scss. Par exemple, changeons la couleur d'arrière-plan du corps en #eeeeee, et changeons / remplaçons la couleur primarycontextuelle bleue en $purplevariable de Bootstrap ...

/* 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, voici ajouter purpleaux couleurs du thème qui crée tout le CSS 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 @import bootstrap après les personnalisations pour les faire fonctionner! Une fois le SASS compilé en CSS ( cela doit être fait en utilisant un compilateur SASS node-sass, gulp-sass, npm webpack, etc. ), le CSS résultant est le Bootstrap personnalisé. Si vous n'êtes pas familier avec SASS, vous pouvez personnaliser Bootstrap à l'aide d'un outil tel que ce générateur de thème que j'ai créé.

Démo Bootstrap personnalisée (SASS)

Remarque: 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 pour recréer le CSS Bootstrap 4 comme vous le souhaitez.

Connexes:
Comment étendre / modifier (personnaliser) Bootstrap 4 avec SASS
Comment changer la couleur primaire du bootstrap?
Comment créer un nouvel ensemble de styles de couleurs dans Bootstrap 4 avec Sass
Comment personnaliser Bootstrap

Je pense que le moyen officiellement préféré est maintenant d'utiliser Less, et soit de remplacer dynamiquement le bootstrap.css (en utilisant less.js), soit de recompiler bootstrap.css (en utilisant Node ou le compilateur Less).

À partir de la documentation Bootstrap , voici comment remplacer dynamiquement les styles bootstrap.css:

Téléchargez le dernier Less.js et incluez le chemin d'accès (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 simplement et rechargez votre page. Less.js les compile et les stocke dans le stockage local.

Ou si vous préférez compiler statiquement un nouveau 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

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 normal à partir de la dernière version (tout ce que vous installez dans le répertoire bootstrap), mais importe également vos personnalisations. Cela facilite l'utilisation de la dernière version de Bootstrap, tout en conservant un CSS personnalisé, sans rien changer à votre HTML. Vous pouvez simplement balancer les fichiers boostrap.css.

Vous pouvez utiliser le modèle bootstrap de

http://www.initializr.com/

qui inclut tous les fichiers .less de bootstrap. Vous pouvez ensuite changer les variables / mettre à jour le moins de fichiers que vous voulez et il compilera automatiquement le css. Lors du déploiement, compilez le fichier less en css.

La meilleure option à mon avis est de compiler un fichier LESS personnalisé comprenant bootstrap.less, un fichier custom variables.less et vos propres règles:

1. Clonez le bootstrap dans votre dossier racine: git clone https://github.com/twbs/bootstrap.git
2. Renommez-le "bootstrap"
3. Créez un fichier package.json: https://gist.github.com/jide/8440609
4. Créez un Gruntfile.js: https://gist.github.com/jide/8440502
5. Créer un dossier «moins»
6. Copiez bootstrap / less / variables.less dans le dossier "less"
7. Modifiez le chemin de la police: @icon-font-path: "../bootstrap/fonts/";
8. Créez un fichier style.less personnalisé dans le dossier "less" qui importe bootstrap.less et votre fichier custom variables.less: https://gist.github.com/jide/8440619
9. Courir npm install
10. Courir grunt watch

Vous pouvez maintenant modifier les variables comme vous le souhaitez, remplacer les règles de bootstrap dans votre fichier personnalisé style.less, et si un jour vous souhaitez mettre à jour bootstrap, vous pouvez remplacer tout le dossier bootstrap!

EDIT: J'ai créé un passe-partout Bootstrap en utilisant cette technique: https://github.com/jide/bootstrap-boilerplate

J'ai récemment écrit un article sur la façon dont je le fais chez Udacity ces deux dernières années. Cette méthode nous a permis de mettre à jour Bootstrap chaque fois que nous le voulions sans avoir de conflits de fusion, de travail perdu, etc. etc.

Le post va plus en profondeur avec des exemples, mais l'idée de base est:

• Conservez une copie vierge de bootstrap et écrasez-la en externe.
• Modifiez un fichier (variables de bootstrap.less) pour inclure vos propres variables.
• Créez votre fichier de site @include bootstrap.less, puis vos remplacements.

Cela signifie utiliser LESS, et le compiler en CSS avant de l'envoyer au client (côté client MOINS si capricieux, et je l'évite généralement) mais c'est EXTRÊMEMENT bon pour la maintenabilité / évolutivité, et obtenir MOINS de compilation est vraiment très facile . Le code github lié a un exemple utilisant grunt, mais il existe de nombreuses façons d'y parvenir - même des interfaces graphiques si c'est votre truc.

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 celles de bootstrap)
• Ajoutez vos propres styles de barre de navigation à votre bootstrap_overrides.less, en écrasant tout ce dont vous avez besoin au fur et à mesure.
• Bonheur.

Quand vient le temps de mettre à niveau votre bootstrap, il vous suffit d'échanger la copie de bootstrap vierge et tout fonctionnera toujours (si bootstrap apporte des modifications importantes, vous devrez mettre à jour vos remplacements, mais vous devrez le faire de toute façon)

Le billet de blog avec visite virtuelle est ici .

L'exemple de code sur github est ici .

Utilisez MOINS avec Bootstrap ...

Voici la documentation Bootstrap pour savoir comment utiliser MOINS

(ils ont déménagé depuis les réponses précédentes)