web-dev-qa-db-fra.com

ASP.NET-MVC5 - Pourquoi les thèmes Bootstrap v4 ne montrent-ils pas les composants correctement?

J'ai une toute nouvelle application ASP.Net MVC5. Je voulais changer le thème par défaut en Minty theme qui est pour Bootstrap Version 4. Cependant, après avoir suivi les étapes ci-dessous, le thème a été gâché et n'a pas montré les composants tels que la barre de navigation. Quelqu'un peut-il me guider pour installer les derniers thèmes de Bootswatch .

Depuis, c’était une toute nouvelle application ASP.Net MVC. J'ai fait ce qui suit:

  1. Installé Bootstrap : Install-Package bootstrap - Version 4.0.0
  2. Installé jQuery : Install-Package jQuery -Version 3.2.1
  3. Installé Popper.js : Install-Package popper.js -Version 1.12.9

Après avoir installé ce qui précède. J'ai suivi les étapes suivantes pour essayer de changer le thème par défaut:

  1. Sélectionné le thème Minty et téléchargé et copié les styles bootstrap.css
  2. Appelé le fichier minty.bootstrap.css
  3. Ajout du minty.bootstrap.css à Contenu dossier
  4. Mise à jour du kit pour cibler le nouveau thème Minty dans le dossier App_Start -> BundleConfig.cs

Le fichier BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
       "~/Scripts/bootstrap.js",
       "~/Scripts/respond.js"));

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

Fichier _Layout.cshtml:

 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")

Puis construit le projet pour vérifier les modifications, mais la barre de navigation n’était pas conforme à vos attentes:

 enter image description here

Je vous remercie

jquerycssasp.nettwitter-bootstrap
4
Mr Nobody

oui, vous devez supprimer le div de navigation dans la page de mise en page et mettre cette

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>
11
Saad Qais

pour référence future, j'avais un problème similaire avec la barre de navigation et devais modifier la page de présentation pour qu'elle corresponde aux informations fournies par le lien du document Bootstrap 4.0 ci-dessous:

https://getbootstrap.com/docs/4.0/components/navbar/

Edit: En outre, je devais remplacer tous mes @ Html.ActionLink par <a class="nav-link" href="@Url.Action("Index", "Views")">Navbar Item</a> pour que cela fonctionne comme avant la mise à niveau de mon Bootstrap.

3
pinguu

Le problème de la barre de navigation est dû au fait que Bootswatch ( https://bootswatch.com/ ) a été mis à jour à la version 4 et que MVC utilise toujours la version 3 de Bootstrap. Vous devez donc vous rendre sur ce site. : https://bootswatch.com/3/ et répétez les étapes que vous avez effectuées.

Ça marche pour moi ~

1
Sylvia Liang