Bundle : Tout savoir ou presque sur le framework CSS BULMA
-30% de réduction
Pour ce 5ème volet de ma formation en ligne dédiée au framework CSS Bulma et plus précisément aux éléments.
Nous allons voir entre autre :
- Comment customiser les tableaux,
- Comment gérer les images,
- Comment créer un fil d'ariane,
- Comment personnaliser Bulma.
Au cours de ce tutoriel en vidéo, nous verrons également, de manière pratique, comment mettre en place :
- Un menu à onglets,
- Une fenêtre modale,
- Un menu responsive.
A cela, nous ajouterons du JavaScript moderne afin de pouvoir les faire fonctionner. Je rappelle que Bulma n'a pas vocation à fournir du JavaScript, mais uniquement du CSS. Nous allons donc mobiliser nos connaissances dans ce domaine. Si vous avez besoin d'apprendre le JavaScript moderne, je mets à votre disposition un Bundle complet sur ce sujet.
A la fin du cours, vous pourrez valider vos nouvelles connaissances en passant un QCM.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions dédiés à la gestion d'éléments dans ce framework.
Pour aller plus loin avec Bulma
Voici les liens de mes précédentes formations dédiées à Bulma :
Table des matières de cette formation CSS (durée : 2h46m)
-
Les éléments
- La classe box 00:03:16
- La classe button 00:05:45
- Ajout d'une icone sur un bouton 00:03:03
- Les listes ordonnées 00:05:20
- La classe delete 00:03:15
- Les icones 00:04:31
- Les images 00:04:53
- Les tags 00:05:48
- Les tableaux 00:05:46
-
Les composants
- Le fil d'ariane 00:04:24
- Les cartes 00:04:42
- La classe message 00:03:41
- La pagination 00:05:00
-
Menu à onglet
- Mise en forme des onglets 00:06:54
- On ajoute du CSS et du JavaScript moderne 00:08:15
- On met en relation les onglets avec les contenus 00:08:39
- On active le bon onglet 00:05:27
-
Fenêtre modale
- Présentation 00:05:23
- Création de la boîte modale 00:02:45
- On affiche la fenêtre modale 00:07:31
- On ferme la fenêtre modale 00:02:01
- On améliore la fermeture de la fenêtre modale 00:04:20
-
Barre de navigation
- Faire apparaître un menu burger 00:05:44
- Transformer le menu burger en croix 00:04:45
- Déclaration de la boîte mère, navbar-brand 00:09:23
- Création du menu 00:06:53
- Apparition du menu pour les écrans de type touch 00:03:31
-
Bonus : Personnaliser Bulma
- Présentation 00:04:43
- Création du fichier package.json 00:03:39
- Installation des dépendances 00:04:12
- Création d'un fichier html 00:04:46
- Création du fichier css de bulma 00:02:45
- Personnalisation des variables de bulma 00:03:26
-
Conclusion
- Conclusion 00:01:43
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Merci beaucoup pour cette série de cours, vraiment interessante et prenante. Il me tarde de mettre en oeuvre, pour essayer en réel. Toujours aussi profesionnel Mr Brison
-
Avec quelle version de logiciel ce tuto est-il compatible ?Bulma
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Les sources du tuto.
note moyenne
avis laissé