Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap » Bootstrap tutorial in ASP.net [Eng]

Bootstrap tutorial in ASP.net [Eng]

Problème à signaler:

Télécharger



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

Bootstrap tutorial in ASP.net [Eng]

...

Bootstrap est un framework HTML, CSS et JavaScript qui crée des sites Web réactifs et cohérents. Bootstrap est automatiquement installé avec les applications MVC 5 et est immédiatement visible dans la présentation par défaut créée au chapitre 1. Grâce à l’utilisation de HTML de base stylisée avec des classes CSS spécifiques, il est facile de créer de très belles pages Web. Ce chapitre explore les nombreux composants communs de Bootstrap, tels que les menus, les boutons et les alertes. Vous pouvez consulter la liste des composants Bootstrap pour un aperçu plus détaillé de la pléthore de composants créés. Certains des composants les plus complexes nécessitant une combinaison de JavaScript, HTML et CSS seront traités d

ans les chapitres suivants lorsqu'ils seront intégrés à Knockout.js.

Examiner le menu par défaut

Le projet que nous avons créé au chapitre 1 contient un exemple d’un des menus de Bootstrap avec un design réactif. Voyons maintenant sa structure. Il est contenu dans Views / Shared / _Layout.cshtml. Lorsque ce menu est affiché dans un navigateur, il ressemble à la Figure 2-1.

.

Figure 2-1. ?? le menu par défaut

La définition d'un menu avec Bootstrap nécessite une balise div avec la classe de navbar, comme indiqué dans l'exemple 2-1.

Exemple 2-1. Démarrer le menu

<div class = "navbar navbar-inverse navbar-fixed-top">

</ div>

Cet exemple spécifie également deux classes supplémentaires: navbar-inverse et navbarfixed-top. En spécifiant la classe inverse de navbar, Bootstrap fera du menu l'inverse de la coloration par défaut. Avec le thème par défaut, cela signifie noir au lieu de transparent. La classe navbar-fixed-top fera en sorte que le menu reste toujours en haut de la page, ce qui signifie que si le contenu vous permet de faire défiler l'écran, le menu restera visible en haut. La liste des éléments de navigation est généralement définie dans une balise de liste (ul) attribuée à une classe appelée nav. Chaque élément de navigation est ensuite défini dans son propre élément de liste ou balise li, comme indiqué dans l'exemple 2-2.

Exemple 2-2. Définir les liens du menu

<div class = "navbar navbar-inverse navbar-fixed-top">

 <div class = "navbar-collapse collapse">

 <ul class = "nav navbar-nav">

 <li> @ Html.ActionLink ("Home", "Index", "Home") </ li>

 <li> @ Html.ActionLink ("À propos de", "À propos de", "Accueil") </ li>

 <li> @ Html.ActionLink ("Contact", "Contact", "Maison") </ li>

 </ ul>

 </ div>

</ div>

Comme je l’ai mentionné, Bootstrap fournit une présentation Web réactive. Cela signifie que lorsque le site Web est visualisé dans un navigateur avec une résolution d'écran différente, la page s'ajuste automatiquement. Comme le montre l'exemple 2-2, un div de la classe navbar-collapse est situé juste au-dessus de la balise ul qui définit les trois liens principaux. Lorsque cette page est affichée sur un petit appareil (ou que vous redimensionnez votre navigateur), le menu se réduira automatiquement pour assurer qu'il s'adapte correctement à la résolution fournie. Cet exemple ajoute une deuxième classe à la division de collapse, ce qui rendra le menu complètement caché s’il ne tient pas sur une seule ligne. Bien sûr, cela ne fournirait pas une très bonne facilité d’utilisation, et cet exemple a déjà pensé à cela. Il ajoute un petit bouton sur le côté droit qui, lorsqu'il est cliqué, bascule l'affichage des trois boutons, comme illustré à la Figure 2-2.

Bootstrap tutorial in ASP.net [Eng]

Figure 2-2. Un menu réduit

Le bouton permettant d'afficher et de masquer le menu est créé avec plusieurs attributs. Par conséquent, lorsque vous cliquez dessus, le menu s'affiche comme indiqué dans l'exemple 2-3.

Exemple 2-3. Bouton pour menu réduit

<div class = "navbar navbar-inverse navbar-fixed-top">

 <div class = "conteneur">

 <div class = "navbar-header">

 <type de bouton = "bouton" class = "navbar-bascule" data-toggle = "collapse" data-target = ". navbar-collapse">

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 </ button>

 @ Html.ActionLink ("Nom de l'application", "Index", "Accueil", nouveau {area = ""}, nouveau {@class = "navbar-brand"})

 </ div>

 <div class = "navbar-collapse collapse">

 <ul class = "nav navbar-nav">

 <li> @ Html.ActionLink ("Home", "Index", "Home") </ li>

 <li> @ Html.ActionLink ("À propos de", "À propos de", "Accueil") </ li>

 <li> @ Html.ActionLink ("Contact", "Contact", "Maison") </ li>

 </ ul>

 </ div>

 </ div>

</ div>

Auparavant, tout était réalisé via des classes CSS sur des éléments HTML. Le bouton Réduire introduit les attributs de données utilisés dans JavaScript fourni par Bootstrap. L'attribut data-toggle avec une valeur collapse indique qu'il doit rester invisible jusqu'à ce que le menu nécessite un repli. L'attribut datatarget indique quel élément actuellement masqué doit être affiché (ou masqué) lorsque l'utilisateur clique sur le bouton. dans ce cas, il s'agit de .navbar-collapse. Le bouton est stylé et placé à droite par la classe navbar-toggle.

La cible de données

Notez que dans l'exemple 2-3, la classe navbar-collapse est précédée d'un point (.). La valeur dans l'attribut est utilisée dans un sélecteur jQuery pour rechercher l'élément et l'afficher ou le masquer. Si le menu était identifié par un ID, un préfixe de balise de hachage (#) serait nécessaire avant l'ID qui lui est attribué.

Entrez maintenant dans le pouvoir des nombreux composants Bootstrap. Dans l'exemple 2-2, la balise ul contient une classe secondaire de navbar-nav. Bootstrap fournit plusieurs classes différentes pouvant créer une variété de menus d'apparence différente. Si vous remplacez la classe navbar-nav par des pilules de navigation, un menu d'apparence différente s'affiche. J'ai également ajouté la classe active au premier élément li (voir Exemple 2-4).

Exemple 2-4. Passer au menu stylisé des pilules

<ul class = "nav nav-pilules">

 <li class = "active"> @ Html.ActionLink ("Accueil", "Index", "Accueil") </ li>

 <li> @ Html.ActionLink ("À propos de", "À propos de", "Accueil") </ li>

 <li> @ Html.ActionLink ("Contact", "Contact", "Maison") </ li>

</ ul>

Une fois rendu, il est légèrement différent, comme illustré à la figure 2-3.

Figure 2-3. Un menu de pilule

Un menu avec des menus déroulants et un champ de recherche

Le menu par défaut créé par MVC est assez complet. Cependant, Boot‐ strap fournit beaucoup plus de fonctionnalités qui peuvent être implémentées dans un menu. Cet exemple suivant explorera un menu plus complexe qui contiendra un mélange d'éléments de navigation avec et sans liste déroulante, ainsi qu'un champ de recherche avec un bouton. Tout comme le menu par défaut, le démarrage d'un nouveau menu nécessite la classe navbar, comme indiqué dans l'exemple 2-5. Cette fois, il utilisera les couleurs par défaut (au lieu de l’inverse) et il ne sera pas fixé en haut.

La prochaine étape requise est le «marquage» de l'application, comme indiqué dans l'exemple 2-6. Il sera contenu dans un élément séparé avec le bouton pour afficher le menu lorsqu’il est réduit, afin de garantir qu’il est regroupé lorsque la résolution est trop petite pour afficher le menu complet.

Exemple 2-6. Menu avec marquage

<nav class = "navbar navbar-default" role = "navigation">

 <div class = "navbar-header">

 <type de bouton = "bouton" class = "barre de navigation bascule" data-toggle = "collapse"

 data-target = ". navbar-collapse">

 <span class = "sr-only"> Basculer la navigation </ span>

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 </ button>

 <a class="navbar-brand" href="/@Url.Action("Index", "Home" )"> Nom de l'application </a>

 </ div>

</ nav>

Celui-ci contient le même bouton que celui illustré à la Figure 2-2 qui sera affiché lorsque le menu est réduit. Notez que les liens sont définis différemment. Auparavant, ils étaient complètement définis avec Razor. Toutefois, les liens suivants (dans l’Exemple 2 à 7) nécessitent du code HTML dans le texte du lien. Il est donc préférable d’avoir le contrôle total sur la balise a. Il est toujours important de laisser MVC compiler l’URL pour nous, c’est pourquoi il se sert de l’URL Helper pour créer le lien au lieu de HtmlHelper. Ensuite, les trois liens vers Accueil, À propos et Contact, comme indiqué à l'exemple 2-7. About et Contact ont été mis à jour pour inclure des liens déroulants vers des sous‐ pages fictives. La liste déroulante À propos contient même un joli séparateur entre le deuxième et le troisième lien.

Exemple 2-7. Menus déroulants

<nav class = "navbar navbar-default" role = "navigation">

 <div class = "navbar-header">

 <type de bouton = "bouton" class = "barre de navigation bascule" data-toggle = "collapse"

 data-target = ". navbar-collapse">

 <span class = "sr-only"> Basculer la navigation </ span>

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 </ button>

 <a class="navbar-brand" href="/@Url.Action("Index", "Home" )"> Nom de l'application </a>

 </ div>

 <div class = "collapse navbar-collapse">

 <ul class = "nav navbar-nav">

 <li class = "active"> <a href="/@Url.Action("Index", "Home" )"> Accueil </a> </ li>

<li class = "dropdown">

 <a href = "@ Url.Action (" À propos de "," Accueil ")" class = "dropdown-toggle"

 data-toggle = "dropdown"> à propos de <span class = "caret"> </ span> </a>

 <ul class = "menu déroulant" role = "menu">

 <li> <a href="#"> L'équipe de direction </a> </ li>

 <li> <a href="#"> Qui sommes-nous? </a> </ li>

 <li class = "divider"> </ li>

 <li> <a href="#"> Emplois </a> </ li>

 </ ul>

 </ li>

 <li class = "dropdown">

 <a href = "@ Url.Action (" Contact "," Accueil ")" class = "dropdown-toggle"

 data-toggle = "dropdown"> Contactez <span class = "caret"> </ span> </a>

 <ul class = "menu déroulant" role = "menu">

 <li> <a href="#"> Par courrier </a> </ li>

 <li> <a href="#"> Par courrier électronique </a> </ li>

 </ ul>

 </ li>

 </ ul>

 </ div>

</ nav>

Les éléments li pour les listes déroulantes sont étiquetés avec la classe déroulante. Le lien est ensuite apposé avec la classe dropdown-toggle et le data-toggle de la liste déroulante. Sous le lien se trouve une liste non ordonnée avec chaque lien dans une balise li. Dans la liste déroulante À propos de se trouve une balise li vide contenant le diviseur de classe. Pour compléter ce menu, un formulaire de recherche sera créé et aligné sur le côté droit du menu, comme indiqué dans l'exemple 2-8.

Exemple 2-8. ?? e formulaire de recherche

<nav class = "navbar navbar-default" role = "navigation">

 <div class = "navbar-header">

 <type de bouton = "bouton" class = "barre de navigation bascule" data-toggle = "collapse"

 data-target = ". navbar-collapse">

<span class = "sr-only"> Basculer la navigation </ span>

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 <span class = "icon-bar"> </ span>

 </ button>

 <a class="navbar-brand" href="/@Url.Action("Index", "Home" )"> Nom de l'application </a>

 </ div>

 <div class = "collapse navbar-collapse">

 <ul class = "nav navbar-nav">

 <li class = "active"> <a href="/@Url.Action("Index", "Home" )"> Accueil </a> </ li>

 <li class = "dropdown">

 <a href = "@ Url.Action (" À propos de "," Accueil ")" class = "dropdown-toggle"

 data-toggle = "dropdown"> à propos de <span class = "caret"> </ span> </a>

 <ul class = "menu déroulant" role = "menu">

 <li> <a href="#"> L'équipe de direction </a> </ li>

<li> <a href="#"> Qui sommes-nous? </a> </ li>

 <li class = "divider"> </ li>

 <li> <a href="#"> Emplois </a> </ li>

 </ ul>

 </ li>

 <li class = "dropdown">

 <a href = "@ Url.Action (" Contact "," Accueil ")" class = "dropdown-toggle"

 data-toggle = "dropdown"> Contactez <span class = "caret"> </ span> </a>

 <ul class = "menu déroulant" role = "menu">

 <li> <a href="#"> Par courrier </a> </ li>

 <li> <a href="#"> Par courrier électronique </a> </ li>

 </ ul>

 </ li>

 </ ul>

 <form class = "navbar-form navbar-right" role = "search">

 <div class = "form-group">

 <input type = "text" class = "form-control" placeholder = "Search">

 </ div>

 <button type = "submit" class = "btn btn-default"> Soumettre </ button>

 </ form>

 </ div>

</ nav>

À mon avis, le menu final est vraiment lisse (voir Figure 2-4) avec un formulaire de recherche en ligne aligné à l'extrême droite du menu. Figure 2-4. Le menu final La forme en ligne et l'alignement sont réalisés en ajoutant les classes navbar-form et navbar-right à la balise de formulaire, comme indiqué dans l'exemple 2-8.

Boutons

Les boutons sont une autre chose très courante sur tout site Web. Bootstrap a construit six boutons thématiques différents. Ils sont nommés et ressemblent à ceux de la figure 2-5.

Notez les noms: Par défaut, Principal, Succès, Info, Avertissement et Danger. Ceux-ci sont également utilisés dans plusieurs autres composants et les couleurs restent cohérentes entre eux. L'exemple 2-9 montre comment créer les boutons illustrés à la figure 2-5.

Exemple 2-9. Faire les boutons

<type de bouton = "bouton" class = "btn btn-default"> Par défaut </ button>

<type de bouton = "bouton" class = "btn btn-primary"> primaire </ button>

<button type = "button" class = "btn btn-success"> Succès </ button>

<type de bouton = "bouton" class = "btn btn-info"> Info </ button>

<type de bouton = "bouton" class = "btn btn-warning"> Avertissement </ button>

<type de bouton = "bouton" class = "btn btn-danger"> Danger </ bouton>

Chaque bouton est créé en spécifiant deux classes. Le premier est btn, et il est cohérent entre tous les boutons. Vient ensuite une classe qui commence par btn et se termine par le type de bouton créé, par exemple, succès ou danger. Ces classes ne se limitent pas aux balises de bouton HTML. Ils peuvent également être appliqués avec des liens ou des boutons de soumission. Tout comme le menu créé précédemment, les boutons peuvent également être créés avec des listes déroulantes. Cela constitue une solution intéressante lorsque vous souhaitez que l'utilisateur puisse effectuer une sélection lorsque plusieurs options sont disponibles. Une autre fonctionnalité intéressante des boutons est que vous pouvez les regrouper. L'exemple 2-10 explorera ces options mélangées.

Exemple 2-10. Groupe de boutons avec liste déroulante

<div class = "btn-group">

 <type de bouton = "bouton" class = "btn btn-default"> Par défaut </ button>

 <type de bouton = "bouton" class = "btn btn-primary"> primaire </ button>

 <button type = "button" class = "btn btn-success"> Succès </ button>

 <type de bouton = "bouton" class = "btn btn-success dropdown-toggle"

Bootstrap tutorial in ASP.net [Eng]

 data-toggle = "dropdown">

 <span class = "caret"> </ span>

 </ button>

 <ul class = "menu déroulant" role = "menu">

 <li> <a href="#"> Option 1 </a> </ li>

 <li> <a href="#"> Option 2 </a> </ li>

 </ ul>

</ div>

Le résultat de ce groupe de boutons ressemble à la figure 2-6.

Figure 2-6. Un groupe de boutons

La liste déroulante du bouton est identique à celle du menu: la liste des options est contenue dans une balise ul et chaque option est contenue dans une balise li. L'icône déroulante est son propre bouton qui contient une balise span avec caret comme nom de classe. Comme les boutons sont contenus dans une div de classe btn-group, ils sont étroitement couplés. Cela donne l’apparence que le bouton avec «Succès» et l’icône déroulante sont le même bouton, même s’il est implémenté avec des balises à deux boutons.

Les alertes

Avant d’utiliser Bootstrap, je ne traitais pas souvent les messages d’alerte, car j’avais l’impression que les efforts de mise en œuvre dépassaient la valeur fournie. Bootstrap atténue définitivement cette inquiétude. La figure 2-7 illustre les quatre types de messages d’alerte. Les messages d’alerte incluent éventuellement la possibilité d’être licencié avec le «x» dans le coin droit, ce qui permet aux utilisateurs de masquer le message une fois qu’il l’a lu.

Exemple 2-11. Messages d'alerte rejetés

<div class = "alerte alert-succès alert-licenciable" role = "alert">

 <type de bouton = "bouton" class = "fermer" data-lic = = alert ">

 <span aria-hidden = "true"> & times; </ span> <span class = "sr-only"> Fermer </ span>

 </ button>

<strong> Succès! </ strong>

</ div>

L'exemple 2-11 montre que la création d'une alerte est assez similaire à la création de boutons pour le style. Un bouton de réussite contiendrait deux classes: btn et btn-success. Les alertes fonctionnent de la même manière, remplaçant btn par alert.

Notez que, par défaut, les alertes ne prennent pas en charge les classes par défaut et primaires que les boutons prennent en charge. Comme pour les boutons, si je souhaitais créer un avertissement ou une alerte de danger, je remplacerais alert-success par alert-warning ou alert-danger. Une troisième classe est ajoutée à ce message d'alerte: Alerte-licenciable. À l'intérieur de la balise div, il y a un bouton avec une classe de fermeture et un attribut data-lic avec la valeur alert. Cette combinaison permettra au CSS et au JavaScript Bootstrap de styliser et de faire disparaître le champ d’alerte lorsque l’utilisateur clique sur le x dans le coin supérieur droit.

Des thèmes

Comme indiqué lors de la création de boutons et de cases d'alerte, Bootstrap exploite les noms de classe courants convertis en un thème de couleur cohérent. Si vous êtes aventureux, vous pouvez éditer n'importe quelle couleur, espacement, etc. en modifiant le CSS Bootstrap. Dans MVC, le fichier se trouve dans le répertoire Content et s'appelle correctement bootstrap.css. En raison de la nature cohérente de Bootstrap, les utilisateurs ont créé des centaines de thèmes différents pour améliorer encore les composants intégrés. Le thème Bootstrap n’entre pas dans le cadre de ce livre; Toutefois, si vous recherchez des thèmes Boot-strap sur Google, vous en trouverez de nombreux types. Beaucoup d'entre eux sont gratuits et certains coûtent quelques dollars.

Résumé

Les exemples de ce chapitre ne font qu'effleurer la surface des plus de 70 composants fournis par Bootstrap. Il existe d'excellents composants qui traitent de la pagination de données, de tableaux ou de grilles de données, d'éléments de forme, etc. Tout au long de ce livre, je vais explorer une variété de ces composants tout en les intégrant à MVC. Ce chapitre contient des exemples de code HTML pour plusieurs menus, boutons, groupes de boutons et messages d’alerte ne dépassant pas 50 lignes de code. Si vous deviez créer le même style sans Bootstrap, vous auriez également besoin d'écrire plusieurs centaines de lignes de CSS et de JavaScript qui l'accompagne pour créer les menus déroulants et les messages d'alerte ignifuges! À mon avis, l'utilisation de Bootstrap dans tous mes projets est une évidence.

CHAPITRE 3 Introduction à Knockout.js

Knockout.js est une bibliothèque JavaScript open source qui vous permet de créer des applications Web dynamiques et riches. Il est construit avec le modèle Model-View-ViewModel (MVVM). Knockout simplifie la mise en œuvre d'une interface utilisateur complexe répondant aux interactions de l'utilisateur. J'aime Knockout parce que c'est l'une des bibliothèques JavaScript les plus légères disponibles à ce jour. Il n'essaie pas non plus d'être un framework tout-en-un. Il sert un seul objectif: lier les données de votre ViewModel à votre interface utilisateur. L'implémentation de Knockout implique trois choses distinctes: une vue contenant des éléments HTML et CSS liés aux données, un ViewModel contenant les données à lier à la vue, et indiquant à Knockout d'effectuer la liaison des données à la vue avec ViewModel.

Installation de Knockout.js

Knockout.js peut être installé de deux manières:

  • Télécharger la dernière version à partir de la page de téléchargements Knockout.
  • Installation de Knockout via le gestionnaire de paquets NuGet.

Ma préférence va au gestionnaire de paquets NuGet, car il facilite la mise à jour vers une nouvelle version si / quand une version plus récente est disponible.

Le gestionnaire de paquets NuGet est intégré directement dans Visual Studio et permet aux développeurs d’installer (ou de créer leurs propres) paquets facilement pour installer et gérer les dépendances de tiers.

Pour installer Knockout, effectuez les opérations suivantes:

  1. Cliquez sur le menu Outils.
  2. Cliquez sur le sous-menu NuGet Package Manager.
  3. Cliquez sur le menu NuGet Packages for Solution.
  4. Sur la gauche, cliquez sur En ligne si ce n'est déjà fait.
  5. Dans la zone de recherche en haut à droite, tapez knockoutjs.
  6. Le premier paquet est le framework Knockout. Cliquez sur le bouton Installer pour ce package (voir la figure 3-1).
  7. Ensuite, choisissez le projet sur lequel l'installer. En supposant que vous n’ayez qu’un seul projet, l’option par défaut de «Tout» est OK. Si, à l'avenir, vous avez plusieurs projets, veillez à sélectionner le projet contenant votre application MVC.
  8. Une fois le paquet installé, cliquez sur le bouton Fermer du paquet NuGet.

Directeur.

Figure 3-1. Installer le paquet Knockout

Avec la bibliothèque Knockout téléchargée et ajoutée au projet, il devient simple d’inclure le script.

Dans le fichier Views / Shared / _Layout.cshtml, ajoutez le code de l'exemple 3-1 juste au-dessus de la @RenderSection située juste au-dessus de la balise de corps de fin (</ body>).

Exemple 3-1. Y compris la bibliothèque Knockout

<script src = "~ / Scripts / knockout-3.2.0.js" type = "text / javascript"> </ script>


2