Voici une nouvelle série de cours consacrés à l’utilisation du framework BootStrap 3.
Découvrez comment le framework Bootstrap 3 va vous permettre de simplifier le développement de la partie graphique de votre site Web.
BootStrap 3 est un bibliothèque CSS qui contient de nombreux composants qui vous seront très utiles dans le développement de votre site.
BootStrap fournit aussi des composants utilisant la bibliothèque jQuery qui vont vous permettre d’ajouter de nouvelles fonctionnalités au niveau de l’interface.
Tout est dans la formation ci-dessous :
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Présentation Framework BootStrap 3
Bonjour à tous et bienvenu sur développement facile. Dans cette nouvelle série de cours vous allez apprendre à utiliser le framework BootStrap en version trois donc c’est un framework CSS qui permet de vous simplifier la vie dans le développement des applications.
Présentation du framework BootStrap 3
C’est une bibliothèque qui contient du CSS qui interagit avec une appli JavaScript, qui utilise jQuery et ça permet de créer des sites Internet pour les mobiles pour les périphériques mobiles comme les Smartphones, iPhone, les tablettes, iPad et en même temps pour les ordinateurs de bureau ou les donc les PC de bureau, les PC fixe. Ca fait que votre site qui s’adapte automatiquement en fonction de la taille de l’écran du périphérique de l’internaute. Donc justement BootStrap trois, ça permet d’améliorer considérablement votre développement d’applications Web et en plus, votre site devient compatible avec la majorité des navigateurs, que ce soit Safari pour Apple, Google Chrome Firefox et même Internet Explorer donc comme ça vous êtes sûrs que votre site Web est consultable des périphériques mobiles et fixe et avec la majorité des navigateurs qui existent sur Internet.
Il faut savoir que BootStrap 3 c’est un framework CSS avec une appli JavaScript propose un système de grille donc ça fait que vous découpez votre page de une à 12 colonnes et ça vous permet ainsi de d’organiser vos éléments par exemple pour un blog, vous aurez l’entête, sur le côté la zone widget qui prendra par exemple trois colonnes et les neuf autres colonnes ce serait votre contenu, généralement les articles les pages etc. et il a également, BootStrap trois, une bibliothèques d’icône il y a même d’autres extensions qui permettent de rajouter encore plus d’icônes, donc c’est très très pratique donc bien évidemment y’a des widget, des formulaires améliorés utiliser, vous pouvez créer des infobulles, des menus : menus verticaux; menus horizontaux; des sortes de menu à onglets également donc vous avez tout un tas de d’éléments prêts à être utilisé pour votre site Internet.
Donc ça c’est … ce qu’il s’affiche à l’écran, c’est ce que je viens de vous expliquer, des donc je passe sur cette diapo.
Pour télécharger la dernière version du framework BootStrap 3, suffit de vous rendre sur getbootstrap.com.
Comme je vous l’ai dit BootStrap 3 utilise le framework jQuery, donc vous aurez besoin d’aller sur le site jQuery.com pour télécharger la dernière version de jQuery, suffit de copier le fichier jQuery. js, donc la version vous avez téléchargée dans le répertoire JS de BootStrap 3, puisque quand vous allez télécharger l’archive de BootStrap 3, il faudra décompresser il y aura un répertoire CSS, un répertoire avec toutes les icônes un répertoire JS et là vous mettrez votre fichier jQuery. Et vous avez des exemples, de tous les composantes, tous les éléments que vous pouvez intégrer sur votre site donc vous pouvez personnaliser tous les éléments qu’il y a dans BootStrap 3. Les couleurs des éléments des formulaires des boutons, etc. vous pouvez personnaliser. Je vous ai mis l’URL, c’est bootstrap getbootstrap.com/customize justement pour créer un petit peu votre thème personnalisé, ça fonctionne le jour même principe que jQuery, si vous avez eu les cours sur jQuery il y a themeroller qui existe pour jQuery qui est vraiment très très intéressant et très simple d’utilisation.
Documentation de BootStrap 3
Donc pour la doc de BootStrap elle est malheureusement principalement en anglais, il y a une doc en français mais j’ai été voir, je la trouve pas terrible terrible, donc la vrai doc principalement en anglais du coup avec ces cours vidéo j’espère que ça va vous aider à apprendre à utiliser très rapidement ce framework BootStrap 3, je vous ai mis les liens quand même la traduction partielle en français sinon si vous êtes bilingues vous avez rendez-vous sur l’adresse qui s’affiche pour une description complète des éléments bootstrap leur utilisation comment les utiliser avec des exemples de code source le tout en anglais.
Exemple d’application
Donc je vous montre un exemple rapide de code source comme d’habitude avec le résultat en direct. Le code source est vraiment très simple comme je vous l’ai dit, vous intégrez jQuery avec le numéro de version dans le répertoire JS de BootStrap tout simplement vous avez bootstrap.js à intégrer et bien également à intégrer donc la feuille de style. Après moi j’aime bien ce soit en police Arial taille 10 caractère donc c’est pour ça que je défini ça, petite margin-top de 30 pixels sur le footer. Vous avez toujours une div containers, ça en fait ce ne sera pas la peine, donc vous avez votre div container et dedans vous aurez les éléments BootStrap qui vont être intégrer, donc ça donne ça, ça fait que si on est sur un mobile ça donne ça, donc ça s’affiche automatiquement. Je vous montre un petit peu tous les éléments de BootStrap, je vous l’ai dit, il y a énormément d’icône, ça permet d’agrémenter vos boutons ou les menus les infobulles énormément énormément d’icône. Vous avez donc des panneaux d’information, enfin des div informatives et différentes couleurs pour afficher du code, des boutons si vous faites un éditeur de texte en ligne, centrer, justifier, etc. des menus, des menus, l’alignement vous avez tout un tas d’éléments que vous pouvez intégrer, les boutons, la pagination on va le voir aussi également la pagination, des boutons différentes taille, donc des types de menu différent, vous allez voir aussi apprendre à créer ces types de menus donc horizontal vertical vous avez tous les Je vais me mettre en affichage mobile donc en affichage mobile ça s’affiche également très très bien, les boutons informatifs justement en fonction de : attention , regarder, prêtez attention, informations, réussite, un bouton d’actions, des doubles bouton avec double menu, d’un côté vous avez un bouton et de l’autre un menu, voilà vous pouvez faire des bouton de tailles différentes, il y a tout le temps le code qui s’affiche en dessous, vous voyez c’est relativement très très simple pour créer pour utiliser les composants de BootStrap donc vous voyez, il y a énormément énormément d’éléments et on va voir tout ça à travers plusieurs cous en vidéo.
Votre Plan d’actions
Déjà vous avez un premier exemple de code source donc c’est à vous de jouer, commencez par installer le framework BootStrap, regardez un petit peu la page des composantes, personnalisez votre thème et commencez à utiliser à vous amuser avec les composants si vous avez des questions vous pouvez les poser directement cours vidéo comme d’habitude au-dessus de cette vidéo il y a une bannière ou alors la vidéo à va se transformer en lien donc vous aurez un lien, donc je vous invite à consulter la deuxième vidéo donc dans la deuxième vidéo on va aller beaucoup plus loin donc je vous invite sois à cliquer sur la bannière sois à attendre la fin de la vidéo et à cliquer sur le lien de la vidéo pour la suite sinon comme d’habitude vous trouverez en téléchargement sous cette vidéo le code source du cours. Je vous dis à très bientôt sur développement facile
[/ppmtoggle] [/ppmaccordion]
Téléchargez l’exemple BootStrap 3
Et voici l’exemple d’application développée avec BootStrap 3.
Téléchargement du code source Exemple d'implémentation de BootStrap 3 dans une page Web
