Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Généralités

Mis à jour le
Préparation avant de commencer le cours :
  1. afin de suivre correctement ce cours sur Bootstrap, il faut avoir de bonnes bases en HTML/CSS, et en SCSS pour ceux qui recherche un usage "avancé"
  2. veuillez ouvrir la documentation officielle de Bootstrap, sur la dernière version (4.3)
  3. ce cours mélange de la théorie…
~~ Fin de l'extrait ~~

Présentation

Mis à jour le

(image visible sur la plateforme de formation)

Bootstrap est le framework CSS le plus populaire du moment. Lancé en 2011 par Twitter, et open-source, il est vraiment LE framework CSS le plus utilisé. Beaucoup de concurrents existent, avec leurs avantages propres, mais Bootstrap reste néanmoins le framework le…

~~ Fin de l'extrait ~~

Fonctionnement

Mis à jour le

Pour une utilisation classique de Bootstrap (cqfd : sans recompiler les sources), l’utilisation est assez aisée. Vous devez simplement appeler dans votre page les fichiers CSS et JS nécéssaires à Bootstrap, et commencer à y intégrer les différents composants que vous jugerez utiles. Bootstrap est un framework CSS, mais il…

~~ Fin de l'extrait ~~

Installation

Mis à jour le

(image visible sur la plateforme de formation)

Comme d'habitude, vous pouvez faire le choix d'utiliser un CDN, ou bien de télécharger Bootstrap en local. Voici les fichiers minimum à appeler dans la balise <head> de vos pages :

  1. bootstrap.css (le fichier CSS principal de BS)
  2. jquery.js (un JQuery compatible…
~~ Fin de l'extrait ~~

Dispositions des éléments

Mis à jour le

Nous allons voir ici les grandes lignes qui permettent d'agencer vos éléments dans vos pages web grâce à Bootstrap. Ce sont des règles génériques qui fixent les grandes lignes de dispositions des blocs constituant votre page.


Les conteneurs

La classe .container vous permet de définir un bloc de conteneur dont la taille…

~~ Fin de l'extrait ~~

Reboot et styles par défaut

Mis à jour le

(image visible sur la plateforme de formation)

Dans votre sandbox, vous pouvez tester les styles par défauts. Bootstrap redéfini automatiquement de nombreux paramètres CSS par défaut, afin que le rendu des différents éléments de votre page soit le même sur tous les supports envisageables (navigateurs, périphériques, OS,...).

Mettez des…

~~ Fin de l'extrait ~~

Classes proposées par Bootstrap

Mis à jour le

En plus de redéfinir les balises HTML standard, Bootstrap vous offre tout un panel de classes vous permettant de donner des styles déjà prêt. Si par exemple vous souhaitez mettre un texte en paragraphe, mais avec un look de titre H1, vous pouvez écrire quelque chose comme ça :

<p class="display-1">Mon…
~~ Fin de l'extrait ~~

Classes utilitaires

Mis à jour le

Les classes utilitaires de Bootstrap vont vous permettre d'utiliser des propriétés CSS existantes, mais sans avoir à les définir vous même. Contrairement au .lead ou au .active, "inventés" de toute pièce par Bootstrap, les classes utilitaires ne font qu'apporter des propriétés CSS standard à un élément. 

Comme nous l'avons vu plus…

~~ Fin de l'extrait ~~

Intégration de composants

Mis à jour le

Les composants sont des éléments créés de toutes pièces par BS. Ils sont un mélange de balises HTML et de classes CSS propres à BS, ayant pour but de mettre à dispositions des développeurs des éléments très fréquemment utilisés. En effet, on vous demandera régulièrement dans différents projets d'intégrer des…

~~ Fin de l'extrait ~~

Composants simples

Mis à jour le

Nous allons découvrir les composants simples que propose Bootstrap via l'utilisation du composant "alert". Pour ceux qui découvre tout ça, une alerte est un bloc de texte qui surgit à l'écran suite à une action de l'utilisateur.

Exemples d'alertes sur l'envoi d'un message via un formulaire de contact :

  • "Votre message a…
~~ Fin de l'extrait ~~

Composants complexes

Mis à jour le

Si dans votre site vous souhaitez intégrer ce que l'on appel "un carrousel", il y a un composant pour ça. Vous devrez respecter la structure proposée par BS, et ce sera le framework qui se chargera d'afficher vos images, et de mettre en place le Javascript nécessaire à l'animation et…

~~ Fin de l'extrait ~~

Personnalisation

Mis à jour le


Les thèmes

Dans cette section, nous allons voir différentes manières de modifier ou de surcharger le thème original de BS. Elles ont toutes leur avantages et leurs inconvénients et nécessite pus ou moins de technique pour être mise en oeuvre. 

Pour recompiler Bootstrap, il vous faudra être à l'aise avec les notions…

~~ Fin de l'extrait ~~

Entraînement

Mis à jour le

Pour ceux qui souhaitent mettre l'accent sur le développement front-end, et sur l'apprentissage de Bootstrap, je vous conseille de vous entraîner au maximum via la réalisation de ce genre de maquettes :