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

Je suis sur le sharepoint 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 d’instructions sur la manière de procéder.

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

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


Modèle ASP.NET MVC 5: comment ça marche

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 . Cela appliquera le modèle MVC 5.

    Exemple de choix d'un modèle MVC

  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 package bootstrap 3. * nuget qui installe 4 fichiers: bootstrap.css , bootstrap.min.css , bootstrap.js et bootstrap.min.js .

    Exemple de css et js installés

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

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

    et

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

    Ces deux chemins font référence à des bundles 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 rend possible l’exécution de votre application sans aucune configuration préalable. Essayez de lancer votre projet maintenant.

    Application par défaut en cours d'exécution


Application de thèmes bootstrap dans ASP.NET MVC 5

Cette présentation explique comment appliquer des thèmes bootstrap dans un projet MVC 5

  1. Tout d’abord, téléchargez le css du thème que vous souhaitez appliquer. Pour cet exemple, je vais utiliser Flatly de Bootswatch . Incluez les fichiers flatly.bootstrap.css et flatly.bootstrap.min.css téléchargés dans le dossier de Content (veillez également à les inclure dans Project).
  2. Ouvrez App_Start/BundleConfig.cs et modifiez les éléments suivants:

     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. Si, au minimum, incluez ces deux lignes dans votre mise en page avec votre modèle HTML Bootstrap :

    Dans votre :

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

    Dernière ligne avant la fermeture :

     @Scripts.Render("~/bundles/bootstrap") 
  4. Essayez de lancer votre projet maintenant. Vous devriez voir votre application nouvellement créée en utilisant votre thème.

    Modèle par défaut utilisant un thème plat


Ressources

Jetez un coup d’ œil à ce guide de 30 jours sur la marche à suivre par James Chambers pour plus d’informations, des tutoriels, des conseils et des astuces sur l’utilisation de Twitter Bootstrap avec ASP.NET MVC 5.

  • Bootstrap
  • Bootstrap dans les modèles de projet Web Visual Studio 2013
  • Premiers pas avec ASP.NET MVC 5
  • Bootstrap 3 avec ASP.NET MVC 5 – étape par étape en scintillant
  • Bootswatch – thèmes gratuits pour Bootstrap

Cela peut être un peu tard; mais quelqu’un le trouvera utile.

Il y a un paquet 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) pouvant vous guider au fur et à mesure de votre développement. Un exemple de fichier de disposition _AdminLteLayout.cshtml est également fourni.

Vous trouverez les fichiers dans ~/Views/Shared/ folder

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

fichier bootstrap.css

et

fichier bootstrap.min.js

dans votre ordinateur, alors que vous venez de faire est

Commencez par télécharger votre thème préféré à partir de http://bootswatch.com/

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

Ensuite, dans votre ordinateur, localisez les fichiers existants et remplacez-les par les nouveaux fichiers téléchargés.

REMARQUE: assurez-vous que vos fichiers téléchargés sont renommés en tant que contenus dans votre dossier

c’est à dire

entrer la description de l'image ici

Alors tu peux y aller.

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

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

Il vous suffit de sélectionner et de télécharger les fichiers bootstrap.css et bootstrap.js du site Web Bootswatch, puis de remplacer les fichiers originaux par ceux-ci.

Bien sûr, vous devez append les chemins à votre page de mise en page après le chemin d’access jQuery qui est tout.