Tip:
Highlight text to annotate it
X
>> NEEL MEHTA: Dus hallo tegen iedereen die hier kijken,
of online kijken, of op afstand.
Mijn naam is Neel, dit is CS50.
En seminar van vandaag is Responsive Web Design met Bootstrap.
Het is een onderwerp dat is zeer dicht bij mijn hart.
Hopelijk zal het dicht bij je hart
evenals aan het eind van seminar van vandaag.
Dus Bootstrap.
Hoeveel van jullie hebben gedaan elke soort van web development voordat?
Een goede hoeveelheid?
Een beetje.
>> Dus Bootstrap is 's werelds meest populair, front-end kader.
Het wordt gebruikt by-- Ik heb gekozen voor een paar willekeurige websites--
Lyft, Newsweek, en Vogue.
Het wordt gebruikt door een aantal websites.
Het is een web design raamwerk dat laat u uw websites
zowel mooi en responsief.
En ik zal gaan over deze twee concepten hier.
Mooi.
Dus je hebt een normale website op het linker, die wordt gemaakt door alleen HTML.
Je hebt geleerd HTML in de klas en in het gedeelte aan de lengte.
Bootstrap is een manier om ervoor te uw websites mooi.
U kunt nemen wat er op de linkerkant van je scherm
en zet hem in wat er op het rechterkant van je scherm met een zeer,
heel, heel weinig code.
>> Je krijgt de mooie blauwe knop, krijg je de fancy, afgeronde hoeken op het scherm,
krijg je de lijstweergave, krijg je de cards, etc. met zeer weinig code.
Er is eigenlijk geen CSS dat je moet schrijven zelf.
Dus Bootstrap kunt u zijn deze pre-built CSS
onderdelen die u kunt zetten binnenkant van uw webpagina
om het mooi uitzien zonder heel veel werk op uw eigen.
Het is echt een bootstrap, een uitgangspunt,
voor uw web development avonturen.
En dus wanneer je gewoon bespotten van een website,
het is een zeer goede plek om te beginnen.
U kunt een goed uitziende website te krijgen met zeer, zeer weinig werk.
En inderdaad, we gaan om dit zelf te doen
In de loop van dergelijke vijf minutes-- binnen 10 minuten.
Dus het is vrij eenvoudig om maken een aantal grote websites.
Dus dat is het eerste deel.
>> De tweede part-- responsief.
Mensen tegenwoordig niet alleen toegang tot het web op hun laptops.
Eigenlijk, vanaf 2014, meer mensen toegang tot het web via mobiele apparaten,
zoals telefoons, of tabletten, of diensten, of zo op dan websites.
En websites zijn van oudsher ontworpen met laptops of desktops
in gedachten.
En zo de websites zijn vaak niet zeer goed geschikt is voor uw telefoon.
Als je ooit bezocht harvard.edu op je telefoon,
het is een soort van een vervelende ervaring, toch?
Dat is omdat het niet ontvankelijk.
We proberen te maken websites die responsief zijn,
die reageren op de mensen schermformaten.
>> Dus als het een telefoon, het is ga op de telefoon.
Als het een tablet, het ga op tablet.
Het past zich aan de passen scherm dat wordt gebruikt.
En zo Bootstrap biedt ook een aantal zeer, zeer nuttige hulpprogramma's voor.
En we gaan bespreken dat ook.
Dus nogmaals, er zijn twee delen Bootstrap-- mooi en verantwoordelijk.
We gaan om te praten over die.
Eerst, mooi.
En dan reageren.
>> Dus alle code die we gaan praten over today--
we gaan een heleboel voorbeelden te hebben, veel uitdagingen, en zo on-- deze
alle leven op deze website hier.
Deze slide is wat we verzonden.
Dus als je hier bent, kunt u zich vrij om niet te schrijven dat naar beneden.
En als je op afstand kijkt, voel vrij om dit te trekken op uw computer
ook.
U zult waarschijnlijk nodig hebben tijdens de loop van dit seminar.
>> Dus we gaan een gebruiken website genaamd CodePen,
dat is een samenwerkingsverband codering milieu, tijdens dit seminar.
En CodePen-- en ik zal je laten zien hier echt fast--
het stelt u in te schrijven HTML gezamenlijk.
Ik kan schrijven, ik kan sturen naar jullie kunnen jullie bewerken.
Zelfs als je ver bent, nog steeds toegang tot het op die manier.
U kunt de HTML-code te typen op de top en het zal automatisch
worden omgezet in het webpagina onderaan.
Dus het is een manier voor u om snel uit te proberen de code
zonder enige vorm van dingen te doen op uw IDE, of uw eigen website,
of wat dan ook.
>> Dus ga je gang en trek dit website, als u op afstand bent
of als je hier bent, vooral als je op afstand bent.
is.gd/cs50boostrap.
Geen caps, geen underscores, helemaal niets.
Dus degenen onder u die Hier, geef me een thumbs
wanneer u hebben getrokken up die webpagina.
Goed?
>> Publiek: Ja.
>> NEEL MEHTA: Dus we krijgen om dat in slechts een seconde.
Dus eerst, we gaan krijgen, hoe je je websites mooi te maken?
We gaan om te leren hoe saai te nemen, oude HTML, zoals ik u eerder liet zien,
en zet die in echt leuk componenten,
zoals mooie widgets, mooie, gekleurde knoppen en labels, en tabellen,
en al, het gebruik van Bootstrap.
Dus als we allemaal over te gaan naar de CodePen dat je gewoon omhoog getrokken.
Het moet een beetje uitzien.
Lijkt het op dit voor iedereen?
>> Publiek: Ja.
>> NEEL MEHTA: Als je op afstand bent, is moet er zo uitzien ook.
Zo niet, dan zal ik je laten zien hoe snel je kunt het zo uitzien
in een volgende van de video.
Dus hier hebben we geschreven een zeer eenvoudige HTML,
zoals de soort die je hebt gebruikt in de klas.
Het is vrij basic.
Geen franje.
En we hebben een aantal dingen.
We hebben ontworpen een zeer, zeer basic opstarten
roepen Yalp! , waarmee u vinden restaurants in de omgeving,
en vind reviews, en aanwijzingen op al deze.
Het is een zeer goed concept.
Het is nog nooit eerder gedaan.
Het is een zeer unieke naam, ook.
>> Dus wat we gaan proberen te doen is te helpen de eigenaar
van Yalp! maken zijn website ziet er echt, echt cool.
Dus om te beginnen, de eigenaar van Yalp! is een beetje zoeken gemaakt
doos, en een kleine knop, en dan misschien een beetje
gemarkeerde gebied voor een gemarkeerde restaurant, en vervolgens
een lijst van andere restaurants die in het gebied.
Dus we kunnen gewoon doorgaan de HTML-code echt snel.
Hoe comfortabel zijn jullie met HTML?
We hebben een beetje gedaan sectie en ook in de klas.
Fatsoenlijke?
>> Dus net zoals een samenvatting, HTML is alles over het hebben van
labels of elementen die vertellen het computer hoe de lay-out van de webpagina.
Dus dit h1 hier-- beginnen h1, Welkom om Yalp !, einde h1-- de computer vertelt,
trek je een grote kop is zegt Welkom bij Yalp!
binnen is er.
We hebben ook vormen.
We kunnen ingangen als dit, tekst invoeren, die zal maken als tekstvakken
schrijf je in.
Je hebt ook knoppen.
Je krijgt een mooie, klikbare knop.
Het doet niets goed doen nu, maar je krijgt een knop.
U kunt divs of verdelers, te hebben break-up van uw pagina in verschillende groepen.
>> U kunt de punten hebben, je hebt knoppen.
Als u punten, dan je hebt ongeordende lijsten, ul,
en lijsten binnen dat, li.
Dus dit zijn de zeer fundamentele bouwstenen van een webpagina.
En inderdaad, vrijwel elke website die u ziet
zal worden gebouwd gebruiken dezelfde instrumenten.
Natuurlijk, dat doen ze niet allemaal kijk dit slecht omdat we
ga het animeren een beetje.
Dus laten we dit saaie oude HTML en start transformeren in de prachtige site
die we zagen slechts een paar minuten geleden.
>> Dus laten we beginnen heel eenvoudig.
Dus we hebben hier op deze knop.
In Bootstrap, zoals we zagen, we kunnen hebben een leuke, mooie, blauwe knop.
En dat is niet gedaan door het doen van aangepaste CSS.
Er is geen aangepaste CSS hier.
Dat wordt gedaan door het toevoegen van klassen om uw HTML-elementen.
Als je hebt geprobeerd klassen, of HREF's, of ankers, of type = "text" voor inputs--
HTML-elementen kunnen deze attributen hebben.
Ze kunnen extra informatie dat je ze zou kunnen geven.
>> Dus, in dit geval, klassen zijn het attribuut.
Dus je zou schrijven, knop class = iets in strings.
En die eigenschap zal vertellen computer is dit geen oude knop.
Het is een knop die in deze klasse van knoppen.
En dus Bootstrap, als je het een bepaalde stijl op uw element,
het zal trekken op een bepaalde manier.
Dus ik schrijf "btn btn-primaire.
BTN zijn een afkorting voor knop.
Je zult nu merken mijn lelijke knop draaide
in een leuke, mooie, blauwe knop.
Het ziet er erg leuk als we erop.
>> En dus wat er gebeurt is dat we de BTN klasse en de btn-primaire klasse
op onze element.
En Bootstrap zal in gaan en zeggen, OK, ik weten dat er deze twee klassen.
Elk onderdeel dat deze twee heeft lessen moeten worden getrokken als dit.
Dus dat is de kern van hoe je hechten stijlen om elementen in Bootstrap.
U bevestigt alleen klassen om hen en het zal wegen als zij dat nodig acht.
Dus hier is een ander voorbeeld.
In de ingang, kunnen we voegen een class = "form-control".
En ik zal snel laten zien waar je kan vinden wat klassen
zijn van elk soort element.
Maar de klasse die we net toegevoegde heeft mooie, afgeronde hoeken,
Het heeft mooie opvulling, het heeft een mooie, blauwe gloed aan het.
>> We kunnen ook gaan in dit formulier.
En class = "form-inline", die zal maken onze vorm, zoals je zou denken, inline.
Dus het ziet er een beetje meer als wat we eerder al hadden.
Dus voordat we verder gaan met de rest van de stijl de pagina, vragen over wat we
deed?
We hebben net bevestigd klassen onze verschillende elementen.
En ik zal je later zien hoe je kunt achterhalen wat lessen zijn beschikbaar.
We bevestigd klassen die hebben bepaalde stijlen.
En dat vertelt de browser hoe u de pagina-indeling met behulp van
Bootstrap voorzag stijlen.
Eventuele vragen van het publiek?
>> Goed tot nu toe?
Koel.
Veel van de uitdagingen met Bootstrap is gewoon
wetend wat componenten zijn beschikbaar zijn en hoe u ze gebruikt.
En dat is allemaal geleerd met ervaring en ook
door het lezen van de documentatie, die we praten over snel.
Dus we hebben dit div.
Het is gewoon een saaie, oude ding.
We willen het een of andere manier te benadrukken.
Dus in Bootstrap, zijn er een Veel beschikbare componenten.
En dit is getbootstrap.com.
Het is een zeer nuttige referentie.
Het bevat dingen like-- hier is hoe je op een knop.
En je kunt nav bars doen, kunt u labels, kunt u bars vooruitgang,
je kunt doen lijst groepen.
Kortom, het is van alle soorten van u misschien een webpagina te zien.
>> Hier is er een die we nu proberen.
Het heet panel.
Als je ooit gebruik van Google Nu hebben ze kaarten.
Of een Android-apparaat heeft kaarten.
Ze hebben kleine witte vakjes dat spul erin.
En dus we gaan om te proberen en doen dat ons hier met behulp van een ding
riep een paneel.
Dus als wij hechten class = "panel panel-default "naar onze uiterlijke div,
dan hechten wij een div class = - laten kijk maar deze documentatie.
div class = "panel-rubriek" en Vervolgens div class = "panels-body".
Nogmaals, maak je geen zorgen over het onthouden van deze code.
Het zal online beschikbaar zijn.
>> Dus we deden dit en nu onze saaie, oude div omgezet in deze mooie, kleine kaart.
Het heeft mooie opvulling, dat grenst, het opvalt
van de rest van de pagina, die is vrij cool.
Dus laten we gaan in en verander deze Get richtingen knop om te kijken mooi.
Wie in het publiek wil vertellen me wat ik kan doen om de knop
om het er mooi gebruik van Bootstrap?
Ja?
>> PUBLIEK: We kunnen een klasse toe te voegen.
En we konden doen class = "btn btn-primaire".
NEEL MEHTA: Ja.
Er is een heleboel andere kleuren beschikbaar voor buttons--
of voor iets, wat dat betreft.
We kunnen btn-gevaar doen en maken het rood.
Daar gaan we.
We kunnen btn-succes te doen om het groen te maken.
We kunnen doen btn-info-- er is een heleboel dingen die voor u beschikbaar zijn.
Dus ik heb weinig uitdaging voor u nu.
Dus er is nog een ding die ik nog heb un-stijl.
Dit toprestaurants.
>> En we willen een ding gebruiken riep een lijst groep om het te stylen.
Dus mijn uitdaging aan u is ga naar getbootstrap.com--
Ik zal het trekken hier boven.
getboostrap.com.
Ga naar getbootstrap.com, vinden de waar ze gaan over de lijst groepen.
En je zult hier een zien Bijvoorbeeld de juiste klassen
die u kunt gebruiken om uw lijsten naar deze mooie lijst groepen.
Deze worden uitgewerkt voorbeelden van codevoorbeelden, wat
code, wat HTML-code te gebruiken u gebruikt, en wat dat uitgangen.
>> Dus mijn uitdaging om u-- gaan op getbootstrap.com,
Of je nu hier of thuis bent, en om te proberen en stijlen toevoegen aan deze ul
zodat het lijkt leuk.
En gebruik een lijst groep stijl.
U wilt een paar minuten duren, en zoek de documentatie,
probeer dit zelf?
Want als je doet web development, je zult veel van uw werk te realiseren
gaat het lezen deze documentatie.
Dus ik denk dat het goed is om vertrouwd te krijgen hoe om documentatie te lezen,
hoe om erachter te komen wat is waar, wat voorbeelden van code die u kunt gebruiken,
wat u kunt benutten.
>> Dus nogmaals, getbootstrap.com, ga naar het tabblad Components,
en dan naar beneden scrollen naar de lijst Group.
En je zult voorbeelden van code te zien dat u kunt gebruiken om je HTML te passen dat.
Dus neem een paar minuten en proberen en te verkennen het zelf,
Of je nu hier of thuis bent.
Als je thuis bent, pauzeer de video, misschien, en probeer het zelf uit.
Als je hier bent, als je naar onze website-- als je de pagina te vernieuwen,
je zult dit zien op daar.
Deze zeer dezelfde code is gewoon het toevoegen van nieuwe stijlen daar.
Dus neem een paar minuten.
Laat me weten als je je goed voelt over of als je totaal verloren.
Klinkt goed?
Koel.
Snel opzij voor degenen onder u thuis, terwijl we wachten,
als je op naar de GitHub website dat ik een paar slides geleden
aan het begin van de video, Ik heb een GitHub repo, repository,
voor dit gesprek.
Al deze code voorbeelden die wij willen zijn over zijn hier opgeslagen.
Dus als je naar deze uitdaging-1.html is alle code die we nu hebben
op onze CodePen.
Dus je kunt gewoon doorgaan, en kopieer deze, en plak deze in uw eigen CodePen.
En op die manier kunt u bijhouden met wat we hier doen.
Dus deze pagina geopend zo goed als we gaan door de rest van het seminar.
Nogmaals, je wilt dat het eruit wat je zie neer op de onderkant van je scherm
er.
Goed voelen?
Solide.
Laten we wachten voor iedereen anders eindigen met wat ze doen.
>> Ja?
>> Publiek: Stel dat ik wilde om Bootstrap gebruiken home--
NEEL MEHTA: Ja.
Publiek: Ik zie, op de website, Aan de slag pagina.
Ze geven me de opties Bootstrap, Source Code, of Sass.
Welke van deze wil ik?
>> NEEL MEHTA: Ja.
Dus de vraag is, hoe krijg je begonnen met Bootstrap door onszelf?
Het gebeurt gewoon om magische werken hier.
Dus als we de tijd hebben om het einde van het seminar,
Ik zal je laten zien hoe je kunt krijgen op uw eigen webpagina.
Zoals hier, ik heb eigenlijk zet in een aantal instellingen die
zal het automatisch geladen, maar ik zal
laten zien om het te doen van kras op uw eigen webpagina's.
>> Publiek: Dank je wel.
>> NEEL MEHTA: Ja.
Goede vraag.
Goed voelen?
Goed voelen?
Koel.
Dus wie wil me hoe ze vertellen dit ding ziet er goed uit en Boostrappy?
Wat is de eerste klasse voegen we aan de ul?
PUBLIEK: class = "list-groep".
NEEL MEHTA: Ja. list-groep.
En wat doen we hechten aan de lis?
Iemand anders?
Publiek: En dan, na dat class = "list-group-post".
>> NEEL MEHTA: Ja.
>> Publiek: En het is de Hetzelfde geldt voor de volgende.
>> NEEL MEHTA: li class = "list-group-post".
Daar ga je.
We hebben onze mooie lijst met groepen, net zoals we hadden verwacht.
Dus daar ga je.
In 10 minuten, hebben we dit saaie, oude Yalp! pagina
zien er leuk en professioneel.
En dat is nog maar het begin.
Dus nu dat je voelt goed over dat, laten we
gewoon doorgaan en praten over nog een paar componenten die
van pas kunnen komen als u ga in uw avontuur.
>> Natuurlijk, er is een hoop die hier.
En nu dat je hebt geleerd hoe dat te doen lijst groepen,
U kunt vrij veel leren zelf hoe een van deze te doen.
Maar, natuurlijk, laten we proberen gewoon en doe een paar onszelf,
maar dat je een gevoel voor te krijgen hoe u ze kunt gebruiken.
Ik ga gewoon om te gaan dit voor- beeld.
Nogmaals, de code die ik net geplakt hier is hier beschikbaar.
Dus voel je vrij om het te trekken.
>> Dus hebben we al meegemaakt een paar van deze voorbeelden.
Dus we hebben knoppen, die we hebben al gezien hoe dat te doen.
We kunnen knoppen groter te maken.
Door class-- knop gaat, btn btn-lg en btn-standaard maakt het wit.
Dus dit maakt onze knop groter dan het anders zou zijn.
Het zou van pas komen, als je grote submit knop of iets dergelijks.
We zagen de lijst groep bijvoorbeeld, we zagen het formulier voorbeeld.
>> Een zeer belangrijk is iconen.
En iconen zijn een manier voor u om toe te voegen interessante dingen, zoals check check
merken, of plussen of vriend iconen, of herstart pictogrammen,
of wat dan ook om uw web-app.
Dus nogmaals, als we naar hier, de componenten, glyphicons,
zijn de iconen beschikbaar voor Bootstrap.
Er is een uitputtende lijst van alle die hier.
Dus als voorbeeld, laten we proberen en voeg een.
>> Dus zoals Facebook, we zijn aan het proberen naar een vriend Add-knop heeft.
Laten we eerst toe wat stijl.
knoop class = "btn btn-succes".
En daar gaan we.
We voegen een pictogram hier.
Welk pictogram, denk je, misschien zinvol om hier te plaatsen?
U hebt waarschijnlijk gezien op sommige webpagina's of wat dan ook,
maar wat is een voorbeeld van een pictogram dat kan goed gaan in deze knop?
Voel je vrij om deze visie te bladeren, als u inspiratie nodig.
Er is een hoop nuttige die hier beschikbaar.
Ja?
>> Publiek: Misschien is de glyphicon gebruiker één?
NEEL MEHTA: OK.
Deze.
Dat is vrij goed.
Ja.
Op Facebook, ik denk dat het zou een beetje uitzien als dat.
Dus hier is hoe we gaan over iconen toe te voegen aan onze pagina's.
We hebben gewoon een span-- een overspanning is een neutrale verpakking voor iets.
Een div is een container voor iets, een overspanning andere houder.
divs hebben regeleinden om hen heen, overspanningen niet.
Zodat er verschillende manieren met generieke containers.
Alsof het heeft geen zin om het te zetten binnenkant van een paragraaf of wat dan ook.
We hebben om het te zetten binnenin iets hoewel,
dus we gewoon binnenkant van een overspanning.
Dus span class = glyphicon glyphicon-user "close overspanning.
En we hebben nu de pictogram in de knop.
>> Zodat het niet helemaal in tegenstelling tot kijken wat je zou kunnen zien op facebook.com.
En dus het is leuk dat deze kan eigenlijk overal worden geplaatst u wilt.
In uw header bars, in de lijst met groepen.
Boeiend.
Het hoeft niet te worden binnenkant van een knop.
Dus als voorbeeld, ik kan zet hier dezelfde klasse.
"glyphicon glyphicon-gebruiker".
En het lijkt net hetzelfde.
Dus deze icons-- kunt u gebruik maken van de overspanning class = "glyphicon glyphicon-wat dan ook".
En dat zal u laten toevoegen pictogrammen waar u maar wilt.
En iconen zijn een zeer belangrijk een deel van het maken van een website kijken
professionele en goed gedaan.
Dus niet overdrijven, maar het is vaak een goede zaak om te weten.
>> Panelen, opnieuw.
Ik kom net dit opnieuw doen als een samenvatting omdat ze soort betrokken.
U zult merken dat in draaien van uw normale HTML
plaats in een Bootstrap-afied site, heb je
om extra structuur toe te voegen aan de website.
Bijvoorbeeld, hebben we extra DIV hier alleen maar omdat die
nodig om een paneel te maken.
Dus hou dat in gedachten dat je moet extra structuur.
Zo "panel panel-default".
Misschien is het panel-header.
Ik denk dat het paneel-rubriek.
Ja.
Daar gaan we.
Dus, is er opnieuw ons panel.
>> Nog een ding dat we dekte niet nog, tafels.
Tafels, standaard blik soort lelijk.
Soortgelijk.
Maar tafels zijn natuurlijk een zeer belangrijk onderdeel
van wat je zal doen in web ontwikkeling.
In Pset7 bijvoorbeeld CS50 Financiën, die binnenkort zal komen,
je zult veel tafels te gebruiken.
En veel van web-dev gebruiken veel tabellen om informatie weer,
zoals aandelen, of scores, of wat dan ook.
>> Dus styling tafels is eigenlijk heel eenvoudig.
U voegt de klasse tafel om uw tafel.
En, ik durf te zeggen, het ziet er vrij aardig.
Kun je extra dingen te doen, zoals "table table-gestreepte".
En je zult de resultaten hier te zien.
Je kunt tafel grenst doen.
Er is een heleboel opties die je kunt.
Maar in principe, het toevoegen van een tafel, de klasse tafel;
zal uw tafels kijken vrij aardig.
Dus dat is een kort overzicht van Enkele belangrijke stijlen
en componenten die u zult moet gebruiken voor Bootstrap.
Dus ik denk dat wraps onze prachtige deel.
Heeft u vragen over hoe nu om uw websites mooi te maken?
Hoe je deze kunt gebruiken componenten in uw voordeel?
Goed voelen?
Ja?
PUBLIEK: Misschien is een domme vraag,
maar kan je Bootstrap gebruiken op Wikipedia?
Als je het bewerken van een Wikipedia?
NEEL MEHTA: Ja.
Dus de vraag was, ben ik een Wikipedia pagina te bewerken,
kan ik ook Bootstrap stijlen daar?
>> Publiek: Ja.
>> NEEL MEHTA: En zo is Bootstrap in feite een grote CSS style sheet.
Een CSS stylesheet gewoon zegt, wanneer Ik heb deze klasse, bevestig deze stijlen.
Dus de CSS style sheet voor Bootstrap gaat iets als .btn zijn,
de klasse-knop, krijgt als een afgeronde hoek grens of wat dan ook.
Dus eigenlijk, Bootstrap het slechts een bos van klassen en een bos van stijlen
opgegeven voor deze klassen.
Dus zolang u dat CSS, deze lijst van regels in uw pagina,
zult u de Bootstrap styling te krijgen.
Dat is uiteraard afhankelijk met de Bootstrap stijlen in uw pagina
beginnen met.
>> En zo in Wikipedia, Je kan waarschijnlijk niet
dat doen omdat Wikipedia heeft Bootstrap niet in hebben.
Maar als het had Bootstrap, kon je waarschijnlijk doen.
En als je wilde, kon je omvatten, maar dat zou kunnen
breken de bestaande lay-out van de pagina.
Maar zeer goede vraag.
U kunt gebruik maken van Bootstrap waar het wordt opgenomen,
maar het is niet gebouwd in standaard.
>> Publiek: Dank je wel.
>> NEEL MEHTA: Ja.
Nog meer vragen?
Ja.
Dus of u hier of thuis bent, gewoon getboostrap.com-- weer herinneren,
getboostrap.com-- is je vriend.
Wanneer u gebruik maakt Bootstrap, dit zal u geven
instructies over hoe te krijgen begon, hoe om componenten te gebruiken.
Er is een aantal leuke JavaScript plug-ins die we hier niet te gaan over,
maar ze zijn de moeite waard ook.
Dus dit is je vriend.
Het is gewoon belangrijk om gebruikt hoe dit te gebruiken.
>> Dus laten we praten een beetje over maken responsieve websites.
Dus zoals ik al eerder zei, mensen gebruikt hun laptops, gebruiken ze hun telefoons.
En zoals je misschien wel voorstellen, dit is een heel andere grootte van het scherm dan dat.
En zo dezelfde website dat ziet er goed uit op mijn telefoon
is niet van plan om er goed uitzien, noodzakelijkerwijs op een computer.
Dus wat je hoeft te doen is uw website aan te passen.
Het moet aanpassen aan de verschillende schermformaten dat het op.
>> Het heeft te zeggen, ik weet dat ik op een computer, een grote laptop, ik zou moeten uitbreiden.
Ik weet dat ik op een telefoon, moet ik krimpen.
En zo Bootstrap biedt een aantal zeer, zeer handige tools om dit te doen.
Dus Bootstrap laat je break een website in 12 kolommen.
U kunt de rijen maken en 12 kolommen.
En je kunt verdelen die zoals u dat wilt.
U kunt één, groot ding hebben, dat is 12 kolommen breed.
Je kunt twee dingen die elk zes.
U kunt een ding dat is vier te doen, een die twee, of een die is zes.
U kunt dit doen drie, drie, drie, drie.
Je kunt doen wat uitsplitsing die u wilt.
>> Dus misschien uw webpagina nodig heeft om een hebben linkerkolom dat 1 3 van de breedte.
Zodat vier kolommen breed en de rest van de pagina
zou acht kolommen breed.
Dit is dus een voorbeeld.
Laten we trekken een ander voorbeeld.
>> Publiek: Doet het altijd moeten een nog te splitsen?
Zou het een zeven, vijf split?
>> NEEL MEHTA: Ja.
Het kan zeven, vijf.
Ja.
Zolang het voegt tot 12, het is prima.
Dus laten we hier terug te gaan.
Nogmaals, de code die is Hier is ook hier beschikbaar,
onder responsieve voorbeeld.
Dus ik trok enkele Zo reageert de code hier.
Zodat u dit doen met behulp een ding genaamd rij.
Rij is gewoon een andere klasse.
Het is een andere stijl die u toe te voegen aan je divs om ze te maken hun eigen componenten.
>> Dus je zegt, div class = "rij" om een rij te maken,
om uzelf 12 kolommen van de ruimte.
En dan zet je kolommen binnenkant van dat.
Dus hier zijn we Col-xs-6.
Maak je geen zorgen over de xs.
We zullen praten over een sec.
Maar in principe hebben we een ding dat is zes breed.
We noemen het vertrokken.
En dat is dus het linkervak hier.
We hebben één ding dat is zes van de 12 kolommen breed.
En dat men aan de rechterkant.
>> nou gewoon geeft merken je div vul het grijs.
Dus dat is gewoon zo kunnen we zie dat ze onderscheiden.
En zo dit het eerste voorbeeld.
Het is een heel eenvoudig voorbeeld van hoe u zou hier uw rijen en kolommen te gebruiken.
U definieert een rij met class = "rij".
En dan moet je doen class = "col-xs-6 doen" half, "col-xs-6" naar de andere helft doen.
Hier is een ingewikkelder voorbeeld.
Laten we eens kijken naar de kleine, Enorme, De rest één.
>> We kunnen Tiny twee kolommen breed maken, we kunnen Enorme zes kolommen breed maken,
en de rest vier kolommen breed.
Dat komt neer op 12.
En dus deze uiteindelijk overspannen de breedte van de pagina.
Nogmaals, we hebben een rij buiten.
Dan hebben we div class = "col-xs-2" en vervolgens 6, en dan 4.
En dat zal de structuur voor ons.
En zo kunnen we zetten wat de heck we willen hier binnen.
In plaats van Tiny, kunnen we een knop zetten.
knoop class = "btn btn-primaire".
En zo merken dat onze knop neemt niet de hele breedte,
maar in ieder geval is het beperkt dat veel ruimte.
>> Dus dat is allemaal goed en wel.
Dus kunnen we nu breken onze website pagina in stukken, breedte wijs.
We kunnen zeggen dat we willen overhouden kolom en een rechterkant, enzovoort.
Maar we zijn niet onopgemerkt voorbij hoe je het ontvankelijk te maken.
En dus Bootstrap laten we dat doen ook.
Het heeft deze dingen genoemd breekpunten.
Dus het heeft een manier om te weten of je op een laptop, je bent op een tablet,
je op een telefoon horizontaal, of je bent op een telefoon verticaal.
Het kent de grootte van het scherm.
En breekt deze in vier Categorieën-- groot of LG, die laptops, meestal.
md of medium, wat tabletten.
sm, klein.
Of xs, extra klein.
En dus als je opgeeft een kolom, zeg je,
het moet zes kolommen breed zijn op een extra klein apparaat.
Dat is de reden waarom we deden col-xs-6.
We zeggen dat het moet zes van de 12 kolommen breed
op een extra klein apparaat.
En als het even wat groter zijn, zullen we gewoon standaard ingesteld op het gebruik van de extra kleine omvang.
Als het iets groter dan extra klein, zal het zes breed.
En zo kunnen we benutten deze te maken van onze kolommen
nemen verschillende hoeveelheid kolommen op basis van de grootte van het scherm.
Laten we naar deze responsieve resizing.
Dus hebben we onze kolommen.
En het zegt, "col-lg-6 col-xs-12".
Dus krijgt wat je weet tot nu toe, wat je doet
dat er gaat gebeuren op een groot scherm?
Nou, het is een soort van bepaalde manier, maar wat doen
je denkt dat het eruit zal zien als op een groot scherm?
En waarom is dat?
>> Publiek: Is het dat op een groot scherm, het is
zal slechts nemen deel van de volledige ruimte?
Net als de helft van het, denk ik?
>> NEEL MEHTA: Ja.
>> Publiek: En op kleinere scherm, het gaat
tot het nemen van het hele scherm, de 12.
NEEL MEHTA: Ja.
Rechts.
Dus als voorbeeld, laten we kijk hier beneden.
Ja.
Zo op iets dat lg of bigger-- dus mijn computer gebeurt
worden lg omdat het vrij wide-- het zal
Het naast elkaar omdat het col-LG-6.
Dus omdat het op grote, het maakt het zes kolommen breed en zes kolommen breed.
Laten we eens kijken wat er gebeurt als ik Dit maakt een kleinere.
Ik ga gewoon un-volledig scherm dit.
En ik ga om het scherm te krimpen.
Ik ga naar het scherm te krimpen, dus het lijkt alsof ik op een kleiner apparaat.
Dus ik ga het krimpen als dit.
>> En voila.
Het is nu gestapeld want nu hebben we gegaan
van grote to-- dit is waarschijnlijk een extra kleine grootte van het scherm.
En nu zegt, OK, we zijn niet in grote, we in extra kleine land.
Dus we gaan gebruiken de extra kleine omvang.
En we gaan xs-12, xs-12.
Dus het gaat om te worden gestapeld.
En net op dat er een ding heet een breekpunt.
Een breekpunt is waar je de overgang gemaakt
van extra kleine tot kleine, klein tot groot, enzovoort.
>> Dus gewoon merken dat als ik deze schuif out, uiteindelijk kom je bij het punt
waar ze springen kant elkaar.
Daar ga je.
Dus er is het breekpunt daar.
Dus we kunnen het nog ingewikkelder te maken.
Nu kunnen we zeggen dat deze dingen zouden moeten zijn vier wijd.
Dat wil zeggen, ze moeten nemen ongeveer een derde
van de toespraak op zeer grote apparaten.
Op een medium apparaat moet nemen de helft van het scherm, want het is md-6.
Op een zeer klein apparaat, het moet nemen 12.
En dus dit ziet er natuurlijk.
Laten we gewoon proberen dit voor onszelf.
>> Dus op een groot scherm, dat ze vier wijd.
Krimpt het een beetje.
En ze zijn nu zes breed.
Dus dit is zes, zes, zes.
Krimpen nog meer en dan zij volledig worden gestapeld.
Dus dit bijvoorbeeld zinvol als je met kaarten, zoals nieuws kaarten,
bijvoorbeeld, waar als het is op een zeer groot scherm,
het is OK als je meerdere naast elkaar omdat ze allemaal zouden krijgen voldoende ruimte.
Maar ze moeten voldoende ruimte hebben.
Dus op een kleiner scherm, je zou willen hen
meer ruimte, proportioneel, de pagina.
>> Dus als een echte wereld voorbeeld laten we zeggen dat we Twitter.
En we hebben tekstvak, dus u kunt tweet op de zijkant.
En we hebben een lijst van trending onderwerpen aan de rechterkant.
Dus op een groot scherm, moeten we hebben ze naast elkaar zijn,
dus je kunt ze zien in een glas.
Maar op een kleiner scherm, we moeten doen 12 en 12,
zodat de trending topics zijn onder de tweet gebied.
Omdat de tweet gebied is de belangrijkste ding en op een klein scherm,
de trending topics niet materie zo veel.
En dus hebben we zetten ze direct onder, dus dat ze allebei voldoende ruimte.
Zinvol nu toe?
>> Publiek: Ja.
>> NEEL MEHTA: Solid.
Dus dat is al de voorbeelden die ik hier heb.
Laten we proberen en doen een uitdaging.
Dus nogmaals, dit is uitdaging-2.html voor die van u volgende samen thuis.
Dus mijn vriend, Mark Zuckerberg, kwam bij mij de andere dag.
En hij is als, Neel, ik heb gekregen vrij goed in web design.
Ik kan de HTML doen.
Ik heb dit kleine gemaakt, nieuwe bewerking op Facebook.
Ik heb een nieuw idee voor hoe we moeten stylen Facebook.
En hier is het.
Hier.
Hier zijn een paar voorbeeld code.
Dus het heet Fancybook.
>> We hebben een aantal status updates.
We hebben Nemo, Mike Kosowski, ***-- drie status updates.
En dan hebben we een lijst van online vrienden direct onder het.
Dus hij heeft gedaan zijn huiswerk.
Hij weet een klein beetje over Bootstrap, hij maakte de lijstweergave
hij heeft een beetje van HTML gedaan.
Dus hij heeft de webpagina.
Maar hij is net als, Neel, ik niet begrijpen responsive design helemaal.
Heeft u deskundigen die kan me helpen?
En gelukkig, je bent nu experts in responsive design.
>> Dus wat hij me vertelde was dat hij wil Fancybook te kijken als deze.
Op een zeer klein apparaat, zoals een telefoon, alles
worden gestapeld, zoals hier.
Dus je hebt de tijdlijn upfront, tot boven, en dan
je moet hebben de praatje balk onderaan.
Maar een tablet of een middenwaarde apparaat moet half en helft,
zoals in de tijdlijn moet de helft en de lijst van chat-vrienden
moet worden op de andere helft.
>> Vervolgens op een laptop, de tijdlijn dient te nemen van drie vierde
en dan de chat-hedge moet het nemen van een andere wijk.
En hij is als, Neel, ik heb dit code hier, maar het is niet ontvankelijk.
Het moet gedragen als dit.
Dus mijn uitdaging voor u krijgt deze code hier--
als je vernieuw uw CodePens, zult u dit zien.
Of als je gewoon plakken in de code op challenge-2, zult u dit zien.
>> Hier is dit voorbeeld code.
Zie je een aantal XXXS.
Ik wil dat je de XXXS veranderen, zodanig dat de tijdlijn en de lijst van vrienden
volgt deze specs hier.
Maak je geen zorgen over wat er is in de tijdlijn voor nu.
We krijgen, dat in de volgende stap.
Maar voor nu, laten we eens kijken of we krijgen deze dingen om het te splitsen als deze.
Zo werkt dat zinvol?
Dus als je thuis bent, de video pauzeren en proberen
in uw eigen webpagina maken kijk reageert als deze.
Als je hier bent, neem als twee, drie minuten.
Voel je vrij om te chatten met een buurman, en proberen, en bevestig de heer Zuckerberg
responsive design probleem.
Als je vragen hebt, voel je vrij om me te laten weten.
Goed voelen?
Gedaan?
Nice.
>> PUBLIEK: [onverstaanbaar].
NEEL MEHTA: Wat?
>> Publiek: Ik ben goed.
>> NEEL MEHTA: Oh, goed.
Nice.
Doelgroep: Het ding over de 12, is het dat Bootstrap
behandelt een bepaalde ruimte op het scherm als 12 eenheden over en vervolgens verdeelt dat op?
Hoe precies doet de proportioneren werk voor dit?
>> NEEL MEHTA: Ja.
Dus de vraag is, hoe doet de snede
werken voor Bootstrap, toch?
>> Publiek: Ja.
NEEL MEHTA: Dus wanneer heb je een div class = "rij",
het maakt niet uit hoe groot het scherm is, Bootstrap u 12 eenheden geven
van dezelfde grootte nemen dat er veel grootte.
Dus in col 1, het is altijd 8,33% de grootte van het scherm,
of dat dit breed of is dat deze breed.
Dus, uiteraard op een kleinere screen, elke kolom kleiner.
Je hebt nog steeds 12 kolommen breed, het is kleiner.
Dus het is aan jou om ervoor te zorgen dat de dingen nemen meer kolom
proportioneel, te compenseren voor die ruimtegebrek.
Slaat dat ergens op?
>> Publiek: Ja.
Dank je.
NEEL MEHTA: Goede vraag.
PUBLIEK: Op een groot scherm kunt u
de tijdlijn nemen driekwart?
>> NEEL MEHTA: Ja.
NEEL MEHTA: Hoe jongens voelen?
Goed?
Koel.
Dus laten we terugkomen.
En laten we proberen en bevestig dit deel van de website van de heer Zuckerberg.
Zodat de termijnen is hier, op de top, en de lijst van vrienden
is aan de onderkant.
En dus we hoeven alleen maar te wijzen kolommen, met dimensionering proportionele,
in elk van deze.
Dus deze eerste *** is voor de tijdlijn.
Welke klassen doen zetten we hier?
Wat hebben jullie hier gebracht?
Dus vergeet niet, op een groot scherm, moet tot het nemen van driekwart van de breedte.
En dus wat stijl zou je dat geven?
Op een groot scherm, drie kwart van de breedte.
Welke klasse komen we daar gebruiken?
Publiek: Dus we gaan gewoon te zijn bewerken die eerste instantie van de klasse.
NEEL MEHTA: Voor nu.
Ja.
>> PUBLIEK: We zijn niet het bewerken van elk, individuele kenmerk van de tijdlijn?
NEEL MEHTA: Niet nu, tenminste.
Dus dit hele zaak is een blok.
We gewoon het veranderen van de ontwerpen van het blok.
Dus hier hebben we Col-lg-9, want het is negen van de 12 breed op een groot scherm.
En vervolgens op een medium-scherm, hoeveel kolommen moet ik krijgen?
Publiek: Het hoort de helft en helft.
NEEL MEHTA: Recht.
Hoeveel is dat?
>> Publiek: Dus zes.
NEEL MEHTA: Zes.
En dan extra kleine moet be-- als het beslaat de gehele breedte van de rij,
hoeveel moet het worden?
Publiek: 12.
NEEL MEHTA: 12.
Ja.
En nu we moeten Dit anderen wijzigen
dus het duurt tot de rest van de ruimte.
Dus col-lg--
Publiek: Het gaat om nemen het hele scherm?
NEEL MEHTA: Het duurt een kwart van het scherm op een groot apparaat,
zoals wij hier vertoonde.
>> Publiek: Drie.
>> NEEL MEHTA: Drie.
En dan col-md-6 te nemen de rest van de ruimte.
col-xs-12.
Dus nu hebben we de tijdlijn toegang tot driekwart
van de pagina in de grote scherm en dan een kwart aan de kant.
En dan, als de grootte van het scherm naar beneden, Het moet dienovereenkomstig wijzigen.
Dus het is nu gestapeld, op een zeer klein scherm.
En als we het naar boven een beetje, ze moeten precies de helft en de helft zijn.
Dus hebben we dat tot nu toe gedaan.
Heel cool.
En dus zullen we niet doen andere deel van de uitdaging.
U kunt dat zelf doen.
Maar in principe moet je proberen en maken deze ontvankelijk
als goed-- maken van de tijdlijn artikelen, zichzelf, responsief.
Dus nu hebben we doorgemaakt alles wat je moet weten
over de reagerende kant van Bootstrap.
Heeft u vragen over responsieve ontwerp met Bootstrap
en hoe u zou kunnen gaan over dat te doen?
Ja?
>> Publiek: Is het vergelijkbaar als we hadden een embedded video
en we wilden de controle schaal waarop de video was--
de grootte van de video gaande van laptop naar telefoon.
NEEL MEHTA: Ja.
Meer of minder.
Je zou hebben om de video te vertellen nemen zoveel ruimte als het is gegeven,
dat is een beetje vervelend soms.
Maar het basisidee is hetzelfde.
Een video, net als elk ander object in de pagina, zoals een knop of wat dan ook,
zolang je het gebruikt kolommen en de rijen,
kunt u het eens bepaalde hoeveelheid ruimte.
En zo krijgen van het te eren die een andere vraag want zoals YouTube
sluit een zekere voorkeur grootte.
Maar theoretisch op tenminste, het zou werken.
Koel?
>> Publiek: Ik denk dan, voor een afbeelding, doe je eigenlijk
moeten verschillende versies hebben hetzelfde beeld in verschillende maten
voor laptop versus iPhone?
Yeah De vraag is, moeten we hebben beelden die reageren zijn ook.
En inderdaad, kun je dat doen.
Ik denk dat het in CSS.
Maar Bootstrap maakt je om dat te doen ook.
U kunt reageren afbeeldingen.
U kunt uw foto's verkleinen volgens de grootte van de pagina.
En er is een heel nieuw ding HTML5, de nieuwste versie van HTML,
en CSS3, de nieuwste versie van CSS, waarvan
laat je vragen verschillende beelden op basis van de grootte van het scherm je op.
Meestal, het is goed genoeg om alleen uw afbeelding gewoon krimpen of groeien tot
hoe groot het moet zijn.
Maar je kunt, als je wilt om, één 32 van 32
voor zeer kleine schermen, en 64 van 64 voor een groot scherm,
en dienen dan die selectief.
Je kunt het.
Het is gedaan door een aantal mensen.
Het is nog steeds vrij snijkant.
Maar kort antwoord, responsieve images-- Bootstrap kan de dag is er te redden.
Koel?
>> Publiek: Dank je wel.
>> NEEL MEHTA: Dus laten we praten echt snel over hoe
om dit te krijgen in uw eigen webpagina.
Laten we zeggen dat u wilt dat uw eigen website met behulp van Bootstrap.
En dus laten we gewoon net wandeling door het samen.
Laten we zeggen dat u gewoon een normale HTML-pagina.
Voel je vrij om mee te volgen in wat uw favoriete editor is.
Dus we hebben slechts enkele HTML-pagina.
We kunnen doen! Doctype html.
Dit is ook html, onze pagina.
Niets nieuws.
We hebben dit eerder gedaan.
Dus hier hebben we onze HTML en kunnen we spullen te zetten binnen hier.
We kunnen onze knop hebben.
En zoals ik al zei, dit is niet per se te gaan om te werken.
Waarom zou dit niet werken?
Waarom niet krijgen we onze mooie, kleurrijke knoop?
>> Publiek: Omdat we niet koppelen aan de Bootstrap project of het bestand?
NEEL MEHTA: Ja.
Corrigeren.
Omdat het Bootstrap-- gewoon een mooie CSS-bestand.
Het is een reeks van stijlen die om uw elementen zijn bevestigd.
Hier hebben we te horen dat we willen deze stijlen gebruiken.
Ik zal grootte die een beetje.
We hebben het verteld dat we willen gebruiken deze stijlen, maar we hebben nooit
vertelde hij wat de stijlen zijn.
En dat is wat je vraag van vroeger was.
Dat is het antwoord op die.
We moeten een manier vinden om de stijlen te vinden en ze op te nemen op onze website of andere manier.
En zo Bootstrap wil laten ons zien hoe dat te doen.
>> Dus als je naar de top hier, Aan de slag.
Er zijn verschillende manieren om het te downloaden.
Dit zou niet logisch noodzakelijk maken.
Bootstrap-- dit zal laten pak je de CSS-bestand zelf.
En u in uw eigen pagina.
Source Code is als je wilt te hacken op het voor jezelf.
Je dit niet echt nodig.
Sass is een taal dat compileert in CSS.
Zie het als een preprocessor.
Net als PHP is een preprocessor van HTML, Sass is een preprocessor voor CSS.
Dus als je wilt om het te doen op die manier, kun je dat doen.
>> De makkelijkste manier is met behulp van een CDN, of content delivery network.
Het is een website die net serveert een kopie van Bootstrap
zeer snel voor u om in uw eigen pagina.
Dus hier is een voorbeeld.
Het zal u deze link element.
Een koppeling element vertelt je browser, nemen de nodige bestanden worden hier opgeslagen
en opnemen in onze webpagina.
En in dit geval is het Bootstrap CSS-bestand.
Dus we zullen gewoon kopiëren die URL of die tekst, en we zullen het binnen gooien
van ons hoofd.
>> En ik zal niet de pagina voor deze start, maar u kunt erop vertrouwen dat dit werkt.
De link krijgt u de CSS.
Opnemen in uw pagina en dan zul je
in staat zijn om alle van de Bootstrap gebruiken klassen die je kent en liefde.
Als u wilt lokaal te houden en hebben het op uw eigen bestandssysteem
in plaats van te gaan naar internet om het te grijpen,
alsof je wilt Gebruik van de site offline,
kunt u de optie Download gebruiken.
Maar voor het grootste deel via de CDN is vrij snel, want op die manier,
het is voor u bijgewerkt en goed onderhouden.
Je moet het handmatig bijwerken van beide.
Zin?
>> Dus veel van de hulpmiddelen zullen hebben deze ingebouwde in standaard. In uw Pset7 en Pset8,
Ik geloof Bootstrap is automatisch opgenomen.
En in CodePen voor Bijvoorbeeld, het is al
opgenomen omdat ik voegde toe dat de instelling.
Dus als je ooit wilt spelen rond met het, kunt u gewoon op CodePen,
of ga op uw identiteitskaart, of wat dan ook.
En je zou kunnen toegang Bootstrap daar,
maar het is niet altijd gebouwd in, standaard op het web.
Zin?
>> Ja.
net als een recap-- wij zoals vijf minuten over.
Maar als een samenvatting, in de nieuwe webpagina's, u kunt ook Bootstrap als deze.
En als je eenmaal hebt opgenomen, U kunt alle leuke dingen doen hier.
Je kan gaan, en je kunt gewoon kennisnemen de CSS, kunt u een aantal leuke stijlen toe te voegen,
U kunt componenten als de knoppen,
en de tafels, en de lijst items die we vermeld.
Er is een aantal leuke JavaScript plugins, die je zou willen verkennen.
Ze voegen een aantal coole interactiviteit naar de webpagina.
Zoals deze maakt een modale dialoog.
>> Dus er is een aantal leuke dingen je kunt doen met Bootstrap.
Dus mijn advies aan u is ga je gang en gebruiken in uw eigen projecten,
volg de instructies die we net deed over hoe om het te krijgen,
en gewoon de Bootstrap omdat lezen zult u meer over wat te doen leren.
En dus hebben we gegaan over, vandaag de dag, hoe te gebruiken
de documentatie, wat het gebouw blokken zijn, en hoe het is conceptueel.
Dus nu mijn uitdaging aan u is maak een website met behulp van Bootstrap.
Ga in de documentatie.
En gebruik maken van de instrumenten die we hebben tot nu toe geleerd om te proberen hen te ontleden
en begrijp hen.
En gebruik van deze stijlen en instrumenten je ziet dat er in uw website.
En het is gewoon een grote, experimentele proces.
>> Probeer een bepaalde stijl.
Werkt het?
Doet niet?
Probeer eens spullen bij elkaar.
Zie wat er gebeurt.
Het is heel erg een self begeleide, discovery proces.
Maar vandaag, we hebben geleerd van de zeer basis van wat is Bootstrap?
Waarom werkt het?
Hoe werkt het?
Hoe gaan we beginnen met het, in de eerste plaats?
En nu dat je over die bult, je
moet in staat zijn om het te doen vrij vlot door uzelf.
>> Dus nogmaals, alle code die we hebben is hier.
Dus als je ooit wilt een borstel op te krijgen,
als, wat is een snelle cheat blad voor alle stijlen?
U kunt hier in dit voorbeeld gaan.
We hebben een aantal voorbeeld stijlen hier.
Als u wilt het proberen uitdagingen weer door uzelf,
je kunt ze hier proberen check out de oplossingen.
Dus deze link zal zijn opgenomen op de glijbaan, die
zal worden verstuurd aan u natuurlijk.
Maar het is ook hier.
U kunt de video pauzeren, als je wilt.
Alle informatie die u nodig hebt, is zal hier zijn, op deze site.
Dus als iemand vragen heeft, kunnen we nemen ze voor de komende paar minuten.
Anders, dank u allen heel erg voor het kijken.