Dreamweaver CC 2017/2018 : Les nouveautés

Intégrer les nouveaux composants de Bootstrap 4

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
À la fin de cette séquence, vous saurez comment utiliser les nouveaux composants de Bootstrap 4 disponibles dans Dreamweaver.

Transcription

Maintenant que notre page Bootstrap 4 existe dans Dreamweaver, nous allons y intégrer des composants Bootstrap et là aussi, Dreamweaver nous propose quelques mises à jour. Pour les découvrir, nous allons nous rendre au niveau du panneau Insertion qui se trouve ici sur le côté, par défaut. Dans ce panneau, nous allons prendre les composants Bootstrap. Vous pouvez aussi accéder à toutes ces options via le menu Insertion en allant chercher ici le sous-menu Composants Bootstrap. Si vous êtes familiers avec Bootstrap, vous allez constater pas mal de changements ici, dans ce panneau. En effet, Bookstrap 4 est une réécriture quasiment complète de Bootstrap. Donc il manque des options comparé à ce que vous aviez l'habitude de trouver dans Bootstrap 3. Il manque quelques composants, comme par exemple, le composant Panel ou le composant Well. Ce n'est pas un oubli de Dreamweaver, c'est tout simplement des composants qui ont été retirés de Bootstrap 4 et qui étaient présents dans Bootstrap 3. À l'inverse, il y a également des composants nouveaux, c'est-à-dire des composants qui ont été introduits dans Bootstrap 4 et Dreamweaver vous propose ici de nouveaux boutons, par exemple ici le composant Cards, qui n'existait pas dans Bootstrap 3. Vous avez également le composant Badges qui n'existait pas. Vous allez découvrir encore des tas de petites nouveautés dans ces composants. Tous ces composants ont été réécrits. Alors démonstration, je vais ici me placer au niveau du Body, je vais placer un Container-fluid, voilà, sur ma page. Dans ce Container-fluid, nous allons mettre une rangée dans la grille Bootstrap avec trois colonnes. Je vais imbriquer ces trois colonnes dans le Container-fluid. Voici ces trois colonnes. Et puis dans la première de ces trois colonnes, je vais vous montrer à quoi ressemble ce nouveau composant Card. Je vais cliquer ici sur la petite flèche pour vous montrer que ce composant existe dans différentes déclinaisons. Prenons la carte la plus simple, donc le composant Card qui se trouve ici. Je vais l'imbriquer dans la colonne dans laquelle je me trouve, voilà. Alors, attention dans cette version de Dreamweaver, vous voyez que ce nouveau composant se voit affublé de la classe col-md-4. Autrement dit, ce composant va prendre un tiers de la largeur de la colonne dans laquelle il se trouve. Ça ne m'intéresse pas vraiment donc je vais retirer cette classe du composant. Voilà, comme ça la carte va prendre toute la largeur de la colonne dans laquelle elle se trouve. Alors, je vais me placer ici dans ma deuxième colonne maintenant et vous montrer une déclinaison de ce composant Card, par exemple ici une carte avec une liste dedans. Voilà, je vais également l'imbriquer dans cette colonne et venir supprimer la classe col-md-4 pour que ce composant prenne donc toute la largeur de la colonne du milieu. Voilà à quoi ça ressemble. Et puis vous avez encore d'autres déclinaisons de ce composant possibles par exemple ici une carte avec un Header et un Footer, une en-tête et un pied de carte. Nous allons également imbriquer ce composant ici dans la colonne et retirer cette classe col-md-4. Voici donc à quoi ressemblent quelques déclinaisons de ce nouveau composant Card. Vous voyez que c'est aussi simple qu'avant d'intégrer de nouveaux composants Bootstrap dans votre page simplement, le panneau d'Insertion de Dreamweaver reflète maintenant le nouveau jeu de composants et de classes qui existent dans Bootstrap 4.

Dreamweaver CC 2017/2018 : Les nouveautés

Optimisez votre flux de travail avec les nouveautés de Dreamweaver. Faites le tour des améliorations de l'interface, appréciez les évolutions de l'éditeur de code, etc.

Aucun commentaire n´est disponible actuellement
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :2 nov. 2016
Mis à jour le:13 juin 2018

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !