Fermer

janvier 24, 2019

ASP.NET Core 2.2 passe à Bootstrap 4


ASP.NET Core 2.2 apporte une migration de Bootstrap 3 à Bootstrap 4, des modifications majeures des modèles de projet et de l'interface utilisateur, etc.

ASP.NET Core 2.2 a atteint la disponibilité globale le 4 décembre 2018. Avec la sortie d'ASP.NET Core 2.2, les modèles de projet ont été révisés. La modification visait principalement à migrer de Bootstrap 3 à Bootstrap 4, tout en modernisant et en simplifiant l'interface utilisateur. Cette refonte incluait le contenu généré et le contenu généré par l’interface utilisateur d’identité par défaut. Ces modifications sont les bienvenues car Bootstrap 4 gagne du terrain en tant que nouveau paramètre par défaut de la communauté pour les frameworks HTML / CSS UI.

Bootstrap 3 vs. 4

L'objectif principal de Bootstrap reste le même: rester simple. composants pour la construction de sites réactifs et mobiles. Cependant, le framework Bootstrap lui-même a considérablement changé de la version 3 à la version 4. Bootstrap 4 utilise maintenant Sass (.scss) par défaut dans son code source, contrairement à la version précédente qui était construite sur Less. La grille sous-jacente a été étendue pour utiliser la Flexbox qui offre des options de présentation plus simples et plus flexibles. Les panneaux, les puits et les vignettes sont maintenant remplacés par le concept de cartes . Parmi les autres caractéristiques notables, citons les utilitaires d’espacement des blancs, une nouvelle apparence et un point de rupture supplémentaire pour les écrans de très grande taille (XL).

Get Sass'y

Bootstrap 4 est construit avec le langage d’extension Sass CSS (ou pré-processeur). Sass permet aux développeurs d'utiliser des fonctionnalités puissantes qui ne sont généralement pas disponibles avec CSS. Les fonctionnalités avancées incluent l'imbrication, les variables, les fonctions et les opérateurs pouvant être utilisés pour produire des bibliothèques CSS flexibles et réutilisables. Avec Sass, les tâches complexes telles que le changement de thème d'une application sont réduites à une simple modification de valeur dans un fichier de paramètres.

Dans l'exemple suivant, une carte de couleurs comprend un thème pour une application Bootstrap:

 $ theme- couleurs: (
  "primaire": # 84329b,
  "secondary": # 02bceb

Modifier les réglages efface la surface de ce qui est possible. Presque tous les aspects de Bootstrap peuvent être personnalisés et documentés .

Bien que les fichiers source .scss ne soient pas inclus dans les modèles de projet ASP.NET Core 2.2, ils êtes facile à ajouter et à compiler avec les outils .NET. Si cela vous intéresse, continuez à lire la section Gestion de la dépendance ci-dessous.

Flexbox

Le système de grille de Bootstrap est maintenant construit avec Flexbox, un module de CSS qui définit un modèle de boîte CSS optimisé pour la conception d'interface utilisateur et la mise en page des éléments. Avec Flexbox, le système de grille a été simplifié et rendu plus polyvalent.

Il est possible de créer des colonnes sans définir explicitement de largeur numérique. Au lieu d'écrire la classe .col- {point d'arrêt} - {#} elle peut être simplifiée comme suit: col . Cette amélioration facilite beaucoup le traitement du contenu dynamique car la grille utilise par défaut une largeur égale pour chaque élément .col .

Première colonne
Deuxième colonne
@foreach (var item dans les données)   {     
      @article     
  }

Bootstrap est également livré avec un ensemble complet d'utilitaires Flexbox permettant de gérer la disposition et l'alignement des éléments de la grille. Les utilitaires flex simplifient des tâches auparavant difficiles, telles que l’étirement uniforme de tous les éléments ou l’alignement vertical d’un élément au sein d’un parent.

...

 vertical-align "titre = "vertical-align" /></p data-recalc-dims=

...

 stretch-align "title =" stretch-align "/></p data-recalc-dims=

Les cartes

Les cartes sont un autre domaine dans lequel Bootstrap a beaucoup changé. Les cartes remplacent les puits et les panneaux des versions précédentes de Bootstrap. Les cartes sont plus représentatives d'une approche moderne de la conception d'interface utilisateur. Les cartes peuvent inclure des titres, des images et des éléments exploitables. Elles sont idéales pour attirer l'attention des utilisateurs.


 Capuchon pour image de carte
Titre de la carte

Il s'agit d'une carte plus longue avec texte de support ci-dessous comme introduction naturelle à un contenu supplémentaire. Ce contenu est un peu plus long.

Dernière mise à jour il y a 3 minutes

  

Combinées au nouveau conteneur de cartes, les cartes permettent de composer une interface utilisateur riche avec des groupes alignés automatiquement.


...
...
...

 cards "title =" cards "/></p data-recalc-dims=

Ce ne sont là que quelques-unes des améliorations que l'on peut attendre de Bootstrap lui-même. Nous aborderons ensuite les améliorations apportées à l'ASP. Modèles de projet NET Core et fonctionnalités d'identité.

Fichier Nouveau projet

Fichier> Nouveau> Expérience du projet

Le modèle d'application Web du nouveau projet ASP.NET Core a été mis à jour dans cette version avec un index par défaut simplifié . Dans les versions précédentes, la page d'index incluait un exemple de carrousel et des éléments supplémentaires. Les carrousels étaient autrefois une fonctionnalité très appréciée de l'interface utilisateur, mais ont perdu de leur popularité au fil des ans. Leur suppression est un changement bienvenu. à supprimer lors du démarrage d'une nouvelle application.

 aspnet21-index "title =" aspnet21-index "/><p data-recalc-dims= La nouvelle expérience est plus propre avec seulement quelques exemples d'éléments d'interface utilisateur restants. Les exemples incluent la barre de menu supérieure et le panneau d’alerte. Un message de bienvenue orientant les utilisateurs vers la documentation remplace les colonnes de liens de référence.

 aspnet22-index "title =" aspnet22-index "/></p data-recalc-dims=

Les pages Identity, comprenant les écrans de connexion et d'enregistrement, ont également été mises à jour avec le nouveau style Bootstrap. Les modifications apportées à certaines pages d'identité sont visuellement moins drastiques que la page d'index.

Identity

Dans ASP.NET Core 2.1, Identity a évolué pour utiliser une Razor Class Library (RCL La RCL ajoute Identity au projet en tant que paquet autonome représenté sous la forme d’une bibliothèque unique .dll . Parallèlement à la bibliothèque Identity, un outil d’échafaudage a été ajouté pour remplacer les pages "masquées" dans la bibliothèque Identity. La bibliothèque Identity comprenant de nombreuses vues incorporant des classes Bootstrap, il est important que la bibliothèque Identity soit mise à jour avec le modèle de projet tout en conservant la compatibilité ascendante.

 aspnet22-login "title =" aspnet22-login "/> [19659007] Un effort a été fait pour s'assurer que la bibliothèque d'Identity est suffisamment flexible pour servir à la fois les utilisateurs ASP.NET Core 2.1 et 2.2. Selon la version d'ASP.NET Core utilisée, la bibliothèque Identity émet le balisage correct pour Bootstrap 3 ou 4. Pour prendre en charge cette exigence, vous pouvez définir une option permettant de spécifier le framework d'interface utilisateur par défaut pour Identity.</p data-recalc-dims=

Le cadre de l'interface utilisateur est maintenant défini à l'aide de la méthode AddDefaultUI et en passant en paramètre la version de cadre souhaitée. Par exemple, (UIFramework.Bootstrap4) :

 services.AddDefaultIdentity  ()
  .AddDefaultUI (UIFramework.Bootstrap4)
  .AddEntityFrameworkStores  (); 

En plus de la possibilité de choisir entre les versions, le système d’échafaudage génère le balisage Bootstrap approprié, garantissant ainsi sa compatibilité. L'outil d'échafaudage d'identité génère des pages utilisées pour remplacer les pages d'identité prédéfinies. Vous pouvez accéder à l'outil d'échafaudage en cliquant avec le bouton droit de la souris sur le projet dans la fenêtre de l'Explorateur de solutions de Visual Studio et en choisissant Ajouter un élément échafaudé > Identité .

 "éléments d'échafaudage" titre = "scaffold-items" /></p data-recalc-dims=

Dans la boîte de dialogue Ajouter un échafaudage, vous pouvez générer des pages individuelles à partir de la bibliothèque d'identité. Vous pouvez également générer toutes les pages à la fois.

 scaffold-dialog "title =" scaffold-dialog "/></p data-recalc-dims=

Les pages générées par l'outil sont écrites dans la zone Identité de l'application. Ces pages utilisent les styles Bootstrap 4 et constituent un bon point de départ pour la personnalisation.

Gestion des dépendances

Tout au long de l’histoire d’ASP.NET Core, des options par défaut ont été incluses pour la gestion des dépendances côté client, telles que NuGet et Bower. . Étant donné que le développement côté client évolue si rapidement, aucun paramètre par défaut n'est inclus et les développeurs peuvent choisir de gérer la gestion des dépendances comme bon leur semble. Les packages côté client peuvent être gérés à partir de divers outils, tels que npm, Yarn et Bower. Plusieurs outils de ligne de commande (CLI) et extensions Visual Studio sont disponibles pour simplifier le processus. Cependant, la plupart de ces outils sont "nés" en dehors de l'écosystème .NET et nécessitent une configuration et une installation supplémentaires. Ces outils introduisent souvent des fichiers inutiles dans le projet. Par exemple, le dossier node_modules est réputé pour être massif.

Libman est un outil de dépendance simplifié côté client. Il est inclus dans Visual Studio 2017 et constitue une alternative au développement ASP.NET Core. Libman peut résoudre les dépendances côté client à partir d'un réseau de distribution de contenu (CDN) ou d'un système de fichiers tout en ne ciblant que les fichiers nécessaires au projet. Les développeurs peuvent choisir de récupérer des fichiers JavaScript et CSS minifiés, ou des dossiers entiers, ce qui est utile pour le développement .scss .

Utilisons Libman pour ajouter Bootstrap 4 .scss source code à un projet. Cliquez sur le projet avec le bouton droit de la souris et choisissez Ajouter > Bibliothèque client pour afficher la boîte de dialogue Libman utilisée pour la récupération de packages.

 bibliothèque add-client-side-library " title = "add-client-side-library" /></p data-recalc-dims=

Choisissez ensuite un fournisseur de paquetage, c’est le CDN cdnjs le système de fichiers ou un fournisseur de paquetage appelé unpkg [Nousallonsutiliserunpkgpourrécupérerlesfichierscequinouspermetdechargerrapidementetfacilementn'importequelfichierdepuisn'importequelpaquetnpmsansavoirbesoindenpmlui-mêmeIndiquezlenomdupaquetetsonnumérodeversionpuissélectionnezlesfichiersàincluredansleprojet

 using-unpkg "title =" using-unpkg "/></p data-recalc-dims=

Lorsque vous cliquez sur Installer Libman récupère les fichiers et les charge dans l'emplacement cible. Vous pouvez ensuite utiliser les fichiers de notre projet selon vos besoins. Dans cet exemple, nous utilisons des fichiers .scss qui doivent être compilés dans des fichiers .css que le navigateur comprend. Pour compiler les fichiers, installez le package NuGet BuildWebCompiler – un outil basé sur .NET pouvant compiler des actifs côté client. Le package NuGet est ajouté via la fenêtre du gestionnaire de packages NuGet de Visual Studio ou via une ligne de commande avec Build-Package BuildWebCompiler .

 BuildWebCompiler "title =" BuildWebCompiler "/></p data-recalc-dims=

avec BuildWebCompiler installé, Demander au compilateur de générer le code source Bootstrap Un fichier de configuration compilerconfig.json utilisant des propriétés d'entrée / sortie simples est nécessaire pour effectuer la tâche:

  [
  {
    "outputFile": "wwwroot/css/bootstrap.css",
    "inputFile": "wwwroot/lib/bootstrap/scss/bootstrap.scss"
  }
] 

Si vous utilisez une version personnalisée de Bootstrap, vous devrez probablement modifier les balises dans le fichier _Layout.cshtml :


     < lien href = "~  / css/bootstrap.css" rel = "stylesheet" />


     <link href = "~  /css/bootstrap.min.css" rel = "stylesheet" />

Interface utilisateur de Telerik pour ASP.NET Core Thème Bootstrap 4

Pour une expérience ultime de Bootstrap 4, utilisez le thème Bootstrap 4 dans Interface utilisateur Telerik pour ASP.NET Core . Etant donné que l'interface utilisateur pour ASP.NET Core prend en charge Bootstrap 4, plus de 60 composants d'interface utilisateur s'intègrent de manière transparente aux applications ASP.NET Core 2.2. En outre, les développeurs peuvent tirer parti des Kendo UI et du générateur de thèmes Telerik Web UI . Le générateur de thèmes personnalise non seulement les composants de l'interface utilisateur Telerik, mais également les composants natifs de Bootstrap 4. Le générateur de thèmes prend également en charge les fichiers .scss pour les développeurs souhaitant intégrer leurs versions Bootstrap personnalisées.

 theme-builder "title =" theme-builder "/></p data-recalc-dims=

Si vous Êtes-vous intéressé à voir comment l'interface utilisateur d'ASP.NET Core fonctionne avec votre projet, testez-le en en téléchargeant un essai gratuit de 30 jours .

Wrap Up

Les modèles de projet ASP.NET Core 2.2 ont Les améliorations apportées aux modèles couvrent les bases du projet, la gestion des identités et des outils et la gestion des dépendances. Bootstrap lui-même a considérablement changé de la version 3 à la version 4 avec le code source Sass, de nouvelles dispositions de grille, des cartes, etc. modèles, l’équipe ASP.NET a préparé le terrain pour la prochaine génération d’applications ASP.NET Core.


Les commentaires sont désactivés en mode Aperçu.




Source link