Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Boostrap

Par Kokou Normand AGBOVI Publié le 07/11/2019 à 22:36:10 Noter cet article:
(0 votes)
En attente de relecture par le comité de lecture

Introduction

Comment intégrer boostrap à son application web ?

Cet article a pour but de montrer la façon dont on peut créer une ergonomie assez vivante et simple pour son application web sans pour autant réécrire du css. Boostrap nous permet de créer une vue assez dynamique sur nos applications web. Il intègre des plugins déjà faits. Il est facile à intégrer à un projet web. nous allons donc découvrir comment télécharger ce plugin et l'installer dans une simple application web.

Installation

Boostrap a été créé par des développeurs de twitter. Il est open source et fait actuellement parti des plugins frontend les plus utilisés dans le web.

Pour installer boostrap il faut se rendre sur cet url : https://getbootstrap.com/docs/4.0/getting-started/introduction/

Arrivé sur le site, il y est expliqué que l'on a deux façons d'intégrer boostrap à notre application web. La première méthode est celle qui va chercher toutes les données sur le serveur distant de boostrap. Elle est très pratique. Et l'on n'a pas de problème à l'implémenter.

Il suffit par exemple de mettre le code ci-dessous dans le code html page web au niveau de l'injection des fichiers css et le tour est joué :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Faire de même pour les fichiers js afin d'avoir les animations qu'il faut.

L'inconvénient avec cette solution est que sans connexion internet le thème boostrap ne s'appliquera pas au site web. Il faudra veiller à avoir une connexion internet tout le temps pour ne pas perdre l'effet de boostrap.

La seconde méthode est de télécharger le fichier zip de boostrap en cliquant sur le bouton download sur la navbar à droite du site.

Extraire le fichier zip. Ensuite il faudra aller dans le dossier ...\bootstrap-4.0.0\bootstrap-4.0.0\dist. Il faudra copier les dossiers qui se trouvent dans dist et les mettre dans l'arborescence de votre application web.

Arborescance sur l'image ci-dessous:

Ensuite il faut faire les liens vers les différents fichiers css et js des dossiers dans votre code html. Il faudra ensuite lire la documentation de boostrap pour avoir les codes d'utilisations des différentes classes dans votre code html afin d'appliquer le bon thème.

Exemple de balise link sur un projet web symfony

Conclusion

Boostrap est un bon plugin pour r&aliser une ergonomie responsive et bien soignée sur un site web.

De nos jours, il existe également d'autres plugins comme skeleton qui intègre des classes css et js permettant d'avoir un site web potable et responsive.

Sources

https://getbootstrap.com

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels