Comment personnaliser le css bootstrap en utilisant bootstrap-sass

J'aimerais changer beaucoup de choses, par exemple des boutons de couleur ou par exemple de changer l'image de fond d'écran de couleur sur la barre de navigation (en-tête).
J'utilise bootstrap-sass gem donc je ne peux pas utiliser bootstrap site' Personnaliser la page

Dois-je vraiment remplacer tous ces sur mon fichier personnalisé.css.scss ou puis-je modifier ces quelque part plus bas niveau ?
je ne trouve pas le .les fichiers css en me permettant de le faire dans mon fichier de projet (j'ai cherché toutes les lib, app et le vendeur /actifs mais noweher je trouve le css de bootstrap. je soupçonne que c'est parce qu'ils ne sont pas là, mais ils sont directement dans le joyau de fichiers)
J'ai beaucoup de changements donc je pense overiding tellement de choses n'est pas la meilleure option.

Quelle est la meilleure façon de le faire?
Grâce

source d'informationauteur Mathieu

7

Vous ne devriez jamais modifier de Bootstrap de fichiers d'origine. La meilleure option est de les remplacer leurs classes avec les vôtres. Vous pouvez le faire en créant un fichier css de votre actif/feuilles de style dossier, qui sera inclus automatiquement dans votre application.
27

J'ai commencé à utiliser Sass saveur de Twitter Bootstrap et je suis juste venu avec une façon logique de structuration de mes fichiers pour que je puisse faire mes propres remplace sans jouer avec les fichiers de base ET de garder tous vos CSS dans un seul fichier pour un chargement plus rapide.

En un mot j'ai mis tous les fichiers sass dans les actifs/sass et créez un sous-répertoire appelé bootstrap pour les fichiers de base. J'ai ensuite faire un frère ou une sœur répertoire appelé thème pour mon custom fichiers scss.

Aller à /bootstrap et à l'intérieur de ce répertoire est un fichier appelé bootstrap.scss qui comprend tous les composants de base. Renommer ce fichier à theme.scss et le mettre dans le répertoire parent comme ceci:

Comme vous pouvez le voir j'ai déjà quelques personnalisé primordial sass inclut les fichiers déjà présents dans le répertoire de thème. Ces derniers seront plaquées sur le bas de la valeur par défaut de bootstrap CSS quand il est compilé.

La magie qui se passe quand vous allez dans theme.scss et modifier les chemins d'inclusion comme. Regardez vers le bas de l'image pour les remplacements et vers le haut pour les variables personnalisées de référence.

Remarque: Si vous souhaitez modifier les variables dans le bootstrap, c'est une bonne idée de faire votre propre _variables.scss fichier dans votre theme répertoire et de les inclure en haut de votre theme.scss fichier. De cette façon, vous pouvez remplacer le bootstrap variables qui vont persister avec des mises à jour à l'avenir.

Alors il suffit d'inclure theme.css dans vos pages et le tour est joué. C'est de cette façon que j'ai commencé à le faire et n'ai pas rencontré de bugs encore.

Je trouve cette le moins compliqué des méthodes que j'ai vu. Et lorsque de nouvelles mises à jour viennent vers le bas je vais juste mettre à jour la base de bootstrap, fichiers et de garder mes modifications!
7

Moi aussi j'ai ce même problème et je l'aime gillytech réponse, mais je voudrais ajouter que vous n'avez pas besoin de copier tout le _variables.scss de fichier dans votre propre variables fichier. Votre juste besoin de le déclarer et d'utiliser les mêmes variables que Bootstrap est l'utilisation et assurez-vous que vous serez le chargement de vos variables fichiers avant de Bootstrap est _variables.scss fichier est chargé.

Vous remarquerez que beaucoup de Bootstrap variables ont une "!par défaut" après l'affectation d'une valeur à elle. Cela signifie que sass ne sera pas la remplacer si elle est déjà définie.

Donc mon thème.scss fichier ressemble à ceci:
```
@import "superhero-variables";
@import "bootstrap";
@import "superhero-theme";
```
De trouver cela ici sous "Style Bootstrap avec des Variables": http://pivotallabs.com/sass-with-bootstrap/

Vous devez vous connecter pour publier un commentaire.