• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 03/09/2019

Introduction à Bootstrap

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Nous arrivons à la partie la plus excitante de la création du site : tester sa capacité à prendre vie dans un navigateur, et imaginer comment il évoluera  sur le net.

It's alive !

Arrivés à ce stade, vous êtes maintenant capables de réaliser les maquettes de vos sites responsive. Mais avouez qu'il est un peu frustrant de ne pas pouvoir voir en action leur super pouvoir responsive !

Nous allons justement utiliser Bootstrap afin d'avoir un premier aperçu réellement responsive de notre site. Mais comme l'objet de ce cours est plus une initiation au responsive qu'un cours purement technique sur le code, nous allons nous aider des nombreuses ressources qu'offrent le net afin d'accélérer le processus d'intégration. Ce processus, comme vous le savez déjà, peut être très long. Et même si cela ne m'empêche pas de m'intéresser au code (et ne devrez pas vous décourager non plus !), être intégrateur/développeur est aussi un beau et vrai métier à part entière. Et qui n'est pas vraiment l'objet de ce cours.... 

Dans les chapitres précédant, je vous ai parlé d'un gabarit Bootstrap qui nous servirait pour cette phase d'intégration. J'ai pris soin de caler tous les élément sur une structure particulière, facilement adaptable à ce gabarit : nous devrions donc n'avoir aucun mal à voir le fruit de nos efforts très rapidement. :)

Bien sûr, les plus aguerris d'entre vous en programmation pourront librement s'en donner à coeur joie sur la modification de ce template. Et même si vous avez de petites bases en programmation HTML et CSS, vous verrez que cette structure est très facilement modifiable. Et qui sait, peut-être que cette mise en bouche vous donnera envie d'approfondir vos connaissances sur ce fabuleux Framework !

Mais avant de  vous expliquer pas à pas comment intégrer sur Bootstrap tous les éléments de mon site photo à partir de mes deux maquettes, nous allons rapidement parler de Bootstrap.

A propos de Bootstrap

Créé à l'origine par Mark Otto et Jacob Thornton, les développeurs de Twitter (oui, oui, le fameux Twitter ! #cestfoucommenouvelle), Bootstrap est ce qu'on appelle un framework : une véritable boîte à outil qui vous met à disposition toute une série de fonctionnalités très pratiques pour coder des sites web entièrement responsive.

Bootstrap le framework idéal pour la création de site responsive
Bootstrap le framework idéal pour la création de vos sites responsive

Vous avez vu que nous utilisions des grilles pour nos maquettes, et bien Bootstrap en utilise une aussi ! Et de base Bootstrap fonctionne avec une grille 12 colonnes, qui peut être modifiable suivant vos besoins. Sur cette grille, on y intègre des blocs ou "container" qui vont permettre de construire votre page... Vous voyez, nous sommes dans la même logique de mise en forme qu'avec nos maquettes graphiques sur Photoshop. ;)

Que faut-il retenir de Bootstrap ?

  • Il existe d'autres frameworks, mais Bootstrap est le plus populaire et le plus utilisé aujourd'hui. Par conséquent, il y a une communauté très active autour de Bootstrap, ce qui lui garantie des évolutions rapides et constantes.

  • Le succès de Bootstrap vient aussi du fait qu'il est très bien documenté. C'est très pratique si vous désirez le prendre en main tout seul (ou approfondir toujours plus vos connaissances dessus).

  • Il fonctionne sur l'ensemble des navigateurs récents et il est parfaitement adapté pour la création de sites responsive !

  • Au niveau des langages de programmation Bootstrap utilise HTML5 et CSS3, et vous pouvez l'enrichir avec des extensions JavaScript et des plugins JQuery.

  • De base, il fonctionne avec une grille 12 colonnes.

  • Et j'oubliais un élément important... Il est totalement gratuit !

Voilà, c'est à peu prêt tout pour commencer. Et si vous êtes assez courageux et curieux pour prendre ce super framework en main, alors je vous recommande d'aller le télécharger sans plus tarder sur son site au nom sans équivoque : http://getbootstrap.com !

Le site de Bootstrap
Le site de Bootstrap

Maintenant que nous avons fait connaissance avec Bootstrap, intéressons-nous de plus près au gabarit qui va nous permettre d'intégrer les éléments de nos maquettes dans un vrai site responsive.

Les éléments du gabarit

Pour suivre cette dernière partie, nous allons juste avoir besoin de télécharger ce gabarit, rien d'autre !

>> Télécharger le gabarit complet Worthy

Nous allons tout de suite jeter un coup d'oeil sur son contenu, et dans le dernier chapitre nous pourrons enfin adapter et intégrer tous nos éléments dans ce gabarit.

Voici ce que nous avons dans ce gabarit :

L'arborescence du dossier
L'arborescence du dossier

Vous pouvez voir que ce dossier contient :

  • Un fichier html : "index.html". Je vous propose de l'ouvrir tout de suite dans votre navigateur pour voir immédiatement à quoi votre futur site ressemble... Avant que l'on adapte tous les éléments à partir du design de nos maquettes. ;)

  • Un dossier "bootstrap" contenant toutes les fonctionnalités du framework nécessaires pour rendre votre site responsive. Nous n'avons pas vraiment besoin de toucher à ce dossier.

  • De nombreux fichiers css et js (JavaScript).

  • Des fichiers Jquery pour certains effets d'animations. 

Et pour les images, cela tombe bien il y a un dossier "images".

Nous allons y ranger toutes les images dont nous allons avoir besoin et que nous avons pris soin de créer pour les maquettes sous Photoshop. C'est ce que nous allons voir tout de suite dans le prochain chapitre.

Exemple de certificat de réussite
Exemple de certificat de réussite