174

Après avoir téléchargé un pack complet de bootstrap 3 à partir de http://getbootstrap.com , j'ai remarqué qu'il existe un fichier css séparé pour le thème. Comment en profiter? S'il vous plaît, expliquez?

J'ai inclus bootstrap-theme.cssdans mon projet bootstrap existant, mais il n'y a aucune différence de sortie.

html css twitter-bootstrap-3 Yuvaraj P
la source

382

Lors du téléchargement de Bootstrap 3.x, vous obtiendrez bootstrap.css et bootstrap-theme.css (sans parler des versions minifiées de ces fichiers qui sont également présentes).

bootstrap.css

bootstrap.cssest complètement stylé et prêt à l'emploi, si tel est votre désir. C'est peut-être un peu simple mais c'est prêt et c'est là.

Vous n'avez pas besoin d'utiliser bootstrap-theme.css si vous ne le souhaitez pas et tout ira bien.

bootstrap-theme.css

bootstrap-theme.cssC'est exactement ce que le nom du fichier essaie de suggérer: c'est un thème pour le bootstrap qui est considéré de manière créative «LE thème de bootstrap». Le nom du fichier confond un peu les choses puisque la base a bootstrap.cssdéjà un style appliqué et je considère, pour ma part, que ces styles sont les styles par défaut. Mais cette conclusion est apparemment incorrecte à la lumière des choses dites dans la section des exemples de la documentation Bootstrap en ce qui concerne ce bootstrap-theme.cssfichier:

"Chargez le thème Bootstrap en option pour une expérience visuelle améliorée."

La citation ci-dessus se trouve ici http://getbootstrap.com/getting-started/#examples sur une vignette qui renvoie à cette page d'exemple http://getbootstrap.com/examples/theme/ . L'idée est que bootstrap-theme.cssc'est LE thème bootstrap ET c'est facultatif.

Thèmes sur BootSwatch.com

À propos des thèmes sur BootSwatch.com: Ces thèmes ne sont pas implémentés comme bootstrap-theme.css. Les thèmes BootSwatch sont des versions modifiées de l'original bootstrap.css. Donc, vous ne devriez certainement PAS utiliser un thème de BootSwatch ET le bootstrap-theme.cssfichier en même temps.

Thème personnalisé

À propos de votre propre thème personnalisé: vous pouvez choisir de le modifier bootstrap-theme.csslors de la création de votre propre thème. Cela peut faciliter les changements de style sans casser accidentellement les avantages Bootstrap intégrés.

esprit
la source

68

Cela devrait être la réponse choisie.

Patrick Cullen

11

L'avis concernant Bootswatch.com est très utile. Merci.

Daniel Kmak

@Daniel ... mais il devrait être remanié selon la nouvelle direction twbs / bootstrap pour avoir une fonctionnalité stable et cohérente pour ses clients de thème

Luca G. Soave

Le fichier bootstrap-theme.css n'est-il pas plus un remplacement, c'est-à-dire que bootstrap.css vous configure de telle manière que vous pouvez utiliser bootstrap avec tous les styles appropriés. Bootstrap-theme.css est là pour remplacer les styles SANS changer le fichier css de base. L'importance ici est que si vous mettez à niveau vers bootstrap XX, vous remplacez le fichier css de base et vous n'aurez pas à craindre de perdre toutes vos personnalisations. Vous devrez peut-être modifier votre fichier de thème, mais c'est beaucoup moins préoccupant. Peut-être ce que vous disiez.

Jacques

2

La chose la plus déroutante à ce sujet est que si vous utilisez la fonction de personnalisation sur le site d'amorçage ( getbootstrap.com/customize ), elle place vos personnalisations dans le fichier bootstrap.css et non dans le fichier de thème. Cette page ne contient également aucune option pour modifier quoi que ce soit lié à The Theme (tm). Pour autant que je puisse voir, le fichier de thème ajoute simplement un tas de dégradés et d'ombres partout et ne fait pas grand-chose d'autre.

C.List

90

Pour un exemple des styles css, consultez: http://getbootstrap.com/examples/theme/

Si vous voulez voir à quoi ressemble l'exemple sans le fichier bootstrap-theme.css, ouvrez les outils de développement de votre navigateur et supprimez le lien de la <head> de l'exemple, puis vous pouvez le comparer.

~~Je sais que c'est une vieille question, mais je l'ai postée juste au cas où quelqu'un chercherait un exemple de ce à quoi il ressemble.~~

Mettre à jour

bootstrap.css = cadre principal css (grilles, styles de base, etc.)

bootstrap-theme.css= style étendu (boutons 3D, dégradés, etc.). Ce fichier est facultatif et n'affecte pas du tout la fonctionnalité de bootstrap, il améliore seulement l'apparence.

Mise à jour 2

Avec la sortie de la version 3.2.0, Bootstrap a ajouté une option pour afficher le thème css sur les pages doc. Si vous allez sur l'une des pages doc ( css , composants , javascript ), vous devriez voir un lien "Aperçu du thème" en bas de la navigation latérale que vous pouvez utiliser pour activer et désactiver le thème css.

Joshhunt
la source

Merci d'avoir suivi cette question car votre réponse était la plus logique. Je me demandais, savez-vous, est-ce que je remplacerais simplement le contenu de bootstrap.csspar un thème de Bootswatch.com comme le dit le site et que je pourrais toujours utiliser bootstrap-theme.cssmême avec un thème Bottswatch?

Réfracté Paladin le

3

bootstrap.css = cadre principal css (grilles, styles de base, etc.) bootstrap-theme.css = style étendu (boutons 3D, etc.) Je ne l'ai jamais utilisé mais je l'ai juste regardé et Bootswatch semble modifier le fichier bootstrap.css pour répondre à ses propres besoins. Donc, pour l'utiliser, tout ce que vous avez à faire est de télécharger le fichier bootstrap.css à partir de Bootswatch et de l'utiliser. N'utilisez pas bootstrap-theme.css car il sera probablement en conflit avec le css de Bootswatch.

joshhunt

Merci mec, appréciez la réponse! C'est ce que j'ai remarqué également que je n'avais pas réussi à revenir ici. Sans modification, vous ne semblez pas pouvoir utiliser bootstrap-themeavec Bootswatch. De toute façon, cela a fait du désordre sur mon site.

Paladin réfracté

72

Tout d'abord, il bootstrap-theme.cssn'y a rien d'autre que l'équivalent du style Bootstrap 2.x dans Bootstrap 3. Si vous voulez vraiment l'utiliser, ajoutez-le simplement avec bootstrap.css(la version minifiée fonctionnera aussi).

androphone
la source

4

Veuillez vous rappeler que si vous utilisez des fichiers css de thème d'amorçage tiers, vous feriez mieux de commenter le fichier bootstrap-theme.css officiel.

Cheung

163

Comment se fait-il que cette réponse soit acceptée. Ce n'est même pas une réponse. Désolé. Tout cela veut dire quel est l'équivalent du fichier dans Bootstrap 2 et quiconque n'est pas familier avec Bootstrap 2 devra maintenant rechercher une autre réponse pour savoir ce que fait ce fichier.

Mario Awad

4

Mais c'est tout, ce que je veux savoir.

uladzimir

9

D'accord avec @MarioAwad, ce n'est pas une réponse. C'est aussi déroutant car je pensais que c'était juste le support de l'ancien css Bootstrap, ce qui n'est que partiellement vrai.

Yannis Dran

1

Dans BS 3.2, inclure le thème CSS change en effet l'aspect et la convivialité en ajoutant des nuances 3D aux boutons et autres choses. Voir la réponse de joshhunt pour plus de détails.

RajV

31

Bootstrap-theme.css est le fichier CSS supplémentaire, que vous pouvez utiliser en option. Il donne des effets 3D sur les boutons et quelques autres éléments.

Jowen
la source

14

Comme indiqué par d'autres, le nom de fichier bootstrap-theme.css est très déroutant. J'aurais choisi quelque chose comme bootstrap-3d.css ou bootstrap-fancy.css qui serait plus descriptif de ce qu'il fait réellement. Ce que le monde considère comme un "thème Bootstrap" est une chose que vous pouvez obtenir de BootSwatch qui est une bête totalement différente.

Cela dit, les effets sont assez agréables - dégradés et ombres et autres. Malheureusement, ce fichier va faire des ravages sur les thèmes BootSwatch, j'ai donc décidé de creuser dans ce qu'il faudrait pour le rendre agréable avec eux.

MOINS

Bootstrap-theme.css est généré à partir du fichier theme.less dans la source Bootstrap. Les éléments concernés sont (à partir de Bootstrap v3.2.0):

Éléments de la liste
Boutons
Images
Listes déroulantes
Navbars
Alertes
Barres de progression
Liste des groupes
Panneaux
puits

Le fichier theme.less dépend de:

@import "variables.less";
@import "mixins.less";

Le code utilise des couleurs définies dans variables.less à plusieurs endroits, par exemple:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

C'est pourquoi bootstrap-theme.css gâche totalement les thèmes BootSwatch. La bonne nouvelle est que les thèmes BootSwatch sont également créés à partir de fichiers variables.less, vous pouvez donc simplement créer un bootstrap-theme.css pour votre thème BootSwatch.

Construire bootstrap-theme.css

La bonne façon de le faire est de mettre à jour le processus de création du thème, mais voici la manière rapide et sale. Remplacez le fichier variables.less dans la source Bootstrap par celui de votre thème Bootswatch et construisez-le et voila vous avez un fichier bootstrap-theme.css pour votre thème Bootswatch.

Construire Bootstrap lui-même

Construire Bootstrap peut sembler intimidant, mais c'est en fait très simple:

Téléchargez le code source de Bootstrap
Téléchargez et installez NodeJS
Ouvrez une invite de commande et accédez au dossier source de bootstrap. Tapez "npm install". Cela ajoutera le dossier "node_modules" au projet et téléchargera tous les éléments Node dont vous avez besoin.
Installez grunt globalement (l'option -g) en tapant "npm install -g grunt-cli"
Renommez le dossier "dist" en "dist-orig" puis reconstruisez-le en tapant "grunt dist". Vérifiez maintenant qu'il existe un nouveau dossier "dist" contenant tout ce dont vous avez besoin pour utiliser votre build Bootstrap personnalisé.

Terminé. Voyez, c'était facile, n'est-ce pas?

ThisGuy
la source

2

Je sais que ce post est un peu vieux mais ...

Comme l'a souligné «witttness».

À propos de votre propre thème personnalisé Vous pouvez choisir de modifier bootstrap-theme.css lors de la création de votre propre thème. Cela peut faciliter les changements de style sans casser accidentellement l'une des qualités Bootstrap intégrées.

Je le vois comme Bootstrap a vu au fil des ans que tout le monde veut quelque chose d'un peu différent des styles de base. Bien que vous puissiez modifier bootstrap.css, cela pourrait casser des choses et cela pourrait rendre la mise à jour vers une version plus récente une véritable douleur et prendre du temps. Le téléchargement à partir d'un site `` à thème '' signifie que vous devez attendre si ce créateur met à jour ce thème, gros si parfois, non?

Certains construisent leur propre fichier 'custom.css' et c'est correct, mais si vous utilisez 'bootstrap-theme.css', beaucoup de choses sont déjà construites et cela vous permet de rouler votre propre thème plus rapidement 'sans' perturber le noyau de bootstrap .css. Pour ma part, je n'aime pas les boutons et les dégradés 3D la plupart du temps, alors changez-les en utilisant bootstrap-theme.css. Ajouter des marges ou padding, modifier le rayon de vos boutons, et ainsi de suite ...

user1946683
la source

Comment utiliser bootstrap-theme.css avec bootstrap 3?

Réponses: