web-dev-qa-db-fra.com

Comment puis-je implémenter un thème à partir de bootswatch ou wrapbootstrap dans un projet MVC 5?

Je suis sur le point de créer une nouvelle application Web ASP.Net MVC5. Je voudrais utiliser un thème de Bootswatch ou wrapbootstrap dans l'application, mais je ne trouve pas un ensemble d'instructions sur la façon de procéder.

asp.net-mvctwitter-bootstrapasp.net-mvc-5bootswatch
77
Peter Loudon

Les étapes pour appliquer un thème sont assez simples. Pour vraiment comprendre comment tout fonctionne ensemble, vous devez comprendre ce que le modèle ASP.NET MVC 5 fournit et comment vous pouvez le personnaliser en fonction de vos besoins.

Remarque: si vous avez une compréhension de base du fonctionnement du modèle MVC 5, faites défiler jusqu'à la section de thème.

ASP.NET MVC 5 Template: son fonctionnement

Cette présentation explique comment créer un projet MVC 5 et ce qui se passe sous le capot.. Voir toutes les fonctionnalités de MVC 5 Template dans ce blog .

  1. Créez un nouveau projet. Sous Modèles, choisissez Web > Application Web ASP.NET . Entrez un nom pour votre projet et cliquez sur OK.

  2. Dans l’assistant suivant, choisissez MVC et cliquez sur OK. Ceci appliquera le modèle MVC 5.

    Example of choosing MVC Template

  3. Le modèle MVC 5 crée une application MVC qui utilise Bootstrap pour fournir des fonctionnalités de conception et de thème réactives. Sous le capot, le modèle comprend un paquet d'amorçage 3. * nuget qui installe 4 fichiers: bootstrap.css, bootstrap.min.css, bootstrap.js et bootstrap.min.js .

    Example of installed css and js

  4. Bootstrap est intégré à votre application à l'aide de la fonctionnalité d'optimisation Web. Inspectez Views/Shared/_Layout.cshtml et cherchez

    @Styles.Render("~/Content/css")

    et

    @Scripts.Render("~/bundles/bootstrap")

    Ces deux chemins font référence aux ensembles configurés dans App_Start/BundleConfig.cs:

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

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

  5. C’est ce qui permet d’exécuter votre application sans configuration préalable. Essayez de lancer votre projet maintenant.

    Default Application Running

Application de Bootstrap Thèmes dans ASP.NET MVC 5

Ce guide explique comment appliquer bootstrap thèmes dans un projet MVC 5

  1. Commencez par télécharger la css du thème que vous souhaitez appliquer. Pour cet exemple, j'utiliserai la version Flatly de Bootswatch. Incluez les flatly.bootstrap.css et flatly.bootstrap.min.css téléchargés dans le dossier Content (veillez également à l'inclure dans le projet).

  2. Ouvrez App_Start/BundleConfig.cs et modifiez ce qui suit:

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

    pour inclure votre nouveau thème:

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

  3. Si vous utilisez le _Layout.cshtml par défaut inclus dans le modèle MVC 5, vous pouvez passer à l'étape 4. Sinon, incluez au minimum ces deux lignes dans votre mise en page avec votre Bootstrap HTML modèle :

    Dans votre <head>:

    @Styles.Render("~/Content/css")

    Dernière ligne avant la fermeture de </body>:

    @Scripts.Render("~/bundles/bootstrap")

  4. Essayez de lancer votre projet maintenant. Vous devriez voir votre application nouvellement créée maintenant en utilisant votre thème.

    Default template using flatly theme

Ressources

Découvrez ce guide de 30 jours by James Chambers pour plus d'informations, didacticiels, conseils et astuces sur l'utilisation de Twitter Bootstrap avec ASP .NET MVC 5.

185
Carrie Kendall

C'est peut-être un peu tard. mais quelqu'un trouvera cela utile.

Il existe un package Nuget pour intégrer AdminLTE - un modèle Bootstrap populaire - - - à MVC5

Exécutez simplement cette commande dans votre console Visual Studio Package Manager.

Install-Package AdminLteMvc

NB: L’installation peut prendre un certain temps car elle télécharge tous les fichiers nécessaires et crée des exemples de vues complètes et partielles (fichiers .cshtml) qui peuvent vous guider dans votre développement. Un exemple de fichier de mise en page _AdminLteLayout.cshtml est également fourni.

Vous trouverez les fichiers dans le dossier ~/Views/Shared/

17
Soma Mbadiwe

Tout d’abord, si vous êtes capable de localiser votre

bootstrap.css fichier

et

bootstrap.min.js fichier

dans votre ordinateur, alors ce que vous venez de faire est

Commencez par télécharger votre thème favori, à partir de http://bootswatch.com/

Copiez les fichiers bootstrap.css et bootstrap.min.js téléchargés

Recherchez ensuite dans votre ordinateur les fichiers existants et remplacez-les par les nouveaux fichiers téléchargés.

REMARQUE: assurez-vous que les fichiers téléchargés sont renommés en fonction du contenu de votre dossier

c'est à dire.

enter image description here

Alors tu peux y aller.

parfois le résultat peut ne pas s'afficher immédiatement. vous devrez peut-être exécuter le fichier css sur votre navigateur afin de rafraîchir

3
Omari Victor Omosa

Tout ce que vous avez à faire est de sélectionner et de télécharger les fichiers bootstrap.css et bootstrap.js à partir du site Web Bootswatch, puis de remplacer les fichiers d'origine par ceux-ci.

Bien sûr, vous devez ajouter les chemins à votre page de présentation après le chemin jQuery.

0
shaddad

J'ai un article sur MSDN - Création d'ASP.NET MVC avec un thème bootstrap personnalisé à l'aide de VS 2012, VS 2013 et VS 2015, ainsi qu'un exemple de code de démonstration ci-joint. Veuillez consulter le lien ci-dessous. https://code.msdn.Microsoft.com/ASPNET-MVC-application-62ffc106

0
Hussain Patel