Apprenez Bootstrap 4 dans ce cours gratuit en 10 parties

Bootstrap 4 représente une réécriture complète de toute la bibliothèque, et il apporte plusieurs nouvelles fonctionnalités et concepts pour vous envelopper. Il peut donc sembler accablant de se lancer la tête la première dans la documentation pour l'apprendre.

C'est pourquoi nous nous sommes associés à Neil Rowe (anciennement CodersGuide) et avons créé un cours complet gratuit sur Bootstrap 4. Neil a précédemment créé l'un des cours Bootstrap 3 les plus populaires sur YouTube, nous sommes donc très heureux qu'il soit choisi d'utiliser Scrimba pour son cours de suivi.

Vous pouvez suivre le cours aujourd'hui. Rendez-vous simplement sur la page du cours et vous deviendrez un maître Bootstrap 4 en une heure.

Voyons maintenant de plus près ce que vous apprendrez!

# 1 Introduction au cours

Dans le premier screencast, vous aurez un aperçu de Bootstrap lui-même, ainsi que des utilitaires et des composants qu'il apporte. Neil passe également en revue les principaux avantages apportés par la v4.

# 2 Le système de réseau réactif

Le cours fait ensuite suite à l'un des composants les plus importants de Bootstrap, le système de grille réactif. Neil explique comment créer diverses grilles, avec différents points d'arrêt, tailles de colonnes et décalages.

# 3 Navbars réactifs

Le composant navbar est une des principales raisons pour lesquelles de nombreuses personnes utilisent Bootstrap. Dans cette conférence, vous apprendrez à créer une barre de navigation réactive qui se réduit en un menu de hamburgers sur de petits écrans.

# 4 Modaux

Bootstrap facilite également la création de modaux, ce qui est souvent utile. Dans cette conférence, vous apprendrez à les créer étape par étape.

# 5 Formulaires

Les formulaires sont essentiels pour la plupart des sites Web, il est donc bon de savoir comment les créer. Ainsi, dans cette conférence, vous apprendrez à créer un formulaire d'inscription réactif. Ici, vos compétences issues de la conférence responsive grid seront également utiles.

# 6 Liste des groupes

Les groupes de listes peuvent être utilisés à de nombreuses fins différentes. Ils peuvent, par exemple, être utilisés comme barre latérale, menu, liste d'articles ou tout ce que vous voulez, en gros.

Cartes # 7

Bootstrap 4 introduit un tout nouveau composant appelé cartes, qui remplace les panneaux, les puits et les vignettes. Une carte est un conteneur de contenu flexible et extensible. Dans cette conférence, vous apprendrez à en créer un à l'aide de divers composants qui composent généralement une carte.

# 8 Tableaux

Bootstrap 4 est également livré avec un tas de classes pour modifier les tableaux, et cette conférence en fera une démonstration pour la plupart. Ils sont opt-in, ce qui signifie que vous devez ajouter activement une classe de table pour transformer une table en table Bootstrap. Ce n'est pas le cas avant que les tableaux HTML normaux ne soient automatiquement transformés en tableaux Bootstrap.

# 9 Alertes

Les alertes ne sont pas particulièrement intéressantes et il n'y a pas trop de changements par rapport aux versions précédentes de la bibliothèque, donc si vous avez utilisé Bootstrap 2 ou 3, vous devriez être assez familier avec tout cela. Cependant, il est important de les connaître, car donner à vos utilisateurs des messages et des notifications via des alertes peut aider à rendre votre site Web plus convivial.

# 10 Options de navigation

Enfin, le cours se termine par où il a commencé, en vous donnant plus d'outils dans votre ceinture en ce qui concerne les barres de navigation, comme les onglets et les listes déroulantes. C'est pratique à savoir, mais pas aussi fondamental que le contenu de la deuxième conférence, c'est pourquoi cela arrive à la fin du cours.

En suivant toutes ces conférences consécutives, vous devriez pouvoir commencer à créer des sites Web avec Bootstrap 4. Et si vous êtes bloqué, vous serez bien équipé pour plonger dans la documentation pour résoudre les problèmes que vous pourriez avoir.

Le format Scrimba

Enfin, jetons également un rapide coup d'œil à la technologie derrière le cours. Il est construit à l'aide de Scrimba, un outil de capture d'écran de codage interactif. Un «scrim» ressemble à une vidéo normale, cependant, il est entièrement interactif. Cela signifie que vous pouvez modifier le code à l'intérieur du screencast.

Voici un gif qui explique le concept:

Suspendez le screencast → Modifiez le code → Exécutez-le!  → Voir vos modifications

Suspendez le screencast → Modifiez le code → Exécutez-le! → Voir vos modifications

C'est idéal lorsque vous sentez que vous avez besoin d'expérimenter le code afin de bien le comprendre, ou lorsque vous souhaitez simplement copier une partie du code.

Alors qu'est-ce que tu attends? Allez-y et suivez le cours aujourd'hui!

Merci d'avoir lu! Je m'appelle Per, je suis co-fondateur de Scrimba et j'aime aider les gens à acquérir de nouvelles compétences. Suivez-moi sur Twitter si vous souhaitez être informé des nouveaux articles et ressources.

Merci d'avoir lu! Je m'appelle Per Borgen, je suis le co-fondateur de Scrimba - le moyen le plus simple d'apprendre à coder. Vous devriez consulter notre bootcamp de conception de sites Web réactifs si vous souhaitez apprendre à créer un site Web moderne à un niveau professionnel.