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/
http://getbootstrap.com/getting-started/

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)
http://layoutit.com
http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/
http://www.w3schools.com/bootstrap/
http://blog.site-web-creation.net/tutorial-bootstrap-3/
http://www.opentuto.com/informatique/maitriser-bootstrap-3-par-la-pratique/
Bootstrap : tutoriels et astuces, sur journaldunet

bouquin à lire

https://openclassrooms.com/courses/prenez-en-main-bootstrap

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;

http://getbootstrap.com/components/#navbar

Table

syntaxe tables bootstrap sur w3schools.com
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

Table des matières