Comment installer Bootstrap
Cet article est extrait du livre "Bootstrap 3 Le framework 100% Web Design" paru aux éditions Eyrolles
Copyright : © Groupe Eyrolles 2015
Télécharger Bootstrap
Il n'y a rien de compliqué dans l'installation de Bootstrap. La première chose à faire est bien évidemment de se rendre sur le site officiel du framework. Une fois que nous sommes sur la page de démarrage du site, trois options de téléchargement s'offrent à nous.
- La première option de téléchargement inclut "une version compilée et minimisée" de Bootstrap. Comprenons par là que ce fichier est une version allégée qui ira au plus grand nombre de projets, proposant les fichiers principaux nécessaires au bon fonctionnement du framework.
- La deuxième option propose, à l'inverse, une version complète comprenant les éléments de base nécessaires à l'utilisation de LESS CSS, ou la documentation de Bootstrap.
- Enfin, la troisième et dernière option est un portage de Bootstrap vers SASS simplifiant l'intégration de projets dans Rails, Compass ou ceux basés uniquement sur SASS. Cette dernière option est peu utilisée par les web designers et intégrateurs front-end, qui préférent choisir entre les deux précédentes.
Pour finaliser cette première phase de contact avec Bootstrap, il est recommandé de télécharger le dossier compilé de la première option.
Site officiel de Bootstrap
http://www.getbootstrap.com
Petit tour du propriétaire
Maintenant que nous avons téléchargé Bootstrap, examinons sa structure. Dans un premier temps, nous pouvons observer que le framework se résume à très peu de fichiers (seulement dix dans sa version compilée). Le dossier est séparé en trois sous-parties classiques :
- css (les fichiers de styles) ;
- js (les fichiers JavaScript) ;
- fonts (les icônes proposées par Bootstrap, que nous retrouverons un peu plus tard dans notre apprentissage).
Format compilé de Bootstrap
À l'intérieur du dossier css, nous trouvons le fichier bootstrap.css qui est la version CSS et JavaScript compilée, ainsi que le fichier bootstrap.min.css qui, en plus, est minimisé. Nous trouvons également le fichier bootstrap-theme dans les deux versions ; il sert à appliquer le
style graphique de la version Bootstrap 2 dans un style moins à plat.
Exemple du style bootstrap-theme
http://getbootstrap.com/examples/theme
Dans le dossier js sont placées les deux versions (compilée et minimisée) du fichier JavaScript de Bootstrap.
Enfin, dans le dossier fonts, il ne s'agit pas des polices de caractères, mais des icônes proposées par Bootstrap et qu'on appelle "Glyphicons". Bootstrap mentionne sur son site qu'elles ne sont normalement pas gratuites mais que leur créateur les a généreusement rendues disponibles pour le framework.
Se procurer les Glyphicons
http://glyphicons.com
Lors de la création, nous pouvons utiliser le fichier compilé "source" tout comme le compilé et minimisé. Cependant, lors de la mise en production, je recommande fortement d'utiliser la version compilée et minimisée pour des raisons de rapidité.
Format source de Bootstrap
Dans le format source de Bootstrap, il existe plusieurs dossiers absents du format compilé. Le fichier less fait son apparition, comprenant tous les fichiers sources CSS de Bootstrap. Dans le fichier dist (qui signifie "distant"), nous retrouvons les fichiers compilés et minimisés de notre première option de téléchargement. Enfin, le dossier docs inclut la documentation Bootstrap.
Cet article est extrait du livre "Bootstrap 3 Le framework 100% Web Design" paru aux éditions Eyrolles
Copyright : © Groupe Eyrolles 2015