Utilisez les modèles Bootstrap
Tous les projets web Visual Studio sont générés avec les bibliothèques CSS Bootstrap et jQuery incluses. Il est donc facile d'ajouter de nouveaux modèles Bootstrap pour modifier l'apparence de votre application sans avoir à modifier la majorité du HTML/CSS des vues, sauf pour obtenir un design personnalisé.
Les entreprises et les particuliers du monde entier créent et publient des modèles Bootstrap que des développeurs comme vous et moi peuvent acheter et utiliser dans des applications. L'un de mes sites préférés pour trouver ces modèles est wrapbootstrap.com. Ce site propose des centaines de modèles et vous permet d'affiner vos choix par catégorie (polyvalent, affaires, administration, page unique, etc.), par version de Bootstrap (3.x, 4.x, toutes), ou par popularité, prix et autres critères. Vous pouvez également effectuer une recherche générale si vous avez une idée précise de ce que vous voulez.
Pour cette démonstration, j'ai acheté un modèle appelé Mazel, qui m'a coûté la modique somme de 10 €. Vous n'êtes pas obligé d'utiliser le même modèle. En vérité, vous n'avez pas besoin du tout d'en utiliser un pour faire fonctionner l'application. Je veux simplement vous montrer comment des modèles tels que celui-ci peuvent embellir vos applications.
Lorsque vous téléchargez l'un de ces modèles, vous obtenez un fichier ZIP que vous devez extraire. Après avoir décompressé l'archive du modèle Mazel, je me retrouve avec deux dossiers principaux : Documentation et Mazel-html-template. Les instructions spécifiques au modèle se trouvent dans le dossier Documentation. Il est conseillé de les lire avant d'intégrer un modèle à votre projet.
Il existe trois variantes du modèle dans le dossier Mazel-html-template. Je vais utiliser la variante polyvalente, illustrée ci-dessous :
Bien que ce ne soit pas compliqué, incorporer votre nouveau modèle à votre projet ne se fait pas en un claquement de doigts. Je vais donc vous guider tout au long de ce processus dans le screencast ci-dessous.
Comprenez le fonctionnement des dispositions .NET MVC
J'ai ajouté les ressources du modèle au projet Watchlist. La prochaine étape consiste à configurer une page de disposition pour qu'elle puisse être appliquée à toutes les autres pages du projet, puis à configurer une page d'exemple pour que vous puissiez voir le modèle en action.
En résumé
Ce chapitre portait sur l'embellissement de notre application à l'aide de modèles CSS Bootstrap :
Vous avez appris à chercher et à télécharger des modèles sur wrapbootstrap.com, une excellente source de modèles à petits prix.
Vous avez également appris à intégrer un modèle dans votre projet MVC, ainsi qu'à mettre à jour votre page de disposition et d'autres pages de contenu pour les mettre en forme à l'aide du modèle.
Il est maintenant temps de mettre en pratique ce que vous avez appris en appliquant un modèle à votre projet et en le préparant pour la publication en ligne.
