Liens utiles : TD #2
Avant de commencer, créez un répertoire nommé r312-tp5 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 r312-tp5 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é après l'évaluation des exercices.
Adaptez le code HTML suivant pour faire une pagination avec Bootstrap
<!DOCTYPE html>
<html lang="fr">
<head>
<title>R312</title>
<meta charset="utf-8">
<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>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque vel lectus aliquet tempor ac a est. Vivamus non condimentum nibh. Morbi maximus lectus ullamcorper, ullamcorper libero ac, suscipit dui. Aliquam eget tortor urna. Vestibulum ac velit tincidunt, egestas urna et, molestie quam. Cras imperdiet, sapien quis tempor interdum, turpis lectus efficitur dui, a pretium leo magna non lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec facilisis ut nisi vitae sollicitudin. Duis pulvinar ultrices odio laoreet molestie. Donec lacinia placerat purus. Vestibulum felis leo, auctor et tortor ut, viverra malesuada ligula. Donec vehicula posuere nibh ut fringilla. Vestibulum quis pretium elit, ac posuere risus. Mauris ornare id ligula et tincidunt.
</p>
<p>
Sed eu mauris leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean id augue sed magna placerat euismod. Suspendisse nulla libero, sodales nec placerat eget, pharetra at lorem. Maecenas cursus malesuada mollis. Duis scelerisque leo sit amet elit mattis semper. Praesent porta blandit orci, et mollis ligula commodo ut. Phasellus dictum vel risus vel convallis. Praesent libero nibh, faucibus at ornare vel, elementum a nulla. Pellentesque vitae pharetra purus, at tincidunt odio. Vivamus vehicula vestibulum enim, vitae elementum orci fringilla id. Phasellus ac arcu non orci fermentum consequat non at mi. Proin ornare, odio a ultrices laoreet, libero est semper nisl, sed dapibus enim est vitae dolor. Curabitur laoreet odio et ipsum lobortis, ut laoreet purus cursus. Curabitur congue eleifend rhoncus.
</p>
<div class="row justify-content-center">
<div class="col-auto">
<a href="contents.php?page=1">Début</a>
…
<a href="contents.php?page=7">7</a>
<a href="contents.php?page=8">8</a>
<a href="contents.php?page=9">9</a>
…
<a href="contents.php?page=26">Fin</a>
</div>
</div>
</div>
<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>Vous pouvez consulter la documentation ici si vous en avez besoin.
Adaptez le code HTML suivant pour utiliser la barre de navigation de Bootstrap. De plus, la barre doit être cachée pour un tout petit écran.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>R312</title>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.active {
background-color: #04AA6D;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact" class="active">Contact</a></li>
<li class="dropdown">
<a href="#products" class="dropbtn">Products</a>
<div class="dropdown-content">
<a href="#products-hats">Hats</a>
<a href="#products-belts">Belts</a>
<a href="#products-socks">Socks</a>
</div>
</li>
<li style="float:right"><a href="#about">About</a></li>
</ul>
</body>
</html>Vous pouvez consulter la documentation ici si vous en avez besoin.
Adaptez le code HTML suivant pour utiliser le composant accordéon de Bootstrap.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>R312</title>
<meta charset="utf-8">
<style>
.cache {
display: none;
}
</style>
</head>
<body>
<div>
<h2>David Bowie (1967) <button>afficher</button></h2>
<p class="cache">
<em>David Bowie</em> est le premier album de David Bowie. Il est sorti au mois de juin 1967 chez Deram Records.
</p>
</div>
<div>
<h2>Space Oddity (1969) <button>afficher</button></h2>
<p class="cache">
<em>Space Oddity</em> est le deuxième album studio de David Bowie. Il est sorti en novembre 1969 chez Philips Records au Royaume-Uni sous le titre David Bowie et chez Mercury Records aux États-Unis sous le titre Man of Words / Man of Music. Il est plus connu sous le titre Space Oddity qui est utilisé à partir de sa réédition chez RCA Records en 1972.
</p>
</div>
<div>
<h2>The Man Who Sold the World (1970) <button>afficher</button></h2>
<p class="cache">
<em>The Man Who Sold the World</em> est le troisième album studio du chanteur britannique David Bowie. Il est sorti en novembre 1970 aux États-Unis et en avril 1971 au Royaume-Uni chez Mercury Records.
</p>
</div>
<div>
<h2>Hunky Dory (1971) <button>afficher</button></h2>
<p class="cache">
<em>Hunky</em> Dory est le quatrième album studio du chanteur britannique David Bowie. Il est sorti le 17 décembre 1971 chez RCA Records.
</p>
</div>
<script>
for (const btn of document.querySelectorAll('button')) {
btn.addEventListener('click', (event) => {
const p = event.target.parentNode.parentNode.querySelector('p')
if (p.classList.contains('cache')) {
for (const p2 of document.querySelectorAll('p')) {
p2.classList.add('cache')
p2.parentNode.querySelector('button').textContent = 'afficher'
}
p.classList.remove('cache')
event.target.textContent = 'cacher'
}
else {
p.classList.add('cache')
event.target.textContent = 'afficher'
}
})
}
</script>
</body>
</html>Vous pouvez consulter la documentation ici si vous en avez besoin.
Refaites l'exercice 2 du TD #2, mais cette fois-ci utilisez le composant offcanvas de Bootstrap.
Vous pouvez consulter la documentation ici si vous en avez besoin.