Css, Bootstrap
La formation complète permettant d'apprendre à concevoir des interfaces incroyables avec le Framework Bootstrap.
Description
Les Framework CSS apportent une solution rapide à une problématique bien connue, créer rapidement un habillage d'application Web, qui soit standard et sans tout réinventer.
Premier du genre, Bootstrap bénéficie d'une grande renommée dans l'industrie web, il est même devenu un des environnements CSS incontournable.
Doté de nombreuses fonctionnalités, allant de l'utilitaire à la mise en page en passant par des composants complets, il aide des milliers de développeurs à travers le monde à faire du CSS avec des normes communes.
Dans cette formation, vous apprendrez les bases de Bootstrap, comment concevoir vous-même des designs facilement grâce aux outils disponibles mais également comment utiliser les principaux composants que ce Framework vous met à disposition.
Publics visés
- Tout développeur souhaitant gagner en flexibilité dans le design d'interface.
- Tout décideur souhaitant connaitre les avantages de Bootstrap.
Pré-requis
- Savoir utiliser les bases de HTML et CSS.
- Avoir une bonne connaissance d'Internet en général.
- Connaitre les outils développeurs dans le navigateur.
Compétences
Comprendre l'intêret de Boostrap.
Savoir installer le Framework.
Définir des design simple et complexes.
Utliser les principaux outils de Bootstrap.
Savoir décorer des formulaires.
Savoir mettre en place le responsive.
Utiliser les principaux composants.
Savoir étendre les règles de bases.
Comprende l'utilisation des templates.
Comprendre l'utilisation de Javacript.
Contenu du cours
Découvrez le rôle de Bootstrap dans l'écosystème des Framework CSS. Principal environnement CSS, il a su s'imposer au fil des années.
Créé en 2011, Bootstrap a répondu à une problématique fréquente des développeurs web.
En surfant sur les techniques les plus utilisées au fil des versions, Bootstrap à su se réinventer intelligemment .
Qu'on parle de design system ou de Framework CSS, de nombreux concurrents existent, découvrons les principales alternatives.
Pour utiliser Bootstrap dans un projet, il va être nécessaire de le télécharger et de choisir quelle partie on souhaite pouvoir utiliser.
Bootstrap dispose de plusieurs façon de l'installer, commençons simplement par un téléchargement classique.
Pour bénéficier de la dernière version et être toujours à jour, il peut être judicieux d'utiliser un gestionnaire de paquet, comme NPM.
Pour utiliser les règles CSS de Bootstrap, il va être nécessaire de l'appeler dans une page de site pour démarrer.
Bootstrap est un outil complet, qui vous place directement dans une environnement pour travailler, découvrons les principales fonctionnalités.
Après avoir inséré Bootstrap sur une page, on démarre à vide mais avec style, directement.
Pour entourer des éléments, les container sont la solution de départ.
Bootstrap définit des règles déjà définies pour le texte, les liens.
Média de base, les images ont également droit à un lifting et des utilitaires.
Pour présenter des données tabulaires, Bootstrap nous aide aussi.
En matière de composition, Bootstrap est un outil incroyable, qui va nous aider à coder moins et à définir les gabarits très rapidement.
Le grille est un élément central de la composition, elle va permettre de choisir les emplacements.
Chaque élément de la grille peut bénéficier d'espace en plus et de gouttières.
En utilisant les outils d'index, vous pourrez positionner vos éléments les un en dessous des autres.
Ne faisant pas l'impasse sur les dernières avancés CSS, Bootstrap nous permet d'utiliser Flex de manière simple.
Les Grid en CSS sont aussi de la partie, comme pour Flex, les techniques d'utilisation sont simples.
De très nombreuses classes utilitaires vont nous permettre d'aller plus loin dans nos design.
Afin de clôturer le chapitre sur les outils à disposition pour composer, voyons l'intégration complète de notre design.
En matière de design de formulaires, Bootstrap offre tous les outils indispensables pour présenter proprement une interaction utilisateur.
Tout démarre par un container, permettant d'informer Bootstrap de l'emplacement d'un formulaire.
Les input bénéficient d'un joli style de de capacité de mise en valeur de l'information.
Des styles pour les Radio, Checkbox et Select sont également disponibles.
Les groupes de champs vont nous permettre d'ajouter encore du contexte pour l'utilisateur.
Quelques outils simples nous permettent de donner encore plus de détails à l'utilisateur.
Pour informer de la validité d'un champ ou fournir un feedback positif et visuel, Bootstrap dispose de classes intéressantes.
Partie intégrante du Framework, les composants sont des éléments prêts à l'emploi, découvrons les principaux.
Que ce soit pour des liens ou des boutons de formulaires, beaucoup de possibilités s'offrent à nous.
Afin de présenter certaines informations, nous disposons d'un bloc propre sous forme de carte, pouvant utiliser une image ou non.
Pour présenter une navigation (Breadcrum, Menus, Pagination), Bootstrap dispose de nombreux composants.
De nombreux autres composants vous permettent d'aller plus vite, voyons ce qui est possible de faire.
Framework complet, Bootstrap permet également de travailler sur des design responsive, afin de présenter son application sur tous les supports.
Le système de Bootstrap pour le responsive fonctionne sur des taquets de taille.
Il est possible de faire apparaitre ou disparaitre des éléments en fonctions de la taille d'écran.
En fonction de l'affichage, vous allez pouvoir entièrement revoir votre design, comprenons les règles qui le permettent.
Tout ou presque est modifiable avec Bootstrap, mais il est nécessaire de savoir où le faire.
Beaucoup d'éléments internes sont gérés par des variables, et nous allons pouvoir créer nos propres surcharge grâce à ce système.
Des thèmes sont disponibles, mais vous pouvez aussi être amené à créer le votre de toute pièces.
Il est possible de créer des classes d'extension avec Bootstrap, découvrons comment le faire.
Les systèmes d'icônes permettent de rajouter des pictogrammes pour donner des informations ou simplement décorer, découvrons les différents.
Pour utiliser le plein potentiel de Bootstrap, certaines techniques sont indispensables mais vous demanderons plus de connaissances.
De nombreux exemples sont disponibles, sur le site officiel mais aussi sur internet.
Plus fournis que les thèmes, les templates peuvent être un bon moyen pour implémenter une application complète.
Javascript permettra d'activer des parties spécifiques de Bootstrap, testons avec des exemples disponibles dans la documentation.
Enseignant
Julien Moulin
Fondateur & Formateur Js/Ts
Julien Moulin est un expert en développement full stack (JS/TS) et un leader technique reconnu. Il excelle dans l'adoption de technologies innovantes tout en répondant aux besoins clients. Son approche allie pragmatisme et innovation, avec une expertise couvrant les plateformes e-commerce, les applications métiers et la modernisation des architectures existantes. En mentor passionné, il partage ses connaissances avec pédagogie, encourage l’apprentissage continu, et inspire ses équipes à relever des défis ambitieux.
Vous aimerez aussi
Découvrez de fabuleux cours dans les mêmes sujets
