Tutoriel bootstrap MVC [Eng]


Télécharger Tutoriel bootstrap MVC [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Tutoriel bootstrap MVC [Eng]

...

1 Premiers pas avec ASP.NET

MVC et Bootstrap En tant que développeurs, il peut être difficile de créer de belles interfaces utilisateur à partir de zéro lorsque vous utilisez HTML et CSS. Cela est particulièrement difficile lorsque les développeurs ont des années d'expérience en développement d'applications Windows Forms. Microsoft a introduit Web Forms pour résumer la complexité de la création de sites Web pour les développeurs Windows Forms et pour faciliter le passage de Windows Forms au Web. En conséquence, il était très difficile pour les développeurs Web Forms de passer à ASP.NET MVC et encore plus difficile pour Développeurs Windows Forms. Twitter Bootstrap est un ensemble de composants stylisés, de plug-ins et une grille de présentation prenant en charge les tâches les plus ardues. Microsoft a inclus Bootstrap dans tous les modèles de projet ASP.NET MVC depuis 2013. Dans l'exemple de projet, nous allons commencer par créer un nouveau projet ASP.NET MVC en utilisant le modèle de projet Visual Studio MVC standard ou en démarrant avec un projet MVC vide. et en ajoutant les fichiers nécessaires selon nos besoins.

Dans ce chapitre, nous aborderons les sujets suivants:

  • Les fichiers inclus dans la distribution Bootstrap
  • Comment créer un site ASP.NET MVC à l'aide du modèle de projet Visual Studio standard et de Bootstrap
  • Comment créer un site ASP.NET MVC vide et ajouter les fichiers Bootstrap manuellement
  • Comment créer un fichier Layout qui référence les fichiers Bootstrap
  • Ajouter des fichiers Bootstrap en utilisant NuGet
  • Améliorer les performances du site avec le groupement et la minification

La distribution Bootstrap

Avant de pouvoir démarrer avec Bootstrap, nous devons d'abord télécharger ses fichiers source.

Au moment de la rédaction de ce livre, Bootstrap était à la version 3.1.1. Vous pouvez télécharger la dernière version à partir de http://getbootstrap.com.

L'archive zip contient les trois dossiers suivants:

  • css
  • les polices
  • js

Feuilles de style bootstrap (le dossier css)

Ne vous inquiétez pas de la quantité de fichiers contenus dans le dossier css. Ce dossier contient quatre fichiers .css et deux fichiers .map. Nous aurions seulement besoin d'inclure le fichier bootstrap.css dans notre projet pour que les styles Bootstrap soient appliqués à nos pages. Le fichier bootstrap.min.css est simplement une version détaillée du fichier susmentionné. Les fichiers .map peuvent être ignorés pour le projet que nous allons créer. Ces fichiers sont utilisés comme un type de symbole de débogage (similaire aux fichiers .pdb de Visual Studio), qui permettent aux développeurs d’éditer en direct leurs fichiers source de préprocesseur, ce qui dépasse le cadre de ce manuel.

Polices d'amorçage (le dossier des polices)

Bootstrap utilise Font Awesome pour afficher divers icônes et glyphes sur des sites Bootstrap.

Font Awesome a été spécialement conçu pour Bootstrap et le dossier Polices contient les quatre formats de fichiers de police suivants:

  • OpenType intégré (glyphicons-halflings-regular.eot)
  • Graphiques vectoriels évolutifs (glyphicons-halflings-regular.svg)
  • Police TrueType (glyphicons-halflings-regular.ttf)
  • Format de police ouvert sur le Web (glyphicons-halflings-regular.woff)

C'est une bonne idée d'inclure tous ces fichiers dans votre projet Web, car cela permettra à votre site d'afficher correctement les polices dans différents navigateurs.

Le format de police EOT est requis pour Internet Explorer 9 et versions ultérieures.

TTF est l'ancien format de police traditionnel et WOFF est une forme comprimée de polices TTF. Si vous devez uniquement prendre en charge Internet Explorer 8 et versions ultérieures, iOS 4 et versions ultérieures, ainsi que Android, il vous suffira d'inclure la police WOFF.

Fichiers d'amorçage JavaScript (le dossier js)

Le dossier js contient deux fichiers. Tous les plugins Bootstrap sont contenus dans le fichier bootstrap.js. Le fichier bootstrap.min.js est simplement une version agrandie du fichier susmentionné. Avant d'inclure le fichier dans votre projet, assurez-vous de disposer d'une référence à la bibliothèque jQuery car tous les plug-in Bootstrap nécessitent jQuery. Le modèle de projet par défaut ajoute automatiquement la bibliothèque jQuery à votre projet et crée un ensemble pour celle-ci. Le bundle jQuery sera inclus dans vos pages si vous avez la ligne de code suivante dans votre vue:

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

Téléchargement de l'exemple de code Vous pouvez télécharger les exemples de fichiers de code de tous les livres Packt que vous avez achetés sur votre compte à l'adresse http://www.packtpub.com. Si vous avez acheté ce livre ailleurs, vous pouvez visiter http: // www. packtpub.com/support et inscrivez-vous pour que les fichiers vous soient envoyés directement par courrier électronique.



La structure du dossier Bootstrap

La structure du dossier décompressé pour Bootstrap ressemblera à la capture d'écran suivante:

Utilisation de Bootstrap avec un site créé avec le modèle de projet Visual Studio standard

À partir de Visual Studio 2013, lors de la création d'un projet ASP.NET, vous ne pouvez choisir qu'un seul modèle de projet, à savoir le modèle de projet d'application Web ASP.NET, comme illustré dans la capture d'écran suivante:

Dans la boîte de dialogue Nouveau projet ASP.NET, vous avez le choix de sélectionner le type d'application Web ASP.NET que vous souhaitez créer. Pour créer une application Web ASP.NET MVC utilisant Bootstrap pour son style et sa présentation, sélectionnez le modèle MVC. Vous remarquerez que la case à cocher MVC est automatiquement sélectionnée, comme illustré dans la capture d'écran suivante:

Tutoriel bootstrap MVC [Eng]

Cliquez sur le bouton OK pour terminer la création du projet MVC dans Visual Studio. Vous remarquerez que le modèle de projet ajoute automatiquement un certain nombre de packages NuGet à votre projet, y compris le package Bootstrap NuGet.

Examen de la structure de projet MVC par défaut

Le modèle de projet par défaut ajoute tous les fichiers Bootstrap nécessaires décrits précédemment, bien qu'il n'utilise pas la même convention de dénomination de dossier que la distribution Bootstrap par défaut. La structure de projet par défaut ressemblera à la capture d'écran suivante:

Le dossier de contenu

Le dossier Content contient les fichiers bootstrap.css et bootstrap.min.css, ainsi qu'une feuille de style appelée Site.css. Ce fichier est utilisé pour appliquer un style supplémentaire par-dessus les styles par défaut fournis par Bootstrap, mais également pour spécifier les styles à utiliser pour le plug-in de validation jQuery requis par ASP.NET MVC pour la validation de formulaire. Par exemple, la CSS suivante met en surbrillance un élément d’entrée de couleur rougeâtre et dessine une bordure autour de cet élément si la validation de ce champ échoue:

.field-validation-error {

 couleur: # b94a48;

}

.field-validation-valid {

 affichage: aucun;

}

input.input-validation-error {

 bordure: solide 1px # b94a48;

}

input [type = "case à cocher"]. input-validation-error {

 bordure: 0 aucune;

}

.validation-summary-errors {

 couleur: # b94a48;

}

.validation-summary-valid {

 affichage: aucun;

}

Le dossier des polices

Le dossier Polices contient la police Glyphicon dans tous les formats nécessaires.

Le dossier Scripts

Le dossier Scripts contient un certain nombre de scripts. Plus particulièrement pour ce livre, il contient les fichiers JavaScript bootstrap.js et bootstrap.min.js. Le modèle de projet ASP.NET MVC par défaut ajoute également des fichiers normalisés et normalisés pour les bibliothèques et plug-ins JavaScript suivants:

  • jQuery
  • plugin de validation jQuery
  • Bibliothèque de support de validation jQuery et jQuery pour une validation non intrusive
  • Modernisation
  • Répondre JS

Visual Studio active intelliSense pour jQuery, Bootstrap et Modernizr et répond en ajoutant le fichier _reference.js au dossier Scripts. C'est une fonctionnalité très utile lorsque vous travaillez avec JavaScript et qui vaut la peine d'être utilisée lorsque vous travaillez avec les composants Bootstrap. La plupart de ces bibliothèques et fichiers vont au-delà de la portée de ce livre, mais nous en aborderons quelques-uns au fur et à mesure de notre progression.

Création d'un site ASP.NET MVC vide et ajout de Bootstrap manuellement

La structure de projet par défaut est un bon début pour tout projet ASP.NET MVC, mais pour l'exemple de projet que nous allons construire tout au long de ce livre, nous allons créer un site ASP.NET MVC vide et ajouter les fichiers nécessaires manuellement. Ceci est fait en effectuant les étapes suivantes:

  1. Commencez par créer un nouveau projet d'application Web ASP.NET dans Visual Studio et nommez le projet Northwind.Web.
  2. Cette fois, sélectionnez le modèle vide dans la boîte de dialogue Nouveau projet ASP.NET et assurez-vous que la case à cocher MVC est cochée, comme illustré dans la capture d'écran suivante:
  3. Une mise en page de projet vide sera créée pour vous et vous remarquerez que nous n'avons pas le dossier Contenu, Polices ou Scripts - nous les ajouterons nous-mêmes!

Ajout des feuilles de style Bootstrap



Pour ajouter les fichiers de feuille de style Bootstrap à votre projet, procédez comme suit:

  1. Créez un nouveau dossier en cliquant avec le bouton droit de la souris sur le nom du nouveau projet.

Explorateur de solutions de Visual Studio et navigation vers Ajouter | Nouveau dossier, nommez le nouveau dossier css.

  1. Ensuite, cliquez avec le bouton droit sur le dossier css nouvellement créé et accédez à Ajouter | Elément existant… dans le menu contextuel.
  2. Naviguez jusqu'au dossier dans lequel vous avez extrait les fichiers de distribution Bootstrap et sélectionnez le fichier bootstrap.css que vous pouvez localiser dans le dossier css.

Ajout des polices Bootstrap

Ajoutez les polices Bootstrap requises en procédant comme suit:

  1. Comme pour les feuilles de style, créez un nouveau dossier appelé polices.
  2. Ensuite, accédez à l'emplacement où vous avez extrait le téléchargement Bootstrap et ajoutez tous les fichiers du dossier Polices à votre dossier Polices dans Visual Studio.
  3. Il doit y avoir quatre fichiers au total, chacun nommé glyphicons-halflings regular mais avec les extensions de fichier différentes suivantes:

° .eot

° .svg

° .ttf

° .woff

Ajout des fichiers JavaScript Bootstrap

Le fichier Bootstrap final dont nous aurons besoin est bootstrap.js. Pour l'ajouter, procédez comme suit:

  1. Avant d'ajouter le fichier bootstrap.js à votre projet Visual Studio, créez un nouveau dossier appelé js.
  2. Ajoutez le fichier bootstrap.js à ce dossier.
  3. Une fois terminé, la présentation du projet devrait ressembler à la capture d'écran suivante dans l'Explorateur de solutions de Visual Studio:

Création du fichier de mise en page du site

Pour conserver un aspect persistant sur les pages de notre site, nous utiliserons un fichier de présentation. Ce fichier de mise en page utilisera le modèle HTML de base Bootstrap dans un premier temps et nous le développerons au fur et à mesure de notre progression dans le livre. Pour créer ce fichier, procédez comme suit:

  1. Créez un nouveau fichier de présentation en cliquant avec le bouton droit de la souris sur le dossier Vues dans la fenêtre Visual.

Explorateur de solutions de Studio et accédez à Ajouter | Nouveau dossier. Nommez le nouveau dossier Shared.

  1. Ensuite, cliquez avec le bouton droit sur le dossier partagé et naviguez jusqu'à Ajouter | Nouvel article….

Sélectionnez le modèle d'élément MVC 5 Layout Page (Razor), nommez le nouvel élément.

_Layout.cshtml et cliquez sur Ajouter, comme indiqué dans la capture d'écran suivante:

  1. Une fois le nouveau fichier ajouté à votre projet, ouvrez-le et remplacez son contenu par le balisage HTML suivant:

<! DOCTYPE html>

 

<tête>

 

 échelle initiale = 1 ">

  @ ViewBag.Title

 <! - Bootstrap ->

 rel = "stylesheet">

 <! - [si lt IE 9]>



82