Cet article a fait l'objet d'une traduction automatique.

Développement Web

Building Responsive Web Sites bootstrap

Keith Pijanowski

C'est seulement une question de temps avant qu'un client clique sur URL de votre site sur leur appareil mobile. Will Dans l'affirmative, que l'utilisateur va probablement passer à un site plus facile à mobile. Si cet utilisateur pourrait au contraire rencontrer un UX spécialement conçu pour un facteur de forme mobile et profiter facilement interagir avec votre site ?

Dans le passé, un site Web pris en charge de code différent requis mobile et de bureau des bases. Aujourd'hui, cependant, il y a des infrastructures d'interface utilisateur qui permettent les Web pages d'un site à l'appui mobile, tablette, de bureau et ordinateurs de bureau de même grand écran – toutes avec une base de code unique. Si ces outils ne sont pas une panacée pour les développeurs de Web mobiles, ils peuvent considérablement faciliter le processus de développement. Il convient encore, envisager pour déterminer si l'un est bon pour votre site.

Cet article présente un aperçu de l'un de ces outils, Bootstrap, qui est inclus dans la plupart des modèles Application Web Visual Studio 2013. Bootstrap est un cadre qui permet la conception de sites Web adaptée (RWD) — une approche de conception de sites Web qui vise à fournir une expérience visuelle acceptable dans l'ensemble de tous les facteurs de forme avec une base de code unique. Après la présentation, je considérerai que certains des facteurs qui peuvent vous aider à décident si un cadre comme Bootstrap est bon pour votre site.

Début

Il a fallu une certaine évolution pour amener l'industrie du logiciel au point où une solution comme Bootstrap émerge. Après un début agité, commençant en 1998, dans lequel Wireless Markup Language (WML), Compact HTML et XHTML Mobile Profile refait surface et puis disparaissent, HTML5 enfin est devenu la nouvelle génération HTML standard pour tous les appareils en 2009. Mais seules normes ne suffisent pas. Alors que la norme de balisage Web mobile est en évolution constante et significative avances est produite également avec du matériel, de navigateurs mobiles et de bande passante. Processeurs est devenu plus rapide, les navigateurs mobiles atteint le stade où ils pourraient afficher n'importe quel page Web (même si la page n'avait pas été conçue pour un appareil mobile) et la bande passante a augmenté. Cela a créé un environnement permettant aux développeurs de prendre le relais.

Les développeurs aiment fabriquer des outils pour les développeurs, et le Web mobile ne fait pas exception. Il y a plus d'une douzaine de différents cadres de l'interface utilisateur sur le marché aujourd'hui. Il serait injuste de l'étiquette de l'un de ces cadres « the best » car il existe différentes approches et de sites Web ont des exigences différentes. J'ai choisi Bootstrap pour cet article car il a un solide niveau d'adoption, est entièrement documentée et est inclus dans les modèles d'Application Web ASP.NET .

Ce qui est des données d'amorçage ?

Bootstrap est une infrastructure d'interface utilisateur réactive pour la création de sites Web. Le cadre « bootstrap », comme de nombreuses autres infrastructures d'interface utilisateur pour le développement Web, est une collection de classes CSS, des composants d'interface utilisateur et des plugins JQuery. Bootstrap est considéré comme une infrastructure légère. En d'autres termes, il utilise CSS plus de JavaScript pour faire son travail. Même si les données d'amorçage sont considéré comme léger, une page Web qui utilise l'outillage Bootstrap nécessite toujours un traitement plus important pour le rendu d'une page écrite spécialement pour un facteur de forme donnée. Pour cette raison, les performances devrait être une considération importante lors de concevoir, de développer et de tester des pages qui utilisent n'importe quelle partie du cadre « bootstrap ».

Bootstrap fait beaucoup pour vous automatiquement. Il vous permet également de personnaliser facilement le comportement par défaut pour un facteur de forme spécifique tout en gardant votre page au beau fixe sur les autres facteurs de forme. Version 3 du Bootstrap est livré avec les classes CSS qui ciblent spécifiquement les largeurs de navigateur trouves couramment sur les navigateurs mobiles, tablet navigateurs, navigateurs de bureau et les navigateurs même en cours d'exécution sur les grands écrans de bureau. Vous pouvez utiliser les classes CSS de Bootstrap pour annoter les éléments de HTML5. Les plus couramment utilisé des classes CSS impliquent le système de grille « bootstrap », une collection de classes qui organisent la mise en page d'une page à l'aide de lignes et colonnes. Je vais décrire le système de grille plus en détail plus loin dans cet article.

Bootstrap a un certain nombre de composants d'interface utilisateur pour la création d'un site UI, y compris le bouton déroulant, groupe de boutons, liste déroulante Navbar, fil d'Ariane, Media object, barre de Pagination et de progrès, pour n'en nommer que quelques-uns. Beaucoup de ces composants répondent eux-mêmes, ce qui signifie qu'ils rendent différemment selon la largeur du navigateur. Par exemple, la barre de navigation est un composant puissant qui passe automatiquement à une barre de menu qui affiche les options de menu sur toute la largeur de l'écran sur des ordinateurs de bureau d'une version compacte de joli qui présente des options via une barre de menu de liste déroulante qui est activé lorsque l'utilisateur touche la barre de navigation.

Pour des fonctionnalités plus avancées de l'interface utilisateur, Bootstrap possède également une collection de personnalisé JQuery plug-ins, y compris Carousel, Panneau réductible, boîte de dialogue modale et de messages de kangourou.

Mise en route

Le Bootstrap CSS et les fichiers JavaScript sont automatiquement inclus dans votre projet lorsque vous utilisez le modèle d'Application Web ASP.NET pour Visual Studio 2013 pour créer votre projet. La boîte de dialogue Nouveau projet pour les modèles de l'Application Web s'affiche dans Figure 1. Bootstrap nécessite également de JQuery. Lorsque vous obtenez Bootstrap à partir du modèle d'Application Web Visual Studio 2013, vous obtenez v3.0.0 Bootstrap avec JQuery v1.10.2. Si vous utilisez les modèles de Visual Studio 2012, ces fichiers ne pas être inclus dans votre projet. Aussi, Bootstrap n'est pas inclus automatiquement si vous créez un nouveau site Web à l'aide du fichier | Nouveau Site Web.

Figure 1 Visual Studio 2013 nouveau projet dialogue pour le modèle d'Application Web ASP.NET

Si vous préférez utiliser les versions plues récentes et de Bootstrap et JQuery, utilisez NuGet pour mettre à jour votre projet. Et permet d'obtenir des données d'amorçage si vous avez une version de Visual Studio avant Visual Studio 2013 NuGet. Le site « bootstrap » (getbootstrap.com) montre comment faire un lien vers une version hébergée CDN du Bootstrap, qui peut fournir un avantage de performance significatifs.

Expérimenter avec le système de grille Bootstrap

Bootstrap fournit ce que l'on appelle de 12 colonnes, soit recevable. Vous pouvez présenter vos pages à l'aide de n'importe quel nombre de lignes, mais vous devez utiliser 12 colonnes. Ces douze colonnes sont de taille égale sur toute la largeur du navigateur et vous permet de spécifier le nombre de colonnes un élément HTML devrait occuper les classes CSS de Bootstrap. Il s'agit d'un autre type de système de quadrillage que XAML développeurs pour Windows Phone et Windows 8 sont habitués. Le système de grille XAML permet une mise en page avoir un nombre quelconque de lignes et de colonnes. Les développeurs puis placez chaque contrôle dans une cellule en spécifiant un numéro de ligne et un numéro de colonne. Ce qui rend le système de grille Bootstrap particulièrement puissante, c'est que vous pouvez spécifier une étendue de colonne différents pour grands ordinateurs de bureau, les ordinateurs de bureau normales, les tablettes et les téléphones. Par exemple, un modèle de mise en commun est de créer une série de balises div pour chaque div spécifiez qu'il doit occuper 2 colonnes sur un grand bureau (ce qui signifie que les 6 divs tiendraient sur chaque ligne), 3 colonnes sur un ordinateur de bureau normal, 4 colonnes sur une tablette et 6 colonnes sur un téléphone (qui produirait 2 divs par rang). Ce scénario est codé en Figure 2 en utilisant les classes col * qui composent le système de grille Bootstrap. Les classes de couleur (gris, orange et ainsi de suite) simplement colorer l'arrière-plan d'un div. Figure 3 et Figure 4 montrer la manière dont cette page serait restituée sur un bureau et un téléphone, respectivement.

Figure 2 modèle de disposition commune en utilisant le système de grille Bootstrap

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

Figure 3 l'exemple de la Figure 2 rendu sur un ordinateur de bureau en utilisant la classe col-md-3

Figure 4 l'exemple de la Figure 2 rendu sur un téléphone à l'aide de la classe de col-xs-6

Il est important de noter que le Bootstrap ne détecte en fait le type de périphérique. Au contraire, Bootstrap utilise des requêtes de médias pour déterminer si une classe CSS doit être appliquée. Les quatre catégories de classes sont indiquées en Figure 5, ainsi que les plages de largeur qui fera de chaque catégorie à appliquer.

Figure 5 grille Bootstrap système classe catégories

Préfixe de la catégorie	Facteur de forme	Largeur en Pixels
Col - xs-*	Téléphone	Moins de 768
Col - sm-*	Tablette	768 à 991
Col - md-*	Ordinateur de bureau	992 à 1 200
Col - lg-*	Grand bureau	Supérieure à 1 200

 

Vous pouvez utiliser n'importe quelle combinaison de ces catégories lors de la pose sur un élément HTML spécifique. Par exemple, la ligne suivante de code utilise une classe à partir de chaque catégorie :

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

Cela revient au pseudo-code suivant :

Si la largeur du navigateur est inférieure à 768 pixels, puis cette div aura une durée de 6 de 12 colonnes disponibles, qui reprend un demi (6/12) de l'écran.

Sinon, si la largeur du navigateur est entre 768 pixels et 991 Pixel, puis cette div s'étendra sur 4 des 12 colonnes disponibles, reprenant un tiers (4/12) de l'écran.

Sinon si la largeur du navigateur est entre 992 pixels et 1 200 pixels, puis cette div s'étendra sur 3 des 12 colonnes disponibles, reprenant un quart (3/12) de l'écran.

Sinon si la largeur du navigateur est supérieure à 1 200 pixels, puis cette div s'étendra sur 2 des 12 colonnes disponibles, reprenant un sixième (2/12) de l'écran.

Vous n'avez pas à spécifier explicitement un nombre de colonnes pour chaque catégorie. Si vous ne spécifiez pas une catégorie particulière, la catégorie suivante vers le bas en taille servira. Par exemple, si vous désirez un schéma unique pour les téléphones, mais c'est OK pour les tablettes, les ordinateurs de bureau et les ordinateurs de bureau grands d'avoir la même disposition, il vous suffit de spécifier une classe pour téléphone et tablette. comme suit :

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

Bootstrap utiliseront les paramètres de la tablette pour les deux des facteurs de forme de bureau ordinateurs de bureau et grand. En outre, la classe par défaut pour téléphone est col-xs-12, qui place chaque div sur sa propre ligne. S'il s'agit d'une disposition acceptable pour un téléphone, la ligne précédente de code peut être réduite :

<div class="col-sm-4"> {HTML elements here.} </div>

Notez que dans Figure 2 que les lignes ne sont pas précisés. Le système de grille Bootstrap se déplacera automatiquement un div à la ligne suivante si la ligne actuelle a déjà été épuisée ou s'il n'y a pas assez de place pour les div. Vous pouvez forcer une nouvelle ligne à l'aide de la classe de rang comme suit :

<div class="row">
  {Place columns here.}
</div>

Pourquoi 12 colonnes ? 12 peut ressembler à un nombre choisi au hasard pour ce système de grille, mais ce n'est pas. Le nombre 12 fournit beaucoup de divisibilité et de beaucoup de place pour la composabilité. Par exemple, les numéros 1, 2, 3, 4, 6 et 12 que tout répartir uniformément en 12. À l'aide de ces valeurs pour les travées de colonne peut produire une disposition du contenu de 12 colonnes, 6 colonnes, 4 colonnes, 2 colonnes et 1 colonne, respectivement. En outre, les combinaisons comme 3 + 9, 9 + 3, 4 + 8 et 8 + 4 sont visuellement attrayant des combinaisons pour la pose le contenu.

Composants « bootstrap »

Bootstrap contient plus de 20 composants, qui peuvent être utilisés dans leur état actuel ou facilement étendus. Consulter le site Bootstrap pour obtenir une description de chaque composante et un exemple d'utilisation. La documentation pour les médias s'opposer même fait usage d'un vidéoclip de REO Speedwagon son utilisation. Même si vous n'ont pas grandi dans les années 80, envisager de lui donner une écoute.

Je vais prendre regarder de plus près le composant de barre de navigation, qui est utilisé pour créer une barre de menus en haut d'une page. Figure 6 montre comment utiliser le composant de barre de navigation pour créer un menu simple qui contient la marque d'un site et quelques options de menu. Lorsque la largeur d'un navigateur est plus large que 768 pixels, la barre de navigation est restituée comme le montre Figure 7. Si la largeur du navigateur est inférieure à 768 pixels, la barre de navigation est restituée comme le montre Figure 8. Dans ce cas, les options du menu sont affichent lorsque l'utilisateur clique sur le bouton contenant les lignes horizontales.

Figure 6 utilisation du composant de barre de navigation « bootstrap »

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Figure 7 la barre de navigation rendue pour des largeurs de navigateur égale ou supérieure à 768 Pixels

Figure 8 rendu pour des largeurs de navigateur de la barre de navigation inférieure à 768 Pixels

De toute évidence, il s'agit d'un exemple très simple. La barre de navigation peut également contenir des boutons de menu déroulant, et vous pouvez même intégrer la fonctionnalité de recherche dans la barre de navigation. En outre, la partie de la marque de la barre de navigation, qui est le texte dans l'exemple, peut être une image.

JQuery Plug-Ins

Bootstrap a environ une douzaine JQuery plug-ins, qui sont documentés sous l'onglet JavaScript sur le site de Bootstrap. À première vue, ils regardent même fonction que les pièces mentionnées dans la section précédente en ce qu'ils sont classes CSS utilisées pour augmenter les éléments HTML5. Toutefois, ces classes CSS déclenchent l'activité JQuery lors du rendu de l'élément HTML, ou lors de divers événements déclenchent l'élément HTML. Les pages qui font un usage intensif de ces plug-ins doivent être testés pour des problèmes de performances, surtout sur les appareils avec des processeurs plus lents et peu de mémoire.

Le JavaScript nécessaires à l'exécution de que ces plug-ins se trouve dans bootstrap.js. Chaque plug-in est également disponible en tant que fichier autonome, qui vous permet d'inclure seulement les plug-ins a besoin de votre application, ayant pour résultat plus vite rendu de première page.

Figure 9 montre comment utiliser le plug-in, de carrousel qui fournit la fonctionnalité de diaporama. Si votre page contient déjà un lien vers bootstrap.js ou bootstrap.min.js, vous êtes tous ensemble. Ou vous pouvez lier à carousel.js si le plug-in du carrousel est le seul plug-in requiert de votre page.

La figure 9 en utilisant le plug-in de carrousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Figure 10 montre le carrousel plug-in pour Windows Phone. Le carrousel plug-in s'étend elle-même convenablement pour tablette, facteurs de forme de bureau ordinateurs de bureau et grand.

Figure 10 l'exemple de carrousel restitué dans l'émulateur de Windows Phone

Considérations

Comme j'ai mentionné précédemment, Bootstrap ne sera pas bon pour toutes les situations. Pour déterminer que si les données d'amorçage est bonne pour votre site, il y a quelques choses que vous voudrez considérer :

1. Si vous avez un site existant qui a été réglé performance au cours des années et a été optimisé pour vos utilisateurs, vous aurez envie de faire preuve de prudence. Pages de prototypage complexe, très utilisé est également une bonne idée. Si une page compatible Bootstrap n'effectue pas correctement, envisager la mise en place d'un site de m et tout codage vous-même. Dino Article de Esposito, "mobiliser d'un Site Web existant" (bit.ly/1CaVEWR), montre comment mettre en place un site de m.
2. Si vous créez un nouveau site, le prototype seront plus fortement utilisés vos pages plus complexes et les pages que vous croyez. S'assurer qu'ils fonctionnent bien sur les appareils bas de gamme et dans les zones de faible bande passante. Si une page s'avère problématique, puis essayez de refonte il sorte qu'il exécute convenablement. Un site-m est également une option pour les nouveaux sites, mais cela devrait être fait que si une refonte ne fonctionnera pas.
3. Assurez-vous que le système de grille Bootstrap et les composants utilisés pour la navigation ne sont pas trop restrictive en ce qui concerne la conception du site. Vérifiez auprès de vos concepteurs UX tôt dans le processus d'enquête­Gate Bootstrap. À mon avis, un outil comme Bootstrap vous oblige à concevoir pour mobile, qui vous oblige à garder vos pages, propre et sans encombrement. Toutefois, votre concepteur UX peut confirmer si les données d'amorçage peuvent être rendue pour bien représenter votre marque et offrir une expérience appropriée pour vos utilisateurs.

Plus d'informations et outils

Si vous allez développer votre site en utilisant les données d'amorçage, vous aurez envie de revoir tous les composants et les plugins JQuery documentée sur le site « bootstrap », où vous trouverez également de nombreux exemples utiles. Vous devriez également vérifier :

• Bootswatch (bootswatch.com) contient des thèmes gratuits pour Bootstrap.
• Envelopper le Bootstrap (wrapbootstrap.com) contient des thèmes Bootstrap peu coûteux et modèles.
• Polices Awesome (fontawesome.io) est un site qui fournit des icônes gratuits vectoriels évolutifs pouvant être facilement personnalisé avec CSS.
• "Déployer un ASP.NET MVC 5 Mobile Application Web sur les sites Web d'Azur" (bit.ly/1CMOGwq) montre comment appliquer le Bootstrap à un site Web existant pour le rendre facile à mobile. L'article montre également comment déployer un site sur Microsoft Azure.

Synthèse

Le matériel présenté ici est juste un bref aperçu de l'infrastructure d'interface utilisateur de Bootstrap. Il décrit en aucun cas complètement tous les CSS classes, composants et plug-ins qui viennent avec Bootstrap. Vous aurez envie d'aller sur le site Bootstrap pour obtenir une compréhension complète de tous les outils disponibles et d'explorer les pages qui illustrent les différentes conceptions UX. Ces échantillons sont un bon point de départ si vous avez besoin pour avoir une idée de ce qui est possible avec Bootstrap.

Avant d'aller de l'avant avec un effort de développement sérieux à l'aide de Bootstrap ou tout autre cadre, considérez les performances et la convivialité. Pages-clés prototypage est le meilleur moyen de confirmer que les données d'amorçage peut être intégré à votre site et vous donner les résultats que vous voulez.

---

Keith Pijanowski est un ingénieur, l'entrepreneur et l'entreprise gars Il a plus de 20 ans d'expérience dans l'industrie du logiciel et a travaillé pour les startups et des grandes entreprises dans des rôles qui vont de l'écriture de code pour le développement des affaires. Le contacter au keithpij@msn.com ou twitter.com/keithpij.

Merci aux experts techniques Microsoft suivants d'avoir relu cet article : Rick Anderson et Cephas Lin