Dans cette séance de TP on va analyser une mise en page responsive et manipuler le code CSS de Bootstrap.
Avant de commencer, créez un répertoire nommé r312-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. Vos exercices ne seront pas corrigés si vous ne respectez pas ces instructions.
À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire r312-tp1 avec tous vos exercices 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 accessible après l'évaluation des exercices.
Il n'existe pas une méthode universelle pour concevoir une mise en page responsive pour un site web, mais il y a un ensemble de techniques utilisées couramment :
La meilleure façon d'apprendre est d'analyser des sites web.
Dans cet exercice vous allez analyser la mise en page responsive d'un site web.
Allez sur YouTube et analysez comment la mise en page change entre un petit écran (400 pixels) et un grand écran (1600 pixels). Faites un schéma de chaque mise en page différente avec son intervalle de largeur.
Pour utiliser Bootstrap dans une page web, il faut importer un fichier CSS et un fichier JavaScript.
Chacun de ces fichiers peut être lié de deux façons :
Allez sur getbootstrap.com / Docs / Quick start et copiez le modèle de l'étape 2, qui contient :
meta avec l'attribut name="viewport"
head, juste avant la balise fermante.
body, juste avant la balise fermante aussi
Puis, remplissez le code du fichier sachant que :
body
É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é. S'il n'y a pas d'erreurs, ça veut dire que tout marche. Ne confondez pas les erreurs avec les avertissements.
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 (effacez les autres fichiers) :
bootstrap/
├── css/
│ └── bootstrap.min.css
└── js/
└── bootstrap.bundle.min.js
Donc, la structure de la page web doit être :
votre-site-web/ ├── bootstrap/ │ ├── css/ │ │ └── bootstrap.min.css │ └── js/ │ └── bootstrap.bundle.min.js └── index.html
Ensuite, par rapport au modèle que vous avez vu, 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.bundle.min.js"></script>Répétez l'exercice précédent en faisant les liens vers les fichiers de Bootstrap en local.
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.
Quelques astuces (sur Firefox) :
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 3 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>R312</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<h1>Exercice 5 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://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 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.