Différences

Ci-dessous, les différences entre deux révisions de la page.

--- txs:peertube-a18:concepts_bootstrap [2019/01/12 18:17] – aurelien.beranger
+++ txs:contrib:peertube_a18:concepts_bootstrap [2020/09/16 11:24] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+====== Bootstrap ======
+Bootstrap est un //framework// open-source qui permet de faire rapidement et facilement le design d'une page web. PeerTube utilise la version 4.
+D'habitude, Bootstrap est composé de quelques fichiers CSS et JS, mais dans le cas de PeerTube, Bootstrap est inclut sous la forme d'un ''node_module'' contenant les sources au format Sass (fichiers ''.scss''). Ces sources sont compilées avec les //assets// propres à PeerTube, qui sont définis dans plusieurs fichiers ''.scss'', notamment ''client/src/sass/include/_mixins.scss''.
+===== Système de grilles =====
+Pour positionner et aligner des éléments (boutons, labels...) sur l'interface web, PeerTube utilise le [[https://getbootstrap.com/docs/4.0/layout/grid/ | système de grille de Bootstrap]]. Une grille est un découpage en cellules:
+{{ :txs:peertube-a18:grille_bootstrap.jpg |}}
+Chaque ligne (''row'') de Bootstrap peut contenir jusqu'à 12 colonnes (''col''), qui peuvent elles-même contenir d'autres ''row''.
+Il est possible de définir le nombre de colonnes utilisées par chaque élément, en ajoutant un suffixe ''-1'', ''-2'', ... , ''-12'' à ''col''. Par exemple:
+<code>
+<div class="container">
+  <div class="row">
+    <div class="col-4">4 colonnes</div>
+    <div class="col-8">8 colonnes</div>
+  </div>
+</div>
+</code>
+Ce qui nous donne:
+{{ :txs:peertube-a18:grille_bootstrap2.jpg |}}
+Si on veut faire du //responsive design//, il est possible d'empiler des éléments dès que la largeur de la fenêtre est inférieure à une certaine valeur. Pour cela, on utilise les suffixes ''-xs'',''-sm'',''-md'',''-lg'' et ''-xl''.
+Par exemple, en remplaçant dans l'exemple précédent ''col-4'' et ''col-8'' par ''col-lg-4'' et ''col-lg-8'', les éléments vont s'empiler lorsque la taille de la fenêtre est inférieure à 1200 px.
+{{ :txs:peertube-a18:screencast_from_11-12-2018_20_26_33.webm?853x480 |}}
+Dans le code de PeerTube, on peut retrouver plusieurs classes à la fois:
+<code>
+<div class="row">
+  <div class="col-lg-4 col-md-6 col-xs-12">...</div>
+  <div class="col-lg-4 col-md-6 col-xs-12">...</div>
+  <div class="col-lg-4 col-md-6 col-xs-12">...</div>
+</div>
+</code>
+Ici, pour un écran de taille supérieure à 1200 px (''lg''), on aura 3 colonnes, mais lorsque la taille passe en dessous des 1200 px, les éléments ne sont pas immédiatement empilés, la classe ''col-md-6'' prend le relais:
+{{ :txs:peertube-a18:screencast_from_11-12-2018_20_40_13.webm?853x480 |}}
+===== Sources =====
+  * Tutoriel Bootstrap sur OpenClassrooms: https://openclassrooms.com/fr/courses/1885491-prenez-en-main-bootstrap/1886111-une-grille
+  * Documentation officielle du système de grilles: https://getbootstrap.com/docs/4.0/layout/grid/
+===== Demo =====
+{{ :txs:peertube-a18:demo.zip }}