web-dev-qa-db-fra.com

Comment utiliser bootstrap-theme.css avec bootstrap 3?

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

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

htmlcsstwitter-bootstrap-3
174
Yuvaraj P

Après avoir téléchargé Bootstrap 3.x, vous obtiendrez bootstrap.css et bootstrap- theme.css (sans parler des versions détaillées de ces fichiers également présents).

bootstrap.css

bootstrap.css est complètement stylé et prêt à être utilisé, si tel est votre souhait. 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.css est exactement ce que le nom du fichier tente de suggérer: il s'agit d'un thème pour bootstrap qui est considéré de manière créative comme "LE thème bootstrap". Le nom du fichier confond un peu les choses, car le style de base bootstrap.css est déjà appliqué et je considère, par exemple, que ces styles sont les styles par défaut. Mais cette conclusion est apparemment incorrecte à la lumière des propos tenus dans la section des exemples de la documentation de Bootstrap _ concernant ce fichier bootstrap-theme.css:

"Chargez le thème optionnel Bootstrap pour une expérience visuellement améliorée."

La citation ci-dessus se trouve ici http://getbootstrap.com/getting-started/#examples sur une vignette menant à cet exemple de page http://getbootstrap.com/examples/theme/. L'idée est que bootstrap-theme.css est LE bootstrap thème 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 devez absolument PAS utiliser un thème de BootSwatch AND le fichier bootstrap-theme.css en même temps.

Thème personnalisé

À 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 pourrait faciliter les modifications de style sans casser accidentellement les qualités Bootstrap intégrées.

380
witttness

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 <tête> de l'exemple, puis vous peut le comparer.

Je sais que c’est une vieille question, mais elle a été postée au cas où quelqu'un chercherait un exemple de ce à quoi je ressemble.

Mettre à jour

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

bootstrap-theme.css = style étendu (boutons 3D, dégradés, etc.). Ce fichier est optionnel et n'affecte en rien la fonctionnalité de bootstrap, il ne fait qu'améliorer l'apparence.

Mise à jour 2

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

91
joshhunt

Tout d’abord, bootstrap-theme.css n’est autre que l’équivalent de Bootstrap style 2.x dans Bootstrap 3. Si vous voulez vraiment l’utiliser, ajoutez-le LONG AVEC bootstrap.css _ (la version minifiée fonctionnera aussi).

72
androphone

Bootstrap-theme.css est le fichier CSS supplémentaire, que vous pouvez utiliser de manière facultative. Il donne des effets 3D sur les boutons et certains autres éléments.

31
Jowen

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, une bête totalement différente.

Cela dit, les effets sont assez agréables - dégradés et ombres, etc. Malheureusement, ce fichier va faire des ravages sur les thèmes BootSwatch, alors j’ai décidé de creuser avec ce qu’il faudrait pour que cela fonctionne bien avec Nice.

MOINS

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

  • Articles de liste
  • Boutons
  • Images
  • Des listes déroulantes
  • Barres de navigation
  • Les 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 créer simplement un fichier bootstrap-theme.css pour votre thème BootSwatch.

Construction de bootstrap-theme.css

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

Construire Bootstrap lui-même

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

  1. Téléchargez le code source Bootstrap
  2. Téléchargez et installez NodeJS
  3. Ouvrez une invite de commande et accédez au dossier source bootstrap. Tapez "npm install". Ceci ajoutera le dossier "node_modules" au projet et téléchargera tous les fichiers Node dont vous avez besoin.
  4. Installez grunt globalement (l'option -g) en tapant "npm install -g grunt-cli"
  5. Renommez le dossier "dist" en "dist-orig" puis reconstruisez-le en tapant "grunt dist". Maintenant, vérifiez qu’il existe un nouveau dossier "dist" qui contient tout ce dont vous avez besoin pour utiliser votre build personnalisé Bootstrap.

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

14
ThisGuy

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

Comme 'esprit' a souligné.

À 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 pourrait faciliter les modifications de style sans casser accidentellement les qualités Bootstrap intégrées.

Je vois cela comme si Bootstrap avait vu au fil des ans que tout le monde voulait quelque chose d'un peu différent des styles principaux. Bien que vous puissiez modifier le fichier bootstrap.css, cela pourrait casser des choses et rendre la mise à jour vers une version plus récente une vraie douleur et une perte de 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, grand si parfois, non?

Certains construisent leur propre fichier 'custom.css' et c'est correct, mais si vous utilisez 'bootstrap-theme.css', de nombreux éléments sont déjà construits, ce qui vous permet de lancer votre propre thème plus rapidement 'sans' perturber le cœur du bootstrap. .css. Pour ma part, je n'aime pas les boutons et dégradés 3D la plupart du temps, changez-les donc en utilisant bootstrap-theme.css. Ajouter des marges ou un remplissage, changer le rayon de vos boutons, etc...

2
user1946683