Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Donc bonjour à tout le monde qui regarde ici,
ou regarder en ligne, ou à distance.
Mon nom est Neel, cela est CS50.
Et le séminaire d'aujourd'hui est Responsive Web Design avec Bootstrap.
Il est un sujet qui est très proche de mon cœur.
Espérons que ce sera près de votre coeur
ainsi à la fin du séminaire d'aujourd'hui.
Donc Bootstrap.
Combien d'entre vous ont fait tout type de développement web avant?
Une bonne quantité?
Un petit peu.
>> Donc Bootstrap est le monde de la plus , cadre frontal populaire.
Il est utilisé by-- je ai choisi une quelques websites-- aléatoire
Lyft, Newsweek, et Vogue.
Il est utilisé par un certain nombre de sites.
Il est un cadre de conception web qui vous permettra de rendre vos sites Web
à la fois beau et sensible.
Et je vais aller sur ces deux concepts ici.
Beau.
Donc, vous avez sur le site web normale gauche, qui est faite simplement par HTML.
Vous avez appris HTML en classe et en coupe à longueur.
Bootstrap est une façon de faire vos sites Web belle.
Vous pouvez prendre ce qui est sur la le côté gauche de votre écran
et le transformer en ce qui est sur la côté droit de votre écran avec une très,
très, très peu de code.
>> Vous obtenez le bouton bleu belle, vous obtenez la fantaisie, des bords arrondis sur l'écran,
vous obtenez l'affichage de la liste, vous obtenez le cartes, et ainsi de suite avec très peu de code.
Il ya en fait pas de CSS vous devez écrire par vous-même.
Donc Bootstrap vous permet de avoir ces CSS prédéfinis
composants vous pouvez mettre l'intérieur de votre page web
pour le faire paraître belle sans beaucoup de travail sur votre propre.
Il est vraiment un bootstrap, un point de départ,
pour vos aventures de développement web.
Et donc quand vous êtes juste moqueur place un site web,
il est un très bon endroit pour commencer.
Vous pouvez obtenir un bon site web à la recherche avec très peu de travail très,.
Et en effet, nous allons pour ce faire nous-mêmes
au cours des cinq comme minutes-- dans les 10 minutes.
Il est donc assez facile à faire quelques grands sites Web.
Voilà donc la première partie.
>> La deuxième part-- sensibles.
Les gens, de nos jours, ne sont pas seulement accéder à Internet sur leurs ordinateurs portables.
En fait, à partir de 2014, plus de personnes accéder au Web via les appareils mobiles,
comme les téléphones ou tablettes, ou services, ou ainsi de suite que les sites Web.
Et les sites Web ont traditionnellement été conçu avec les ordinateurs portables ou ordinateurs de bureau
à l'esprit.
Et si les sites sont souvent pas très bien adapté à votre téléphone.
Si vous jamais visité harvard.edu sur votre téléphone,
il est une sorte d'ennuyeux l'expérience, non?
Cela est parce qu'il est ne répond pas.
Nous essayons de faire sites qui sont sensibles,
qui répondent à l'écran les tailles des gens.
>> Donc, si il est un téléphone, il est va aller sur le téléphone.
Si il est une tablette, il est va aller sur tablette.
Il ajuste pour correspondre à la écran qui est utilisé.
Et donc Bootstrap fournit également des utilités très, très utile pour cela.
Et nous allons discuter de cela aussi.
Encore une fois, il ya deux parties à Bootstrap-- belle et responsable.
Nous allons parler de ceux-ci.
Tout d'abord, belle.
Et puis réactive.
>> Donc, tout le code que nous sommes va parler today--
nous allons avoir beaucoup d'exemples, un grand nombre de défis, et ainsi il on--
toutes les vies sur ce site ici.
Cette diapositive est ce que nous avons envoyé.
Donc, si vous êtes ici, vous pouvez vous sentir libre de ne pas avoir à écrire cela.
Et si vous regardez à distance, sentir gratuit pour tirer cette place sur votre ordinateur
aussi.
Vous aurez probablement besoin pendant Au cours de ce séminaire.
>> Donc, nous allons utiliser un site Web appelé CodePen,
qui est un codage collaboratif l'environnement, lors de ce séminaire.
Et CodePen-- et je vais vous montrer ici réelle fast--
il vous permet d'écrire HTML collaboration.
Je peux écrire, je peux vous l'envoyer vous les gars, les gars vous pouvez le modifier.
Même si vous êtes à distance, vous peuvent toujours y accéder de cette façon.
Vous pouvez taper le code HTML à la dessus et il va automatiquement
être converti en le page Web au fond.
Donc, il est un moyen pour vous rapidement essayer de code
sans avoir à faire toute sorte de choses sur votre IDE, ou votre propre site web,
ou peu importe.
>> Donc, aller de l'avant et tirer vers le haut cette site web, si vous êtes à distance
ou si vous êtes ici, surtout si vous êtes à distance.
is.gd/cs50boostrap.
Pas de majuscules, pas de soulignement, rien.
Ainsi, ceux d'entre vous qui sont ici, Donne-moi juste un coup de pouce
lorsque vous avez tiré jusqu'à ce que la page web.
Bien?
>> Public: Oui.
>> NEEL MEHTA: Donc, nous obtiendrons pour que dans une seconde.
Alors d'abord, nous allons arriver à, comment ne vous faites vos sites Web belle?
Nous allons apprendre à prendre ennuyeux, vieux HTML, comme je vous ai montré avant,
et le transformer en vraiment sympa composants,
comme Nice widgets, beau, coloré les boutons et les étiquettes, et les tables,
et tous, en utilisant Bootstrap.
Donc, si nous pourrions tous passer à la CodePen que vous venez tiré vers le haut.
Elle devrait ressembler un peu comme ça.
Est-il ressembler à ceci pour tout le monde?
>> Public: Oui.
>> NEEL MEHTA: Si vous êtes à distance, il devrait ressembler à ceci aussi bien.
Si non, je vais vous montrer comment bientôt vous pouvez l'obtenir ressembler à ceci
dans une partie avenir de la vidéo.
Donc, nous avons écrit ici un HTML très basique,
comme le genre que vous avez été en utilisant en classe.
Il est assez basique.
Pas de fioritures.
Et nous avons quelques trucs.
Nous avons conçu une très, très basique démarrer
Yalp appeler! avec lequel vous pouvez trouver des restaurants dans la région,
et de trouver des avis et les directions sur l'ensemble de ceux-ci.
Il est un très bon concept.
Il n'a jamais été fait avant.
Il est un nom tout à fait unique, aussi.
>> Donc, ce que nous allons essayer à faire est d'aider le propriétaire
de Yalp! faire son site web regarder vraiment, vraiment cool.
Donc, pour commencer, le propriétaire de Yalp! a fait un peu de recherche
boîte, et un petit bouton, et puis peut-être un peu
zone en surbrillance pour une Restaurant en surbrillance, puis
une liste d'autres restaurants qui se trouvent dans la zone.
Ainsi, nous pouvons juste passer par le code HTML réel rapide.
Comment êtes-vous à l'aise avec les gars HTML?
Nous avons fait un peu section et aussi à la classe.
Décent?
>> Ainsi, tout comme une récapitulation, HTML est tout d'avoir
balises ou des éléments qui racontent la ordinateur comment était la page web.
Donc, ce h1 ici-- commencer h1, Bienvenue à Yalp !, fin h1-- indique à l'ordinateur,
dessiner une grosse tête, il dit, Bienvenue à Yalp!
à l'intérieur il.
Nous avons aussi des formes.
Nous pouvons entrées comme ça, entrées de texte, qui rendra que des zones de texte
vous écrivez dans.
Vous avez également des boutons.
Vous obtenez un joli bouton cliquable.
Il ne fait rien droite maintenant, mais vous obtenez un bouton.
Vous pouvez avoir divs, ou des diviseurs, à briser votre page en plusieurs groupes.
>> Vous pouvez avoir des paragraphes, vous avez des boutons.
Si vous avez des paragraphes, puis vous avez les listes à puces, ul,
et les listes à l'intérieur de cela, li.
Donc, ce sont les très basique blocs de construction d'une page Web.
Et en effet, à peu près chaque site que vous voyez
va être construit l'utilisation de ces mêmes outils.
Bien sûr, ils ne sont pas tous regarder ce mauvais parce que nous sommes
va pimenter un peu.
Nous allons donc ce vieux HTML et début ennuyeux le transformant en beau site
que nous avons vu il ya quelques minutes.
>> Donc, nous allons commencer très simple.
Nous avons donc ce bouton ici.
Dans Bootstrap, comme nous l'avons vu, nous pouvons avoir une belle, belle, bouton bleu.
Et cela se fait non pas en faisant CSS personnalisé.
Il n'y a pas coutume CSS ici.
Cela se fait par l'ajout de classes à vos éléments HTML.
Si vous avez essayé les classes, ou HREF, ou ancres, ou type = "text" pour inputs--
Éléments HTML peuvent avoir ces attributs.
Ils peuvent avoir des informations supplémentaires que vous pourriez leur donner.
>> Et donc, dans ce cas, classes sont l'attribut.
Donc, vous auriez écrit, classe de bouton = quelque chose à l'intérieur de chaînes.
Et que dira l'attribut ordinateur, ce ne sont pas tout, vieux bouton.
Il ya un bouton qui est en cette classe de boutons.
Et donc Bootstrap, si vous lui donnez un certain style de votre élément,
il y puiser une certaine manière.
Donc, je vous écris "btn btn-primaire.
btn étant une abréviation de touche.
Vous remarquerez maintenant que mon bouton tourné laid
dans une belle, belle, bouton bleu.
Il semble très agréable quand nous cliquons sur lui.
>> Et donc ce qui se passe est que nous avons la btn classe et la classe de Tche-primaire
sur notre élément.
Et bootstrap va aller et dire, OK, je savent qu'il ya ces deux classes.
Tout élément qui a ces deux classes devraient être tirées de ce genre.
Voilà donc le noyau de la façon dont vous attachez styles à des éléments de bootstrap.
Vous attachez simplement classes pour eux et il pondérer comme il l'entend.
Alors, voici un autre exemple.
Dans l'entrée, nous pouvons ajouter a class = "forme-commande".
Et je vais vous montrer où vous bientôt pouvez découvrir ce que les classes
sont disponibles de chaque type d'élément.
Mais la classe que nous venons Ajouté a de belles, des coins arrondis,
il a beau rembourrage, il a une belle lueur bleue à elle.
>> Nous pouvons aussi aller dans ce formulaire.
Et class = "forme-ligne", qui fera notre formulaire, comme vous pouvez l'imaginer, inline.
Donc, il est à la recherche un peu plus comme ce que nous avions avant déjà.
Donc, avant de passer à coiffer le reste de la page, des questions sur ce que nous
fait?
Nous les classes simplement attachés à nos différents éléments.
Et je vous montrerai plus *** comment vous pouvez comprendre ce que les classes sont disponibles.
Nous avons attaché classes avoir certains styles.
Et qui raconte le navigateur comment mettre en page la page en utilisant
Les styles fournis de bootstrap.
Toutes les questions de l'auditoire?
>> Bien jusqu'à présent?
Cool.
Un grand nombre des défis avec Bootstrap est juste
sachant quels composants sont disponibles et comment vous les utilisez.
Et qui est tous appris avec l'expérience et aussi
par la lecture de la documentation, dont nous parlerons bientôt.
Nous avons donc cette div.
Il est juste un ennuyeux, vieille chose.
Nous tenons à souligner en quelque sorte.
Donc, en Bootstrap, il ya un beaucoup de composants disponibles.
Et cela est getbootstrap.com.
Il est une référence très utile.
Il contient des choses like-- voici comment vous faites un bouton.
Et vous pouvez faire barres de navigation, vous pouvez étiquettes, vous pouvez les barres de progression,
vous pouvez faire des groupes de liste.
Fondamentalement, il ya toutes sortes de vous pourriez voir une page web.
>> En voici une qui nous essaierons dès maintenant.
Il a appelé panneau.
Si jamais vous utilisez Google Maintenant, ils ont des cartes.
Ou tout dispositif Android a cartes.
Ils ont de petites boîtes blanches qui ont des choses à l'intérieur de celui-ci.
Et donc nous allons essayer de faire que nous ici en utilisant une chose
appelé un panneau.
Donc, si nous attachons class = "panneau panel-default "à notre div extérieure,
alors nous attachons une div class = - nous allons il suffit de cocher cette documentation.
div class = "panneau-tête» et puis div class = "panneaux-corps».
Encore une fois, ne vous inquiétez pas mémoriser ce code.
Il sera disponible en ligne.
>> Donc, nous avons fait cela et maintenant notre ennuyeux, vieux div transformé en cette belle, petite carte.
Il a une belle rembourrage, il a des frontières, il se démarque
du reste de la page, ce qui est plutôt cool.
Allons donc et changer cette Obtenir directions bouton à l'air agréable.
Qui, dans le public veut dire moi ce que je peux faire pour le bouton
pour le faire paraître belle utilisant Bootstrap?
Oui?
>> PUBLIC: Nous pourrions ajouter une classe.
Et nous pourrions faire class = "btn btn-primaire".
NEEL MEHTA: Oui.
Il ya un tas d'autres couleurs disponibles pour buttons--
ou quoi que ce soit, pour cette question.
Nous pouvons faire btn-danger et rendre rouge.
Nous y voilà.
Nous pouvons faire btn-succès pour le rendre vert.
Nous pouvons faire btn-info-- il ya un tas des choses qui sont disponibles pour vous.
Je dois donc petit défi pour vous maintenant.
Donc, il ya une chose de plus que je l'ai laissé non-style.
Cette Restaurants dessus.
>> Et nous voulons utiliser une chose appelé un groupe de la liste pour le dénommer.
Donc, mon défi pour vous est aller à getbootstrap.com--
Je vais tirer vers le haut ici.
getboostrap.com.
Aller à getbootstrap.com, trouver le section où ils vont sur les groupes de la liste.
Et vous verrez ici une exemple et les bonnes catégories
que vous pouvez utiliser pour rendre votre listes dans ces groupes de belle liste.
Ces exemples sont élaborés des exemples de code, ce qui
code que vous utilisez, ce code HTML vous utilisez, et ce que les sorties.
>> Donc, mon défi à vous-- aller sur getbootstrap.com,
si vous êtes ici ou à la maison, et pour essayer et ajouter des styles à ce ul
pour le faire paraître belle.
Et utiliser un style de groupe de liste.
Vous voulez prendre quelques minutes, et la recherche de la documentation,
essayez vous-mêmes?
Parce que, comme vous faire du développement web, vous vous rendrez compte beaucoup de votre travail
va être la lecture cette documentation.
Donc, je pense qu'il est bon de se familiariser avec la façon de lire la documentation,
comment comprendre ce qui est là, Quel est le code des exemples que vous pouvez utiliser,
ce que vous pouvez exploiter.
>> Encore une fois, getbootstrap.com, allez dans l'onglet Composants,
puis faites défiler à la liste Groupe.
Et vous verrez des exemples de code qui vous pouvez utiliser pour rendre votre HTML qui correspond.
Alors, prenez quelques minutes et essayer et d'explorer vous-même,
si vous êtes ici ou à la maison.
Si vous êtes à la maison, mettre en pause la vidéo, peut-être, et l'essayer vous-même.
Si vous êtes ici, si vous allez à notre website-- si vous actualisez la page,
vous verrez ceci sur il.
Ce même code est juste l'ajout de nouveaux styles là.
Alors, prenez quelques minutes.
Permettez-moi de savoir quand vous vous sentez bien à ce sujet ou si vous êtes totalement perdu.
Bon son?
Cool.
Rapide de côté pour ceux d'entre vous à la maison, pendant que nous attendons,
si vous allez sur le site GitHub que je mets en place il ya un couple de diapositives,
vers le début de la vidéo, Je ai un repo GitHub, référentiel,
pour cette causerie.
Tous ces exemples de code que nous serons parler sont stockés ici.
Donc, si vous allez à contester-1.html, ce est tout le code que nous avons en ce moment
sur notre CodePen.
Ainsi, vous pouvez simplement aller de l'avant, et copier cela, et le coller dans votre propre CodePen.
Et de cette façon, vous pouvez suivre avec ce que nous faisons ici.
Donc, avoir cette page ouverte aussi bien que nous passer par le reste du séminaire.
Encore une fois, vous voulez qu'il ressemble à ce que vous voir au bas de votre écran
Là.
Se sentir bien?
Solide.
Attendons pour tout le monde à en finir avec ce qu'ils font.
>> Oui?
>> AUDIENCE: Supposons que je voulais à utiliser Bootstrap au home--
NEEL MEHTA: Oui.
AUDIENCE: Je vois, sur le site, la page Mise en route.
Ils me donnent les options Bootstrap, Source Code, ou Sass.
Lequel de ces que je veux?
>> NEEL MEHTA: Oui.
Donc la question est, comment obtenez-vous commencé à utiliser Bootstrap par nous-mêmes?
Il arrive juste à travailler magie ici.
Donc, si nous avons le temps au la fin du séminaire,
Je vais vous montrer comment vous pouvez obtenir sur votre propre page Web.
Comme ici, je l'ai fait mettre en certains paramètres
il aura automatiquement chargé, mais je vais
montrez que vous le faire à partir rayer sur vos propres pages Web.
>> AUDIENCE: Je vous remercie.
>> NEEL MEHTA: Oui.
Bonne question.
Se sentir bien?
Se sentir bien?
Cool.
Alors, qui veut me dire comment ils ont fait cette chose air agréable et Boostrappy?
Quelle est la première classe nous ajoutons à l'UL?
AUDIENCE: class = "liste-groupe".
NEEL MEHTA: Oui. liste-groupe.
Et puis qu'est-ce que nous attachons à la lis?
Quelqu'un d'autre?
Public: Et puis, après que, class = "liste-groupe-article".
>> NEEL MEHTA: Oui.
>> Public: Et il est le même à la suivante.
>> NEEL MEHTA: li class = "liste-groupe-article".
Et voilà.
Nous avons notre groupe belle liste, tout comme nous l'avions prévu.
Donc là vous allez.
En 10 minutes, nous avons fait ce ennuyeux, vieux Yalp! page
air agréable et professionnel.
Et cela est juste le début.
Alors, maintenant que vous vous sentez bien à ce sujet, nous allons
juste aller de l'avant et de parler un couple de plus que les composants
pourrait venir dans maniable comme vous aller tout au long de votre aventure.
>> Bien sûr, il ya beaucoup ceux d'ici.
Et maintenant que vous avez appris comment faire des groupes de la liste,
vous pouvez très bien enseigner vous comment faire aucune de ces.
Mais, bien sûr, nous allons juste essayer et faire un couple de plus nous-mêmes,
juste pour vous faire une idée de comment vous pourriez les utiliser.
Je vais juste aller à cet exemple.
Encore une fois, le code que je viens collé ici est disponible ici.
Donc sentir libre de tirer vers le haut.
>> Donc, nous avons déjà traversé un couple de ces exemples.
Nous avons donc des boutons, qui nous ont déjà vu comment le faire.
Nous pouvons faire des boutons plus gros.
Par bouton class-- il va, btn btn-LG et btn-défaut, il est blanc.
Donc, ce qui rend notre bouton plus qu'il pourrait en être autrement.
Il pourrait être utile, si vous avez bouton ou quelque chose de grand soumettre.
Nous avons vu l'exemple du groupe de la liste, nous avons vu l'exemple de formulaire.
>> Un très important est icônes.
Et icônes sont un moyen pour vous d'ajouter choses intéressantes, comme check
marques, ou des avantages, ou un ami icônes ou des icônes de redémarrage,
ou quel que soit votre application web.
Encore une fois, si nous en ici, les composants, glyphicons,
sont les icônes disponibles pour Bootstrap.
Il ya une liste exhaustive liste de tous ceux d'ici.
Ainsi, tout comme un exemple, Essayons et ajouter un.
>> Donc, comme Facebook, nous sommes à essayer d'avoir un bouton Ajouter un ami.
Ajoutons abord un peu de style.
classe de bouton = "btn btn-succès".
Et là nous allons.
Ajoutons une icône ici.
Qu'est-ce icône, pensez-vous, pourrait faire sens pour mettre ici?
Vous avez probablement vu sur certaines pages web ou que,
mais ce qui est un exemple d'une icône qui pourrait aller bien à l'intérieur ce bouton?
Sentez-vous libre de parcourir ce point de vue, si vous avez besoin d'inspiration.
Il ya beaucoup d'informations utiles celles qui sont disponibles ici.
Oui?
>> AUDIENCE: Peut-être que l'utilisateur d'un glyphicon?
NEEL MEHTA: OK.
Celui-ci.
Cela est assez bon.
Oui.
Sur Facebook, je pense qu'il ressemblerait un peu comme ça.
Alors, voici comment nous allons ajouter des icônes à nos pages.
Nous avons juste un span-- une durée est un récipient neutre pour quelque chose.
Un div est un conteneur pour quelque chose, une travée est un autre récipient.
divs ont des sauts de ligne autour d'eux, ne sont pas portées.
Donc, il ya différentes façons de ayant des conteneurs génériques.
Comme il n'a pas de sens de le mettre à l'intérieur d'un paragraphe ou quoi que ce soit.
Nous devons mettre l'intérieur quelque chose de bien,
donc nous avons juste mis à l'intérieur d'une travée.
Donc span class = glyphicon glyphicon utilisateur "près durée.
Et nous avons maintenant la icone intérieur du bouton.
>> Donc, il ne semble pas tout à fait la différence ce que vous pourriez voir sur facebook.com.
Et il est bien que ceux-ci peuvent effectivement être placé n'importe où vous voulez.
Dans vos barres d'en-tête, dans vos groupes de liste.
Peu importe.
Il ne doit pas être à l'intérieur d'un bouton.
Ainsi à titre d'exemple, je peux mettre la même classe ici.
"glyphicon glyphicon-utilisateur".
Et il semble tout de même.
Donc, ce icons-- vous pouvez utiliser la durée class = "glyphicon glyphicon-que ce soit».
Et qui va vous permettre d'ajouter icônes où vous voulez.
Et les icônes sont très importants partie de faire un site web oeil
professionnel et bien fait.
Donc, ne pas exagérer, mais il est souvent une bonne chose à savoir.
>> Panneaux, encore une fois.
Je vais le faire à nouveau comme une récapitulation parce qu'ils sont un genre de jeu.
Vous remarquerez que, dans transformer votre HTML normale
site dans une Bootstrap-afied site, vous aurez
à ajouter une structure supplémentaire pour le site.
Par exemple, nous avons supplémentaire des div ici juste parce que ceux
sont nécessaires pour faire un panneau.
Il suffit donc de garder cela à l'esprit que vous devrez avoir une structure supplémentaire.
Donc, "panneau-panneau par défaut".
Peut-être qu'il est panneau-tête.
Je pense qu'il est panneau-rubrique.
Oui.
Nous y voilà.
Donc, encore une fois, il est de notre panel.
>> Une chose de plus que nous ne couvre pas encore, tableaux.
Tables, par défaut regard genre de laid.
Comme ça.
Mais les tableaux sont, bien sûr, une partie très importante
de ce que vous ferez dans le développement web.
Dans Pset7, par exemple, CS50 Finances, qui sortira bientôt,
vous utilisez beaucoup de tables.
Et beaucoup de dev web utilisent beaucoup des tables pour afficher des informations,
comme les actions, ou des scores, ou que ce soit.
>> Donc coiffer tables est effectivement très facile.
Vous ajoutez la classe de table à votre table.
Et, je ose dire, il semble assez agréable.
Vous pouvez faire des choses supplémentaires, comme "table rayé table».
Et vous verrez les résultats ici.
Vous pouvez le faire table bordée.
Il ya beaucoup d'options que vous pouvez.
Mais fondamentalement, l'ajout d'un table, la classe de la table,
fera de vos tables semblent très agréable.
Voilà donc un bref aperçu de Certains des modèles les plus importants
et les composants que vous aurez besoin à utiliser pour Bootstrap.
Je pense donc que enveloppements notre belle partie.
Vous avez des questions en ce moment sur la façon rendre vos sites Web belle?
Comment vous pouvez utiliser ces composants à votre avantage?
Se sentir bien?
Oui?
AUDIENCE: Peut-être que cette est une question stupide,
mais pouvez-vous utiliser Bootstrap sur Wikipedia?
Si vous éditez une page Wikipedia?
NEEL MEHTA: Oui.
Donc la question est, je suis modification d'une page Wikipedia,
puis-je inclure des styles Bootstrap là-dedans?
>> Public: Oui.
>> NEEL MEHTA: Et donc Bootstrap est essentiellement une feuille grande de style CSS.
Une feuille de style CSS dit simplement, chaque fois Je dois cette classe, attache ces styles.
Ainsi, la feuille de style CSS pour Bootstrap va être quelque chose comme .btn,
La classe Button, obtiendra comme un frontière coin arrondi ou autre.
Donc, fondamentalement, l'amorcer juste un tas de classes et un tas de styles
spécifié pour ces classes.
Donc, tant que vous avez ce que CSS, cette liste de règles dans votre page,
vous obtiendrez le style Bootstrap.
Cela est, bien sûr, sur le contingent ayant les styles Bootstrap dans votre page
pour commencer.
>> Et donc dans Wikipedia, vous pourriez probablement pas
faire parce que Wikipedia n'a pas Bootstrap en elle.
Mais si elle a eu Bootstrap, vous pourriez probablement faire.
Et si vous vouliez, vous pourriez inclure, mais qui pourrait
briser le modèle existant de la page.
Mais très bonne question.
Vous pouvez utiliser Bootstrap partout où il est inclus,
mais ça ne se construit pas par défaut.
>> AUDIENCE: Je vous remercie.
>> NEEL MEHTA: Oui.
Autres questions?
Oui.
Donc, si vous êtes ici ou à la maison, rappelez-vous juste getboostrap.com-- nouveau,
getboostrap.com-- est votre ami.
Chaque fois que vous utilisez Bootstrap, cela vous donnera
des instructions sur la façon d'obtenir commencé, comment utiliser les composants.
Il ya une certaine fraîcheur JavaScript les plug-ins que nous ne serons pas aller ici,
mais ils sont la peine de vérifier ainsi.
Donc ceci est votre ami.
Il est juste important d'obtenir utilisé à la façon de l'utiliser.
>> Donc, causons un peu créer des sites web adaptés.
Donc, comme je l'ai dit, les gens leurs ordinateurs portables, ils utilisent leurs téléphones.
Et comme vous pouvez l'imaginer, cela est une taille d'écran très différent de celui.
Et si le même site qui semble bon sur mon téléphone
ne va pas à l'air bien, nécessairement, sur un ordinateur.
Donc ce que vous avez à faire est rendre votre site adapter.
Il doit s'adapter aux différentes taille de l'écran qu'il est sur.
>> Il a à dire, je sais que je suis sur un ordinateur, un grand ordinateur portable, je devrait élargir.
Je sais que je suis sur un téléphone, je dois diminuer.
Et donc Bootstrap fournit un certain des outils très, très utile pour ce faire.
Donc, nous allons vous Bootstrap pause un site en 12 colonnes.
Vous pouvez faire des lignes et avoir 12 colonnes.
Et vous pouvez partitionner ceux qui comme vous le voulez.
Vous pouvez en avoir un, grande chose, qui est de 12 colonnes de large.
Vous pouvez avoir deux choses qui sont six chacun.
Vous pouvez faire une chose qui est quatre, un qui est deux, ou celui qui est six.
Vous pouvez faire trois, trois, trois, trois.
Vous pouvez faire ce que répartition que vous voulez.
>> Alors peut-être votre page web doit avoir une colonne de gauche qui est d'un tiers de la largeur.
Donc, ce serait quatre colonnes large et le reste de la page
serait huit colonnes.
Donc, ceci est un exemple.
Disons tirer vers le haut un autre exemple.
>> Public: Est-il toujours doivent être encore divisé?
Pourrait-il être un sept, cinq scission?
>> NEEL MEHTA: Oui.
Il pourrait être sept, cinq.
Oui.
Tant que cela ajoute à 12, il est très bien.
Donc revenons ici.
Encore une fois, le code qui est ici est également disponible ici,
dans l'exemple sensible.
Donc, je viens de tirer un peu de un exemple de code sensibles ici.
Donc, vous faites cela en utilisant une chose appelée rangée.
Row est juste une autre classe.
Il est un autre style que vous ajoutez sur votre divs les faire leurs propres composants.
>> Donc, vous dites, div class = "ligne" de faire une rangée,
pour vous donner 12 colonnes de l'espace.
Et puis vous mettez colonnes à l'intérieur de cela.
Donc, ici, nous COL-xs-6.
Ne vous inquiétez pas les xs.
Nous en parlerons dans un sec.
Mais fondamentalement, nous avons un chose qui est de six de large.
Nous appelons cela gauche.
Et si tel est le case de gauche ici.
Nous avons une chose qui est six des 12 colonnes de large.
Et que l'on est sur la droite.
>> ainsi donne juste marques votre div remplir jusqu'à gris.
Alors que est juste afin que nous puissions voir qu'ils sont distincts.
Et donc ce premier exemple.
Il est un exemple très simple de la façon dont vous serait d'utiliser vos lignes et de colonnes ici.
Vous définissez une ligne à l'aide class = "ligne".
Et puis vous faites class = "col-XS-6" font la moitié, "col-xs-6" faire l'autre moitié.
Voici un exemple plus compliqué.
Regardons Tiny, Immense, Le reste l'un.
>> Nous pouvons faire deux minuscules colonnes de large, nous pouvons faire d'énormes six colonnes de large,
et le reste quatre colonnes.
Cela ajoute jusqu'à 12.
Et si ceux-ci finissent par enjambant la largeur de la page.
Encore une fois, nous avons un rang extérieur.
Ensuite, nous avons div class = "col-xs-2" puis 6, puis 4.
Et qui fournira la structure pour nous.
Et afin que nous puissions mettre ce que le diable nous voulons l'intérieur ici.
Au lieu de Tiny, nous pouvons mettre un bouton.
classe de bouton = "btn btn-primaire".
Et ainsi de remarquer que notre touche ne prend pas toute la largeur,
mais au moins il est limité pour que beaucoup d'espace.
>> Voilà donc très bien.
Donc, nous pouvons maintenant briser notre site web Page en morceaux, sens de la largeur.
Nous pouvons dire que nous voulons avoir une gauche colonne et une colonne droite, et ainsi de suite.
Mais nous ne sommes pas allés plus comment vous rendre sensibles.
Et donc Bootstrap Faisons cela ainsi.
Il a ces choses appelées points d'arrêt.
Donc il a un moyen de savoir si vous êtes sur un ordinateur portable, vous êtes sur une tablette,
vous êtes sur une horizontale de téléphone, ou si vous êtes sur un téléphone verticale.
Il connaît la taille de l'écran.
Et brise ce en quatre catégories-- grande ou LG, qui est des ordinateurs portables, généralement.
md ou moyenne, qui est comprimés.
sm, petite.
Ou xs, très petit.
Et donc quand vous spécifiez une colonne, vous dites,
il devrait être de six colonnes de large sur un petit appareil supplémentaire.
Voilà pourquoi nous avons fait col-xs-6.
Nous disons qu'il devrait être six des 12 colonnes de large
sur un petit appareil supplémentaire.
Et si elle est quelque chose plus grande, nous allons simplement par défaut à l'aide de la petite taille supplémentaire.
Si elle est plus grande que rien Très petite, ce sera six de large.
Et si nous pouvons tirer parti ceux-ci de faire de nos colonnes
prendre jusqu'à montant différent de colonnes en fonction de la taille de l'écran.
Allons à ce redimensionnement sensibles.
Nous avons donc nos colonnes.
Et il dit, "col-lg-6 col-xs-12".
Donc, étant donné ce que vous savez jusqu'ici, ce que vous faites
pense va arriver sur grand écran?
Eh bien, il est une sorte de cédé, mais que voulez-
vous pensez qu'il va chercher comme sur un grand écran?
Et pourquoi est-ce que?
>> Public: Est-ce que sur un grand écran, il est
va prendre seulement une partie de l'espace plein?
Comme la moitié de celui-ci, je suppose?
>> NEEL MEHTA: Oui.
>> Public: Et sur les petits écran, ça va
pour prendre la totalité de l'écran, le 12.
NEEL MEHTA: Oui.
Droit.
Ainsi à titre d'exemple, nous allons il suffit de regarder ici.
Oui.
Donc, tout ce qui est ou LG bigger-- si mon ordinateur passe
être parce qu'il est lg jolie wide-- il fera
côte à côte parce qu'il est col-lg-6.
Donc, parce qu'il est le grand, il rend six colonnes de large et six colonnes.
Voyons ce qui se passe si je faire cela dans un plus petit.
Je vais juste non plein écran présente.
Et je vais réduire l'écran.
Je vais à rétrécir l'écran, de sorte qu'il on dirait que je suis sur un appareil plus petit.
Je vais donc à se rétrécir comme ça.
>> Et le tour est joué.
Il est maintenant empilé parce que maintenant nous sommes allés
à partir de grande to-- ce qui est probablement une petite taille de l'écran supplémentaire.
Et alors maintenant il dit, OK, nous ne sommes pas dans l'ensemble, nous sommes dans un petit terrain supplémentaire.
Donc, nous allons utiliser la petite taille supplémentaire.
Et nous allons xs-xs 12,-12.
Donc ça va être empilés.
Et remarquez qu'il ya une chose appelé un point d'arrêt.
Un point d'arrêt est là vous avez fait la transition
de très petit à petit, petites à grandes, et ainsi de suite.
>> Donc, juste remarqué que je glisse cette out, finalement, vous aurez au point
où ils vont sauter d'être côte à côte.
Et voilà.
Donc, il ya le point d'arrêt juste là.
Donc, nous pouvons le rendre encore plus compliqué.
Maintenant nous pouvons dire, ceux-ci les choses devraient être quatre de large.
Autrement dit, ils devraient prendre jusqu'à environ un tiers
du discours sur de très gros appareils.
Sur un périphérique moyen, il devrait prendre jusqu'à la moitié de l'écran, car il est MD-6.
Sur un appareil très petit, il devrait prendre jusqu'à 12.
Et donc cela semble assez naturel.
Disons simplement essayer cela pour nous-mêmes.
>> Ainsi, sur un grand écran, ils sont quatre de large.
Rétrécir un peu.
Et ils sont maintenant six de large.
Donc cela est de six, six, six.
Shrink encore plus et ensuite ils seront totalement empilés.
Donc, ce, par exemple, de sens que si vous rencontrez des cartes, comme les cartes de presse,
par exemple, où, si il est sur un très grand écran,
il est OK si vous avez plusieurs côte à côte parce qu'ils seraient tous obtenir assez de place.
Mais ils ont besoin d'avoir assez de place.
Ainsi, sur un écran plus petit, vous voudriez leur donner
plus d'espace, proportionnellement, de la page.
>> Donc, comme un exemple du monde réel, Disons que nous avons Twitter.
Et nous avons zone de texte, de sorte vous pouvez tweet sur le côté.
Et nous avons une liste de tendances sujets sur le côté droit.
Ainsi, sur un grand écran, nous devrions ont eux côte à côte,
de sorte que vous pouvez les voir à un verre.
Mais sur un écran plus petit, nous devrions faire 12 et 12,
de sorte que les sujets tendances sont en dessous de la zone de tweet.
Parce que la région est le tweet chose principale et sur un petit écran,
les sujets tendances ne le font pas importe tout autant.
Et si nous les mettons juste en dessous, donc qu'ils peuvent à la fois obtenir suffisamment d'espace.
Donner un sens à ce jour?
>> Public: Oui.
>> NEEL MEHTA: Solide.
Voilà donc tous les exemples que je viens ici.
Essayons de faire un défi.
Encore une fois, cela est-2.html défi pour ceux d'entre vous qui suit le long à la maison.
Donc, mon copain, Mark Zuckerberg, est venu à moi l'autre jour.
Et il est comme, Neel, je dois obtenu assez bon à la conception web.
Je peux faire le HTML.
Je l'ai fait ce petit, nouvelle édition pour Facebook.
Je dois une nouvelle idée de la façon dont nous devrions le style Facebook.
Et ici il est.
Ici.
Voici quelques exemples de code.
Donc, il est appelé Fancybook.
>> Nous avons quelques mises à jour de statut.
Nous avons Nemo, Mike Kosowski, ***-- trois mises à jour de statut.
Et puis, nous avons une liste de amis en ligne juste en dessous.
Alors qu'il a fait ses devoirs.
Il sait un peu plus sur Bootstrap, il a fait le point de vue de la liste,
il a fait un peu de HTML.
Donc, il a la page Web.
Mais il est comme, Neel, je ne sais pas comprendre une conception adaptée à tous.
Avez-vous des experts qui pourrait me aider?
Et heureusement, vous êtes maintenant experts en conception adaptée.
>> Donc, ce qu'il m'a dit était qu'il veut Fancybook à ressembler à ceci.
Sur un appareil très petit, comme un téléphone, tout
devraient être empilés, comme ici.
Donc, vous avez la chronologie dès le départ, en haut, puis
vous devriez avoir la le chat barre en bas.
Mais d'un comprimé ou d'un milieu dispositif, il devrait être moitié-moitié,
comme dans le calendrier devrait être la moitié et la liste des amis chat
devrait se retrouver sur l'autre moitié.
>> Puis sur un ordinateur portable, la chronologie devrait prendre jusqu'à trois quarts
puis la couverture de chat devrait prendre un autre quart.
Et donc il est comme, Neel, je dois cette code ici, mais il est pas sensible.
Il doit se comporter comme cela.
Donc, mon défi pour vous est donné ce code ici--
si vous actualisez votre CodePens, vous verrez cela.
Ou si vous suffit de coller dans le code le défi-2, vous verrez cela.
>> Voici ce code par exemple.
Vous verrez quelques XXXS.
Je veux que vous changez les XXXS, de telle sorte que le calendrier et la liste d'amis
suit ces spécifications ici.
Ne vous inquiétez pas à propos de ce qui est l'intérieur de l'échéancier pour l'instant.
Nous obtiendrons ce que dans l'étape suivante.
Mais pour l'instant, nous allons voir si nous obtenons ces choses le scinder comme ça.
Donc, cela fait-il sens?
Donc, si vous êtes à la maison, pause la vidéo et essayer
pour rendre votre page web chercher sensibles comme ça.
Si vous êtes ici, prendre comme deux, trois minutes.
Sentez-vous libre de discuter avec un voisin, et essayer, et fixer M. Zuckerberg de
problème de conception adaptée.
Si vous avez des questions, hésitez pas à me le faire savoir.
Se sentir bien?
Fini?
Agréable.
>> AUDIENCE: [inaudible].
NEEL MEHTA: Quoi?
>> AUDIENCE: je suis bon.
>> NEEL MEHTA: Ah, bon.
Agréable.
PUBLIC: La chose à propos le 12, est-ce que Bootstrap
traite un espace d'écran donnée comme 12 unités à travers et se divise ensuite cela?
Comment fonctionne exactement la proportionnant travail pour cela?
>> NEEL MEHTA: Oui.
Donc la question est, comment le fait de dosage
travailler pour Bootstrap, non?
>> Public: Oui.
NEEL MEHTA: Donc, chaque fois vous avez un div class = "ligne",
peu importe la taille de l'écran est, Bootstrap vous donnera 12 unités
de la taille même de relever que beaucoup de taille.
Donc, dans la colonne 1, il est toujours de 8,33% de la taille de l'écran,
que ce soit ce large ou que ce est large.
Et donc, bien sûr, sur un plus petit écran, chaque colonne est plus petit.
Vous avez encore 12 colonnes de large, il est une plus petite.
Donc, il est à vous pour vous assurer que les choses prennent plus de colonne,
proportionnellement, pour compenser pour que le manque d'espace.
Cela a-t-il du sens?
>> Public: Oui.
Je vous remercie.
NEEL MEHTA: Bonne question.
Public: Sur une grande écran, pouvez-vous avoir
la chronologie prendre jusqu'à trois quarts?
>> NEEL MEHTA: Oui.
NEEL MEHTA: Comment sont les gars sentiment?
Bien?
Cool.
Donc revenons.
Et nous allons essayer de corriger cette partie du site Web de M. Zuckerberg.
Ainsi, les délais est ici, au le haut, et la liste d'amis
est en bas.
Et donc nous avons juste besoin d'assigner colonnes, avec dimensionnement proportionnel,
dans chacune d'elles.
Donc, cette première *** est pour le calendrier.
Qu'est-ce que les classes ne nous mettons ici?
Qu'est-ce que vous les gars mettez ici?
Alors rappelez-vous, sur un grand écran, il a besoin de prendre les trois quarts de la largeur.
Et quel style vous donnerait ça?
Sur un grand écran, trois quarts de la largeur.
Quelle classe utilisons-nous là?
Auditoire: Alors, on va juste être l'édition de cette première instance de la classe.
NEEL MEHTA: Pour l'instant.
Oui.
>> PUBLIC: Nous ne sommes pas l'édition de chaque, caractéristique individuelle de la chronologie?
NEEL MEHTA: Pas maintenant, au moins.
Donc, tout cela est un bloc.
Nous sommes en train de changer la la conception du bloc.
Donc, ici nous ne COL-lg-9, car il est neuf des 12 de large sur un grand écran.
Et puis sur un écran moyen, le nombre de colonnes devrais-je obtenir?
PUBLIC: Il est censé être moitié-moitié.
NEEL MEHTA: Droit.
Alors, combien est-ce?
>> Auditoire: Alors, six.
NEEL MEHTA: Six.
Et puis petit supplément devrait être: si elle prend toute la largeur de la ligne,
combien devrait-il être?
AUDIENCE: 12.
NEEL MEHTA: 12.
Oui.
Et maintenant, nous devons modifier ce autres,
donc il prend le reste de l'espace.
Donc col-lg--
Public: Ça va prendre la totalité de l'écran?
NEEL MEHTA: Il prend un quart de l'écran sur un grand dispositif,
que nous avons montré ici.
>> AUDIENCE: Trois.
>> NEEL MEHTA: Trois.
Et puis col-md-6 à prendre le reste de l'espace.
col-xs-12.
Nous avons donc maintenant le calendrier en prenant les trois quarts
de la page dans le grand écran puis un quart sur le côté.
Et puis, si la taille de l'écran vers le bas, il convient de redimensionner en conséquence.
Donc, il est empilé maintenant, sur un très petit écran.
Et si nous la taille vers le haut un peu, ils devraient être exactement moitié-moitié.
Donc, nous avons fait jusqu'ici.
Très sympa.
Et donc nous ne ferons pas la autre partie du défi.
Vous pouvez le faire vous-même.
Mais fondamentalement, vous devez essayer de faire de ces sensibles
comme well-- faire la chronologie éléments, eux-mêmes, sensibles.
Alors maintenant, nous avons traversé tout ce que vous devez savoir
sur le côté sensible de Bootstrap.
Une question sur sensibles conception avec Bootstrap
et comment vous pourriez le faire de cela?
Oui?
>> Public: Est-il semblable si nous avons eu une vidéo intégrée
et nous voulions contrôler la échelle à laquelle l'était-- vidéo
la taille de la vidéo allant de portable à téléphone.
NEEL MEHTA: Oui.
Plus ou moins.
Vous auriez à dire la vidéo sur prendre autant de place car il est donné,
qui est un peu ennuyeux parfois.
Mais l'idée de base est la même.
Une vidéo, comme tout autre objet dans la page, comme un bouton ou autre,
aussi longtemps que vous utilisez le les colonnes et les rangées,
vous pouvez lui donner un certaine quantité d'espace.
Et ce qui en rend à l'honneur qui est un autre question parce que, comme YouTube
incorpore ont une certaine, taille préférée.
Mais théoriquement moins, cela fonctionnerait.
Cool?
>> AUDIENCE: Je suppose donc, pour une image, avez-vous fait
besoin d'avoir des versions différentes de la même image dans différentes tailles
pour ordinateur portable contre l'iPhone?
Ouais La question est, avons-nous besoin de avoir des images qui répondent aussi bien.
Et en effet, vous pouvez le faire.
Je pense qu'il est en CSS.
Mais Bootstrap permet que vous fassiez cela ainsi.
Vous pouvez avoir des images sensibles.
Vous pouvez avoir vos images se redimensionnent en fonction de la taille de la page.
Et il ya une chose très nouvelle HTML5, la nouvelle version de HTML,
et CSS3, le plus récent version de CSS, qui
vous permettra de demander des images différentes sur la base de la taille de l'écran, vous en êtes.
Habituellement, il est assez bon pour tout ont votre image juste rétrécir ou grandir à
toutefois grand qu'il doit être.
Mais vous pouvez, si vous voulez pour, avoir une 32 par 32
pour les très petits écrans, et 64 par 64 pour un grand écran,
puis servir ceux sélective.
Tu peux le faire.
Il est fait par certaines personnes.
Il est encore assez tranchant.
Mais bref, la réponse, images-- sensibles Bootstrap peut sauver la journée.
Cool?
>> AUDIENCE: Je vous remercie.
>> NEEL MEHTA: Alors disons parler très vite sur la façon
pour obtenir ce dans votre propre page Web.
Disons que vous voulez faire de votre propre site Web en utilisant Bootstrap.
Et ainsi de simplement laisser tout marcher à travers ensemble.
Disons que vous venez de faire une page HTML normale.
Sentez-vous libre de suivre dans quel que soit votre éditeur favori est.
Donc nous avons juste une page HTML.
Nous pouvons le faire! DOCTYPE html.
Ceci est également html, notre page.
Rien de nouveau.
Nous avons fait cela auparavant.
Nous avons donc ici notre HTML et nous pouvons mettre des choses à l'intérieur ici.
Nous pouvons avoir notre bouton.
Et comme je le disais avant, ce ne va pas nécessairement de travailler.
Pourquoi cela ne fonctionne pas?
Pourquoi allons-nous pas obtenir notre Nice, bouton coloré?
>> AUDIENCE: Parce que nous ne relions au projet Bootstrap ou le fichier?
NEEL MEHTA: Oui.
Correcte.
Parce qu'il est Bootstrap-- juste un fichier CSS fantaisie.
Il est une série de styles qui sont attachés à vos éléments.
Ici, nous avons dit que ce que nous vouloir utiliser ces styles.
Je vais taille un peu.
Nous avons dit que ce que nous voulons utiliser ces styles, mais nous ne
il dit ce que les styles sont.
Et voilà ce que votre question plus tôt était.
Voilà la réponse à cette question.
Nous devons trouver un moyen d'obtenir les styles et de les inclure dans notre page d'une certaine manière.
Et la volonté de sorte Bootstrap nous montrer comment faire.
>> Donc, si vous allez vers le haut ici, Mise en route.
Il ya différentes façons de le télécharger.
Cela pourrait ne pas donner un sens nécessairement.
Bootstrap-- cela vous permettra de vous prenez le fichier CSS lui-même.
Et vous avez inclus dans votre propre page.
Source Code est si vous voulez de pirater le par vous-même.
Vous ne devez-ce vraiment.
Sass est une langue qui compile en CSS.
Pensez-y comme un préprocesseur.
Tout comme PHP est un préprocesseur de HTML, Sass est un préprocesseur pour le CSS.
Donc, si vous voulez le faire de cette façon, vous pouvez le faire.
>> Le moyen le plus simple est d'utiliser un CDN, ou Content Delivery Network.
Il est un site Web qui vient sert une copie de Bootstrap
très rapide pour vous inclure dans votre propre page.
Alors, voici un exemple.
Il va vous donner cet élément de liaison.
Un élément de liaison indique à votre navigateur, prendre toutes les fichiers sont stockés ici
et l'inclure dans notre page web.
Et dans ce cas, il est le fichier CSS Bootstrap.
Donc, nous allons suffit de copier l'URL, ou ce texte, et nous allons le jeter à l'intérieur
de notre tête.
>> Et je ne vais pas commencer à la page pour ce faire, mais vous pouvez avoir confiance que cela fonctionne.
Le lien vous obtenir le CSS.
Inclure dans votre page, puis vous serez
en mesure d'utiliser la totalité de la Bootstrap classes que vous connaissez et aimez.
Si vous voulez garder localement et avoir sur votre propre système de fichiers
au lieu d'avoir à aller à Internet à l'attraper,
comme si vous voulez utiliser le site hors ligne,
vous pouvez utiliser l'option de téléchargement.
Mais la plupart du temps, en utilisant la CDN est assez rapide car de cette manière,
il est tenu à jour aussi bien pour vous.
Vous devez mettre à jour manuellement soit.
Donner un sens?
>> Ainsi, un grand nombre d'outils aura intégré cette par défaut. Dans votre Pset7 et Pset8,
Je crois Bootstrap est automatiquement inclus.
Et dans CodePen, pour par exemple, il est déjà
inclus parce que je ajouté ajouter ce paramètre.
Donc si jamais vous voulez jouer Avec elle, vous pouvez simplement aller sur CodePen,
ou aller sur votre ID, ou autre chose.
Et vous pourriez être en mesure de accès Bootstrap là,
mais il n'a pas toujours construit dans, par défaut, sur le web.
Donner un sens?
>> Oui.
tout comme un recap-- nous avons comme cinq minutes.
Mais comme un rappel, dans de nouvelles pages Web, vous pouvez inclure Bootstrap comme ça.
Et une fois que vous l'avez compris, vous pouvez faire toutes les choses amusantes ici.
Vous pouvez aller sur, et vous pouvez simplement parcourir le CSS, vous pouvez ajouter quelques styles frais,
vous pouvez avoir des composants comme les boutons,
et les tables, et la liste éléments dont nous avons parlé.
Il ya quelques plugins fraîches JavaScript, qui vous voudrez peut-être explorer.
Ils ajoutent une certaine fraîcheur l'interactivité à la page Web.
Comme celui-ci rend un dialogue modal.
>> Donc, il ya des trucs fun vous pouvez faire avec Bootstrap.
Donc, mon conseil pour vous est aller de l'avant et l'utiliser dans vos propres projets,
suivez les instructions que nous juste fait quant à la façon de l'obtenir,
et juste lire le Bootstrap parce vous en apprendrez plus sur ce qu'il faut faire.
Et donc nous sommes allés plus, aujourd'hui, comment utiliser
la documentation, ce bâtiment blocs sont, et comment il est conceptuellement.
Alors maintenant, mon défi est de vous faire un site web en utilisant Bootstrap.
Allez dans les docs.
Et utiliser les outils que nous avons appris jusqu'ici pour essayer de les analyser
et de les comprendre.
Et utiliser ces styles et outils vous voyez dans votre site web.
Et il est juste un grand, processus expérimental.
>> Essayez un certain style.
Est-ce que ça marche?
Est-ce l'est pas?
Essayez de mettre des choses ensemble.
Voir ce qui se passe.
Il est très bien une auto guidée, processus de découverte.
Mais aujourd'hui, nous avons appris la rudiments de ce qui est Bootstrap?
Pourquoi ça marche?
Comment ça marche?
Comment pouvons-nous commencer à utiliser elle, en premier lieu?
Et maintenant que vous êtes au cours de cette bosse, vous
devrait être en mesure de le faire jolie douceur par vous-même.
>> Donc encore une fois, tout le code que nous avons fait est là.
Donc, si jamais vous voulez pour obtenir une brosse sur,
comme, ce qui est un tricheur rapide feuille pour tous les styles?
Vous pouvez aller dans cet échantillon ici.
Nous avons quelques exemples de styles ici.
Si vous voulez essayer la défis à nouveau par vous-même,
vous pouvez les essayer ici et vérifier les solutions.
Donc, ce lien sera inclus sur les diapositives, qui
sera envoyé à vous bien sûr.
Mais il est également ici.
Vous pouvez mettre en pause la vidéo, si vous voulez.
Toutes les informations dont vous avez besoin est va être ici, sur ce site.
Donc, si quelqu'un a des questions, nous pouvons les prendre pour les deux prochaines minutes.
Sinon, merci à tous beaucoup pour regarder.