Comment remplacer bootstrap styles?

Je suis en train de changer de simples propriétés CSS dans le thème par défaut qui vient avec une nouvelle ASP.NET MVC 5 application dans Visual Studio 2013. En particulier, j'ai besoin de changer le menu de navigation de la couleur d'arrière-plan.

J'ai situé via Firebug cette propriété et sa nouvelle valeur doit être:

.navbar-inverse { background-color: #5B80A5}

J'ai d'abord tenté d'ajouter de la remplacer CSS ligne dans Site.css parce que j'ai remarqué ces lignes dans BundleConfig.cs:

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/site.css"));

Cependant la valeur liquidative du menu couleur de fond n'a pas changé.

J'ai alors cherché pour .navbar-inverse dans ma solution et de la recherche a retourné:

Web\Content\bootstrap-theme.css(240):.navbar-inverse {
Web\Content\bootstrap-theme.css(249):.navbar-inverse .navbar-nav > .active > a {
Web\Content\bootstrap-theme.css(259):.navbar-inverse .navbar-brand,
Web\Content\bootstrap-theme.css(260):.navbar-inverse .navbar-nav > li > a {
Web\Content\bootstrap-theme.css.map(1):{"version":3,"file":"bootstrap-theme.css","sources":["less/theme.less","less/mixins/vendor-prefixes
Web\Content\bootstrap-theme.min.css(5): */.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger{text-shadow:0 -1px 0 r
Web\Content\bootstrap.css(4190):.navbar-inverse {
Web\Content\bootstrap.css(4194):.navbar-inverse .navbar-brand {
Web\Content\bootstrap.css(4197):.navbar-inverse .navbar-brand:hover,
Web\Content\bootstrap.css(4198):.navbar-inverse .navbar-brand:focus {
Web\Content\bootstrap.css(4202):.navbar-inverse .navbar-text {
Web\Content\bootstrap.css(4205):.navbar-inverse .navbar-nav > li > a {
Web\Content\bootstrap.css(4208):.navbar-inverse .navbar-nav > li > a:hover,
Web\Content\bootstrap.css(4209):.navbar-inverse .navbar-nav > li > a:focus {
Web\Content\bootstrap.css(4213):.navbar-inverse .navbar-nav > .active > a,
Web\Content\bootstrap.css(4214):.navbar-inverse .navbar-nav > .active > a:hover,
Web\Content\bootstrap.css(4215):.navbar-inverse .navbar-nav > .active > a:focus {
Web\Content\bootstrap.css(4219):.navbar-inverse .navbar-nav > .disabled > a,
Web\Content\bootstrap.css(4220):.navbar-inverse .navbar-nav > .disabled > a:hover,
Web\Content\bootstrap.css(4221):.navbar-inverse .navbar-nav > .disabled > a:focus {
Web\Content\bootstrap.css(4225):.navbar-inverse .navbar-toggle {
Web\Content\bootstrap.css(4228):.navbar-inverse .navbar-toggle:hover,
Web\Content\bootstrap.css(4229):.navbar-inverse .navbar-toggle:focus {
Web\Content\bootstrap.css(4232):.navbar-inverse .navbar-toggle .icon-bar {
Web\Content\bootstrap.css(4235):.navbar-inverse .navbar-collapse,
Web\Content\bootstrap.css(4236):.navbar-inverse .navbar-form {
Web\Content\bootstrap.css(4239):.navbar-inverse .navbar-nav > .open > a,
Web\Content\bootstrap.css(4240):.navbar-inverse .navbar-nav > .open > a:hover,
Web\Content\bootstrap.css(4241):.navbar-inverse .navbar-nav > .open > a:focus {
Web\Content\bootstrap.css(4246):  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
Web\Content\bootstrap.css(4249):  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
Web\Content\bootstrap.css(4252):  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
Web\Content\bootstrap.css(4255):  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
Web\Content\bootstrap.css(4256):  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
Web\Content\bootstrap.css(4260):  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
Web\Content\bootstrap.css(4261):  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
Web\Content\bootstrap.css(4262):  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
Web\Content\bootstrap.css(4266):  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
Web\Content\bootstrap.css(4267):  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
Web\Content\bootstrap.css(4268):  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
Web\Content\bootstrap.css(4273):.navbar-inverse .navbar-link {
Web\Content\bootstrap.css(4276):.navbar-inverse .navbar-link:hover {
Web\Content\bootstrap.css(4279):.navbar-inverse .btn-link {
Web\Content\bootstrap.css(4282):.navbar-inverse .btn-link:hover,
Web\Content\bootstrap.css(4283):.navbar-inverse .btn-link:focus {
Web\Content\bootstrap.css(4286):.navbar-inverse .btn-link[disabled]:hover,
Web\Content\bootstrap.css(4287):fieldset[disabled] .navbar-inverse .btn-link:hover,
Web\Content\bootstrap.css(4288):.navbar-inverse .btn-link[disabled]:focus,
Web\Content\bootstrap.css(4289):fieldset[disabled] .navbar-inverse .btn-link:focus {
Web\Content\bootstrap.css(6207):.navbar-inverse { background-color: #F7931A}
Web\Content\bootstrap.css(6208):.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navba
Web\Content\bootstrap.css(6209):.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.ope
Web\Content\bootstrap.css(6212):.navbar-inverse { background-image: none; }
Web\Content\bootstrap.css(6214):.navbar-inverse { border-color: #BD7014}
Web\Content\bootstrap.css(6215):.navbar-inverse .navbar-brand { color: #FFFFFF}
Web\Content\bootstrap.css(6216):.navbar-inverse .navbar-brand:hover { color: #9E601B}
Web\Content\bootstrap.css(6217):.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
Web\Content\bootstrap.css(6218):.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FDFFF7}
Web\Content\bootstrap.css(6219):.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.op
Web\Content\bootstrap.css(6220):.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
Web\Content\bootstrap.css(6223):.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #FFFFFF}
Web\Content\bootstrap.css(6224):.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
Web\Content\bootstrap.css(6225):.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #FFFFFF}
Web\Content\bootstrap.css(6226):.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
Web\Content\bootstrap.css.map(1):{"version":3,"file":"bootstrap.css","sources":["bootstrap.css","less/normalize.less","less/print.less","l
Web\Content\bootstrap.min.css(5): *//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-s

J'ai ajouté le CSS personnalisé de ligne à la fin de chacun des fichiers ci-dessus, mais encore, rien ne s'est passé. J'ai reconstruit le projet à chaque fois, vidé le cache de mon navigateur, mais rien n'a changé.

Aucune idée de comment remplacer la valeur par défaut de bootstrap styles? Ça me rend fou!

Des questions similaires qui n'a pas vraiment aider:

Primordial bootstrap styles,
Comment remplacer bootstrap zone de saisie de style dans le tableau?,
Cant remplacer bootstrap

  • Ajouter cette .navbar-inverse { background-color: #5B80A5} au bas de ~/Content/site.css. N'oubliez pas de rafraîchir votre fichier css (ctrl+r dans le navigateur)
  • c'était la première chose que j'ai essayé, vous avez raison parce que j'ai fait une faute de frappe styles.css au lieu de site.css, j'ai mis à jour ma question, merci.
  • Dans mon projet nouvellement créé il fonctionne comme un charme;)
InformationsquelleAutor Doug Peters | 2014-09-17
  1. 1

    Faire de votre classe personnalisée qui contient vos styles pour .navbar-inverse classe plus spécifique que l'amorçage de la classe. Vous pouvez ajouter une classe à votre <body> de la balise et de l'utiliser pour préfixe personnalisé remplace.

    .myCustomStyle .navbar-inverse

    Si vous ne pouvez pas modifier votre code HTML, vous pouvez utiliser l'évidence des balises que chaque document html:

    body .navbar-inverse

    sera également rendre votre styles plus spécifiques, mais pour la lisibilité du code plutôt d'utiliser la première approche.

    Que vous n'avez pas à vous inquiéter plus sur l'endroit où votre fichier est placé depuis CSS spécificité aura toujours la priorité sur les bottes de classes + vous pouvez être sûr qu'il est de votre classe, de par leur préfixe de nom, ce qui rend plus débogage beaucoup plus facile.

    • Merci, cela semble fonctionner! Cependant, je ne comprends toujours pas comment je dois le faire sans une CSS personnalisée de la classe, ce que je fais de mal dans ma description ci-dessus?
    • vérifiez votre source html de la tête dans le navigateur et vérifier si site.css est vraiment ajouté après bootstrap.css pour vous assurer que votre Comprennent vraiment ajoute des éléments dans cet ordre. Vérifiez également dans les outils de dev, où est votre classe référencé et qui bootstrap ligne remplace - généralement si vous copiez exactement la même classe de bootstrap et de l'appliquer dans votre propre css et de l'appeler une fois que vous appelez bootstrap css ça marche à 100%.
    InformationsquelleAutor easwee
  2. 5

    Nom de fichier n'est pas valide - utilisation "du Site.css" pas "du site.css". J'ai aussi eu ce problème et résolu de cette façon, sans aucun autre changement...

    bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
    • Je pense que c'est un bug dans Visual Studio. Afin de rendre l'utilisation de CSS pour l'ensemble du site, le nom de fichier (dans BundleConfig.cs) doit être le cas Site.css et pas le moindre cas site.css. Autant que je sache, Visual Studio, ni Windows jouer attention à la casse du nom de fichier.
    InformationsquelleAutor Subrata
  3. 0

    Supprimer le fichier de bootstrap.min.css et bootstrap.css.
    Question similaire ici
    CSS changements sur MVC App ne fonctionne pas

    InformationsquelleAutor Ahmed