Installer Bootstrap

Dans ce tutoriel, nous allons voir comment installer Boostrap en le téléchargeant ou en l'installant via Bower

1. Télécharger le Framework

Dézipper l'archive et extraire les fichiers dans votre projet.

Les fichiers css et js à utiliser se trouverons dans le dossier dist qui signifie distribution.

Passer à la suite et créer ma première page

2. Installation avec Bower

Qu'est ce que Bower ?

Bower est un outil Open Source de gestion de paquets s'éxécutant côté client. Il permet de facilement installer et mettre à jour des paquets, régler le problème des dépendances. C'est un outil en ligne de commande nécessitant l'installation de node.js.

Qu'est ce que node.js ?

Node.js est une plateforme logicielle libre et événementielle en JavaScript orientée vers les applications réseau qui doivent pouvoir monter en charge. Elle utilise la machine virtuelle V8 et implémente sous licence MIT les spécifications CommonJS. Node.js contient une bibliothèque de serveur HTTP intégrée, ce qui rend possible de faire tourner un serveur web sans avoir besoin d'un logiciel externe comme Apache ou lighttpd, et permettant de mieux contrôler la façon dont le serveur web fonctionne.
Source Wikipédia

Pour installer node.js et bower

Je vous invite à consulter ce site qui est trés bien fait !

Installer note.js et bower

Maintenant nous pouvons installer Boostrap à l'aide de bower

1 Vous éxécutez la console Windows ou cliquez sur l'icône "Node.js command prompt" qui a été ajouté sur votre bureau.

2 Vous vous déplacez dans le dossier contenant le projet à l'aide de la commande cd sous Windows.

3 Ensuite vous pouvez saisir la commande : bower install bootstrap

Un dossier bower_components a été crée automatiquement, il contient les fichiers et dossiers ci-dessous :

Les feuilles de styles de Boostrap vont se trouver dans bower_comonents/bootstrap/dist/css/, elles sont déclinées en 3 versions : (Je prends ici comme exemple, la feuille de style principale)

bootstrap.css (la feuille de style standard)
bootstrap.min.css (la version minifié, autrement dit compressée qui contient la même chose que le fichier bootstrap.css)
bootstrap.css.map (permet de retrouver l'emplacement original d'une ligne de code à partir du code minifié. Cette fonctionnalité est utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas indispensables)

Pour améliorer les styles de la feuille principale, vous trouverez le fichier bootstrap-theme.css avec ses 3 déclinaisons . Il contient notamment les dégradés et les ombrages qui embelissent les styles existants.

Dans le dossier "fonts", nous retrouverons les polices de caractère utilisées par les glyphicons.

glyphicons-halflings-regular.svg (icônes au format svg)
glyphicons-halflings-regular.ttf (icônes au format ttf)
glyphicons-halflings-regular.woff (icônes au format woff)
glyphicons-halflings-regular.eot ('icônes au format eot)

Dans le dossier "js", nous retrouverons les fichiers Javascript nécessaires au bon fonctionnement de Bootstrap.

Dans le dossier jquery/dist/ nous retouverons ces 3 fichiers :

jquery.js
jquery.min.js
jquery.min.map

Pour profilter de toutes les fonctionnalités de Boostrap, il faudra lier jquery.js ou jquery.min.js.

Versions compresséés ou non ?

Lorsque vous développez : ce sera plus pratique de travailler avec des fichiers non minifiés.

Lorsque vous mettez en ligne votre site : pour des questions de référencement, notamment sur le temps de chargement, il sera préférable d'utiliser les fichiers minifiés.