Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Les éléments essentiel de Bootstrap

Par Alexis DEVILLEZ Publié le 12/10/2017 à 20:53:40 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Indroduction

Si vous vous débrouillez un peu en Web, il est probable que vous avez entendu parler de Bootstrap . Néanmoins si vous ne savez toujours pas ce qu'est Bootstrap, ou si vous voulez simplement trouver un didacticiel Bootstrap pour les débutants et avoir un meilleur aperçu de ce qu'il est, de ce qu'il fait le mieux, vous êtes au bon endroit.

Bootstrap 3 est une puissante boîte à outils : une collection d'outils HTML, CSS et JavaScript pour créer et construire des pages Web et des applications Web. C'est un projet gratuit et open source, hébergé sur GitHub , et créé à l'origine par (et pour) Twitter.

Après sa sortie open source en 2011, Bootstrap est devenu populaire très rapidement, et non sans raison. Les concepteurs Web et les développeurs Web, comme Bootstrap, sont flexibles et faciles à utiliser. Ses principaux avantages sont qu'il est sensible à la conception, qu'il possède une large compatibilité avec le navigateur, il offre une conception cohérente en utilisant des composants réutilisables, et il est très facile à utiliser et rapide à apprendre. Il offre une grande extensibilité à l'aide de JavaScript, avec un support intégré pour les plugins jQuery et une API JavaScript programmée. Bootstrap peut être utilisé avec n'importe quel IDE ou éditeur, et n'importe quelle technologie et langue côté serveur, d'ASP.NET à PHP vers Ruby on Rails.

Avec Bootstrap, les développeurs Web peuvent se concentrer sur le travail de développement, sans se soucier de la conception, et obtenir un site Web de bonne qualité qui fonctionne rapidement. À l'inverse, il donne aux concepteurs de sites web une base solide pour créer des thèmes Bootstrap intéressants.

La conception Web responsive est un processus de conception et de création de sites Web permettant une meilleure accessibilité et une meilleure expérience visuelle pour l'utilisateur.

Avec la tendance croissante des téléphones intelligents et des tablettes, il est devenu presque incontournable d'ignorer l'optimisation des sites pour les appareils mobiles. La conception Web responsive est une alternative préférable et un moyen efficace de cibler une large gamme de dispositifs avec beaucoup moins d'efforts.

Les mises en page sensibles s'ajustent automatiquement et s'adaptent à toute taille d'écran du périphérique, qu'il s'agisse d'un ordinateur de bureau, d'un ordinateur portable, d'une tablette ou d'un téléphone mobile.

D’ailleurs vous avez souvent dû entendre la notion de « mobile first » c’est-à-dire que lorsque l’on code d’abord pour la vue mobile puis la vue laptop/ordinateur.

Structure du fichier

Nous nous concentrerons sur la version précompilée, qui peut être téléchargée http://getbootstrap.com/getting-started/#download. Lorsque vous téléchargez l'archive zip et la décompressez, la structure de fichier de base ressemble à ceci:

La structure Bootstrap est assez simple et s'explique par lui-même. Il comprend des fichiers précompilés qui permettent une utilisation rapide dans n'importe quel projet Web. Outre les fichiers CSS et JS compilés et minifiés, il comprend également des polices de Glyphicons et le thème Bootstrap de démarrage optionnel.

Cette structure peut être facilement intégrée dans la structure de fichier de votre propre projet en incluant simplement les fichiers Bootstrap exactement comme ils sortent de l'archive zip, ou si cela correspond mieux à votre projet, vous pouvez réorganiser ces fichiers et les placer n'importe où. Assurez-vous que le dossier des polices Glyphicons se trouve au même niveau que le dossier CSS.

Modèle HTML de base

Un modèle de base Bootstrap HTML devrait ressembler à ceci:

Il est important de commencer n'importe quel HTML avec une déclaration Doctype HTML 5, de sorte que les navigateurs savent quel type de document ils peuvent s'attendre. L’entête contient trois balises meta importantes qui doivent être déclarées en premier, et toutes les étiquettes d’entête supplémentaires doivent être ajoutées après celles-ci. Si vous souhaitez prendre en charge les navigateurs plus anciens comme IE8, vous pouvez également inclure HTML 5 Shim dans la tête, ce qui permettra l'utilisation d'éléments HTML5 dans les anciens navigateurs, et Respond.js :

Bien que cela ne soit pas très important si vous ne ciblez que les navigateurs modernes.

Les fichiers JavaScript sont ajoutés à la fin du corps pour permettre à la page Web de se charger de façon visible avant que tout le JavaScript ne soit exécuté. JQuery est nécessaire pour les plugins Bootstrap et doit être chargé avant bootstrap.js. Si vous n'utilisez pas les fonctionnalités interactives de Bootstrap, vous pouvez également supprimer ces fichiers de la source.

C'est le minimum nécessaire pour obtenir une mise en page de base de Bootstrap. Si vous êtes concepteur, ou recherchez simplement l'inspiration, Bootstrap Expo met en vedette des sites construits à l'aide de Bootstrap. Comme nous le verrons plus loin, chaque partie de Bootstrap peut être facilement personnalisée en CSS. Mais si ce n'est pas votre truc, et que vous cherchez un aspect légèrement différent des thèmes Bootstrap existant, il existe de nombreux thèmes gratuits, open source disponibles à partir de sources telles que Bootswatch et WrapBootstrap .

Composants

Bootstrap est livré avec des modèles de conception HTML et CSS basiques qui incluent plusieurs composants UI communs. Ceux-ci incluent la typographie, les tableaux, les formulaires, les glyphicons, les menus déroulants, les boutons et les groupes de boutons, la navigation, la pagination, les étiquettes et les badges, les alertes, les barres de progression, les modes, les onglets, les accordéons, les carrousels et bien d'autres. Beaucoup d'entre eux utilisent des extensions JavaScript et des plugins jQuery.

Ces modèles sont mis à disposition en tant que classes CSS bien ciblées que vous pouvez appliquer à votre HTML pour obtenir différents effets. Cela rend l'utilisation de Bootstrap très pratique. En utilisant des noms de classes sémantiques comme .success, .warninget, .info, ces composants sont facilement réutilisables et extensibles. Mais tandis que Bootstrap utilise des noms de classe descriptifs qui ont une signification, il n'est pas spécifique aux détails de mise en œuvre. Toutes les classes peuvent être remplacées par un style CSS personnalisé ainsi qu’une couleur, la définition de la classe reste la même.

Grille

Avant de plonger davantage dans les composants Bootstrap et les modèles de conception, il est important de mentionner l'une des principales fonctionnalités que Bootstrap a introduites dans la version 3: une conception mobile-first. Le résultat final est que Bootstrap se restructure facilement avec une seule base de code, depuis les téléphones, les tablettes et les ordinateurs de bureau.

Cette réactivité est obtenue en utilisant un système de grille fluide qui peut être appliqué avec une échelle appropriée jusqu'à 12 colonnes en fonction de la taille de l'appareil ou de la fenêtre. Les grilles fournissent une structure à la mise en page, définissant les lignes directrices horizontales et verticales pour l'organisation du contenu et l'application des marges. Les grilles offrent également une structure intuitive pour les utilisateurs, car il est facile de suivre de gauche à droite ou un flux de contenu de droite à gauche en bas de page. Avant les grilles, et avant que le CSS soit si puissant, les mises en page basées sur la grille ont été réalisées en utilisant des tables, où le contenu était organisé à l'intérieur des cellules de la table. Lorsque le CSS est devenu plus mature, un certain nombre de cadres CSS pour les mises en page basées sur la grille ont commencé à apparaître. Ceux-ci incluent les grilles YUI , 960 GS et blueprint, pour n'en nommer que quelques-uns.

Quelques exemples de Template Bootstrap adapté pour chaque projet :

Pour utiliser le système de grille Bootstrap, certaines règles doivent être suivies. Les éléments de colonne de grille sont placés dans des éléments de rangée, qui créent des groupes de colonnes horizontaux. Vous pouvez avoir autant de lignes que vous voulez sur la page, mais les colonnes doivent être des enfants immédiats des lignes. Dans une rangée complète, la largeur des colonnes sera une combinaison de 12, mais il n'est pas obligatoire d'utiliser les 12 colonnes disponibles.

Les lignes doivent être placées soit dans une enveloppe de disposition à largeur fixe, qui a une classe .container et une largeur de 1170px, soit dans une enveloppe de mise en page pleine largeur, qui a une classe .container-fluid, et qui permet le comportement réactif dans cette rangée.

Le système de grille Bootstrap comporte quatre niveaux de classes :

  • .col- : Tres petit (<576px),

  • .col-sm- : Petit (≥576px),

  • .col-md- : Moyen, pour les tableaux (≥768px)

  • .col-lg- : Large, pour les ordinateurs de bureau (≥ 992px)

  • .col-xl- : Extra largepour les plus grands écrans (≥1200px).

Ceux-ci définissent essentiellement les tailles auxquelles les colonnes s'écrouleront ou se propagent horizontalement. Les niveaux de classe peuvent être utilisés dans n'importe quelle combinaison pour obtenir des mises en page dynamiques et flexibles.

Nous allons créer des mises en page plus flexibles qui modifient l'orientation de la colonne en fonction de la taille de la fenêtre. L'exemple suivant créera une disposition de trois colonnes sur des périphériques moyens tels que les ordinateurs portables et les ordinateurs de bureau, ainsi que sur les tablettes en mode paysage. Sur de petits périphériques comme les tableaux en mode portrait, il se transformera en une disposition en deux colonnes La troisième colonne se déplace au bas des deux premières colonnes.

Comme vous pouvez le voir dans l'exemple ci-dessus, la somme des petits nombres de colonnes de la grille (c.-à-d. .col-sm-) Est 3 + 9 + 12 = 24 > 12, donc le troisième élément div avec la classe .col-sm- 12 qui ajoute les colonnes supplémentaires au-delà du maximum de 12 colonnes dans .row, est enveloppé sur une nouvelle ligne pour les petits appareils dont la largeur de la fenêtre est inférieure à 992 pixels. On saute une ligne !

Un autre exemple intéressant de Box imbriquées :

Pour cela on fait appel à la classe .col-mod-4 suivi du nom de votre box. Bien sûr le style de ces boites reste à votre charge !

Enfin on peu pousser un peu plus les limites du responsive en affichant le contenu d’une page uniquement avec la résolution de appareil qui l’affichera. Plusieurs classe existe pour cela comme indiqué ci-dessous :

Il existe son contraire, c’est-à-dire une classe qui permettra de masquer les éléments avec une résolution bien précise. Pour cela remplacez visible par hidden.

Voici un exemple :

Affichera plusieurs résultats en fonction de la résolution de l’appareil, ainsi on aura :

Ou pour une résolution plus élevée :

Typograhie

Les développeurs débutants supposent souvent que leur HTML pur et sans style ressemblera à tous les navigateurs. Malheureusement, chaque navigateur possède sa propre feuille de style "agent utilisateur" par défaut appliquée au code HTML, et aucun navigateur n'a les mêmes valeurs par défaut. Par exemple, la saisie des tailles de police ne sont pas cohérentes entre les navigateurs, certaines listes non ordonnées et ordonnées ont laissé des marges et d'autres ont laissé le rembourrage, les navigateurs appliquent des bordures personnalisées et le rembourrage au corps HTML, et les boutons même sont diffusés différemment sur les navigateurs. Pour résoudre toutes ces incohérences, différentes règles de "réinitialisation" CSS sont nées qui définissent des défauts de style cohérents.

Bootstrap apporte quelques autres goodies à table en plus de la restauration CSS pure. Il est livré avec normalize.css , une alternative prête à HTML5 aux réinitialisations CSS, et elle a également des valeurs par défaut bien conçues. Par exemple, Bootstrap définit la valeur par défaut globale « font-size » à 14px, avec une hauteur de ligne de 1.428. La police par défaut est changée en Helvetica / Arial, avec un retour sans serif. Tous ces styles sont appliqués aux bodyparagraphes et à tous.

Exemple :

Généré avec le code :

Vous pouvez définir tous les en-têtes HTML, h1 à h6. De la même manière, quand vous le définissez dans un document HTML simple. Vous pouvez également utiliser les classes de titre h1 à h6, si vous voulez appliquer le style sur le texte même, exemple :

Enfermez votre titre avec ces différentes balises pour jauger la taille de celui-ci.

Vous aurez donc :

Les formulaires

Les formulaires ont parcouru un long chemin au cours des années, et aujourd'hui, l'utilisation d'un formulaire Web est l'une des activités les plus courantes effectuées lors de la navigation sur le Web. Alors que HTML5 a introduit un certain nombre de nouveaux attributs de formulaire, des types d'entrée et d'autres éléments d'assistance, les navigateurs n'ont pas beaucoup amélioré visuellement. Il s'agit d'un domaine où Bootstrap brille vraiment, car l'alignement et le coiffage des étiquettes et des entrées, la validation des formulaires et l'affichage des messages d'erreur peuvent être délicats sans aide.

Ex : Un formulaire tout simple contenant donc l’email, le mot de passe et le bouton « submit » pour se connecter,

Ce code donnera la capture ci-dessous, avec un style beaucoup plus sobre et rapide qu'avec du CSS pure :

Bootstrap peut aussi mettre en place des « états de validation » des champs :

Il fournit un mécanisme facile à utiliser et puissant pour la vérification des contrôles d'entrée pour présenter différents états de validation. Bootstrap comprend des styles de validation pour les messages d'erreur, d'avertissement et de réussite. Pour utiliser, il suffit d'ajouter la classe appropriée aux environs .form-group.

Ainsi on aura :

Ce qui donnera le résultat suivant :

Chaque champ est donc clairement identifiable par l’utilisateur en fonction des entrées effectuées ! Avec un style soigné et sans avoir de code complexe.

Bootstrap définit tous les éléments d'entrée textuels, comme input, textarea et select, à 100% de largeur de l'élément de formulaire parent. Il vous permet également de choisir entre les formulaires en ligne, qui afficheront plusieurs étiquettes et champs de saisie dans la même ligne, en utilisant la classe .form-inline ou les formes horizontales, qui utilisent des grilles pour aligner chaque entrée dans sa propre rangée, en utilisant la classe .form-horizontal. Et si vous devez placer du texte brut à côté d'une étiquette de formulaire, au lieu du champ de saisie, vous pouvez lui donner la classse .form-control-static afin de faire correspondre l'aspect visuel du formulaire.

Boutons et groupes de boutons

Les boutons sont l'une des choses que chaque navigateur rend totalement différent. Si vous souhaitez avoir un design cohérent sur tous les navigateurs, il s'agit potentiellement d'un problème. Heureusement, Bootstrap a également une solution élégante pour les boutons. Différentes classes sont disponibles dans Bootstrap pour coiffer les boutons ainsi que pour indiquer les différents états. Les styles de boutons peuvent être appliqués à n'importe quel élément. Cependant, il est appliqué normalement aux éléments a, input et button pour un meilleur rendu.

Le tableau suivant répertorie les différents boutons disponibles dans Bootstrap:

Pour les générer ? Très simple il suffit d’appeler le nom du bouton spécifique à l’aide de l’attribut class. Ainsi chaque bouton aura automatiquement sa couleur attribuée ! Son nom restera a votre charge.

Et pour les modifier ? Bootstrap vous donne l'option de mettre à l'échelle un bouton vers le haut ou vers le bas. Vous pouvez faire des boutons plus ou moins en ajoutant une classe supplémentaire .btn-lg, .btn-smou .btn-xs.

En effet il est possible de créer des boutons plus ou moins large et plus ou moins petit avec Bootstrap. Comme le montre cet exemple :

Pour le faire, rien de plus simple ! Cela ressemble un peu a notre exemple précédent sur les couleurs de boutons. Il faut associer la bonne classe au bon bouton, comme suit :

Vous pouvez également créer des boutons de niveau de bloc (boutons qui couvrent toute la largeur des éléments parents) en ajoutant une classe supplémentaire .btn-block.

Et si on veux afficher un groupe de boutons ? Pour lister différentes page par exemple ? Pour créer une barre d'outils de bouton, il suffit d'envelopper des groupes de boutons dans un élément et d'appliquer la classe .btn-toolbar sur celui-ci. Pour séparer cette barre il suffit de délimiter le groupe de boutons par des div. Ensuite on appelle la classe correspondante et le tour est joué !

Vous avez maintenant une belle « Button Toolbar » :

NavBar

La barre de navigation est un composant Bootstrap conçu spécifiquement pour créer le menu de navigation principal du site. Sur les grands écrans, il est affiché horizontalement, et sur les écrans petits et mobiles (ceux en dessous de 768 px), il s'est transformé en menu déroulant "hamburger". Concraitement, navbar est une liste inline non ordonnée d'éléments de menu, avec des éléments HTML supplémentaires qui sont ajoutés comme vous le souhaitez. Parmi les ajouts possibles, mentionnons l'image de marque (texte ou logo), formez des éléments tels qu'une barre de recherche et des menus déroulants. Deux styles sont disponibles pour le choix de «out-of-the-box»: léger et sombre ou inversé. Les éléments dans la barre de navigation peuvent être alignés à gauche ou à droite en appliquant respectivement .navbar-left ou .navbar-right.

La Navbars peut avoir 4 comportements de position différents. La position de flotteur par défaut comporte un espace de tampon autour de lui. La barre de navigation statique peut être défilé sur la latgeur lorsque l'utilisateur fait défiler la page. La barre de navigation fixe, qui peut être en haut ou en bas de la fenêtre, est toujours visible sur la page, quel que soit l'endroit où l'utilisateur s'est déplacé.

Cela ne couvre que quelques-uns des excellents composants Bootstrap qui le met en avance sur des bibliothèques et des outils similaires. Avec Bootstrap, il suffit de quelques classes simples de CSS pour créer un front end facilement, entièrement responsive et rapide. C'est un excellent point de départ pour votre prochain grand projet!

Exemple, ce code (ressemblent étrangement à un simple formulaire !) :

Vous permettra d’afficher cette barre de navigation :

Images et icônes

Les images sont très fréquentes dans la conception web moderne. Le style des images et le positionnement correct sur les pages Web est très important pour améliorer l'expérience de l'utilisateur.

En plus de rendre les images réactives, nous pouvons facilement ajouter différents effets. Par exemple, les coins arrondis sont appliqués avec la classe : .img-rounded, et l'image peut être façonnée pour être un cercle en utilisant .img-circle, ou vers une vignette en utilisant la classe : .img-thumbnail.

Un exemple vous aidera surement à mettre en image la situation !

On importe notre image via l’attribut source puis avec la classe que l’on souhaite on applique la forme que l’on désire :

Utilisation de l'objet Bootstrap Media

Si vous souhaitez créer une mise en page contenant des objets multimédias alignés à gauche ou à droite, comme des images ou des vidéos aux côtés du contenu textuel tel que les commentaires de blog, les Tweets, etc.. Vous pouvez le faire facilement en utilisant le composant média Bootstrap nouvellement introduit, comme ceci:

Ce qui donnera :

Comme vu précedement la logique en elle-même ne change pas. On appelle la classe et on personalise le reste pour que ça colle avec nos envies.

Bootstrap est livré avec plus de 260 glyphes, de l'ensemble Glyphicons. Jan Kovařík, auteur et designer de Glyphicons, les a mis gratuitement à disposition pour Bootstrap et sous la même licence que Bootstrap, une bonne nouvelle ! Les icônes de polices ont de nombreux avantages par rapport aux images simples, la première c’est qu’ils sont évolutifs, et la seconde c'est qu'ils peuvent également être personnalisés en utilisant simplement le CSS, afin de manipuler la taille ou la couleur.

Pour utiliser les icônes Bootstrap, vous aurez besoin d'une balise span avec une classe de base glyphicon et une classe d'icônes individuelles glyphicon-*. La syntaxe générale pour utiliser les icônes Bootstrap est donné dans l'exemple qui suit.

Par exemple, pour utiliser l'icône de recherche, vous pouvez placer le code suivant à peu près n'importe où:

Comme dans le code ci-dessus, il est très simple d’intégrer un glyphicon, il suffit donc d’appeler celui qui vous convient dans le span puis via le CSS pour le placer ou vous le souhaitez. On peut aussi changer simplement la couleur en modifiant la class du début. Ainsi en alternant btn btn-default par btn btn-primary on obtient un changement de couleur de fond par un bleu.

Vous voulez du rouge ? Mettez warning à la place ! C’est un bon moyen pour avoir un site épurer, simple et élégant à la fois.

Le résultat du code précédemment vu affichera :

Vous en conviendrez, c’est un peu plus soigné qu’un simple bouton submit :

Barre de progression (progress bar)

Les barres de progression peuvent être utilisées pour montrer l'avancement d'une tâche ou d'une action aux utilisateurs. L'exemple suivant vous montrera comment créer une barre de progression simple avec un gradient vertical.

Pour cela, ajoutez l’élément progress-bar dans la div correspondante, puis intégrer le pourcentage correspondant :

Ce qui donnera :

Une barre de progression statique c’est pas la folie non plus vous êtes d’accord ? alors on va pousser un peu et on va en créer une dynamiquement :

Comme vous l’avez vu le jQuery est à l’honneur !

Pour faire progresser la barre il suffit donc de créer une fonction if qui lui permettra de se remplir jusqu’à 100%, la barre n’est pas seule à se remplir puisque le pourcentage grimpe aussi. A la fin on arrête le timer quand il est à 100.

Exécutez ce code est vous obtiendrez une barre de progression dynamique de 0 à 100% :

On peut aussi intégrer de la couleur a ces barres en leur attribuant par exemple celle des boutons présentés plus haut :

Enfin, dans cette dernière partie on va traiter brièvement des différents affichages pour le texte, comment afficher une vignette d’alerte ou sinon intégrer des flotteurs rapides !

Pour la vignette d’alerte, il suffit d’appeler la class correspondante (alert alert-warning) et de remplir la « div » pour alerter vos utilisateurs :

Vous obtiendrez le resultats suivant :

N’oubliez pas d’inclure le lien (petite croix à droite) pour fermer votre annonce !

Pour les flotteurs qui peuvent être utile pour afficher des notes lors de la création du site par exemple sans avoir besoin d’un lourd CSS, ça s’apparente aux zones de text sur Word :

Vous avez donc une marge automatique qui symbolise en fait la distance entre le bord gauche et le bord haut de votre fenêtre par rapport à votre note. Le résultat du dessous a donc la fenêtre à 20px de votre carré, mais si on l’augmente les notes se rapprocheront et s’abaisseront :

Enfin le padding est la grosseur de votre note et le backround la couleur de fond

Carousel

Le carousel est un volet déroulant du plus bel effet !

Deux flèches de part et d’autre de l’image pour la changer à votre convenance, ainsi que des points sur le bas pour voir l’avancé de votre progression. Un élément design qui embellira votre site à coup sûr !

Pour ce faire voici le code de cet exemple

Dans un premier temps on appelle la class « carousel-indicators » suivit de la liste de vos différents slides à afficher avec leur ordre de passage.

Deuxièmement après avoir listé nos slides, on les renseigne. C’est-à-dire, la source de l’image, la grandeur de l’image, son nom, etc.. Tout ceci dans des div

Enfin on insère nos chevron (flèche gauche/droite) pour sélectionner l’élément suivant et précédant via la classe correspondante.

Et voilà vous avez l’un des éléments web les plus élégant qu’on puisse trouver sur un site !

Et après ?

Bootstrap est un outil puissant régulièrement améliorer, le web dans sa globalité est en constante fluctuation il est donc important de se tenir à jour des nouveautés apportées. Pour cela suivez ce lien : http://blog.getbootstrap.com/

Il vous permettra de suivre l’équipe Bootstrap dans l’ajout de nouvelles fonctionnalités. Un blog très clair et sympathique, chaque nouvel article concernant les mise à jour se fera avec un exemple via une capture du résultat final et une explication de celle-ci. C’est Mark Otto (Créateur de Bootstrap et Directeur du design GitHub) en personne qui les rédige. Actuellement nous sommes sur Boostrap 4 Alpha 6 avec une mise à jour d’un nouvel élément particulièrement intéressant..

Conclusion

Rapide, élégant, intuitif, Bootstrap est un Framework très puissant qui vous accompagnera dans la création de votre site. Cet article n’est évidemment pas le reflet global de ce qu’apporte cet outil, il reste a votre charge de trouver le moyen d’arriver à vos fins. C’est donc un aperçu des capacités du Framework !

Néanmoins j’espère vous avoir convaincu de son utilité ! Au plaisir !

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