Bac à sable (sandbox) pour ce TD
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="https://getbootstrap.com//docs/4.1/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Bac à sable</title>
</head>
<body>
<div class="container">
<hr class="my-4"/>
<div id="titres">
<h1>Titre principal (h1)</h1>
<h2 class="h3">Titre secondaire, mais plus petit (h2)</h2>
</div>
<hr class="my-4"/>
<div id="lead">
<p class="lead">Un paragraph important</p>
<p>Un paragraph moins important</p>
</div>
<hr class="my-4"/>
<div id="elements-en-ligne">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
<hr class="my-4"/>
<div id="abreviation">
<abbr title="HyperText Markup Language" class="initialism">HTmL</abbr>
<abbr title="HyperText Markup Language">HTmL</abbr>
</div>
<hr class="my-4"/>
<div id="citation">
<blockquote class="blockquote">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<footer class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
<hr class="my-4"/>
<div id="listes">
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
</div>
<hr class="my-4"/>
<div id="trop-de-texte">
<div class="bg-success mb-1" style="width: 8rem;">
Texte vraiment beaucoup trop long.
</div>
<div class="text-nowrap bg-success mb-1" style="width: 9rem;">
Texte vraiment beaucoup trop long.
</div>
<div class="text-truncate bg-success mb-1" style="width: 10rem;">
Texte vraiment beaucoup trop long.
</div>
</div>
<hr class="my-4"/>
<div id="majuscules">
<span class="text-capitalize">aldo gonzalez-lorenzo</span>
</div>
<hr class="my-4"/>
<div id="graisse-police">
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>
<p class="text-monospace">This is in monospace</p>
</div>
<hr class="my-4"/>
<div id="couleur-texte">
<span class="text-primary">.text-primary</span>
<span class="text-secondary">.text-secondary</span>
<span class="text-success">.text-success</span>
<span class="text-danger">.text-danger</span>
<span class="text-warning">.text-warning</span>
<span class="text-info">.text-info</span>
<span class="text-light">.text-light</span>
<span class="text-dark">.text-dark</span>
<span class="text-body">.text-body</span>
<span class="text-muted">.text-muted</span>
<span class="text-white bg-dark">.text-white</span>
<span class="text-black-50 bg-warning">.text-black-50</span>
<span class="text-white-50 bg-success">.text-white-50</span>
</div>
<hr class="my-4"/>
<div id="couleur-fond">
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark" >.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark" >.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark" >.bg-white</div>
<div class="bg-transparent text-dark" >.bg-transparent</div>
</div>
<hr class="my-4"/>
</div><!--.container-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>Plusieurs classes pour écrire des titres :
.h1, ..., .h6 : pareil que les éléments <h1> ....display-1, ..., .display-4 : encore plus grandPar exemple :
<h1>Titre principal</h1>
<h2 class="h3">Titre secondaire, mais plus petit</h2>
La classe .lead (souvent dans un élément <p>) met un texte en avant.
<p class="lead">Un paragraphe important</p>
<p>Un paragraphe moins important</p>Très utilisée comme sous-titre, juste après le titre.
Règles CSS définies pour <mark> (texte surligné), <strong> (important), <del> (supprimé), <s> (obsolète), <ins> (ajouté), <u> (annoté), <small> (commentaire), <em> (remarqué), <code> (code machine), <kbd> (touches du clavier).
Il y a aussi les classes .mark et .small.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Bootstrap change le curseur sur le <abbr>. La classe .initialism transforme toutes les lettres en majuscules
<blockquote class="blockquote">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p>
<footer class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>Exemple de citation avec sa source.
.list-unstyled (dans <ul>, <ol>) pour des listes sans pouces.
.list-inline> (dans <ul>, <ol>) et .list-inline-item (dans <li>) pour des listes horizontales.
Classes .text-justify, .text-left, .text-center et .text-right.
Versions responsives pour left/center/right : .text-sm-justify.text-md-left, .text-lg-center, .text-xl-right, etc.
.text-nowrap désactive le wrapping.
<div class="text-nowrap bg-success" style="width: 8rem;">
Texte vraiment beaucoup trop long.
</div>
.text-truncate coupe le texte.
<div class="text-truncate bg-success" style="width: 8rem;">
Texte vraiment beaucoup trop long.
</div>
.text-lowercase (toutes minuscules), .text-uppercase (toutes majuscules), .text-capitalize (initiales majuscules).
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p><p class="font-italic">Italic text.</p>
<p class="text-monospace">This is in monospace</p>.text-primary (bleu).text-secondary (gris).text-success (vert).text-danger (rouge).text-warning (jaune).text-info (turquoise).text-white (blanc).text-light (presque blanc).text-muted (gris clair).text-body (normal, comme dans <body>).text-dark (plus sombre).text-black-50 (noir semi-transparent).text-white-50 (blanc semi-transparent).bg-primary, ..., .bg-info.bg-{white,light,dark}.bg-transparentContinuer l'exercice sur la nouvelle mise en page pour Wikipédia en utilisant ces nouveaux outils.
Envoyer par AMeTICE le fichier m3206-td4.zip contenant vos exercices dans «Exercices à rendre du TD 4/4».
Vous pouvez soumettre une bonne (!) question sur ce qu'on a vu aujourd'hui dans «Question à rendre du TD 4/4».