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.
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 :
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 :
L'ordre de ces quatre liens est important.
É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é.
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 :
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<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.
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).
Si on installe Bootstrap par CDN :
Si on l'installe en local :
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.
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.
Si vous voulez définir une règle CSS qui est déjà définie dans Bootstrap, vous avez deux options :
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 :
Cette règle modifiée écrasera l'ancienne car elle est lue après.
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 :
h1 doit être de 2rem.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.
Utilisez ces raccourcis clavier pour travailler plus efficacement et laisser la souris tranquille :