Découvrir Ember.js

Utiliser Bootstrap pour mettre en page l'application

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Faites vos premiers pas avec la librairie Bootstrap utilisée dans le contexte d'une application Ember.js.
05:50

Transcription

Voyons encore en somme notre site maintenant que bootstrap est installé. La première chose qu'il a fait, c'est enlever les marges. Votre [ inaudible ] complètement collabore en tout cas sous ce titre-là. Il a aussi changé la police, je passe y vous rappeler, il a gardé la couleur que je lui avais précisée, par contre la police est plus grosse, titre serait en style existant chez bootstrap et donc, il a commencé à appliquer ce style-là. Ce que l'on va faire, c'est aller directement sur le site bootstrap et commencer à rader les compsants qu'on voit pour utiliser. Donc le premier qu'on va utiliser, ça va être celui-ci, à savoir, une navigation barre qui sera tout en haut de notre site et nous, on gardera uniquement ceci à ne pas mettre les liens, et tout ça, parce que, ben, on n'a pas de liens pour le moment notre site, ça va être directement la liste des groupes. Donc, on va juste avoir la barre grise, ici on va repasser brun [ inaudible ]. Alors, on a copié tout ça et beaucoup de choses, ce qui est... c'est un gros exemple, c'est pas très grave. Je vais aller dans mon projet, et donc je vous voulais le fichier application.hbs, je vous rappelle, c'est celui qui est au tout début de notre site, j'efface ce qu'y avait et je remplace au lubelcomTo ember.js par ceci. Alors, il y a vraiment beaucoup de choses. On va garder sous-brand qu'on va remplacer par carnet d'adresses et on va supprimer le reste en gardant ediv qui le contient et on va s'arrêter là. Voilà, on garde le container fluid [ inaudible] besoin, pour mettre en page cette barre Et voilà, notre carnet d'adreresses avec le lien qui est ici. Le contenu qui est en dessous, sera le conetnu de tout mon site, toutes les pages qui vont changer, puisque là on a la racine, dès qu'on aurait une route, ça rendra dans l'outlet qui est ci-dessous. Pour bootstrap, je vais essayer de vous montrer la documentation officielle. Elle est expliquée dans CSS. Le contenu doit toujours être enveloppé dans son Contener. De nouveau prendre le fluid pour [ inaudible ], soit celui-ci, ça va mettre démarche sur les côtés, soit celui-ci pour que ça ait de droite à gauche. Et donc notre outlet sera dans un contener. Ensuite, pour faire nos listes qui sont ici, on va utiliser autre chose, ça s'appelle les nav-pills. On les trouve aussi dans bootsrap. Et une page de documentation qui nous les montre. Donc ce sont les [ inaudible ] horizontaux ou alors verticaux. Pour le faire, ben c'est très silmilaire à ce qu'on avait, et je suis d'avoir une liste et de mettre la classe nav nav-pills et éventuellement d'ajouter nav-stacked, d'ajouter nav-stacked pour qu'il soit à la vertical. Encore vous allez dans notre page qui est ici, et on va ajouter [ bruit de clavier] ces classes à notre ul . Le souci qu'on a, c'est qu'on est pas déjà en bon endroit, premier souci de là, c'est-à-dire que, si je regarde ma page, déjà ça y est, il aurait eu cinq milimètres, ces formes de lien [ inaudible ] vont disparaître. ce qui serait bien, ce serait de toujours avoir les trois groupes sur le côté et d'avoir le détail ici pour notre famille. On va déplacer ce code-là dans groups.hbs, et non plus dans le groups slash index, pour qu'il soit à côté de l'outlet. Le principe de bootstrap, c'est de dire si vous voulez organiser les choses en colonne et en ligne, ce qu'on va faire ici. Vous enveloppez tout ce que vous voulez dans une row div classe égal row, point ligne en englais, Et ensuite vous créer des colonnes, donc il faut envelopper dans des colonnes [ inaudible], ul, je vais créer une colonne pour eux, div class, et là, on va dire colonne de taille moyenne pour les écrans moyens, et on va dire trois qui prend trois colonnes de large, un span de trois, sachant que vous pouvez aller jusqu'à douze, il y en a douze en tout long. Si j'ai mis trois sur celui-ci, pour l'outlet qui est là je vais créer une colonne aussi mes cur en span, col-md-9 pour que neuf et trois, ça fasse douze. On va réinventer tout ça pour que ça soit un petit peu joli, et voir ce que ça donne Vous voyez, il a créé automatiquement une colonne sur le largeur qui ferait douze, et on en a trois, et neuf ici, alors ça [ inaudible ] était beaucoup trop haut encore, hein. On va y mettre plutôt deux et dix. Voilà, on a annulé, alors il manque encore quelque chose. Peut-être que vous avez vu la différence avec bootstrap, c'est que là les sélections sont en bleu, le lien en cours est en bleu. On ne l'a pas pour une raison très simple, c'est que sous ember quand un lien est actif, il ajoute à la classe active seul a , mais pas sur le li qu'il contient. Alors que ce qu'attend lui, bootstrap, c'est que ce soit ajouté sur le li pour avoir le bleu. On va utiliser pour ça encore un addons qui s'appelle ember-cli-active-link-wrapper qui s'installe de la même manière que celui de bootstrap en faisant ember install. Donc je vais retourner à mon terminal, arrêter le serveur, installer cette ligne et revenir. J'ai déjà installé, donc je ne remet pas, je le lance. Une fois qu'il est installé, vous relancez votre server, et il vous suffira de remplacer le le par ça, par active-link. Par défaut ça met li, vous précisez sur l'autre chose qu'un li, [ inaudible ] active-link Donc je vais aller dans mon code source et remplacer le li par des active-link, dernier senslash, dièse au début et slash pour fin, oui. Voilà, cette fois-ci on voit qu'il nous garde bien le lien, on a site qui commence à prendre forme et qu'on va pouvoir améliorer avec maintenenat les composants.

Découvrir Ember.js

Créez vos composants et mettez en page vos sites avec une facilité déconcertante avec Ember.js. Apprenez à créer des routes et à charger vos modèles depuis un service web externe.

2h57 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :31 mars 2016

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 !