📢 Bonjour à tous et à toutes ❗

Dans cette formation on verra comment installer et utiliser Bootstrap V4, faire du responsive Web Design, utiliser ses éléments typographiques, l’utiliser pour nous aider à faire la mise en page de nos sites internets et utiliser les éléments avancés (carroussel et autres) qu’apportent ce framrwork front gratuit (encore merci à tous ceux qui contribuent ou qui ont contribués à ce très beau projet). Ce sera une formation essentiellement pratique avec pas mal d’exercices, de TP /TD et on aura des résultats assez rapidement.

[image bootstrap 4]
Passons en revue ses caractéristiques :

  • Bootstrap est le framework HTML CSS & Javascript le plus populaire au monde actuellement pour la création de pages web interactives et responsives.
  • Il est entièrement gratuit. Des millions de sites sur le Web sont réalisés avec Bootstrap.
  • Il y a énormément de thèmes et de templates gratuits à utiliser.
  • Bootstrap est Mobile First, Responsive et utilise un système de Grille.
  • Il utilise Reboot afin d’avoir un thème unique pour chaque navigateur.
  • Bootstrap c’est un ensemble de fichiers (HTML CSS & Javascript) qui va servir de bases pour la création de pages web.

En gros c’est un ensemble de fichiers que l’on va utiliser pour nous simplifier la vie et rendre tout joli nos sites quelque soit le ‘device’ que l’on utilise pour visualiser les pages que l’on a créées (Smartphones, Tablettes ou Pcs).

TODO 🎢:

  • [image bootstrap 4] En premier on télécharge le framework ->ici<- et on le dézippe dans un dossier de travail (idéalement dans un dossier du répertoire de publication de votre serveur web mais c’est pas obligé)
  • [icone atom]Installez un éditeur de code typé front, ici on utilisera Atom ->ICI<- atom.png (On cliquera sur download puis next* quand même)
  • Installer le plugin pour atom : atom-html-preview ici : https://atom.io/packages/atom-html-preview
    • Là c’est plus dur :
      • Soit on clique sur le bouton install en vert en haut
      • Soit on fait CTRL+SHIFT+H dans l’éditeur et on cherche atom-html-preview puis on l’installe
      • Soit on tappe la ligne de commande suivante :
      apm install atom-html-preview
    • Puis on tappe du code et avec le preview on voit directement les modifications (CTRL SHIFT H ou clic droit dans la page de code et PREVIEW HTML)
    • Avec un peu de temps vous arriverez a ce type de résultat (vous inquiétez si vous n’y arrivez pas tout de suite, on le refera en cours) : image atom avec preview

Pour aller plus loin vous pouvez consulter ces sites qui sont très bien fait et vous apporteront des éléments et des compétences non négligeables dans votre utilisation du framework :

Merci de garder pour vous les ressources que vous y trouverez et de ne pas les diffuser 😏
Merci de m’avertir de toute erreur ou coquille qui m’auraient échapées 😍

©️ 🚫 Do not distribute 😌