Qu'est ce que bootstrap ?
Bootstrap a été développé en 2011 par l'équipe du réseau social Twitter.
Bootstrap est un framework front-end ( HTML5, CSS et JavaScript) spécialement conçu pour le développement d'application web "responsive", c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (tablettes, smartphones, desktop …).
Il fournit des outils avec des styles déjà en place pour des typographies, des boutons, des interfaces de navigation et bien d'autres encore.
Il peut être utilisé pour créer par exemple, des pages de site de présentation, pour une interface graphique d'une application web ou être intégrer à un thème d'un CMS, …
Bootstrap est de plus en plus utilisé, il est devenu « le plus populaire des frameworks front-office pour développer des projets responsive et mobile-first sur le web. »
Comment l'installer ?
Première étape
Se rendre sur le site officiel de Bootstrap (http://www.getbootstrap.com )
Page de démarrage sur le guide officiel Bootstrap (copyright – Eyrolles )
Deuxième étape
On télécharge Bootstrap . En ouvrant le fichier du framework, on découvre ceci :
Il y a dans le dossier, trois grandes parties :
- css : Ce fichier reprend les propriétés de styles principales. Il va nous permettre de structurer la page et de créer les éléments de notre interface graphique.
- fonts : Ce fichier est un fichier CSS secondaire et non obligatoire qui permet de rajouter des caractéristiques graphiques au dossier principal.
- js : Ce fichier permet d'intégrer des éléments dynamiques. Ce fichier est une extension de la bibliothèque Jquery. Cette dernière doit être installer pour que l'on puisse utiliser les éléments dynamiques.
Chaque partie est disponible en version « normale » ou « .min », pas une énorme différence entre les deux au niveau du code, la version « .min » ne permet pas de retour à la ligne ou de tabulations mais présente l'avantage de réduire la taille du fichier donc améliore la vitesse de chargement de la page.
Troisième étape
On intègre Bootstrap à notre thème, voir exemple ci-dessous :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle page Bootstrap</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Ceci est un exemple</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Différents sites créés autour de Bootstrap fournissent aussi des outils supplémentaires:
- Bootsnipp fournit des exemples de codes et des codes supplémentaires pour enrichir Bootstrap.
- Bootswatch permet à la communauté de proposer de nouveaux thèmes pour personnaliser Bootstrap.
- Bootply propose de créer des Fiddles qui permettent de montrer à des personnes sur le Web des bouts de code développés avec Bootstrap.Il est ainsi possible de dialoguer facilement sur les forums, de proposer des solutions ou de montrer un problème dans un développement.
Notes de version
- [18/11/2017] : Harmonisation de la page
Auteurs et sources
- Auteur : montuy337513