Bootstrap sur son ordinateur

Bootstrap est l’un des meilleurs framework HTML / CSS et JavaScript permettant de développer des sites internet en responsive (adaptable selon les écrans : téléphones/tablettes/Ordinateur). Il est gratuit et vous permettra de coder vos sites internet grâce à de simple base en CSS et HTML. Ce qui va suivre n’est pas un tutoriel pour coder avec Bootstrap. Il va s’agir de comprendre à quoi il sert exactement et déjà comment est ce qu’on peut l’utiliser.

Au commencement, j’ai appris à coder juste en HTML et CSS, et une fois qu’on découvre ce framework, on se rend compte qu’avec quelques tutoriels et un peu d’expérience, Bootstrap va devenir indispensable pour tous vos futurs sites !

Téléchargement

Dans un premier temps, avant même de commencer à écrire une quelconque ligne de code, il va falloir installer Bootstrap. Pour ça, rien de plus simple : il vous faut vous rendre sur le site officiel de Bootstrap et de télécharger le dossier.

 

Le téléchargement terminé, il vous faudra tout simple dézipper le dossier. Rien de plus simple avec 7-Zip ou avec WinRAR.

Que contient le dossier ? 3 autres dossiers qu’il va falloir placer intelligemment pour que tout puisse fonctionner correctement.

  • Un dossier Js
  • Un dossier css
  • Un dossier fonts

Une fois que bootstrap-3.3.7 a été décompressé, vous allez devoir créer un autre dossier sur votre bureau pour pouvoir le trouver facilement, dans lequel vous mettrez les 3 dossiers vu précédemment.

Maintenant on va pouvoir commencer le codage comme il faut !

Codage

Pour coder un site internet il faut bien évidement un éditeur de texte comme bloc note ou notepad++. Personnellement je recommande Sublime Text qui est très pratique et conçu pour différents types de code. Il faudra enregistrer votre code en « .html » pour que cela puisse générer une page internet et un autre en “.css” pour la décoration de votre page que vous placerez dans le dossier CSS donné par Bootstrap.

Le plus important lorsque vous voulez mettre en place un site internet, ce n’est pas le code. C’est le « chemin ». Si vos chemins sont mauvais, vous pouvez faire le meilleur code de votre vie, votre page internet ne fonctionnera pas. Qu’est ce que c’est exactement ce fameux chemin ?

Il faut que vous puissiez trouver vos dossiers à partir du code que vous allez écrire. Si par exemple vous avez un dossier image dans lequel vous mettez les images qui vont servir à votre site, lorsque vous allez utiliser la ligne de code pour charger l’image il va falloir écrire le bon chemin dans la ligne pour qu’il retrouve les images donc en l’occurrence si le dossier se nome tout simplement “images”, la ligne de code avec le bon chemin sera la suivante :

  • <img src:”images/le nom de l’image”/> .

Regardez bien l’image suivante. On a mis notre code CSS dans un dossier nommé CSS. Il va donc être important de préciser ce détail dans notre code html en mettant “css/” avant le sheet.css qui est le nom de notre code. Ainsi, le chemin qui mène jusqu’à notre code CSS sera correcte.

Notre feuille de style se trouvant dans notre dossier CSS, il faudra dans le code HTML préciser le chemin exact jusqu’à la feuille de style. Maintenant comment faire pour relier nos feuilles de style Bootstrap avec HTML. C’est ce qui vous permettra d’utiliser toutes les fonctionnalités de Bootstrap.

  • Le 1 : c’est une ligne de code qui va relier les CSS de Bootstrap avec votre HTML et ce peu importe où est sauvegardé votre dossier Bootstrap.
  • Le 2 : concerne les fichier JavaScript et il s’agira ici des animations pour faire de votre site une page internet animée.

Rien qu’avec ça, vous êtes maintenant prêt à coder votre site internet. A chaque fois il vous faudra faire attention au chemin de vos dossiers. Vous n’avez pas besoin de télécharger Bootstrap à chaque fois que vous voulez faire un site. Gardez celui que vous avez et utilisez le à chaque fois.

Concernant le codage de votre site, il existe énormément de tuto sur internet. Je n’ai pas appris qu’avec un seul et même tutoriel, et il va falloir vous renseigner un peu partout pour pouvoir obtenir un maximum de savoir. Je peux cependant vous conseiller un site internet qui donne d’excellentes explications et sur lequel j’ai appris la plupart de ce que je connais aujourd’hui : il s’agit de W3 SCHOOL. Cependant le seul hic c’est que c’est tout en anglais.

Entrainez vous et très vite vous obtiendrez un bon petit niveau et vous ne pourrez même plus vous passer de Bootstrap.