Framework Bootstrap

Temps d'étude : 1h. Niveau : Facile.
Tags : Framework Bootstrap
Fichier(s) utile(s) pour ce cours : /
Pré-Requis
fléche Culture Web et Informatique
Objectifs
fléche Améliorer l'intégration et le temps de conception d'un site web à l'aide de bootstrap.

Un framework CSS, qu'est-ce que c'est ?

Un framework est avant tout un cadre de travail permettant de faire profiter aux développeurs d'une arborescence et d'une architecture communes.

Le plus souvent cela se présente sous forme de dossier pour faciliter l'organisation du code et simplifier la maintenance dans le temps.

Un framework peut aussi apporter un socle de fonctionnalités par défaut.

Qu'est-ce qu'on obtient concrétement lorsqu'on télécharge bootstrap ? juste un dossier contenant quelques fichiers css et js.

Bootstrap, c'est quoi ?

image manquante

Bootstrap est un framework CSS permettant de faciliter l'écriture de la mise en forme CSS d'un site web.

Avec Bootstrap, vous gagnerez du temps et n'aurez plus besoin de vous prendre la tête sur un décalage de quelques pixels sur votre page web. Tout le CSS a déjà été pensé pour vous.

Plus généralement, nous pouvons dire que c'est un rassemblement de différents morceaux de code utiles à la création d'une page web, aussi bien dans la mise en forme CSS que dans l'animation et l'interactivité du contenu JavaScript.

Naissance de Bootstrap

Bootstrap a été écrit par deux développeurs Twitter pour répondre à des problématiques communes et gagner du temps dans la mise en forme des pages web.

Mark Otto et Jacob Thornton ont écrit bootstrap aux alentours de l'année 2010 puisque le projet a été rendu OpenSource en 2011.

Cela permet notamment de ne pas devoir recommencer toute l'écriture du code de zéro à chaque nouvelle page web.

Avantages de Bootstrap

« Bootstrap, j'en entends parler partout, okay mais quel est son intérêt ? je suis très bien sans lui, pourquoi je devrai l'utiliser ? »

Selon moi, les principaux avantages de bootstrap sont :
  1. Responsive : Vous obtiendrez un site web responsive de base, ce qui n'est pas négligeable, cela est même indispensable de nos jours avec les smartphones et tablette !

  2. Un site web jolie : Il existe plusieurs thèmes préfaits de haute qualité et une multitude de classes css que l'on peut utiliser !

  3. Un gain de temps : Vous ne vous occupez quasiment plus que d'écrire le code Html et d'appeler des classes CSS pré-existantes. Il devient très rapide de monter la mise en forme d'une page web.

  4. Compatibilité : A priori, la présentation visuelle sera la même sur tous les navigateurs.

  5. Graphisme : Lorsqu'on développe en programmation, cela nous permet d'avoir une apparence de site sans écrire une seule ligne de CSS (à l'origine, bootstrap a justement été créé pour simplifier le travail de présentation visuelle aux développeurs côté back). Cela est une aubaine pour les développeurs qui préfèrent la partie fonctionnelle à la partie graphique

Naturellement, cette liste n'est pas exhaustive, il y a d'autres avantages, comme notamment l'intégration de plugin jquery, ce qui permet de gagner également du temps sur la partie JavaScript.

Bootstrap : pour ou contre ?

fléche Question « attend, si bootstrap fait tout, à quoi ça sert de connaitre le langage CSS ? »

C'est vrai que Bootstrap apporte beaucoup sur la partie CSS, mais il est néanmoins quasi indispensable de disposer d'un minimum de connaissances techniques dans les métiers de l'intégration Html / Css pour pouvoir s'en servir ou encore apporter des modifications supplémentaires.


fléche Question « Bootstrap, tu me dis que c'est un super outil avec des thèmes pré-conçus okay mais ni moi ni mes clients voulont le même site que tout le monde ! »

C'est vrai, selon les projets (ou disons le budget et l'exigence du client final) parfois il est pratique d'installer un thème préfait et d'autres fois il faut partir de zéro from scratch sur la création d'un thème personnalisé.
Quoi qu'il en soit, dans bootstrap, il reste possible d'ajouter son propre code CSS pour profiter d'une base thème graphique et de le personnaliser selon ses envies.


fléche Question « attend, tu me dis que ça va aller vite d'écrire le site mais ou est-ce que je mets mon css dans bootstrap? ».

Généralement, nous utilisons les classes de bootstrap existantes et ajoutons une feuille de style supplémentaire pour ajouter notre propre code CSS.


fléche Question « Malgré les modifications possibles, je n'aime pas qu'on m'impose une structure ou une vision du code qui n'est pas la mienne ».

Il est important de suivre les évolutions et au moins de les "tester", même si l'on retrouve cela de plus en plus sur les offres d'emploi, utiliser bootstrap n'est pas obligatoire !

Pour les puristes qui ne sont pas très joyeux à l'idée d'utiliser bootstrap en FRONT, ils pourront toujours l'utiliser en BackOffice, et oui en BackOffice, ce n'est pas un problème d'avoir un design "type". Ainsi l'administrateur pourra gérer son site via son smartphone (du fait que bootstrap apporte la partie responsive nativement).


Inconvénients de Bootstrap

Il n'y a pas de réel inconvénient à travailler avec bootstrap car il s'agit avant tout d'un choix.

Certains vous diront que bootstrap (framework, jquery (librairie) ne sont pas des langages et viennent ralentir les temps d'exécution du site au niveau des performances.

Même s'il l'on mimifie (coller le code sur 1 seule ligne) le code, ces personnes n'ont pas forcément tort mais par rapport à tout ce que cela apporte, il faut peser le pour et le contre, cela dépend du projet et du développeur.
Par exemple : est-on prêt a sacrifier un peu de performance contre un gain de temps lors de la création du code ?

L'apprentissage prend un peu de temps, mais ça, c'est comme tout le reste, il ne s'agit donc pas d'un inconvénient ! Apprendre c'est la vie du développeur !

Apport de Bootstrap

Vous l'aurez compris, bootstrap apporte plusieurs choses.

Avant tout : une feuille de style CSS contenant des propriétés et valeur de base pour tous les éléments HTML.

Cela permet de bénéficier d'un graphisme standardisé pour tous les types d'éléments habituels d'un site à un autre : icônes, liens, listes, tableaux, formulaires, etc.

Mise à jour Bootstrap

Bootstrap est régulièrement mis à jour, vous pourrez donc suivre les dernières actualités sur GitHub ou sur le blog officiel.

Comment télécharger Bootstrap ?

Pour se servir de bootstrap, il faut avant tout le télécharger.

Nous allons donc nous rendre sur le site officiel de bootstrap pour le télécharger.

explications bootstrap

Ensuite, plusieurs choix s'offrent à nous :

explications bootstrap

  • Download Bootstrap correspond à une première utilisation de base.
    Les fichiers CSS, JS et les polices sont mimifiés. Aucun document source n'est inclu.

  • Download source permet d'avoir accès à toutes les sources de bootstrap.
    Source Less, JavaScript et les fichiers police, avec les documents d'origine. LESS nécessite une configuration et un compilateur.

  • Download Sass permet de ...
    Version de Bootstrap porté du Less au Sass pour une inclusion facile dans Rails, Compass, ou Sass.


explications bootstrap

Lorsque vous télécharger Bootstrap, cela se présente sous cette forme :

explications bootstrap

Un dossier css pour la mise en forme.
Un dossier js pour l'animation / interactivité.
Un dossier fonts pour les polices / icones.

Le mot clé "dist" indique qu'il s'agit d'une distribution. Ce terme est utilisé régulièrement en Informatique.

explications bootstrap

  • bootstrap.css représente le fichier principal de bootstrap avec la déclaration de toutes les classes CSS

  • bootstrap.css.map ce fichier permet de retrouver la position d'une ligne de code dans la version normale à partir du code minifié

  • bootstrap.min.css Même contenu que le fichier bootstrap.css de manière mimifié (tout le code sur une ligne pour gagner en performances).

  • bootstrap-theme.css représente le fichier de bootstrap permettant de créer des thèmes spécifiques

  • bootstrap-theme.css.map ce fichier permet de retrouver la position d'une ligne de code dans la version normale à partir du code minifié

  • bootstrap-theme.min.css Même contenu que le fichier bootstrap-theme.css de manière mimifiée (tout le code sur une ligne pour gagner en performances).


  • glyphicons-halflings-regular.eot icône au format EOT

  • glyphicons-halflings-regular.svg icône au format SVG

  • glyphicons-halflings-regular.ttf icône au format TTF

  • glyphicons-halflings-regular.woff icône au format WOFF

  • glyphicons-halflings-regular.woff2 icône au format WOFF2


  • bootstrap.js contient le code javascript de bootstrap

  • bootstrap.min.js Même contenu que le fichier bootstrap.js de manière mimifié (tout le code sur une ligne pour gagner en performances).

  • npm.js est un fichier généré automatiquement pouvant être utile dans l'environnement CommonJS


fléche Attention
Si des changements doivent se faire, nous créerons une feuille de style a part pour ne pas modifier la feuille de style CSS d'origine de bootstrap.


Préparer son site avec bootstrap

Pour créer votre page web avec bootstrap vous n'êtes pas obligé de garder le nom d'origine et pouvez renommer le dossier /bootstrap-3.3.4-dist/ en /monsite/.
Ensuite, vous pouvez créer votre page web à la racine, par exemple : index.html (index correspond au nom de la page d'accueil).

explications bootstrap

Voici le code Html à prévoir pour notre page d'accueil :

index.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site avec Bootstrap</title>
			<link rel="stylesheet" href="css/bootstrap.css">
			<link rel="stylesheet" href="css/style.css">
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>
			...
		</body>
	</html>
	
Et nous voilà relié à bootstrap en seulement 1 ligne ! css/bootstrap.css (si cela ne fonctionne pas, pensez à bien revoir le chemin du fichier).

Nous ajoutons également un lien vers une feuille de style CSS style.css pour pouvoir agir à tout moment sur le code CSS.

Il sera donc important de créer le fichier correspondant dans le dossier /css/ à côté des fichiers de bootstrap, tout comme nous l'aurions fait si nous n'étions pas accompagnés de bootstrap !

Concernant la ligne viewport, on demande que l'affichage occupe tout l'espace disponible avec une taille de 1, autrement dit sans zoom. L'attribut « viewport » permet de préciser au navigateur quelle taille il doit prendre pour afficher une page web.

width=device-width permet de régler la largeur de la page web sur la largeur de la fenêtre de l'appareil qui consulte actuellement la page

initial-scale=1 permet de régler le niveau de zoom sur 100 % (par défaut).

Si vous souhaitez incorporer la partie JavaScript, vous aurez besoin de quelques lignes complémentaires :

index.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site avec Bootstrap</title>
			<link rel="stylesheet" href="css/bootstrap.css">
			<link rel="stylesheet" href="css/style.css">
			<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
			<script src="js/bootstrap.js"></script>
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>
			...
		</body>
	</html>
	

Vous devez donc forcément intégrer la librairie jquery avant le fichier bootstrap.js (car bootstrap.js se sert de JQUERY) sinon vous aurez une belle erreur exception dans votre console JavaScript.

Et maintenant ?
Nous pouvons déclarer des balises et éléments Html comme d'habitude. Mais maintenant que vous êtes relié à bootstrap, l'idéal serait d'appeler des classes CSS propres à Bootstrap.

Pour cela, il faut les connaitre (quelques-unes, pas par coeur ;-)), et on a de la chance car la documentation officielle de bootstrap est très claire sur le sujet !

Je vous invite donc à me rejoindre sur cette page :
explications bootstrap

Faisons un test rapide avec les icônes :
index.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site avec Bootstrap</title>
			<link rel="stylesheet" href="css/bootstrap.css">
			<link rel="stylesheet" href="css/style.css">
			<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
			<script src="js/bootstrap.js"></script>
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>
			<span class="glyphicon glyphicon-star"></span>
		</body>
	</html>
	

Le nom de la classe glyphicon glyphicon-star ce n'est pas moi qui l'ai inventé, je suis comme vous, j'ai été le chercher dans la doc officielle de boostsrap. ;-).

Le Résultat
image manquante Le résultat avec bootstrap nous donne une image en forme d'étoile sans l'utilisation de la balise <img src="...">


Ca fonctionne ? Si vous avez pu utiliser une classe CSS, vous pourrez utiliser toutes les autres !

Soyez curieux ! Essayer d'autres icônes avec les classes CSS glyphicons.

Vous n'avez presque plus besoin de moi ! Sauf qu'avant de vous lacher dans la nature, il faut absolument que je vous parle de la base de bootstrap : le système de grille à 12 colonnes.