Mis à jour le mercredi 12 juillet 2017
  • 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mise en route

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Pour utiliser efficacement Bootstrap, vous devez déjà être convaincu de son utilité, vous devez aussi savoir l'installer. Ce chapitre est destiné à vous faire découvrir en quoi Bootstrap peut vous aider et comment vous devez le mettre en œuvre pour l'utiliser efficacement. Nous aborderons également les Medias Queries que Bootstrap utilise pour que les pages s'adaptent automatiquement au support utilisé pour les visualiser.

Un framework ?

Avant toute chose, il faut définir ce qu'est un framework. Il s'agit d'un ensemble de composants structurés qui sert à créer les bases et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en terme de productivité ou de simplification de la maintenance. Il en existe beaucoup pour les applications web qui ciblent de nombreux langages : Java, Python, Ruby, PHP…

Il existe des frameworks côté serveur (désignés backend en anglais), et d'autres côté client (désignés frontend en anglais). Bootstrap fait partie de cette deuxième catégorie. Les frameworks CSS sont spécialisés, comme leur nom l'indique, dans les CSS ! C'est-à-dire qu'ils nous aident à mettre en forme les pages web : organisation, aspect, animation… Ils sont devenus à la mode et il en existe un certain nombre :

Bootstrap est un framework CSS, mais pas seulement, puisqu'il embarque également des composants HTML et JavaScript. Il comporte un système de grille simple et efficace pour mettre en ordre l'aspect visuel d'une page web. Il apporte du style pour les boutons, les formulaires, la navigation… Il permet ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutées. Le framework le plus proche de Bootstrap est sans doute Foundation qui est présenté comme « The most advanced responsive front-end framework in the world ». Cette absence de modestie est-elle de mise ? Je pense que c'est surtout une affaire de goût et de préférence personnelle. En tout cas en terme de popularité c'est Bootstrap qui l'emporte haut la main.

Les intérêts

  • Les navigateurs sont pleins de fantaisies et ont des comportements très différents malgré leur lente convergence vers les standards. Les frameworks sont cross-browser, c'est à dire que la présentation est similaire quel que soit le navigateur utilisé et d'une parfaite compatibilité.

  • Les frameworks CSS font gagner du temps de développement parce qu'ils nous proposent les fondations de la présentation.

  • Les frameworks CSS normalisent la présentation en proposant un ensemble homogène de styles.

  • Les frameworks CSS proposent en général une grille pour faciliter le positionnement des éléments.

  • Les frameworks CSS offrent souvent des éléments complémentaires : boutons esthétiques, barres de navigation, etc...

  • La grande diffusion de nouveaux moyens de visualisation du web (smartphones, tablettes…) impose désormais la prise en compte de tailles d'écran très variées ; les frameworks CSS prennent généralement en compte cette contrainte.

Les inconvénients

  • Pour utiliser efficacement un framework il faut bien le connaître, ce qui implique un temps d'apprentissage.

  • La normalisation de la présentation peut devenir lassante en lissant les effets visuels.

Par rapport aux deux inconvénients énoncés, Bootstrap est d'une prise en main rapide même pour un débutant et est totalement configurable parce qu'il est construit avec LESS (que nous verrons dans le cours).

Découverte de Bootstrap

Origine de Bootstrap

Vous connaissez forcément Twitter, un des principaux réseaux sociaux qui inondent la planète de liens virtuels entre les humains devenus des noyaux cybernétiques. Le projet Bootstrap a été créé au départ par Mark Otto et Jacob Thornton pour répondre à des besoins internes de développement de cette entreprise au niveau de l'uniformisation de l'aspect des pages web. Il s'agissait juste de stylisation CSS, mais le framework s'est ensuite enrichi de composants Javascript.

Il a ensuite été publié en 2011 en devenant rapidement populaire parce qu'il est venu se positionner dans un espace vacant du développement. Son système de grille de 12 colonnes est devenu une référence. D'autre part sa mise en œuvre est aisée et se limite à référencer quelques librairies, comme nous allons bientôt le voir.

Il a été mis à disposition du public sous licence Apache. Le framework en est actuellement à la version 3. Celle-ci a pris un virage particulier en intégrant l'aspect « responsive » par défaut, alors qu'auparavant cette fonctionnalité faisait l'objet d'un fichier séparé. Cette version est même déclarée comme « mobile-first ». Avec l'utilisation croissante d'appareils mobiles, le framework s'est adapté pour offrir une solution censée couvrir tous les besoins.

Contenu du kit

Bootstrap propose :

  • Une mise en page basée sur une grille de 12 colonnes bien pratique. Bien sûr, si vous avez besoin de plus de 12 colonnes, ou de moins, il est toujours possible de changer la configuration ;

  • L'utilisation de Normalize.css ;

  • Du code fondé sur HTML5 et CSS3 ;

  • Une bibliothèque totalement open source sous license MIT;

  • Du code qui tient compte du format d'affichage des principaux outils de navigation (responsive design) : smartphones, tablettes… ;

  • Des plugins jQuery de qualité ;

  • Un résultat cross-browser (la prise en charge de IE7 a été abandonnée avec la version 3), donc une garantie de compatibilité maximale ;

  • Une bonne documentation ;

  • La garantie d'une évolution permanente ;

  • Une mine de ressources variées sur le web ;

  • Une architecture basée sur LESS, un outil bien pratique qui étend les possibilités de CSS (un portage sur SASS existe également).

Vous pouvez trouver toutes les informations sur Bootstrap directement sur le site dédié.

C'est quoi unnormalize.css?

Les navigateurs n'adoptent pas tous les mêmes valeurs par défaut pour les styles des éléments HTML. Cela peut générer quelques surprises au rendu des pages web selon le navigateur utilisé. D'autre part certains navigateurs présentent des défauts de prise en compte de certains éléments.Normalizeest un petit fichier CSS qui établit des règles pour avoir un rendu identique quel que soit le navigateur utilisé. Au lieu d'agir brutalement comme les reset CSS qui remettent toutes les valeurs à zéro,normalizeagit intelligemment en conservant ce qui est utile et en jouant finement sur les éléments. Vous pouvez trouver le détail des règles appliquées avec leur explication ici.

Évolution de Bootstrap

Bootstrap est un framework très populaire qui évolue très rapidement avec l'arrivée fréquente de nouvelles versions. C'est à la fois un avantage (il s'améliore de plus en plus) et un inconvénient (le code qu'on a écrit pour une mise en page devient rapidement obsolète pour les nouvelles versions). Le passage à la version 3 a été une petite révolution avec de très nombreux changements, en particulier une refonte complète de la grille. Un site écrit avec la version 2 doit être totalement réécrit pour cette nouvelle version, mais ce n'est évidemment pas une obligation. L'évolution du framework s'est faite essentiellement en direction des appareils nomades qui constituent peu à peu le parc le plus important d'appareils pour surfer sur Internet.

La principale source d'information pour connaître les changements des nouvelles versions est le blog officiel. Il est aussi intéressant de s'informer en amont sur la page GitHub du projet pour connaître les demandes des utilisateurs (Pull Requests) et les problèmes rencontrés (Issues).

La prochaine version majeure sera la version 4 avec de nombreuses améliorations en vue.

Installation

Installation de Bootstrap

L'installation de Bootstrap est simple : cliquez sur le bouton de téléchargement sur le site du framework. Vous avez à disposition trois boutons :

  • "Download Bootstrap" : permet de récupérer juste les fichiers nécessaires au fonctionnement de Bootstrap.

  • "Download source" : permet de récupérer en plus tous les fichiers sources.

  • "Download Sass" : c'est un portage de Bootstrap en Sass pour les utilisateurs de projets qui utilisent Sass (Rails, Compass...).

Vous pouvez aussi aller consulter directement le code source sur github, ou même l'installer avec Bower si vous utiliseznode.

Quand vous téléchargez la librairie avec le bouton "Download source", vous obtenez un fichier zippé contenant un répertoire bootstrap-3.3.7 qui contient lui-même un certain nombre de fichiers et de dossiers, comme le montre la figure suivante.

Les fichiers utiles pour simplement utiliser Bootstrap se situent dans le dossierdist(« distribution »), ce sont les seuls fichiers que vous obtenez si vous utilisez le bouton "Download Bootstrap".

Le dossier « dist » contient les fichiers utiles à l'utilisation de Bootstrap

Voyons un peu les principaux fichiers :

  • bootstrap.csscomporte les classes de base de Bootstrap ;

  • bootstrap.min.csscomporte les mêmes classes de base quebootstrap.cssmais est minifié ;

  • bootstrap-theme.csscontient des règles de styles particulières pour créer un thème spécifique pour Bootstrap ;

  • bootstrap-theme.min.cssest identique àbootstrap-theme.cssmais est minifié ;

  • glyphicons-halflings-regular.svgcomporte la collection d'icônes au format svg ;

  • glyphicons-halflings-regular.ttfcomporte la collection d'icônes au format ttf ;

  • glyphicons-halflings-regular.woffcomporte la collection d'icônes au format woff ;

  • glyphicons-halflings-regular.eotcomporte la collection d'icônes au format eot ;

  • bootstrap.jscontient le code JavaScript des composants de Bootstrap ;

  • bootstrap.min.jscontient le même code JavaScript mais est minifié ;

Les fichiersmin(bootstrap.min.css,bootstrap.min.jsetbootstrap-theme.min.css) contiennent le même code que leurs équivalents (bootstrap.css,bootstrap.jsetbootstrap-theme.css) mais ont été épurés des commentaires et compressés pour les alléger et accélérer ainsi leur chargement.

D'accord, mais que mettre sur un site pour que Bootstrap fonctionne ?

Il faut distinguer deux situations :

  1. Pendant la phase de développement, il est intéressant de pouvoir naviguer dans le code de Bootstrap, il faut donc mettre les fichiers non compressés.

  2. Lorsque votre site est en ligne, vous n'avez plus à vous inquiéter du code et seule compte la vitesse de chargement, il faut donc cette fois utiliser les versions compressées (min).

La figure suivante montre les fichiers utiles pendant la phase de développement (les fichiersbootstrap.jsetjquery.jsne sont à prévoir que si vous utilisez des plugins jQuery et le dossierfontsuniquement si vous utilisez les icônes).

Les fichiers utiles durant le développement

La figure suivante montre les fichiers utiles lorsque le site est en ligne (les fichiersbootstrap.min.js etjquery.js ne sont à prévoir que si vous utilisez des plugins jQuery et le dossierfonts uniquement si vous utilisez les icônes).

Les fichiers utiles en production

Dans les exemples de ce cours, je pars du principe qu'un répertoirebootstrap a été créé à la racine du site avec les trois répertoirescss,fonts etjs comportant les fichiers cités précédemment.

Pour que Bootstrap fonctionne il faut le déclarer dans les pages HTML, qui doivent être impérativement au format HTML 5, il faut donc prévoir le bon DOCTYPE :

<!DOCTYPE html>
    …

Il faut ensuite déclarer au minimum le fichierbootstrap.min.css (oubootstrap.css) dans l'en-tête de la page web :

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

À partir de là toutes les classes sont accessibles… Évidemment vous devez adapter le lien selon la localisation de vos fichiers.

Si vous utilisez des composants JavaScript, vous devez également référencer la librairie de Bootstrap ainsi quejQuery (la librairie jQuery ne fait pas partie des fichiers téléchargés avec Bootstrap et doit être récupérée indépendamment sur http://jquery.com/) :

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Et le fichier de thème ?

Ce fichier est un exemple d'amélioration de l'esthétique de Bootstrap, il n'est pas utile pour son fonctionnement. Si vous observez l'apparence des composants de Bootstrap, vous allez constater qu'ils sont « plats », sans aucun relief. Dans la version 2, ce n'était pas le cas. Pour des raisons de performances, il a été décidé d'offrir cette amélioration visuelle dans un fichier séparé. Si vous avez la curiosité de regarder ce fichier, vous verrez qu'il contient des définitions de dégradés et d'ombrages. Vous trouvez le résultat de l'application de ce thème sur cette page d'exemple. Nous reparlerons de ce fichier dans le chapitre concernant la configuration de Bootstrap.

Les CDN

CDN est l'acronyme de « Content delivery network » ; c'est un réseau de serveurs qui met à disposition des librairies. Il devient ainsi inutile de prévoir ces librairies sur son propre serveur, il suffit de « pointer » vers eux. Il y a des avantages à utiliser un CDN :

  • Libération de ressources et de la bande passante sur son propre serveur ;

  • Parallélisation des téléchargements (un CDN est sur plusieurs serveurs) ;

  • Accélération du chargement ;

  • Diminution de la latence ;

  • Actualisation automatique des librairies ;

  • Amélioration du référencement…

Y-a-t-il des inconvénients ?

D'après certains, l'utilisation d'un CDN, qui impose une requête DNS supplémentaire, ne serait judicieuse que si l'on a beaucoup de librairies à charger. D'autre part si vous modifiez le fichier CSS de Bootstrap pour l'adapter à vos besoins, vous ne pourrez plus bénéficier des avantages d'un CDN. Mais si vous voulez profiter de cette possibilité pour Bootstrap, utilisez bootstrapcdn. Vous pouvez évidemment utiliser un CDN également pour jQuery, par exemple chez Google.

Si vous utilisez des CDN, l'installation en est d'autant simplifiée. Vous n'avez qu'à adapter les appels des librairies :

<link <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
…
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Une trame pour démarrer

Le template de base

Vous trouvez aussi sur le site de Bootstrap un template de base et des exemples comportant l'essentiel des éléments pour vous aider à initier un projet. Pour le moment vous n'allez pas encore comprendre l'utilité de tous ces éléments, mais vous y reviendrez par la suite lorsque vous aurez fait le tour de ce cours.

Dans le template de base, vous trouvez en premier cette ligne :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Cette déclaration ne concerne que le navigateur Internet Explorer. Elle permet de s'assurer qu'il utilise la dernière version du moteur de rendu. Notez que cette ligne ne passe pas la validation W3C.

On trouve ensuite cette ligne :

<meta name="viewport" content="width=device-width, initial-scale=1">

Cette ligne concerne uniquement les mobiles. On demande que l'affichage occupe tout l'espace disponible avec une taille de 1, autrement dit sans zoom. Vous pouvez aller encore plus loin en interdisant le zoom ou en le limitant à certaines valeurs.

On trouve ensuite la déclaration du fichier CSS dans sa version minifiée :

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

On trouve ensuite ces déclarations :

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Le but de ces appels est de permettre aux navigateurs ne prenant pas en charge HTML5 et les Media Queries CSS3 de le faire ; ils visent essentiellement IE8. Pour obtenir plus de renseignements surrespond.js vous pouvez aller sur la page GitHub. Méfiez-vous en particulier si vous utilisez un CDN pour charger vos styles CSS, parce querespond.js utilise AJAX et vous pouvez buter sur le problème d'accès à plusieurs domaines.

Le but du fichierhtml5shiv est de créer les éléments (avec createElement) de type bloc du HTML 5 (header, section, aside…) qui sont ignorés par IE8.

En fin de page (pour ne pas ralentir le chargement) se trouvent les appels JavaScript (utiles si vous utilisez des plugins jQuery, comme nous allons le voir dans ce cours) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

En résumé on obtient ce code (en simplifiant les références et en supposant que tous les fichiers sont situés dans un dossierbootstrapet des sous-dossiers fonctionnels) :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Bootstrap template</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

Un template de démarrage

Vous pouvez trouver également sur le site 18 templates d'exemple. Les éléments nécessaires à la compréhension de ces exemples seront exposés tout au long de ce cours. Voyons toutefois le premier exemple, qui est le plus simple :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

On retrouve ce qu'on a vu précédemment avec la ligne pour les mobiles et l'appel au fichier CSS de Bootstrap. On trouve la référence d'un autre fichier CSS :starter-template.css. Voyons ce que contient ce fichier :

body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

Nous verrons, lorsque nous parlerons du composant "Barre de navigation" de Bootstrap, qu'il faut parfois réserver un espace en haut de la page (avecpadding-top: 50px) pour éviter que le texte du début ne se retrouve sous la barre. On trouve aussi ici la classestarter-template qui se contente de fixer un espace interne et un alignement centré du texte. Cette classe ne sert que pour le texte de présentation du template et peut être supprimée ou modifiée selon votre convenance.

On trouve aussi dans la page une trame de la barre de navigation (je vous explique tout ça en détail dans ce cours) :

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Le contenu de la page est ensuite inséré dans une DIV comportant la classecontainer:

<div class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</div><!-- /.container -->

Nous verrons également l'intérêt de cette classe et son utilisation. Considérez les exemples de templates fournis sur le site de Bootstrap à la fois comme des guides de démarrage et des aides à la compréhension du framework. Évitez de les prendre tels quels sans en comprendre tous les éléments. À l'issue de ce cours vous aurez tout en main pour le faire…

Les Media Queries

Les Media Queries sont destinées à simplifier la création de pages web pour les rendre consultables sur des supports variés (tablettes, smartphones…). Cette section n'est qu'une introduction rapide à ce domaine qui mériterait un cours à lui tout seul.

Avec les Media Queries on peut cibler :

  • La résolution ;

  • Le type de media ;

  • La taille de la fenêtre (width et hight) ;

  • La taille de l'écran (device-width et device-height);

  • Le nombre de couleurs ;

  • Le ratio de la fenêtre (par exemple le 16/9) ;

  • etc.

La liste est longue, malheureusement peu de navigateurs actuels sont capables de digérer tout ça. On se limite en général à la taille de l'affichage, l'orientation et parfois le ratio.

Je ne comprends pas la différence entre taille de l'écran et taille de la fenêtre !

Ah ! Bonne réflexion. Cette distinction n'a aucun sens pour les écrans d'ordinateurs mais trouve tout son intérêt pour les smartphones. La taille de l'écran est la surface physique réelle alors que la taille de la fenêtre est celle dont le smartphone "pense" disposer. Par exemple pour un iPhone 4 la surface réelle est de 640x960 px et la surface de la fenêtre est de 320x480 px. Autrement dit un iPhone est pessimiste sur ses possibilités d'affichage !

Mais ce n'est pas le seul souci ! Le navigateur embarqué sur un smartphone a lui aussi une certaine idée de la surface d'affichage dont il dispose (le viewport). Par exemple, pour continuer avec l'exemple de l'iPhone 4, qui utilise Safari, ce dernier pense disposer d'une largeur de 980 px ! Sur ces appareils il est aussi possible d'utiliser le zoom et notre mise en page risque de s'en ressentir. On peut se demander comment s'en sortir dans tout ce bazar... Heureusement on dispose de la baliseMETA viewport pour fixer certaines valeurs, voici ce qui est préconisé dans le template de Bootstrap :

<meta name="viewport" content="width=device-width, initial-scale=1">
  • On ouvre la fenêtre à la largeur de l'écran :width=device-width

  • On règle le zoom :initial-scale=1

Vous pouvez aussi fixer d'autres valeurs. Par exemple, empêcher l'utilisateur de zoomer. Les principaux navigateurs permettent de tester le rendu sur mobile. Par exemple avec Firefox il faut utiliser la commande "Vue adaptative" dans le menu "Développement web".

Syntaxe des Media Queries

Une media query est une expression dont la valeur est soit vraie, soit fausse. Voici un exemple dans du code CSS :

@media (max-width: 767px) {
  …
}

@media est une règle apparue avec le CSS2. Elle permet à la base de cibler un media : écran, imprimante, projecteur… Cette règle est reprise et étendue avec le CSS3. L'expression située entre parenthèses est évaluée, et si elle est « vraie », les règles situées dans le bloc sont prises en compte.

Ici l'expression est(max-width: 767px), elle se comprend facilement. Elle est « vraie » si le support de visualisation de la page a une largeur d'affichage inférieure ou égale à 767px.

Oui, mais on n'a pas spécifié de média là !

Oui parce qu'on veut prendre en compte tous les médias existants ! Voici une syntaxe équivalente :

@media all and (max-width: 767px) { … }

On en profite pour voir qu'on peut combiner des éléments avec des opérateurs logiques.

Voici une autre expression avec le même opérateur logique :

@media (min-width: 768px) and (max-width: 979px) { … }

Ici, on veut prendre en compte les règles du bloc si l'affichage se situe entre 768px et 979px.

Si on veut appliquer des règles lorsque l'orientation est « portrait », voici la syntaxe à utiliser :

@media (orientation: portrait) { … }

Comme vous pouvez le voir, la syntaxe est simple, ce qui l'est moins ce sont les règles à définir. Mais quand vous utilisez Bootstrap, vous n'avez pas à vous soucier de tout ça… Si vous explorez le code de Bootstrap, vous trouverez beaucoup d'utilisation des Media Queries, comme par exemple ici, où est définie une règle de dimension maximale pour la classecontainer lorsque l'affichage est d'au moins 992 pixels :

@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
   …
}

Nous verrons plus loin dans ce cours que Bootstrap définit quatre types de medias selon la dimension de l'affichage. Voici la syntaxe utilisée :

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-tablet) { ... }

/* Medium devices (tablets, 992px and up) */
@media (min-width: @screen-desktop) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-large-desktop) { ... }

Les ressources

Bootstrap est un framework très populaire et les ressources correspondantes sont très nombreuses. Dans ce cours je vais présenter très peu de ces ressources pour me limiter à celles qui me semblent les plus importantes et en évitant de parler des extensions existantes qui mériteraient un chapitre entier.

Parmi tout ce qui est disponible il y a le site Bootply qui se démarque par son utilité. Je vous en parle dès cette introduction parce que c'est autant un outil d'apprentissage que de développement. La page de création se présente ainsi :

La page de création de Bootply
La page de création de Bootply

Il y a différentes zones de saisie : Javascript, css... Des assitants permettent de générer automatiquement du code : un simple élement ou un thème complet.

Vous pouvez l'utiliser comme boîte à outil pour tester les exemples de ce cours.

Pour toutes les autres ressources je vous renvoie à cet excellent site.

En résumé 

  • Bootstrap est un framework CSS qui comporte en plus des plugins jQuery pour composer des pages web.

  • Bootstrap est un framework récent qui a connu un développement et une popularité très rapide.

  • Bootstrap s'installe facilement en référençant quelques fichiers sur son serveur ou même en passant directement par des CDN.

  • Bootstrap propose des templates de démarrage pour éviter de partir avec une page blanche.

  • Bootstrap intègre des medias queries pour adapter les pages web à tous les supports de visualisation.

Exemple de certificat de réussite
Exemple de certificat de réussite