Bootstrap
note FredR: perso je suis pas trop pour l'uniformisation, mais bootstrap c'est l'exception… un peu le costume mao du responsive web… et il y a aussi les glyphicons qui sont un développement très intéressant de bootstrap
Bootstrap est une collection d'outils utile à la création du design (graphisme, animation et interactions avec la page dans le navigateur … etc. …) de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub. (source: wikipédia)
- site officiel http://getbootstrap.com/
GRID CSS
avec les browsers modernes, on peut utiliser les propriétés GRID CSS
avec bootstrap on a bcp de flexibilité, voir p. ex. cet excellent tuto (bootstrap5)
doc
- https://grafikart.fr/tutoriels/bootstrap (comme d'hab, les meilleurs tutos sont chez grafikart)
- Bootstrap : tutoriels et astuces, sur journaldunet
bouquin à lire
Glyphicons
Envelope icon:
Search icon:
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p> <p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
Image responsive
<img class=img-responsive src=img/image.png/>
Cette classe ajoute les propriétés suivantes à l'image :
max-width : 100%; heigth: auto; display: block;
Navigation
Table
- js datatables+bootstrap pour intégrer datatables
<table class="table table-striped table-bordered table-hover table-responsive">
Note Fred
Les tables bootstrap sont pas mal, mais si on veut du vraiment responsive et qu'on est prêt à abandonner le scroll de défilement vertical, voir cette élégante solution de grakifart: https://www.grafikart.fr/tutoriels/html-css/table-responsive-1015
Forms / buttons
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>
Validation
<div class="mb-3"> <label for="emailInput" class="form-label">Email address</label> <input type="email" class="form-control" id="emailInput" placeholder="name@example.com" required> <div class="invalid-feedback"> Please provide a valid email address. </div> </div>
Dark mode
ajouter
data-bs-theme="dark"
à l'élément
<html>
ou à un élément précis, p. ex.
<table class="table" data-bs-theme="dark">
Doc: https://www.w3schools.com/bootstrap5/bootstrap_dark_mode.php