Intégration multimédia S3 (M3206) - TP n° 1

Dans cette séance de TP on va apprendre à installer Bootstrap en utilisant deux méthodes.

Puis, on verra comment Bootstrap modifie les propriétés CSS par défaut des éléments HTML.

Finalement, on verra comment modifier une règle CSS déjà définie dans Bootstrap.

Avant de commencer, créez un répertoire nommé m3206-tp1 contenant des répertoires exo1, exo2, etc. Chacun de ces répertoires contient votre travail sur l'exercice correspondant. Le fichier HTML de chaque exercice doit s'appeler index.html.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire m3206-tp1 et le soumettre sur AMeTICE.

Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera affiché sur le forum du cours après l'évaluation des exercices.

Installer Bootstrap

Pour utiliser Bootstrap dans une page web, il faut importer un fichier CSS et une fichier JS. En plus, le fichier JS a des dépendances, donc il faut ajouter encore deux autres fichiers JS.

Chacun de ces fichiers peut être lié de deux façons :

  1. Par CDN : on charge un fichier qui est en ligne, sur un serveur externe, accessible via une URL.
  2. En local : on télécharge le fichier dans le répertoire racine et on donne son adresse relative.

(1) Par CDN

Allez sur getbootstrap.com / Get started / Quick start.

Copiez le lien vers les règles CSS dans l'élément head (juste avant la balise fermante) et les trois liens vers les scripts JavaScript dans l'élément body (juste avant la balise fermante aussi).

Il y a donc quatre liens dans votre fichier HTML :

  1. un lien vers le fichier CSS de Bootstrap
  2. un lien vers le fichier JS de jQuery
  3. un lien vers le fichier JS de Popper.js
  4. un lien vers le fichier JS de Bootstrap

L'ordre de ces quatre liens est important.

Exercice 1

Écrivez un petit document HTML qui contient au moins un élément h1, un élément p, et les liaisons vers Bootstrap par CDN. Vérifiez (en regardant la console de votre navigateur web) que Bootstrap est bien chargé.

(2) En local

Pour charger les fichiers de Bootstrap en local, il suffit de modifier ses deux liens (pour le CSS et pour le JS).

Allez sur getbootstrap.com / Download / Compiled CSS and JS / Download.

Décompressez l'archive et placez-le dans le répertoire du document HTML. La description de tous les fichiers téléchargés se trouve ici.

Il suffit d'avoir ceci (vous pouvez effacer les autres fichiers) :

bootstrap/
├── css/
│   └── bootstrap.min.css
└── js/
    └── bootstrap.min.js

Donc, la structure de la page web doit être :

votre-site-web/
├── bootstrap/
│   ├── css/
│   │   └── bootstrap.min.css
│   └── js/
│       └── bootstrap.min.js
└── index.html

Ensuite, il faut remplacer les liens de Bootstrap par CDN par des liens en local :

  1. pour le fichier CSS : <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  2. pour le fichier JS : <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Vous pouvez aussi remplacer les liens par CDN vers jQuery et Popper par des liens en local pour pouvoir travailler complètement hors-ligne.

Exercice 2

Répétez l'exercice précédent en faisant les lien vers les fichiers de Bootstrap en local.

La liaison vers jQuery et Popper est nécessaire seulement pour certains outils de Bootstrap. Ces outils sont répertoriés dans la documentation de Bootstrap (ici).

Bilan

Si on installe Bootstrap par CDN :

Si on l'installe en local :

Les règles CSS de Bootstrap

Bootstrap définit les règles CSS de beaucoup d'éléments HTML pour que la page web soit affichée pareil sur tous les navigateurs web. Si vous avez téléchargé les sources, vous pouvez lire ces règles CSS dans le fichier bootstrap.css.

Autrement, vous pouvez voir les règles CSS d'un élément HTML directement dans votre navigateur web, dans les Outils de développement web. Cela permet de modifier une règle CSS et de voir son effet en temps réel, ou de retrouver une règle CSS dans un ensemble de fichiers.

Vous trouverez plus d'information dans ce lien.

Exercice 3

Dans cet exercice vous allez voir comment Bootstrap redéfinit les règles CSS des éléments HTML. Pour cela, vous devez trouver une règle dans le document CSS de Bootstrap et la modifier.

Reprenez le document HTML de l'exercice 2 et ajoutez un lien (<a>) dans le paragraphe. Vous devez alors trouver la règle CSS qui définit la couleur du texte dans le lien (propriété color) dans le fichier CSS local et modifier sa valeur pour qu'il soit vert (green).

Pour cet exercice, faites le lien vers le fichier non-minifié, bootstrap.css, à la place de boostrap.min.css.

Vérifiez que votre modification est prise en compte.

Remarquez que le fichier CSS de Bootstrap ne contient que des règles CSS et des requêtes média. Vous pouvez donc tout comprendre dedans, et il ne faut pas hésiter à le lire pour bien comprendre ce que Bootstrap fait.

Modifier les règles CSS de Bootstrap

Si vous voulez définir une règle CSS qui est déjà définie dans Bootstrap, vous avez deux options :

  1. Modifier le fichier CSS de Bootstrap. C'est une très mauvaise idée pour plusieurs raisons.
  2. Ajouter une nouvelle règle.

Quand il y a deux règles CSS identiques avec des valeurs différentes, CSS utilise un algorithme pour décider laquelle il doit utiliser. Cet algorithme est assez complexe. La solution la plus simple est la suivante :

  1. Créez un nouveau fichier CSS vide.
  2. Copiez l'ancienne règle CSS (le sélecteur et la déclaration) et collez-la sur le fichier vierge. Vous pouvez trouver cette régle grâce aux outils de développement web de votre navigateur web.
  3. Changez la valeur dans ce fichier.
  4. Faites la liaison de votre fichier HTML vers le nouveau fichier CSS, mais après le lien vers Bootstrap (par CDN ou en local).

Cette règle modifiée écrasera l'ancienne car elle est lue après.

Exercice 4*

Dans cet exercice vous allez mettre en pratique la modification d'une règle CSS.

Prenez ce document HTML et faites le nécessaire pour faire les modification suivantes :

  • La marge inférieure de l'élément h1 doit être de 2rem.
  • La taille de la bordure de la classe border doit être de 5 pixels.
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>M3206</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  </head>
  <body>
    <h1>Exercice 4 du TP n° 1</h1>
    <p class="border">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus nisl in enim mollis dictum. Vivamus eu nulla odio. Vivamus condimentum ante et diam malesuada, vitae pretium eros elementum. Nulla facilisi. Nunc vel tempor sapien. Sed luctus egestas lectus vitae condimentum. Sed ac sem nibh. Mauris blandit placerat pellentesque. Sed pellentesque quis mauris et feugiat. Aliquam accumsan laoreet sem quis malesuada. 
    </p>
    <p class="border">
      Aenean sed nulla sed diam varius vestibulum eget vehicula ante. In mattis tristique ante. Morbi magna eros, efficitur vel tempus et, vulputate sit amet leo. Ut pretium purus metus, sed auctor felis ullamcorper vitae. Quisque sed tortor at magna pharetra ultricies ac ac tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce orci sapien, viverra ullamcorper ultricies ac, tempus eget turpis 
    </p>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Vérifiez, visuellement mais aussi à l'aide des outils de développement web de votre navigateur web, que les nouvelles règles CSS écrasent celles définies dans Bootstrap.

L'utilisation d'un framework CSS ne doit pas vous imposer des règles de style. Il est donc utile de savoir le modifier pour le personnaliser selon votre goût, mais aussi pour vous distinguer des autres sites web utilisant le même framework.

Pour une modification plus profonde de Bootstrap, vous pouvez créer un thème, mais pour cela il faut connaître le langage Sass.

Annexe

Utilisez ces raccourcis clavier pour travailler plus efficacement et laisser la souris tranquille :

Alt + Tab
Changer de fenêtre
Super +
Agrandir la fenêtre. Essayez aussi les autres flèches
Ctrl +
Déplacer le curseur au début du mot suivant. Essayez aussi
Ctrl + Début
Déplacer le curseur au début du texte. Essayez aussi Fin
Ctrl + PageUp
Changer d'onglet. Essayez aussi PageDown