>> NEEL MEHTA: Allora ciao a tutti che sta guardando qui,
o guardare online o in remoto.
Il mio nome è Neel, questo è CS50.
E seminario di oggi è Responsive Web Design con Sputafuoco.
E 'un argomento che è molto vicino al mio cuore.
Si spera, sarà vicino al tuo cuore
così alla fine del seminario di oggi.
Così Bootstrap.
Quanti di voi hanno fatto alcun tipo di sviluppo web prima?
Una buona quantità?
Un po.
>> Così Bootstrap è il mondo del più popolare, quadro di front-end.
E 'utilizzato per-- ho scelto un paio di websites-- casuale
Lyft, Newsweek, e Vogue.
E 'utilizzato da un certo numero di siti web.
Si tratta di un framework web design che vi permetterà di rendere il sito web
sia bello e reattivo.
E io andrò su questi due concetti qui.
Bellissimo.
Così avete normale sito web sulla sinistra, che è fatta da solo HTML.
Hai imparato HTML in classe ed in sezione in lunghezza.
Bootstrap è un modo per rendere i vostri siti web bello.
Si può prendere ciò che è sul lato sinistro dello schermo
e trasformarlo in quello che è sul lato destro dello schermo con molto,
molto, molto poco codice.
>> Si ottiene il pulsante blu bello, si ottiene la fantasia, bordi arrotondati sullo schermo,
si ottiene la visualizzazione elenco, si ottiene la carte, e così via con pochissimo codice.
Non c'è in realtà alcuna CSS che dovete scrivere da soli.
Così Bootstrap consente di avere questi CSS pre-built
componenti che si possono mettere all'interno della tua pagina web
per far sembrare bello senza molto lavoro da soli.
E 'davvero un bootstrap, un punto di partenza,
per le vostre avventure di sviluppo web.
E così quando si è beffardo di un sito web,
è un ottimo posto per iniziare.
È possibile ottenere un buon sito web alla ricerca con molto, molto poco lavoro.
E in effetti, stiamo andando per fare questo noi
nel corso di come cinque minutes-- entro 10 minuti.
Quindi è abbastanza facile fare alcuni grandi siti web.
Ecco, questo è la prima parte.
>> Il secondo part-- reattivo.
Persone, giorno d'oggi, non solo accedere al Web sui loro computer portatili.
In realtà, a partire dal 2014, più persone accedere al web attraverso i dispositivi mobili,
come i telefoni, o compresse, o servizi o così su di siti web.
E siti web sono stati tradizionalmente progettato con computer portatili o desktop
in mente.
E così i siti spesso non sono molto adatto al vostro telefono.
Se avete mai visitato harvard.edu sul telefono,
è una specie di un fastidioso esperienza, giusto?
Ecco perché non è reattivo.
Stiamo cercando di fare siti web che sono sensibili,
che rispondono a dimensioni dello schermo della gente.
>> Quindi, se si tratta di un telefono cellulare, è per andare sul telefono.
Se si tratta di un tablet, è per andare sulla tavoletta.
Regola per abbinare il schermata che viene utilizzato.
E così Bootstrap fornisce anche qualche molto, utility molto utile per questo.
E stiamo andando a discutere di quello.
Quindi, di nuovo, ci sono due parti di Bootstrap-- bello e responsabile.
Stiamo andando a parlare di quelli.
In primo luogo, bello.
E poi reattivo.
>> Quindi tutto il codice che siamo andando a parlare di oggi--
stiamo per avere un sacco di esempi, un sacco di sfide, e così è on--
tutto vive su questo sito qui.
Questa diapositiva è ciò che abbiamo inviato.
Quindi, se siete qui, si può sentire liberi di non dover scrivere che verso il basso.
E se stai guardando a distanza, sentire libero di tirare questo sul vostro computer
anche.
Avrete probabilmente bisogno durante il corso di questo seminario.
>> Quindi stiamo andando a utilizzare un sito web chiamato CodePen,
che è una codifica collaborativo ambiente, durante questo seminario.
E CodePen-- e io sarò mostrare qui vero fast--
esso consente di scrivere HTML in modo collaborativo.
Posso scrivere, posso inviarlo a voi ragazzi, voi ragazzi può modificarlo.
Anche se sei remoto, possono comunque accedere in questo modo.
È possibile digitare il codice HTML al top e sarò automaticamente
essere convertito nella pagina web in basso.
Quindi è un modo per voi per provare rapidamente fuori il codice
senza dover fare alcun tipo di roba sul vostro IDE, o il proprio sito web,
o qualsiasi altra cosa.
>> Quindi, andare avanti e tirare su questo sito web, se siete a distanza
o se siete qui, soprattutto se siete a distanza.
is.gd/cs50boostrap.
Senza protezioni, senza sottolineature, niente di niente.
Così quelli di voi che sono qui, dammi solo un pollice
quando avete tirato costituiscono tale pagina web.
Buona?
>> PUBBLICO: Sì.
>> NEEL MEHTA: Così ci arriveremo a quello in un secondo.
Quindi, prima, stiamo andando a raggiungere, come si fa a fare i vostri siti web bello?
Stiamo per imparare a prendere noioso, vecchio HTML, come ti ho mostrato prima,
e trasformarla in componenti veramente bello,
come belle widget, bello, colorato pulsanti e le etichette e tabelle,
e tutti, utilizzando Bootstrap.
Quindi se potessimo andare tutti verso il CodePen che hai appena tirato su.
Dovrebbe apparire un po 'come questo.
Vi sembra così per tutti?
>> PUBBLICO: Sì.
>> NEEL MEHTA: Se siete remota, dovrebbe essere simile a questo.
In caso contrario, vi mostrerò presto come si può ottenere apparire come questo
in un futuro parte del video.
Quindi qui abbiamo scritto un HTML molto semplice,
come il tipo che avete stanno usando in classe.
E 'piuttosto semplice.
Senza fronzoli.
E abbiamo un po 'di roba.
Abbiamo progettato un molto, molto semplice start up
chiamare Yalp! con cui è possibile trovare ristoranti nella zona,
e trovare recensioni e indicazioni su tutti quelli.
E 'un concetto molto buona.
Non è mai stato fatto prima.
E 'un nome molto particolare, anche.
>> Così che cosa stiamo andando a provare di fare è aiutare il proprietario
di Yalp! fare il suo sito web guardare davvero, davvero cool.
Quindi, per cominciare, il proprietario del Yalp! ha fatto un po 'di ricerca
scatola, e un piccolo pulsante, e poi forse un po '
area evidenziata per un ristorante evidenziato, e poi
un elenco di altri ristoranti che sono nella zona.
Così possiamo solo passare attraverso il codice HTML in fretta.
Come confortevole sei ragazzi con l'HTML?
Abbiamo fatto un po ' sezione e anche in classe.
Decente?
>> Così come una ricapitolazione, HTML è tutto di avere
tag o elementi che raccontano la computer di come disporre la pagina web.
Quindi questo h1 qui-- inizio h1, Benvenuti a Yalp !, fine h1-- comunica al computer,
disegnare un grande colpo di testa che dice: Benvenuti a Yalp!
dentro.
Abbiamo anche forme.
Siamo in grado di ingressi in questo modo, gli ingressi di testo, che renderà come caselle di testo
si scrive in.
Hai anche i pulsanti.
Si ottiene una bella, pulsante cliccabile.
Non fa niente di buono ora, ma si ottiene un pulsante.
Si possono avere div, o divisori, a spezzare la pagina in vari gruppi.
>> Si possono avere i paragrafi, hai pulsanti.
Se si dispone di punti, poi avete liste non ordinate, ul,
e liste dentro questo, li.
Quindi questi sono più semplici elementi costitutivi di una pagina web.
E in effetti, più o meno ogni sito web che si vede
sta per essere costruito utilizzando questi stessi strumenti.
Naturalmente, non tutti guardare questo male perché siamo
andando a spezia esso su un po '.
Quindi cerchiamo di questo noioso vecchio HTML e inizio trasformandola nel bellissimo sito
che abbiamo appena visto un paio di minuti fa.
>> Quindi cominciamo fuori molto semplice.
Così abbiamo qui questo tasto.
In Bootstrap, come abbiamo visto, possiamo hanno un bel tasto, bello, blu.
E non è fatto facendo CSS personalizzato.
Non c'è CSS personalizzato qui.
Questo è fatto con l'aggiunta di classi ai vostri elementi HTML.
Se hai provato classi o HREF, o ancore, o type = "text" per inputs--
Elementi HTML possono avere questi attributi.
Possono avere informazioni aggiuntive che si potrebbe dare loro.
>> E così, in questo caso, classi sono l'attributo.
Quindi devi scrivere, classe pulsante = qualcosa dentro di stringhe.
E tale attributo dirà il computer, questo non è un qualsiasi, vecchio pulsante.
È un pulsante che è in questa classe di pulsanti.
E così Bootstrap, se gli date un certo stile sul vostro elemento,
trarrà un certo modo.
Così scrivo "btn BTN-primario.
BTN essere una abbreviazione di pulsante.
Noterete ora che il mio tasto brutto girato
in un bel tasto, bello, blu.
Sembra molto bello quando si clicca esso.
>> E così quello che succede è che abbiamo il di classe e la classe BTN BTN-primario
il nostro elemento.
E Bootstrap entrerà e dire, OK, io sapere che ci sono queste due classi.
Ogni elemento che possiede questi due le classi devono essere compilati come questo.
Ecco, questo è il nucleo di come si allega stili agli elementi in Bootstrap.
Basta collegare le classi a loro e sarà di peso fuori come meglio ritiene opportuno.
Quindi, ecco un altro esempio.
In ingresso, possiamo aggiungere a class = "forma-control".
E vi mostrerò presto dove si possono scoprire quali classi
sono disponibili di ciascun tipo di elemento.
Ma la classe che abbiamo appena aggiunto ha delle belle, gli angoli arrotondati,
ha bella imbottitura, ha una bella, luce blu ad esso.
>> Possiamo anche andare in questa forma.
E class = "form-in linea", che farà il nostro modulo, come si potrebbe immaginare, in linea.
Così che sta cercando un po 'di più come quello che avevamo prima già.
Quindi, prima di andare avanti per lo stile al resto del la pagina delle domande su quello che abbiamo
ha fatto?
Noi classi appena collegati ai nostri vari elementi.
E io vi mostrerò più avanti come si può capire quali servizi sono disponibili classi.
Abbiamo attaccato classi che avere certi stili.
E che dice al browser come il layout della pagina utilizzando
Fornite stili di Bootstrap.
Tutte le domande da parte del pubblico?
>> Bene finora?
Raffreddare.
Un sacco di sfide con Bootstrap è solo
sapere quali componenti sono disponibili e come utilizzarli.
E questo è tutto imparato con l'esperienza e anche
attraverso la lettura della documentazione, che parleremo presto.
Quindi abbiamo questa div.
E 'solo una noiosa, vecchia cosa.
Vogliamo sottolineare in qualche modo.
Così in Bootstrap, esistono sacco di componenti disponibili.
E questo è getbootstrap.com.
E 'un riferimento molto utile.
Contiene cose like-- ecco come si fa un tasto.
E si può fare barre nav, è possibile le etichette, è possibile barre di avanzamento,
si può fare gruppi di elenchi.
In sostanza, si tratta di tutti i tipi di si potrebbe vedere una pagina web.
>> Ecco quello che cercheremo in questo momento.
Si chiama pannello.
Se mai utilizzi Google Ora, hanno le carte.
O qualsiasi dispositivo Android ha le carte.
Hanno bianca scatole che hanno roba dentro di esso.
E così stiamo andando a cercare di fare che noi qui utilizzando una cosa
chiamato un pannello.
Quindi, se ci attacchiamo class = "Pannello Pannello-default "per il nostro div esterno,
allora noi attribuiamo un div class = - diamo basta controllare questa documentazione.
div class = "pannello voce" e poi div class = "pannelli a corpo".
Ancora una volta, non ti preoccupare memorizzare il codice.
Sarà disponibile on-line.
>> Così abbiamo fatto questo e ora il nostro noioso, vecchio div trasformato in questa bella, piccola carta.
Esso Ha bello imbottitura, ha confini, spicca
dal resto della pagina, che è piuttosto fresco.
Così andiamo in e cambiare questo Get Pulsante le indicazioni per un aspetto gradevole.
Chi tra il pubblico vuole raccontare me quello che posso fare per il pulsante
per farlo sembrare bello con Bootstrap?
Sì?
>> PUBBLICO: Potremmo aggiungere una classe.
E potremmo fare class = "btn BTN-primario".
NEEL MEHTA: Sì.
C'è un mucchio di altre colori disponibili per buttons--
o per qualsiasi cosa, per quella materia.
Possiamo fare BTN-pericolo e renderlo rosso.
Ci siamo.
Possiamo fare BTN-successo per renderlo verde.
Possiamo fare BTN-info-- c'è un mucchio di cose che sono a vostra disposizione.
Così ho piccola sfida per voi.
Quindi c'è un'altra cosa che ho lasciato un-stile.
Questo top ristoranti.
>> E vogliamo usare una cosa chiamato un gruppo di lista per lo stile di esso.
Quindi la mia sfida per voi è proseguire per getbootstrap.com--
Tirerò quassù.
getboostrap.com.
Vai a getbootstrap.com, trovare il sezione dove vanno gruppi della lista.
E vedrete qui un esempio e le classi giuste
che è possibile utilizzare per rendere il vostro liste in queste belle gruppi elenco.
Questi sono elaborati esempi di esempi di codice, cosa
codice utilizzato, quale codice HTML si utilizza, e cosa che le uscite.
>> Quindi la mia sfida a you-- andare avanti getbootstrap.com,
sia che siate qui o in casa, e per cercare di aggiungere stili per questo ul
per farlo sembrare bello.
E utilizzare uno stile di gruppo di lista.
Si vuole prendere un paio di minuti, e cercare la documentazione,
provare questo voi stessi?
Perché, come si sta facendo lo sviluppo del web, vi renderete conto molto del tuo lavoro
sta per essere la lettura questa documentazione.
Quindi penso che è bene prendere confidenza con il modo di leggere la documentazione,
come capire cosa è dove, quale codice esempi che è possibile utilizzare,
ciò che è possibile sfruttare.
>> Quindi, di nuovo, getbootstrap.com, vai alla scheda Componenti,
e poi scorrere verso il basso all'elenco dei gruppi.
E vedrete esempi di codice che è possibile utilizzare per rendere il codice HTML in forma che.
Quindi prendere un paio di minuti e provare ed esplorare da soli,
se siete qui oa casa.
Se sei a casa, mettere in pausa il video, forse, e provarlo voi stessi.
Se siete qui, se si va al nostro website-- se si aggiorna la pagina,
vedrete questa lì.
Questo stesso codice è solo l'aggiunta di nuovi stili proprio lì.
Quindi richiedere alcuni minuti.
Fammi sapere quando si sente bene su di esso o quando si è completamente perso.
Suona bene?
Raffreddare.
Rapida da parte per quelli di voi a casa, mentre aspettiamo,
se si va al sito GitHub che ho messo un paio diapositive fa,
verso l'inizio del video, Ho un repo GitHub, repository,
per questo discorso.
Tutti questi esempi di codice che saremo parlando sono memorizzati qui.
Quindi, se si va a sfidare-1.html, questo è tutto il codice che abbiamo in questo momento
sul nostro CodePen.
Così si può solo andare avanti, e copiare questo, e incollarlo nella propria CodePen.
E in questo modo, si può tenere il passo con quello che stiamo facendo qui.
Quindi avere questa pagina aperta così come noi passare per il resto del seminario.
Anche in questo caso, si vuole apparire come quello che si vedere giù in basso dello schermo
Là.
Sentirsi bene?
Solido.
Aspettiamo tutti gli altri di finire con quello che stanno facendo.
>> Sì?
>> PUBBLICO: Supponiamo che volevo utilizzare Bootstrap a home--
NEEL MEHTA: Sì.
PUBBLICO: Vedo, sul sito web, Getting Started pagina.
Mi danno le opzioni Bootstrap, codice sorgente, o Sass.
Quale di questi voglio?
>> NEEL MEHTA: Sì.
Quindi la domanda è: come si fa a ottenere iniziato a utilizzare Bootstrap da noi stessi?
Succede solo a magicamente lavorare proprio qui.
Quindi, se abbiamo tempo a Alla fine del seminario,
Vi mostrerò come si può scarica su pagina web.
Come qui, ho fatto mettere in alcune impostazioni che
avrà automaticamente caricato, ma io sarò
mostra di farlo da graffiare sulle proprie pagine web.
>> PUBBLICO: Grazie.
>> NEEL MEHTA: Sì.
Bella domanda.
Sentirsi bene?
Raffreddare.
Allora, chi vuole mi hanno fatto dire come questa cosa un aspetto gradevole e Boostrappy?
Qual è la prima classe a questo aggiungiamo la ul?
PUBBLICO: class = "lista-gruppo".
NEEL MEHTA: Sì. lista-gruppi.
E allora che cosa attribuiamo alla lis?
Qualcun altro?
PUBBLICO: E poi, dopo che, class = "lista-gruppi-voce".
>> NEEL MEHTA: Sì.
>> PUBBLICO: Ed è la stesso per il prossimo.
>> NEEL MEHTA: li class = "lista-gruppi-voce".
Ci si va.
Abbiamo il nostro bel gruppo lista, proprio come avevamo previsto.
Così ci si va.
In 10 minuti, abbiamo fatto questo noioso, vecchio Yalp! pagina
un aspetto gradevole e professionale.
E questo è solo l'inizio.
Quindi, ora che si sente buono di questo, facciamo
basta andare avanti e parlare un paio di più componenti che
potrebbe tornare utile, come si andare per la vostra avventura.
>> Naturalmente, ci sono un sacco di quelli qui.
E ora che hai imparato come fare i gruppi della lista,
si può tranquillamente insegnare persona come per fare uno di questi.
Ma, naturalmente, facciamo solo provare e fare un paio di più noi stessi,
solo così si ottiene un tatto per come si potrebbe usarlo.
Sto solo andando ad andare per questo esempio.
Anche in questo caso, il codice che ho appena incollato qui è disponibile qui.
Quindi sentitevi liberi di tirarlo su.
>> Per questo abbiamo già vissuto un paio di questi esempi.
Così abbiamo i pulsanti, che abbiamo hanno già visto come fare.
Siamo in grado di creare pulsanti più grandi.
Con il tasto class-- va, BTN BTN-lg e BTN-default lo rende bianco.
Quindi questo rende il nostro pulsante più grande di quanto sarebbe altrimenti.
Potrebbe tornare utile, se avete pulsante o qualcosa di grande presentare.
Abbiamo visto l'esempio del gruppo lista, abbiamo visto l'esempio modulo.
>> Una molto importante è icone.
E le icone sono un modo per aggiungere cose interessanti, come il check di controllo
segni o vantaggi, o amico icone o riavviare icone,
o qualsiasi altra cosa per la vostra applicazione web.
Così ancora una volta, se in questa sede, i componenti, glyphicons,
sono le icone disponibili per Bootstrap.
C'è un esaustivo elenco di tutti quelli qui.
Quindi, solo come esempio, cerchiamo di aggiungere uno.
>> Così come Facebook, siamo a cercare per avere un pulsante Aggiungi amico.
Diamo prima aggiungere un certo stile.
class = tasto "BTN BTN-successo".
E ce ne andiamo.
Aggiungiamo un'icona qui.
Che icona, pensi, potrebbe avere senso per mettere qui?
Avete probabilmente visto su alcune pagine web o qualsiasi altra cosa,
ma ciò che è un esempio di un'icona che potrebbe andare bene all'interno di questo bottone?
Sentitevi liberi di navigare questo punto di vista, se avete bisogno di ispirazione.
C'è un sacco di utili quelle disponibili qui.
Sì?
>> AUDIENCE: Forse l'utente glyphicon uno?
NEEL MEHTA: OK.
Questo.
Questo è abbastanza buono.
Sì.
Su Facebook, penso che apparirebbe un po 'così.
Quindi, ecco come andiamo circa aggiunta di icone alle nostre pagine.
Non ci resta che un span-- un arco è un contenitore neutro per qualcosa.
Un div è un contenitore per qualcosa, un arco è un altro contenitore.
div hanno interruzioni di riga intorno a loro, campate non lo fanno.
Quindi c'è diversi modi di avere contenitori generici.
Come esso non ha senso metterlo all'interno di un paragrafo o nulla.
Abbiamo avuto modo di mettere dentro qualcosa, però,
così abbiamo appena messo all'interno di un arco.
Così span class = glyphicon glyphicon-utente "vicino campata.
E ora abbiamo il icona all'interno del pulsante.
>> Così non sembra del tutto dissimile quello che si potrebbe vedere su facebook.com.
E quindi è bello che questi possono in realtà essere posizionato ovunque si desideri.
Nelle vostre barre di intestazione, nei vostri gruppi della lista.
Qualunque.
Essa non deve essere all'interno di un pulsante.
Così ad esempio, posso mettere la stessa classe qui.
"glyphicon glyphicon-utente".
E sembra lo stesso.
Quindi questi icons-- è possibile utilizzare l'intervallo class = "glyphicon glyphicon-qualunque".
E che vi permetterà di aggiungere icone dove vuoi.
E le icone sono molto importanti parte di fare uno sguardo sito web
professionale e ben fatto.
Quindi non esagerare, ma è spesso una buona cosa da sapere.
>> Pannelli, di nuovo.
Mi limiterò a farlo di nuovo come un riassunto perché sono di tipo coinvolti.
Noterete che in trasformare il vostro normale HTML
sito in un Bootstrap-afied sito, avrete
per aggiungere la struttura in più per il sito web.
Ad esempio, abbiamo in più div qui solo perché quelli
sono necessari per fare un pannello.
Quindi, solo tenere a mente che dovrete avere una struttura in più.
Quindi, "Pannello-default pannello".
Forse è pannello-header.
Penso che sia del pannello-voce.
Sì.
Ci siamo.
Così, ancora una volta, c'è il nostro pannello.
>> Un'altra cosa che abbiamo ancora non coprire, tavoli.
Tavoli, per impostazione predefinita sguardo gentile di brutto.
Come questo.
Ma tavoli sono, naturalmente, una parte molto importante
di ciò che si farà in sviluppo web.
In Pset7, per esempio, CS50 Finanza, che uscirà presto,
viene utilizzato un sacco di tavoli.
E un sacco di web dev utilizzano un sacco di tabelle per visualizzare le informazioni,
come azioni, o punteggi, o qualsiasi altra cosa.
>> Così tavoli styling è in realtà molto semplice.
Si aggiunge la classe tavolo al vostro tavolo.
E, io oso dire, sembra piuttosto bello.
Si possono fare cose in più, come "table-strisce tavolo".
E vedrete i risultati qui.
Si può fare tabella bordata.
C'è un sacco di opzioni è possibile.
Ma fondamentalmente, aggiungendo un tavolo, il tavolo classe,
renderà le vostre tabelle carina bello.
Quindi questo è un breve riepilogo di alcuni degli stili più importanti
e componenti Potrai necessario utilizzare per Bootstrap.
Quindi penso che avvolge la nostra bella parte.
Tutte le domande adesso su come rendere il sito web bello?
Come è possibile utilizzare questi componenti a vostro vantaggio?
Sentirsi bene?
Sì?
PUBBLICO: Forse questo è una domanda stupida,
ma è possibile utilizzare Bootstrap su Wikipedia?
Se si sta modificando una pagina di Wikipedia?
NEEL MEHTA: Sì.
Quindi la domanda era, io sono la modifica di una pagina di Wikipedia,
posso includere stili Bootstrap in là?
>> PUBBLICO: Sì.
>> NEEL MEHTA: E così è Bootstrap fondamentalmente un grande foglio di stile CSS.
Un foglio di stile CSS dice solo, ogni volta Ho questa classe, allego questi stili.
Così il foglio di stile CSS per Bootstrap sta per essere qualcosa di simile .btn,
la classe tasto, otterrà come un confine angolo arrotondato o qualsiasi altra cosa.
Quindi, fondamentalmente, Bootstrap solo una mazzo di classi e un sacco di stili
specificata per le classi.
Quindi, finché si dispone che i CSS, questo elenco di regole nella vostra pagina,
si otterrà lo stile Bootstrap.
Cioè, ovviamente, subordinato con gli stili Bootstrap nella tua pagina
iniziare con.
>> E così in Wikipedia, probabilmente non poteva
farlo perché Wikipedia non ha Bootstrap in esso.
Ma se ha avuto Bootstrap, probabilmente si potrebbe fare.
E se si voleva, si potrebbe includerlo, ma che potrebbero
rompere il layout esistente della pagina.
Ma molto bella domanda.
È possibile utilizzare Bootstrap dovunque siano inclusi,
ma non è costruito in default.
>> PUBBLICO: Grazie.
>> NEEL MEHTA: Sì.
Altre domande?
Sì.
Quindi, se sei qui o in casa, basta ricordare ancora una volta getboostrap.com--,
getboostrap.com-- è tuo amico.
Ogni volta che si sta utilizzando Bootstrap, questo vi darà
istruzioni su come ottenere ha iniziato, come utilizzare i componenti.
C'è un po 'di fresco JavaScript plug-in che non andremo qui,
ma sono la pena di verificare pure.
Quindi questo è tuo amico.
E 'solo importante per ottenere utilizzato per come usare questo.
>> Quindi cerchiamo di chiacchierare un po ' creare siti web sensibili.
Quindi, come ho detto prima, la gente i loro computer portatili, usano i loro telefoni.
E come si potrebbe immaginare, questo è una dimensione molto diversa da quella dello schermo.
E così lo stesso sito web che sembra buono sul mio telefono
non sta andando a guardare bene, necessariamente, in un computer.
Così che cosa dovete fare è rendere il vostro sito web adattarsi.
Deve adattarsi ai vari dimensioni dello schermo che si trova.
>> Deve dire, so di essere in un computer, un grande computer portatile, mi dovrebbe espandersi.
So di essere su un telefono, dovrei ridursi.
E così Bootstrap fornisce alcune molto, strumenti molto utili per fare questo.
Così Bootstrap ti permette di pausa un sito web in 12 colonne.
È possibile effettuare le righe e hanno 12 colonne.
Ed è possibile partizionare quelli però si desidera.
Si può avere uno, grande cosa, che è larga 12 colonne.
È possibile avere due cose che sono sei ciascuno.
Si può fare una cosa che è quattro, uno che è a due, o uno che è di sei.
Si può fare tre, tre, tre, tre.
Puoi fare quello ripartizione che si desidera.
>> Quindi forse la tua pagina web deve avere un colonna di sinistra che è un terzo della larghezza.
In modo che sarebbe quattro colonne ampia e il resto della pagina
sarebbe larga otto colonne.
Quindi questo è un esempio.
Facciamo tirare un altro esempio.
>> PUBBLICO: Fa sempre deve essere un ancora diviso?
Potrebbe essere un sette, cinque scissione?
>> NEEL MEHTA: Sì.
Potrebbe essere sette, cinque.
Sì.
Finché si aggiunge al 12, va bene.
Quindi cerchiamo di tornare qui.
Anche in questo caso, il codice che è qui è anche disponibile qui,
sotto esempio reattivo.
Così ho tirato un po ' esempio di codice di risposta qui.
Quindi si esegue questa operazione utilizzando una cosa chiamata fila.
Row è solo un'altra classe.
Si tratta di un altro stile di aggiungere sul vostro DIV per farli i propri componenti.
>> Così dite, div class = "fila" per fare una fila,
per darti 12 colonne di spazio.
E allora si mette le colonne all'interno di questo.
Quindi qui si COL-xs-6.
Non preoccuparti per le x.
Parleremo in un secondo.
Ma in fondo, abbiamo una cosa che è di sei di larghezza.
Noi lo chiamiamo sinistra.
E così questa è la casella a sinistra qui.
Abbiamo una cosa che è sei dei 12 colonne di larghezza.
E quello si trova sulla destra.
>> bene dà solo marche div riempirlo grigio.
Quindi questo è solo così che possiamo vedere che sono distinti.
E così questo primo esempio.
Si tratta di un esempio molto semplice di come si avrebbe utilizzato le righe e le colonne qui.
Si definisce una riga usando class = "riga".
E poi si fa class = "col-XS-6" fare mezzo, "col-XS-6" per fare l'altra metà.
Ecco un esempio più complicato.
Diamo un'occhiata a Tiny, Enorme, il resto si.
>> Siamo in grado di fare un'ampia Piccole due colonne, possiamo fare largo enormi sei colonne,
E il resto quattro colonne di larghezza.
Che aggiunge fino a 12.
E così questi finiscono spanning la larghezza della pagina.
Anche in questo caso, abbiamo una riga di fuori.
Poi abbiamo div class = "col-xs-2" e poi 6, e quindi 4.
E che fornirà la struttura per noi.
E così possiamo mettere qualunque cosa diamine vogliamo qui dentro.
Invece di Tiny, siamo in grado di mettere un pulsante.
class = tasto "BTN BTN-primario".
E così notare che il nostro pulsante non occupa tutta la larghezza,
ma almeno è limitato a tale spazio.
>> Ecco, questo è cosa buona e giusta.
Così ora siamo in grado di spezzare il nostro web Pagina in blocchi, larghezza saggio.
Possiamo dire che vogliamo avere una sinistra colonna e una colonna di destra, e così via.
Ma non abbiamo superato come si rendono reattiva.
E così Bootstrap facciamo quello.
Ha queste cose chiamate punti di interruzione.
Così ha un modo di sapere se siete su un computer portatile, sei su una tavoletta,
siete su un orizzontali telefono, o sei su un telefono verticale.
Conosce le dimensioni dello schermo.
E rompe questo in quattro categorie-- grande o lg, che è computer portatili, di solito.
md o medio, che è compresse.
sm, piccolo.
Oppure xs, extra small.
E così quando si specifica una colonna, si dice,
dovrebbe essere largo sei colonne su un piccolo dispositivo in più.
È per questo che abbiamo fatto col-xs-6.
Stiamo dicendo che dovrebbe essere sei dei 12 colonne larghe
su un piccolo dispositivo in più.
E se si tratta di qualcosa di più grande, dobbiamo solo default con la piccola dimensione in più.
Se si tratta di qualcosa di più grande di extra small, sarà di sei di larghezza.
E così possiamo sfruttare questi per fare delle nostre colonne
assumere diverse quantità di colonne in base alle dimensioni dello schermo.
Andiamo a questo ridimensionamento reattivo.
Così abbiamo le nostre colonne.
E dice, "col-lg-6 col-xs-12".
Quindi, dato quello che sai fino ad ora, che cosa fare
pensare sta per accadere su un grande schermo?
Beh, è ​​una specie di lasciato il posto, ma che cosa fare
si pensa che sarà guardare come su un grande schermo?
E perché mai?
>> PUBBLICO: E 'che su un grande schermo, è
andando a prendere solo porzione dello spazio pieno?
Come la metà di esso, immagino?
>> NEEL MEHTA: Sì.
>> PUBBLICO: E su minore schermo, sta andando
a prendere l'intero schermo, il 12.
NEEL MEHTA: Sì.
Destra.
Così ad esempio, diamo basta guardare qui.
Sì.
Così su tutto ciò che è o lg bigger-- così il mio computer accade
da lg perché è piuttosto wide-- farà
fianco a fianco, perché è col-lg-6.
Così perché è il grande, lo rende sei colonne di larghezza e sei colonne di larghezza.
Vediamo cosa succede se fare questo in uno più piccolo.
Sto solo andando a schermo un-pieno questo.
E ho intenzione di ridursi lo schermo.
Ho intenzione di ridursi lo schermo, in modo da sembra che io sono su un dispositivo più piccolo.
Quindi ho intenzione di ridursi in questo modo.
>> E voilà.
Ora è impilato perché ora siamo passati
da grande a-- questo è probabilmente una dimensione dello schermo piccolo supplemento.
E così ora si dice, OK, non siamo in grande, siamo in piccola terra supplementare.
Quindi stiamo andando a utilizzare la piccola dimensione supplementare.
E stiamo andando a xs-12, xs-12.
Così sta andando per essere impilati.
E proprio notare che non c'è una cosa chiamata un punto di interruzione.
Un punto di interruzione è dove hai fatto la transizione
da extra small a piccolo, piccole a grandi, e così via.
>> Così appena notato che mentre scivolo questo fuori, alla fine, si arriva al punto
dove faranno saltare di essere fianco a fianco.
Ci si va.
Quindi c'è il punto di interruzione proprio lì.
Così possiamo rendere ancora più complicato.
Ora possiamo dire, si tratta le cose dovrebbero essere quattro di larghezza.
Cioè, dovrebbero prendere circa un terzo
del discorso molto grandi dispositivi.
In un dispositivo di media, si dovrebbe prendere metà dello schermo, perché è md-6.
Su un dispositivo molto piccolo, dovrebbe prendere 12.
E così questo sembra piuttosto naturale.
Diciamo solo provare questo per noi stessi.
>> Così su un grande schermo, sono quattro di larghezza.
Shrink è un po '.
E sono ora sei di larghezza.
Quindi questo è sei, sei, sei.
Ridurla ancora di più e poi saranno totalmente impilati.
Quindi questo, per esempio, ha un senso se hai le carte, come le carte di notizie,
per esempio, dove se è su un grande schermo,
E 'ok se si dispone di più fianco a fianco perché sarebbero tutti avere abbastanza spazio.
Ma hanno bisogno di avere spazio sufficiente.
Quindi su uno schermo più piccolo, che ci si vuole dare loro
più spazio, proporzionalmente, della pagina.
>> Così come un esempio reale, diciamo che abbiamo Twitter.
E abbiamo casella di testo, in modo da è possibile Tweet sul lato.
E abbiamo una lista di trend argomenti sul lato destro.
Così su un grande schermo, dovremmo li hanno essere fianco a fianco,
in modo da poterli vedere in un bicchiere.
Ma su uno schermo più piccolo, dobbiamo fare 12 e 12,
in modo che gli argomenti di tendenza sono sotto l'area di Tweet.
Poiché l'area Tweet è il cosa principale e su un piccolo schermo,
gli argomenti di tendenza non lo fanno importa abbastanza tanto.
E così li mettiamo a destra in basso, così che entrambi possono avere abbastanza spazio.
Dare un senso fino ad ora?
>> PUBBLICO: Sì.
>> NEEL MEHTA: Solido.
Ecco, questo è tutti gli esempi che ho qui.
Cerchiamo di fare una sfida.
Quindi, di nuovo, questo è sfida-2.html per quelli di voi seguendo lungo a casa.
Quindi il mio compagno, Mark Zuckerberg, è venuto da me l'altro giorno.
E lui è come, Neel, ho ottenuto abbastanza bravo a web design.
Posso fare il codice HTML.
Ho fatto questo piccolo, nuova modifica a Facebook.
Ho una nuova idea di come dovremmo stile Facebook.
Ed eccolo qui.
Giusto qui.
Ecco qualche esempio di codice.
Così si chiama Fancybook.
>> Abbiamo alcuni aggiornamenti di stato.
Abbiamo Nemo, Mike Kosowski, Woody-- tre aggiornamenti di stato.
E poi abbiamo una lista di amici online a destra sotto di essa.
Così ha fatto il suo dovere.
Sa un po 'di Bootstrap, che ha fatto la visualizzazione elenco,
che ha fatto un po 'di HTML.
Così egli ha la pagina web.
Ma lui è come, Neel, non lo faccio capire responsive design a tutti.
Avete esperti che mi potrebbe aiutare con questo?
E per fortuna, si è ora esperti di responsive design.
>> Allora, cosa ha detto a me era che lui vuole Fancybook a guardare come questo.
Su un dispositivo molto piccolo, come un telefono, tutto
dovrebbero essere accatastati, come qui.
In modo da avere la timeline in anticipo, fino in alto, e poi
si dovrebbe avere la chiacchierata barra nella parte inferiore.
Ma su una tavoletta o supporto dispositivo, dovrebbe essere metà e metà,
come nella timeline dovrebbe essere la metà e la lista di amici di chat
dovrebbe essere sull'altra metà.
>> Poi su un computer portatile, la linea temporale dovrebbe prendere tre quarti
e poi la chat dovrebbe siepe prendere un altro quarto.
E così è come, Neel, ho questo codice qui, ma non è reattivo.
Ha bisogno di comportarsi in questo modo.
Quindi la mia sfida a voi è dato questo codice qui--
se si aggiorna il tuo CodePens, vedrete questo.
O se semplicemente incollare il codice sulla sfida-2, si vedrà questo.
>> Ecco questo esempio di codice.
Vedrete alcuni XXXS.
Voglio di modificare le xxxs, in modo tale che timeline e la lista di amici
segue queste specifiche qui.
Non preoccupatevi di ciò che è all'interno della linea temporale per ora.
Otterremo che nel passaggio successivo.
Ma per ora, vediamo se otteniamo queste cose di dividerlo in questo modo.
Così fa che senso?
Quindi, se siete a casa, mettere in pausa il video e provare
per rendere la vostra pagina web guardare reattivo come questo.
Se siete qui, prendere come due, tre minuti.
Sentitevi liberi di parlare con un vicino di casa, e provare, e fissare il signor Zuckerberg di
problema responsive design.
Se hai qualche domanda, non esitate a farmi sapere.
Sentirsi bene?
Fatto?
Bello.
>> PUBBLICO: [incomprensibile].
NEEL MEHTA: Che cosa?
>> PUBBLICO: Sto bene.
>> NEEL MEHTA: Oh, bene.
Bello.
PUBBLICO: La cosa il 12, ed è quello che Bootstrap
tratta un dato spazio schermo 12 unità in tutto e poi divide che fino?
Come funziona esattamente il proporzionare lavoro per questo?
>> NEEL MEHTA: Sì.
Quindi la domanda è: come fa il dosaggio
lavorare per Bootstrap, giusto?
>> PUBBLICO: Sì.
NEEL MEHTA: Così ogni volta si dispone di un div class = "riga",
non importa quanto grande lo schermo è, Bootstrap vi darà 12 unità
della stessa dimensione prendere più di tanto le dimensioni.
Quindi, in Col 1, è sempre 8,33% delle dimensioni dello schermo,
se questo è questo ampio o che è questo ampio.
E così, naturalmente, su un più piccolo schermo, ogni colonna è più piccolo.
Hai ancora 12 colonne di larghezza, è una più piccola.
Quindi spetta a voi per assicurarsi che che le cose occupano più colonne,
proporzionalmente, per compensare a tale mancanza di spazio.
Questo fa senso?
>> PUBBLICO: Sì.
Grazie.
NEEL MEHTA: Bella domanda.
PUBBLICO: Su un grande schermo, si può avere
timeline occupano tre quarti?
>> NEEL MEHTA: Sì.
NEEL MEHTA: Come sono i ragazzi sentono?
Buona?
Raffreddare.
Così torniamo.
E cerchiamo di fissare questa parte del sito di Zuckerberg.
Così i tempi è qui, in la parte superiore, e la lista di amici
è in basso.
E così abbiamo solo bisogno di assegnare colonne, con dimensionamento proporzionale,
in ciascuno di questi.
Quindi questa prima xxx è per la timeline.
Quali classi mettiamo qui?
Che cosa vi siete messo qui dentro?
Quindi ricorda, su un grande schermo, ha bisogno di a prendere i tre quarti della larghezza.
E così quello stile che darebbe?
Su un grande schermo, tre quarti della larghezza.
Quale classe usiamo lì?
PUBBLICO: Quindi siamo solo andare a essere la modifica che prima istanza di class.
NEEL MEHTA: Per ora.
Sì.
>> PUBBLICO: Non stiamo modificando ogni, caratteristica individuale della timeline?
NEEL MEHTA: Non adesso, almeno.
Quindi, tutta questa cosa è un blocco.
Stiamo cambiando solo il progettazione del blocco.
Così qui facciamo col-lg-9 perché è nove su 12 di larghezza su un grande schermo.
E poi su supporto, quante colonne dovrei ottenere?
PUBBLICO: Si suppone per essere metà e metà.
NEEL MEHTA: Giusto.
Così come molti è che?
>> PUBBLICO: Quindi sei.
NEEL MEHTA: Six.
E poi in più piccola dovrebbe essere-- se occupa l'intera larghezza della fila,
quanti dovrebbero essere?
PUBBLICO: 12.
NEEL MEHTA: 12.
Sì.
E ora dobbiamo cambiare questo altri,
modo che occupa il resto dello spazio.
Così col-lg--
PUBBLICO: Sta andando a prendere tutto lo schermo?
NEEL MEHTA: Ci vuole un quarto dello schermo su un dispositivo di grandi dimensioni,
come abbiamo mostrato qui.
>> PUBBLICO: Tre.
>> NEEL MEHTA: Three.
E poi col-md-6 per prendere il resto dello spazio.
col-XS-12.
Così ora abbiamo la timeline riprendendo i tre quarti
della pagina nel grande schermo e poi un quarto sul lato.
E poi se le dimensioni lo schermo verso il basso, dovrebbe ridimensionare di conseguenza.
Quindi è ora accatastati, su un piccolo schermo.
E se abbiamo formato in su un po ', dovrebbero essere esattamente metà e metà.
Così abbiamo fatto che fino ad ora.
Molto fresco.
E così non faremo la dall'altra parte della sfida.
Si può fare da soli.
Ma in fondo, bisogna cercare di rendere questi reattivo
come well-- rendere la timeline oggetti, essi stessi, reattivo.
Così ora che abbiamo passato tutto quello che dovete sapere
il lato sensibile di Bootstrap.
Tutte le domande circa reattivo design con Bootstrap
e come si potrebbe fare per fare che?
Sì?
>> PUBBLICO: E 'simile se abbiamo avuto un video incorporato
e volevamo controllare la scala in cui il video era--
la dimensione del video che va dal computer portatile al telefono.
NEEL MEHTA: Sì.
Più o meno.
Dovreste dire al video occupare il maggior spazio è dato,
che è un po 'fastidioso a volte.
Ma l'idea di base è la stessa.
Un video, come qualsiasi altro oggetto in Nella pagina, come un pulsante o qualsiasi altra cosa,
fino a quando si utilizza il colonne e righe,
si può dare un certa quantità di spazio.
E così sempre a onorare che è un domanda diversa perché come YouTube
incorpora hanno una certa, formato preferito.
Ma in teoria almeno, che avrebbe funzionato.
Raffreddare?
>> PUBBLICO: Suppongo allora, per un'immagine, fare in realtà
bisogno di avere diverse versioni di la stessa immagine in diverse dimensioni
laptop contro iPhone?
La domanda è: sì, abbiamo bisogno di avere immagini che sono sensibili pure.
E in effetti, si può fare.
Penso che sia in CSS.
Ma Bootstrap consente che tu lo faccia pure.
Si possono avere le immagini sensibili.
Si possono avere le immagini ridimensionare in base alle dimensioni della pagina.
E c'è una cosa molto nuova HTML5, la nuova versione di HTML,
e CSS3, il nuovo versione di CSS, che
vi permetterà di richiedere immagini diverse in base alle dimensioni dello schermo che ci sei.
Di solito, è abbastanza buono per solo avere la vostra immagine solo ridurre o crescere fino a
per quanto grande ha bisogno di essere.
Ma si può, se si vuole a, avere un 32 per 32
per schermi molto piccoli, e 64 del 64 per un grande schermo,
e poi servire coloro selettivamente.
Puoi farlo.
E 'fatto da alcune persone.
E 'ancora piuttosto all'avanguardia.
Ma risposte brevi, images-- reattivo Bootstrap può salvare la giornata.
Raffreddare?
>> PUBBLICO: Grazie.
>> NEEL MEHTA: Quindi cerchiamo di parlare veloce reale di come
per ottenere questo nella tua pagina web.
Diciamo che si desidera rendere il vostro sito web utilizzando Bootstrap.
E così facciamo solo solo attraversarlo insieme.
Diciamo che si fanno solo una pagina HTML normale.
Sentitevi liberi di seguire insieme a qualunque sia il vostro editor preferito è.
Quindi non ci resta che qualche pagina HTML.
Siamo in grado di fare! DOCTYPE HTML.
Questo è anche l'HTML, la nostra pagina.
Niente di nuovo.
Abbiamo fatto prima.
Quindi qui abbiamo il nostro HTML e possiamo mettere roba qui dentro.
Possiamo avere il nostro pulsante.
E come ho detto prima, questo non è necessariamente andare a lavorare.
Perché non potrebbe questo lavoro?
Perché non potremo ottenere il nostro bello, pulsante colorato?
>> PUBBLICO: Perché noi non colleghiamo per il progetto Bootstrap o il file?
NEEL MEHTA: Sì.
Correggere.
Perché Bootstrap-- è solo un file CSS di fantasia.
Si tratta di una serie di stili che sono attaccati ai vostri elementi.
Qui abbiamo detto che noi desidera utilizzare questi stili.
Io dimensioni che un po '.
Abbiamo detto che vogliamo utilizzare questi stili, ma non abbiamo mai
detto che ciò che gli stili sono.
Ed è quello che la vostra domanda da prima era.
Questa è la risposta a questo.
Dobbiamo trovare un modo per ottenere gli stili e includerli nella nostra pagina in qualche modo.
E la volontà così Bootstrap ci mostrano come fare.
>> Quindi, se si va verso l'alto qui, Guida introduttiva.
Ci sono diversi modi per scaricarlo.
Questo potrebbe non avere senso necessariamente.
Bootstrap-- questo vi permetterà di si afferra il file CSS in sé.
E hai incluso nella propria pagina.
Source Code è se si vuole di incidere su di essa da soli.
Non hai bisogno di questo in realtà.
Sass è una lingua che compila in CSS.
Pensate a come un preprocessore.
Proprio come il PHP è un preprocessore di HTML, Sass è un preprocessore per i CSS.
Quindi, se si vuole fare in questo modo, si può farlo.
>> Il modo più semplice utilizza un CDN, o Content Delivery Network.
E 'un sito che solo serve una copia di Bootstrap
molto veloce per voi includere nella propria pagina.
Quindi, ecco un esempio.
Vi darà questo elemento link.
Un elemento di collegamento dice il tuo browser, prendere qualunque file vengono memorizzati qui
e includerlo nella nostra pagina web.
E in questo caso, è il file CSS Bootstrap.
Quindi ci limiteremo a copiare l'URL, o quel testo, e noi provvederemo a buttare dentro
della nostra testa.
>> E non mi metterò pagina per questo, ma ci si può fidare che questo funziona.
Il link ti porterà il CSS.
Includere nella vostra pagina e poi sarete
in grado di utilizzare tutte le Bootstrap classi che conosciamo e amiamo.
Se si desidera mantenere a livello locale e avere sul proprio sistema di file
invece di dover andare a Internet per afferrarlo,
come se si vuole utilizzare il sito offline,
è possibile utilizzare l'opzione Download.
Ma per la maggior parte, utilizzando la CDN è abbastanza veloce perché in questo modo,
è costantemente aggiornato anche per voi.
È necessario aggiornare manualmente neanche.
Ha senso?
>> Così un sacco di strumenti avrà questo costruito per impostazione predefinita. Nella vostra Pset7 e Pset8,
Credo sia Bootstrap automaticamente inclusi.
E in CodePen, per ad esempio, è già
incluso perché aggiunto aggiungere tale impostazione.
Quindi, se mai voglia di giocare con esso, si può solo andare avanti CodePen,
o andare sul vostro ID, o qualsiasi altra cosa.
E si potrebbe essere in grado di accesso Bootstrap lì,
ma non è sempre costruita in, per impostazione predefinita, al web.
Ha senso?
>> Sì.
proprio come un recap-- abbiamo come cinque minuti dalla fine.
Ma, come un riassunto, in nuove pagine web, è possibile includere Bootstrap come questo.
E una volta che lo avete incluso, si può fare tutte le cose divertenti qui.
Si può andare avanti, e si può solo esaminare il CSS, è possibile aggiungere alcuni stili freschi,
si può avere componenti come i pulsanti,
e le tabelle, e la lista gli elementi che abbiamo menzionato.
Ci sono alcuni plugin JavaScript freschi, che si potrebbe desiderare di esplorare.
Essi aggiungono un po 'di fresco interattività alla pagina web.
Come questo rende un dialogo modale.
>> Quindi c'è un po 'di cose divertenti si può fare con Sputafuoco.
Quindi il mio consiglio è andare avanti e utilizzarlo nei vostri progetti,
seguire le istruzioni che appena fatto su come ottenerlo,
e basta leggere il Bootstrap perché imparerete di più su cosa fare.
E così siamo andati sopra, oggi, come utilizzare
la documentazione, ciò che l'edificio blocchi sono, e come si è concettualmente.
Così ora la mia sfida per voi è fare un sito web utilizzando Bootstrap.
Andate in la documentazione.
E utilizzare gli strumenti che abbiamo imparato finora per cercare di analizzare
e li capisco.
E utilizzare tali stili e strumenti si vede lì nel tuo sito web.
Ed è solo un grande, processo sperimentale.
>> Provate un certo stile.
Funziona?
Non non lo è?
Prova a mettere insieme cose.
Guarda cosa succede.
E 'molto un auto guidato, processo di scoperta.
Ma oggi, abbiamo imparato la basi di ciò che è Bootstrap?
Perché funziona?
Come funziona?
Come possiamo iniziare a utilizzare essa, in primo luogo?
E così ora che sei oltre che gobba, si
dovrebbe essere in grado di farlo abbastanza uniformemente da soli.
>> Ancora una volta, tutte le codice che abbiamo fatto è qui.
Quindi, se volete mai per ottenere un pennello su,
come, che cosa è un trucco rapido esemplare per tutti gli stili?
Si può andare in questo campione qui.
Abbiamo alcuni stili di esempio qui.
Se volete provare la le sfide di nuovo da soli,
si può provare qui e controllare le soluzioni.
Quindi questo link sarà incluso le diapositive che
verrà inviato a voi, naturalmente.
Ma è anche qui.
È possibile mettere in pausa il video, se volete.
Tutte le informazioni di cui hai bisogno è sta per essere proprio qui, su questo sito.
Quindi, se qualcuno ha domande, possiamo li prendere per i prossimi due minuti.
In caso contrario, grazie a tutti molto per la visione.