1
00:00:00,000 --> 00:00:05,210

2
00:00:05,210 --> 00:00:07,460
>> NEEL MEHTA: Allora ciao a
tutti che sta guardando qui,

3
00:00:07,460 --> 00:00:09,450
o guardare online o in remoto.

4
00:00:09,450 --> 00:00:11,260
Il mio nome è Neel, questo è CS50.

5
00:00:11,260 --> 00:00:14,015
E seminario di oggi è Responsive
Web Design con Sputafuoco.

6
00:00:14,015 --> 00:00:15,890
E 'un argomento che è
molto vicino al mio cuore.

7
00:00:15,890 --> 00:00:17,598
Si spera, sarà
vicino al tuo cuore

8
00:00:17,598 --> 00:00:20,880
così alla fine del seminario di oggi.

9
00:00:20,880 --> 00:00:22,230
Così Bootstrap.

10
00:00:22,230 --> 00:00:25,070
Quanti di voi hanno fatto alcun
tipo di sviluppo web prima?

11
00:00:25,070 --> 00:00:27,090
Una buona quantità?

12
00:00:27,090 --> 00:00:27,750
Un po.

13
00:00:27,750 --> 00:00:30,840
>> Così Bootstrap è il mondo del più
popolare, quadro di front-end.

14
00:00:30,840 --> 00:00:34,430
E 'utilizzato per-- ho scelto un
paio di websites-- casuale

15
00:00:34,430 --> 00:00:35,904
Lyft, Newsweek, e Vogue.

16
00:00:35,904 --> 00:00:37,320
E 'utilizzato da un certo numero di siti web.

17
00:00:37,320 --> 00:00:42,020
Si tratta di un framework web design che
vi permetterà di rendere il sito web

18
00:00:42,020 --> 00:00:43,610
sia bello e reattivo.

19
00:00:43,610 --> 00:00:47,331
E io andrò su questi
due concetti qui.

20
00:00:47,331 --> 00:00:47,830
Bellissimo.

21
00:00:47,830 --> 00:00:51,640
Così avete normale sito web sulla
sinistra, che è fatta da solo HTML.

22
00:00:51,640 --> 00:00:54,960
Hai imparato HTML in classe
ed in sezione in lunghezza.

23
00:00:54,960 --> 00:00:57,290
Bootstrap è un modo per rendere
i vostri siti web bello.

24
00:00:57,290 --> 00:00:58,860
Si può prendere ciò che è sul
lato sinistro dello schermo

25
00:00:58,860 --> 00:01:01,651
e trasformarlo in quello che è sul
lato destro dello schermo con molto,

26
00:01:01,651 --> 00:01:02,710
molto, molto poco codice.

27
00:01:02,710 --> 00:01:06,480
>> Si ottiene il pulsante blu bello, si ottiene
la fantasia, bordi arrotondati sullo schermo,

28
00:01:06,480 --> 00:01:11,220
si ottiene la visualizzazione elenco, si ottiene la
carte, e così via con pochissimo codice.

29
00:01:11,220 --> 00:01:14,110
Non c'è in realtà alcuna CSS che
dovete scrivere da soli.

30
00:01:14,110 --> 00:01:16,980
Così Bootstrap consente di
avere questi CSS pre-built

31
00:01:16,980 --> 00:01:19,610
componenti che si possono mettere
all'interno della tua pagina web

32
00:01:19,610 --> 00:01:22,190
per far sembrare bello senza
molto lavoro da soli.

33
00:01:22,190 --> 00:01:24,500
E 'davvero un bootstrap,
un punto di partenza,

34
00:01:24,500 --> 00:01:26,270
per le vostre avventure di sviluppo web.

35
00:01:26,270 --> 00:01:27,780
E così quando si è
beffardo di un sito web,

36
00:01:27,780 --> 00:01:29,363
è un ottimo posto per iniziare.

37
00:01:29,363 --> 00:01:31,990
È possibile ottenere un buon sito web alla ricerca
con molto, molto poco lavoro.

38
00:01:31,990 --> 00:01:34,079
E in effetti, stiamo andando
per fare questo noi

39
00:01:34,079 --> 00:01:36,370
nel corso di come cinque
minutes-- entro 10 minuti.

40
00:01:36,370 --> 00:01:39,600
Quindi è abbastanza facile
fare alcuni grandi siti web.

41
00:01:39,600 --> 00:01:41,430
Ecco, questo è la prima parte.

42
00:01:41,430 --> 00:01:44,090
>> Il secondo part-- reattivo.

43
00:01:44,090 --> 00:01:47,040
Persone, giorno d'oggi, non solo
accedere al Web sui loro computer portatili.

44
00:01:47,040 --> 00:01:52,450
In realtà, a partire dal 2014, più persone
accedere al web attraverso i dispositivi mobili,

45
00:01:52,450 --> 00:01:56,580
come i telefoni, o compresse, o
servizi o così su di siti web.

46
00:01:56,580 --> 00:02:00,540
E siti web sono stati tradizionalmente
progettato con computer portatili o desktop

47
00:02:00,540 --> 00:02:01,300
in mente.

48
00:02:01,300 --> 00:02:04,930
E così i siti spesso non sono
molto adatto al vostro telefono.

49
00:02:04,930 --> 00:02:07,270
Se avete mai visitato
harvard.edu sul telefono,

50
00:02:07,270 --> 00:02:09,479
è una specie di un fastidioso
esperienza, giusto?

51
00:02:09,479 --> 00:02:11,080
Ecco perché non è reattivo.

52
00:02:11,080 --> 00:02:13,163
Stiamo cercando di fare
siti web che sono sensibili,

53
00:02:13,163 --> 00:02:17,360
che rispondono a dimensioni dello schermo della gente.

54
00:02:17,360 --> 00:02:19,630
>> Quindi, se si tratta di un telefono cellulare, è
per andare sul telefono.

55
00:02:19,630 --> 00:02:21,505
Se si tratta di un tablet, è
per andare sulla tavoletta.

56
00:02:21,505 --> 00:02:24,890
Regola per abbinare il
schermata che viene utilizzato.

57
00:02:24,890 --> 00:02:28,294
E così Bootstrap fornisce anche qualche
molto, utility molto utile per questo.

58
00:02:28,294 --> 00:02:29,960
E stiamo andando a discutere di quello.

59
00:02:29,960 --> 00:02:33,597
Quindi, di nuovo, ci sono due parti di
Bootstrap-- bello e responsabile.

60
00:02:33,597 --> 00:02:34,930
Stiamo andando a parlare di quelli.

61
00:02:34,930 --> 00:02:35,710
In primo luogo, bello.

62
00:02:35,710 --> 00:02:38,790
E poi reattivo.

63
00:02:38,790 --> 00:02:41,280
>> Quindi tutto il codice che siamo
andando a parlare di oggi--

64
00:02:41,280 --> 00:02:44,363
stiamo per avere un sacco di esempi,
un sacco di sfide, e così è on--

65
00:02:44,363 --> 00:02:45,949
tutto vive su questo sito qui.

66
00:02:45,949 --> 00:02:47,240
Questa diapositiva è ciò che abbiamo inviato.

67
00:02:47,240 --> 00:02:50,280
Quindi, se siete qui, si può sentire
liberi di non dover scrivere che verso il basso.

68
00:02:50,280 --> 00:02:53,480
E se stai guardando a distanza, sentire
libero di tirare questo sul vostro computer

69
00:02:53,480 --> 00:02:53,980
anche.

70
00:02:53,980 --> 00:02:57,560
Avrete probabilmente bisogno durante
il corso di questo seminario.

71
00:02:57,560 --> 00:02:59,590
>> Quindi stiamo andando a utilizzare un
sito web chiamato CodePen,

72
00:02:59,590 --> 00:03:02,540
che è una codifica collaborativo
ambiente, durante questo seminario.

73
00:03:02,540 --> 00:03:05,620
E CodePen-- e io sarò
mostrare qui vero fast--

74
00:03:05,620 --> 00:03:08,430
esso consente di scrivere
HTML in modo collaborativo.

75
00:03:08,430 --> 00:03:11,130
Posso scrivere, posso inviarlo a
voi ragazzi, voi ragazzi può modificarlo.

76
00:03:11,130 --> 00:03:14,300
Anche se sei remoto,
possono comunque accedere in questo modo.

77
00:03:14,300 --> 00:03:17,000
È possibile digitare il codice HTML al
top e sarò automaticamente

78
00:03:17,000 --> 00:03:19,140
essere convertito nella
pagina web in basso.

79
00:03:19,140 --> 00:03:22,640
Quindi è un modo per voi
per provare rapidamente fuori il codice

80
00:03:22,640 --> 00:03:26,330
senza dover fare alcun tipo di roba
sul vostro IDE, o il proprio sito web,

81
00:03:26,330 --> 00:03:27,260
o qualsiasi altra cosa.

82
00:03:27,260 --> 00:03:30,220
>> Quindi, andare avanti e tirare su questo
sito web, se siete a distanza

83
00:03:30,220 --> 00:03:32,870
o se siete qui,
soprattutto se siete a distanza.

84
00:03:32,870 --> 00:03:35,770
is.gd/cs50boostrap.

85
00:03:35,770 --> 00:03:38,670
Senza protezioni, senza sottolineature, niente di niente.

86
00:03:38,670 --> 00:03:40,930
Così quelli di voi che sono
qui, dammi solo un pollice

87
00:03:40,930 --> 00:03:43,030
quando avete tirato
costituiscono tale pagina web.

88
00:03:43,030 --> 00:03:55,980

89
00:03:55,980 --> 00:03:56,660
Buona?

90
00:03:56,660 --> 00:03:57,460
>> PUBBLICO: Sì.

91
00:03:57,460 --> 00:04:00,489
>> NEEL MEHTA: Così ci arriveremo
a quello in un secondo.

92
00:04:00,489 --> 00:04:03,530
Quindi, prima, stiamo andando a raggiungere, come
si fa a fare i vostri siti web bello?

93
00:04:03,530 --> 00:04:06,696
Stiamo per imparare a prendere noioso,
vecchio HTML, come ti ho mostrato prima,

94
00:04:06,696 --> 00:04:08,980
e trasformarla in
componenti veramente bello,

95
00:04:08,980 --> 00:04:12,230
come belle widget, bello, colorato
pulsanti e le etichette e tabelle,

96
00:04:12,230 --> 00:04:14,230
e tutti, utilizzando Bootstrap.

97
00:04:14,230 --> 00:04:17,246
Quindi se potessimo andare tutti verso il
CodePen che hai appena tirato su.

98
00:04:17,246 --> 00:04:18,829
Dovrebbe apparire un po 'come questo.

99
00:04:18,829 --> 00:04:20,020
Vi sembra così per tutti?

100
00:04:20,020 --> 00:04:20,740
>> PUBBLICO: Sì.

101
00:04:20,740 --> 00:04:23,364
>> NEEL MEHTA: Se siete remota,
dovrebbe essere simile a questo.

102
00:04:23,364 --> 00:04:26,350
In caso contrario, vi mostrerò presto come
si può ottenere apparire come questo

103
00:04:26,350 --> 00:04:28,860
in un futuro parte del video.

104
00:04:28,860 --> 00:04:32,720
Quindi qui abbiamo scritto
un HTML molto semplice,

105
00:04:32,720 --> 00:04:35,300
come il tipo che avete
stanno usando in classe.

106
00:04:35,300 --> 00:04:36,350
E 'piuttosto semplice.

107
00:04:36,350 --> 00:04:37,310
Senza fronzoli.

108
00:04:37,310 --> 00:04:39,950
E abbiamo un po 'di roba.

109
00:04:39,950 --> 00:04:43,200
Abbiamo progettato un molto,
molto semplice start up

110
00:04:43,200 --> 00:04:46,000
chiamare Yalp! con cui è possibile
trovare ristoranti nella zona,

111
00:04:46,000 --> 00:04:48,379
e trovare recensioni e
indicazioni su tutti quelli.

112
00:04:48,379 --> 00:04:49,420
E 'un concetto molto buona.

113
00:04:49,420 --> 00:04:50,700
Non è mai stato fatto prima.

114
00:04:50,700 --> 00:04:51,940
E 'un nome molto particolare, anche.

115
00:04:51,940 --> 00:04:55,270
>> Così che cosa stiamo andando a provare
di fare è aiutare il proprietario

116
00:04:55,270 --> 00:04:58,150
di Yalp! fare il suo sito web
guardare davvero, davvero cool.

117
00:04:58,150 --> 00:05:01,560
Quindi, per cominciare, il proprietario del
Yalp! ha fatto un po 'di ricerca

118
00:05:01,560 --> 00:05:05,440
scatola, e un piccolo pulsante,
e poi forse un po '

119
00:05:05,440 --> 00:05:09,014
area evidenziata per un
ristorante evidenziato, e poi

120
00:05:09,014 --> 00:05:12,300
un elenco di altri ristoranti
che sono nella zona.

121
00:05:12,300 --> 00:05:15,045
Così possiamo solo passare attraverso
il codice HTML in fretta.

122
00:05:15,045 --> 00:05:16,670
Come confortevole sei ragazzi con l'HTML?

123
00:05:16,670 --> 00:05:19,230
Abbiamo fatto un po '
sezione e anche in classe.

124
00:05:19,230 --> 00:05:20,110
Decente?

125
00:05:20,110 --> 00:05:22,700
>> Così come una ricapitolazione,
HTML è tutto di avere

126
00:05:22,700 --> 00:05:26,590
tag o elementi che raccontano la
computer di come disporre la pagina web.

127
00:05:26,590 --> 00:05:32,300
Quindi questo h1 qui-- inizio h1, Benvenuti
a Yalp !, fine h1-- comunica al computer,

128
00:05:32,300 --> 00:05:35,890
disegnare un grande colpo di testa che
dice: Benvenuti a Yalp!

129
00:05:35,890 --> 00:05:37,080
dentro.

130
00:05:37,080 --> 00:05:38,290
Abbiamo anche forme.

131
00:05:38,290 --> 00:05:43,080
Siamo in grado di ingressi in questo modo, gli ingressi di testo,
che renderà come caselle di testo

132
00:05:43,080 --> 00:05:45,530
si scrive in.

133
00:05:45,530 --> 00:05:46,840
Hai anche i pulsanti.

134
00:05:46,840 --> 00:05:48,630
Si ottiene una bella, pulsante cliccabile.

135
00:05:48,630 --> 00:05:52,210
Non fa niente di buono
ora, ma si ottiene un pulsante.

136
00:05:52,210 --> 00:05:57,210
Si possono avere div, o divisori, a
spezzare la pagina in vari gruppi.

137
00:05:57,210 --> 00:06:00,770
>> Si possono avere i paragrafi,
hai pulsanti.

138
00:06:00,770 --> 00:06:03,210
Se si dispone di punti, poi
avete liste non ordinate, ul,

139
00:06:03,210 --> 00:06:05,124
e liste dentro questo, li.

140
00:06:05,124 --> 00:06:07,540
Quindi questi sono più semplici
elementi costitutivi di una pagina web.

141
00:06:07,540 --> 00:06:09,415
E in effetti, più o meno
ogni sito web che si vede

142
00:06:09,415 --> 00:06:12,170
sta per essere costruito
utilizzando questi stessi strumenti.

143
00:06:12,170 --> 00:06:14,420
Naturalmente, non tutti
guardare questo male perché siamo

144
00:06:14,420 --> 00:06:17,380
andando a spezia esso su un po '.

145
00:06:17,380 --> 00:06:21,440
Quindi cerchiamo di questo noioso vecchio HTML e inizio
trasformandola nel bellissimo sito

146
00:06:21,440 --> 00:06:24,290
che abbiamo appena visto un paio di minuti fa.

147
00:06:24,290 --> 00:06:28,060
>> Quindi cominciamo fuori molto semplice.

148
00:06:28,060 --> 00:06:30,120
Così abbiamo qui questo tasto.

149
00:06:30,120 --> 00:06:33,960
In Bootstrap, come abbiamo visto, possiamo
hanno un bel tasto, bello, blu.

150
00:06:33,960 --> 00:06:36,580
E non è fatto facendo CSS personalizzato.

151
00:06:36,580 --> 00:06:38,700
Non c'è CSS personalizzato qui.

152
00:06:38,700 --> 00:06:41,970
Questo è fatto con l'aggiunta di classi
ai vostri elementi HTML.

153
00:06:41,970 --> 00:06:49,520
Se hai provato classi o HREF, o
ancore, o type = "text" per inputs--

154
00:06:49,520 --> 00:06:51,240
Elementi HTML possono avere questi attributi.

155
00:06:51,240 --> 00:06:53,880
Possono avere informazioni aggiuntive
che si potrebbe dare loro.

156
00:06:53,880 --> 00:06:56,290
>> E così, in questo caso,
classi sono l'attributo.

157
00:06:56,290 --> 00:07:00,800
Quindi devi scrivere, classe pulsante =
qualcosa dentro di stringhe.

158
00:07:00,800 --> 00:07:04,080
E tale attributo dirà il
computer, questo non è un qualsiasi, vecchio pulsante.

159
00:07:04,080 --> 00:07:07,940
È un pulsante che è in
questa classe di pulsanti.

160
00:07:07,940 --> 00:07:13,335
E così Bootstrap, se gli date
un certo stile sul vostro elemento,

161
00:07:13,335 --> 00:07:15,020
trarrà un certo modo.

162
00:07:15,020 --> 00:07:18,110
Così scrivo "btn BTN-primario.

163
00:07:18,110 --> 00:07:21,150
BTN essere una abbreviazione di pulsante.

164
00:07:21,150 --> 00:07:23,000
Noterete ora che
il mio tasto brutto girato

165
00:07:23,000 --> 00:07:24,500
in un bel tasto, bello, blu.

166
00:07:24,500 --> 00:07:26,630
Sembra molto bello quando si clicca esso.

167
00:07:26,630 --> 00:07:32,780
>> E così quello che succede è che abbiamo il
di classe e la classe BTN BTN-primario

168
00:07:32,780 --> 00:07:34,080
il nostro elemento.

169
00:07:34,080 --> 00:07:38,340
E Bootstrap entrerà e dire, OK, io
sapere che ci sono queste due classi.

170
00:07:38,340 --> 00:07:42,330
Ogni elemento che possiede questi due
le classi devono essere compilati come questo.

171
00:07:42,330 --> 00:07:46,000
Ecco, questo è il nucleo di come si allega
stili agli elementi in Bootstrap.

172
00:07:46,000 --> 00:07:50,480
Basta collegare le classi a loro e
sarà di peso fuori come meglio ritiene opportuno.

173
00:07:50,480 --> 00:07:52,440
Quindi, ecco un altro esempio.

174
00:07:52,440 --> 00:07:57,700
In ingresso, possiamo aggiungere
a class = "forma-control".

175
00:07:57,700 --> 00:08:01,140
E vi mostrerò presto dove si
possono scoprire quali classi

176
00:08:01,140 --> 00:08:03,030
sono disponibili di ciascun tipo di elemento.

177
00:08:03,030 --> 00:08:10,490
Ma la classe che abbiamo appena
aggiunto ha delle belle, gli angoli arrotondati,

178
00:08:10,490 --> 00:08:13,230
ha bella imbottitura, ha
una bella, luce blu ad esso.

179
00:08:13,230 --> 00:08:15,130
>> Possiamo anche andare in questa forma.

180
00:08:15,130 --> 00:08:22,040
E class = "form-in linea", che farà
il nostro modulo, come si potrebbe immaginare, in linea.

181
00:08:22,040 --> 00:08:25,680
Così che sta cercando un po 'di più
come quello che avevamo prima già.

182
00:08:25,680 --> 00:08:29,430
Quindi, prima di andare avanti per lo stile al resto del
la pagina delle domande su quello che abbiamo

183
00:08:29,430 --> 00:08:29,930
ha fatto?

184
00:08:29,930 --> 00:08:31,971
Noi classi appena collegati
ai nostri vari elementi.

185
00:08:31,971 --> 00:08:35,080
E io vi mostrerò più avanti come si può
capire quali servizi sono disponibili classi.

186
00:08:35,080 --> 00:08:37,659
Abbiamo attaccato classi che
avere certi stili.

187
00:08:37,659 --> 00:08:41,789
E che dice al browser
come il layout della pagina utilizzando

188
00:08:41,789 --> 00:08:43,289
Fornite stili di Bootstrap.

189
00:08:43,289 --> 00:08:45,920
Tutte le domande da parte del pubblico?

190
00:08:45,920 --> 00:08:46,770
>> Bene finora?

191
00:08:46,770 --> 00:08:47,290
Raffreddare.

192
00:08:47,290 --> 00:08:49,206
Un sacco di sfide
con Bootstrap è solo

193
00:08:49,206 --> 00:08:51,730
sapere quali componenti sono
disponibili e come utilizzarli.

194
00:08:51,730 --> 00:08:53,730
E questo è tutto imparato
con l'esperienza e anche

195
00:08:53,730 --> 00:08:58,180
attraverso la lettura della documentazione,
che parleremo presto.

196
00:08:58,180 --> 00:08:59,950
Quindi abbiamo questa div.

197
00:08:59,950 --> 00:09:01,520
E 'solo una noiosa, vecchia cosa.

198
00:09:01,520 --> 00:09:03,710
Vogliamo sottolineare in qualche modo.

199
00:09:03,710 --> 00:09:06,490
Così in Bootstrap, esistono
sacco di componenti disponibili.

200
00:09:06,490 --> 00:09:08,190
E questo è getbootstrap.com.

201
00:09:08,190 --> 00:09:09,410
E 'un riferimento molto utile.

202
00:09:09,410 --> 00:09:12,960
Contiene cose like--
ecco come si fa un tasto.

203
00:09:12,960 --> 00:09:16,710
E si può fare barre nav, è possibile
le etichette, è possibile barre di avanzamento,

204
00:09:16,710 --> 00:09:19,410
si può fare gruppi di elenchi.

205
00:09:19,410 --> 00:09:22,290
In sostanza, si tratta di tutti i tipi
di si potrebbe vedere una pagina web.

206
00:09:22,290 --> 00:09:24,180
>> Ecco quello che cercheremo in questo momento.

207
00:09:24,180 --> 00:09:25,150
Si chiama pannello.

208
00:09:25,150 --> 00:09:27,270
Se mai utilizzi Google
Ora, hanno le carte.

209
00:09:27,270 --> 00:09:29,050
O qualsiasi dispositivo Android ha le carte.

210
00:09:29,050 --> 00:09:31,601
Hanno bianca scatole
che hanno roba dentro di esso.

211
00:09:31,601 --> 00:09:34,350
E così stiamo andando a cercare di fare
che noi qui utilizzando una cosa

212
00:09:34,350 --> 00:09:35,480
chiamato un pannello.

213
00:09:35,480 --> 00:09:44,872
Quindi, se ci attacchiamo class = "Pannello
Pannello-default "per il nostro div esterno,

214
00:09:44,872 --> 00:09:49,900
allora noi attribuiamo un div class = - diamo
basta controllare questa documentazione.

215
00:09:49,900 --> 00:09:54,040
div class = "pannello voce" e
poi div class = "pannelli a corpo".

216
00:09:54,040 --> 00:09:56,644

217
00:09:56,644 --> 00:09:58,560
Ancora una volta, non ti preoccupare
memorizzare il codice.

218
00:09:58,560 --> 00:10:00,510
Sarà disponibile on-line.

219
00:10:00,510 --> 00:10:04,700
>> Così abbiamo fatto questo e ora il nostro noioso, vecchio
div trasformato in questa bella, piccola carta.

220
00:10:04,700 --> 00:10:07,580
Esso Ha bello imbottitura,
ha confini, spicca

221
00:10:07,580 --> 00:10:09,760
dal resto della pagina,
che è piuttosto fresco.

222
00:10:09,760 --> 00:10:13,524
Così andiamo in e cambiare questo Get
Pulsante le indicazioni per un aspetto gradevole.

223
00:10:13,524 --> 00:10:16,190
Chi tra il pubblico vuole raccontare
me quello che posso fare per il pulsante

224
00:10:16,190 --> 00:10:18,220
per farlo sembrare bello con Bootstrap?

225
00:10:18,220 --> 00:10:20,755

226
00:10:20,755 --> 00:10:21,255
Sì?

227
00:10:21,255 --> 00:10:22,905
>> PUBBLICO: Potremmo aggiungere una classe.

228
00:10:22,905 --> 00:10:24,690
E potremmo fare class = "btn BTN-primario".

229
00:10:24,690 --> 00:10:30,004

230
00:10:30,004 --> 00:10:30,960
NEEL MEHTA: Sì.

231
00:10:30,960 --> 00:10:34,040
C'è un mucchio di altre
colori disponibili per buttons--

232
00:10:34,040 --> 00:10:35,590
o per qualsiasi cosa, per quella materia.

233
00:10:35,590 --> 00:10:39,010
Possiamo fare BTN-pericolo e renderlo rosso.

234
00:10:39,010 --> 00:10:40,940
Ci siamo.

235
00:10:40,940 --> 00:10:50,300
Possiamo fare BTN-successo per renderlo verde.

236
00:10:50,300 --> 00:10:57,620
Possiamo fare BTN-info-- c'è un mucchio
di cose che sono a vostra disposizione.

237
00:10:57,620 --> 00:11:00,550
Così ho piccola sfida per voi.

238
00:11:00,550 --> 00:11:04,730
Quindi c'è un'altra cosa
che ho lasciato un-stile.

239
00:11:04,730 --> 00:11:05,870
Questo top ristoranti.

240
00:11:05,870 --> 00:11:10,140
>> E vogliamo usare una cosa
chiamato un gruppo di lista per lo stile di esso.

241
00:11:10,140 --> 00:11:13,530
Quindi la mia sfida per voi è
proseguire per getbootstrap.com--

242
00:11:13,530 --> 00:11:15,540
Tirerò quassù.

243
00:11:15,540 --> 00:11:17,190
getboostrap.com.

244
00:11:17,190 --> 00:11:24,850
Vai a getbootstrap.com, trovare il
sezione dove vanno gruppi della lista.

245
00:11:24,850 --> 00:11:28,110
E vedrete qui un
esempio e le classi giuste

246
00:11:28,110 --> 00:11:34,170
che è possibile utilizzare per rendere il vostro
liste in queste belle gruppi elenco.

247
00:11:34,170 --> 00:11:37,260
Questi sono elaborati esempi
di esempi di codice, cosa

248
00:11:37,260 --> 00:11:40,720
codice utilizzato, quale codice HTML
si utilizza, e cosa che le uscite.

249
00:11:40,720 --> 00:11:43,410
>> Quindi la mia sfida a you--
andare avanti getbootstrap.com,

250
00:11:43,410 --> 00:11:47,860
sia che siate qui o in casa, e
per cercare di aggiungere stili per questo ul

251
00:11:47,860 --> 00:11:49,150
per farlo sembrare bello.

252
00:11:49,150 --> 00:11:52,084
E utilizzare uno stile di gruppo di lista.

253
00:11:52,084 --> 00:11:54,750
Si vuole prendere un paio di minuti,
e cercare la documentazione,

254
00:11:54,750 --> 00:11:56,330
provare questo voi stessi?

255
00:11:56,330 --> 00:11:59,710
Perché, come si sta facendo lo sviluppo del web,
vi renderete conto molto del tuo lavoro

256
00:11:59,710 --> 00:12:01,867
sta per essere la lettura
questa documentazione.

257
00:12:01,867 --> 00:12:04,700
Quindi penso che è bene prendere confidenza
con il modo di leggere la documentazione,

258
00:12:04,700 --> 00:12:07,870
come capire cosa è dove,
quale codice esempi che è possibile utilizzare,

259
00:12:07,870 --> 00:12:09,160
ciò che è possibile sfruttare.

260
00:12:09,160 --> 00:12:13,170
>> Quindi, di nuovo, getbootstrap.com,
vai alla scheda Componenti,

261
00:12:13,170 --> 00:12:15,030
e poi scorrere verso il basso all'elenco dei gruppi.

262
00:12:15,030 --> 00:12:20,870
E vedrete esempi di codice che
è possibile utilizzare per rendere il codice HTML in forma che.

263
00:12:20,870 --> 00:12:23,370
Quindi prendere un paio di minuti e
provare ed esplorare da soli,

264
00:12:23,370 --> 00:12:24,661
se siete qui oa casa.

265
00:12:24,661 --> 00:12:27,660
Se sei a casa, mettere in pausa il video,
forse, e provarlo voi stessi.

266
00:12:27,660 --> 00:12:32,329
Se siete qui, se si va al nostro
website-- se si aggiorna la pagina,

267
00:12:32,329 --> 00:12:33,370
vedrete questa lì.

268
00:12:33,370 --> 00:12:36,970
Questo stesso codice è solo
l'aggiunta di nuovi stili proprio lì.

269
00:12:36,970 --> 00:12:38,005
Quindi richiedere alcuni minuti.

270
00:12:38,005 --> 00:12:41,130
Fammi sapere quando si sente bene
su di esso o quando si è completamente perso.

271
00:12:41,130 --> 00:12:42,230
Suona bene?

272
00:12:42,230 --> 00:12:44,034
Raffreddare.

273
00:12:44,034 --> 00:12:46,450
Rapida da parte per quelli di voi
a casa, mentre aspettiamo,

274
00:12:46,450 --> 00:12:50,080
se si va al sito GitHub
che ho messo un paio diapositive fa,

275
00:12:50,080 --> 00:12:53,500
verso l'inizio del video,
Ho un repo GitHub, repository,

276
00:12:53,500 --> 00:12:55,720
per questo discorso.

277
00:12:55,720 --> 00:12:59,590
Tutti questi esempi di codice che saremo
parlando sono memorizzati qui.

278
00:12:59,590 --> 00:13:09,250
Quindi, se si va a sfidare-1.html, questo
è tutto il codice che abbiamo in questo momento

279
00:13:09,250 --> 00:13:10,000
sul nostro CodePen.

280
00:13:10,000 --> 00:13:12,900
Così si può solo andare avanti, e copiare
questo, e incollarlo nella propria CodePen.

281
00:13:12,900 --> 00:13:15,275
E in questo modo, si può tenere il passo
con quello che stiamo facendo qui.

282
00:13:15,275 --> 00:13:19,020
Quindi avere questa pagina aperta così come noi
passare per il resto del seminario.

283
00:13:19,020 --> 00:13:33,131

284
00:13:33,131 --> 00:13:36,380
Anche in questo caso, si vuole apparire come quello che si
vedere giù in basso dello schermo

285
00:13:36,380 --> 00:13:36,879
Là.

286
00:13:36,879 --> 00:14:05,450

287
00:14:05,450 --> 00:14:06,800
Sentirsi bene?

288
00:14:06,800 --> 00:14:07,740
Solido.

289
00:14:07,740 --> 00:14:10,570
Aspettiamo tutti gli altri di
finire con quello che stanno facendo.

290
00:14:10,570 --> 00:14:41,446

291
00:14:41,446 --> 00:14:42,950
>> Sì?

292
00:14:42,950 --> 00:14:45,864
>> PUBBLICO: Supponiamo che volevo
utilizzare Bootstrap a home--

293
00:14:45,864 --> 00:14:46,530
NEEL MEHTA: Sì.

294
00:14:46,530 --> 00:14:52,140
PUBBLICO: Vedo, sul sito web,
Getting Started pagina.

295
00:14:52,140 --> 00:14:57,671
Mi danno le opzioni
Bootstrap, codice sorgente, o Sass.

296
00:14:57,671 --> 00:14:58,730
Quale di questi voglio?

297
00:14:58,730 --> 00:14:58,940
>> NEEL MEHTA: Sì.

298
00:14:58,940 --> 00:15:01,620
Quindi la domanda è: come si fa a ottenere
iniziato a utilizzare Bootstrap da noi stessi?

299
00:15:01,620 --> 00:15:03,656
Succede solo a
magicamente lavorare proprio qui.

300
00:15:03,656 --> 00:15:05,530
Quindi, se abbiamo tempo a
Alla fine del seminario,

301
00:15:05,530 --> 00:15:08,560
Vi mostrerò come si può
scarica su pagina web.

302
00:15:08,560 --> 00:15:10,799
Come qui, ho fatto
mettere in alcune impostazioni che

303
00:15:10,799 --> 00:15:12,590
avrà automaticamente
caricato, ma io sarò

304
00:15:12,590 --> 00:15:14,720
mostra di farlo da
graffiare sulle proprie pagine web.

305
00:15:14,720 --> 00:15:15,600
>> PUBBLICO: Grazie.

306
00:15:15,600 --> 00:15:15,680
>> NEEL MEHTA: Sì.

307
00:15:15,680 --> 00:15:16,263
Bella domanda.

308
00:15:16,263 --> 00:15:19,520

309
00:15:19,520 --> 00:15:21,500
Sentirsi bene?

310
00:15:21,500 --> 00:15:22,290
Sentirsi bene?

311
00:15:22,290 --> 00:15:22,790
Raffreddare.

312
00:15:22,790 --> 00:15:27,919
Allora, chi vuole mi hanno fatto dire come
questa cosa un aspetto gradevole e Boostrappy?

313
00:15:27,919 --> 00:15:29,585
Qual è la prima classe a questo aggiungiamo la ul?

314
00:15:29,585 --> 00:15:34,347

315
00:15:34,347 --> 00:15:35,555
PUBBLICO: class = "lista-gruppo".

316
00:15:35,555 --> 00:15:36,721
NEEL MEHTA: Sì. lista-gruppi.

317
00:15:36,721 --> 00:15:38,917

318
00:15:38,917 --> 00:15:40,500
E allora che cosa attribuiamo alla lis?

319
00:15:40,500 --> 00:15:41,072
Qualcun altro?

320
00:15:41,072 --> 00:15:43,405
PUBBLICO: E poi, dopo
che, class = "lista-gruppi-voce".

321
00:15:43,405 --> 00:15:46,230

322
00:15:46,230 --> 00:15:47,950
>> NEEL MEHTA: Sì.

323
00:15:47,950 --> 00:15:48,640
>> PUBBLICO: Ed è la
stesso per il prossimo.

324
00:15:48,640 --> 00:15:50,265
>> NEEL MEHTA: li class = "lista-gruppi-voce".

325
00:15:50,265 --> 00:15:53,960

326
00:15:53,960 --> 00:15:55,049
Ci si va.

327
00:15:55,049 --> 00:15:57,340
Abbiamo il nostro bel gruppo lista,
proprio come avevamo previsto.

328
00:15:57,340 --> 00:15:58,560
Così ci si va.

329
00:15:58,560 --> 00:16:01,546
In 10 minuti, abbiamo fatto
questo noioso, vecchio Yalp! pagina

330
00:16:01,546 --> 00:16:02,670
un aspetto gradevole e professionale.

331
00:16:02,670 --> 00:16:04,549
E questo è solo l'inizio.

332
00:16:04,549 --> 00:16:06,340
Quindi, ora che si sente
buono di questo, facciamo

333
00:16:06,340 --> 00:16:08,850
basta andare avanti e parlare
un paio di più componenti che

334
00:16:08,850 --> 00:16:11,320
potrebbe tornare utile, come si
andare per la vostra avventura.

335
00:16:11,320 --> 00:16:12,778
>> Naturalmente, ci sono un sacco di quelli qui.

336
00:16:12,778 --> 00:16:14,940
E ora che hai imparato
come fare i gruppi della lista,

337
00:16:14,940 --> 00:16:17,080
si può tranquillamente insegnare
persona come per fare uno di questi.

338
00:16:17,080 --> 00:16:19,770
Ma, naturalmente, facciamo solo provare
e fare un paio di più noi stessi,

339
00:16:19,770 --> 00:16:22,730
solo così si ottiene un tatto per
come si potrebbe usarlo.

340
00:16:22,730 --> 00:16:24,530
Sto solo andando ad andare
per questo esempio.

341
00:16:24,530 --> 00:16:28,480

342
00:16:28,480 --> 00:16:34,510
Anche in questo caso, il codice che ho appena incollato
qui è disponibile qui.

343
00:16:34,510 --> 00:16:37,630
Quindi sentitevi liberi di tirarlo su.

344
00:16:37,630 --> 00:16:40,100
>> Per questo abbiamo già vissuto
un paio di questi esempi.

345
00:16:40,100 --> 00:16:43,850
Così abbiamo i pulsanti, che abbiamo
hanno già visto come fare.

346
00:16:43,850 --> 00:16:46,270
Siamo in grado di creare pulsanti più grandi.

347
00:16:46,270 --> 00:16:53,690
Con il tasto class-- va, BTN BTN-lg
e BTN-default lo rende bianco.

348
00:16:53,690 --> 00:16:57,790
Quindi questo rende il nostro pulsante più grande
di quanto sarebbe altrimenti.

349
00:16:57,790 --> 00:17:00,900
Potrebbe tornare utile, se avete
pulsante o qualcosa di grande presentare.

350
00:17:00,900 --> 00:17:04,599
Abbiamo visto l'esempio del gruppo lista,
abbiamo visto l'esempio modulo.

351
00:17:04,599 --> 00:17:07,569
>> Una molto importante è icone.

352
00:17:07,569 --> 00:17:13,240
E le icone sono un modo per aggiungere
cose interessanti, come il check di controllo

353
00:17:13,240 --> 00:17:16,589
segni o vantaggi, o amico
icone o riavviare icone,

354
00:17:16,589 --> 00:17:19,349
o qualsiasi altra cosa per la vostra applicazione web.

355
00:17:19,349 --> 00:17:23,400
Così ancora una volta, se in questa sede,
i componenti, glyphicons,

356
00:17:23,400 --> 00:17:25,579
sono le icone disponibili per Bootstrap.

357
00:17:25,579 --> 00:17:28,050
C'è un esaustivo
elenco di tutti quelli qui.

358
00:17:28,050 --> 00:17:30,250
Quindi, solo come esempio,
cerchiamo di aggiungere uno.

359
00:17:30,250 --> 00:17:34,290
>> Così come Facebook, siamo a cercare
per avere un pulsante Aggiungi amico.

360
00:17:34,290 --> 00:17:35,620
Diamo prima aggiungere un certo stile.

361
00:17:35,620 --> 00:17:36,911
class = tasto "BTN BTN-successo".

362
00:17:36,911 --> 00:17:40,656

363
00:17:40,656 --> 00:17:42,050
E ce ne andiamo.

364
00:17:42,050 --> 00:17:43,730
Aggiungiamo un'icona qui.

365
00:17:43,730 --> 00:17:46,080
Che icona, pensi,
potrebbe avere senso per mettere qui?

366
00:17:46,080 --> 00:17:48,632
Avete probabilmente visto su
alcune pagine web o qualsiasi altra cosa,

367
00:17:48,632 --> 00:17:51,590
ma ciò che è un esempio di un'icona che
potrebbe andare bene all'interno di questo bottone?

368
00:17:51,590 --> 00:17:55,550

369
00:17:55,550 --> 00:17:58,697
Sentitevi liberi di navigare questo punto di vista,
se avete bisogno di ispirazione.

370
00:17:58,697 --> 00:18:00,530
C'è un sacco di utili
quelle disponibili qui.

371
00:18:00,530 --> 00:18:04,330

372
00:18:04,330 --> 00:18:04,830
Sì?

373
00:18:04,830 --> 00:18:07,400

374
00:18:07,400 --> 00:18:13,455
>> AUDIENCE: Forse l'utente glyphicon uno?

375
00:18:13,455 --> 00:18:14,080
NEEL MEHTA: OK.

376
00:18:14,080 --> 00:18:14,959
Questo.

377
00:18:14,959 --> 00:18:15,750
Questo è abbastanza buono.

378
00:18:15,750 --> 00:18:16,250
Sì.

379
00:18:16,250 --> 00:18:18,730
Su Facebook, penso che
apparirebbe un po 'così.

380
00:18:18,730 --> 00:18:22,730
Quindi, ecco come andiamo circa
aggiunta di icone alle nostre pagine.

381
00:18:22,730 --> 00:18:26,080
Non ci resta che un span-- un arco è un
contenitore neutro per qualcosa.

382
00:18:26,080 --> 00:18:29,080
Un div è un contenitore per qualcosa,
un arco è un altro contenitore.

383
00:18:29,080 --> 00:18:31,100
div hanno interruzioni di riga
intorno a loro, campate non lo fanno.

384
00:18:31,100 --> 00:18:33,592
Quindi c'è diversi modi di
avere contenitori generici.

385
00:18:33,592 --> 00:18:36,550
Come esso non ha senso metterlo
all'interno di un paragrafo o nulla.

386
00:18:36,550 --> 00:18:38,560
Abbiamo avuto modo di mettere
dentro qualcosa, però,

387
00:18:38,560 --> 00:18:39,910
così abbiamo appena messo all'interno di un arco.

388
00:18:39,910 --> 00:18:46,550
Così span class = glyphicon
glyphicon-utente "vicino campata.

389
00:18:46,550 --> 00:18:51,710
E ora abbiamo il
icona all'interno del pulsante.

390
00:18:51,710 --> 00:18:56,486
>> Così non sembra del tutto dissimile
quello che si potrebbe vedere su facebook.com.

391
00:18:56,486 --> 00:18:59,360
E quindi è bello che questi possono
in realtà essere posizionato ovunque si desideri.

392
00:18:59,360 --> 00:19:01,480
Nelle vostre barre di intestazione,
nei vostri gruppi della lista.

393
00:19:01,480 --> 00:19:02,110
Qualunque.

394
00:19:02,110 --> 00:19:04,050
Essa non deve essere
all'interno di un pulsante.

395
00:19:04,050 --> 00:19:06,315
Così ad esempio, posso
mettere la stessa classe qui.

396
00:19:06,315 --> 00:19:07,440
"glyphicon glyphicon-utente".

397
00:19:07,440 --> 00:19:11,383

398
00:19:11,383 --> 00:19:12,725
E sembra lo stesso.

399
00:19:12,725 --> 00:19:15,850
Quindi questi icons-- è possibile utilizzare l'intervallo
class = "glyphicon glyphicon-qualunque".

400
00:19:15,850 --> 00:19:18,570

401
00:19:18,570 --> 00:19:21,170
E che vi permetterà di aggiungere
icone dove vuoi.

402
00:19:21,170 --> 00:19:24,000
E le icone sono molto importanti
parte di fare uno sguardo sito web

403
00:19:24,000 --> 00:19:25,470
professionale e ben fatto.

404
00:19:25,470 --> 00:19:29,960
Quindi non esagerare, ma è
spesso una buona cosa da sapere.

405
00:19:29,960 --> 00:19:31,250
>> Pannelli, di nuovo.

406
00:19:31,250 --> 00:19:34,910
Mi limiterò a farlo di nuovo come un riassunto
perché sono di tipo coinvolti.

407
00:19:34,910 --> 00:19:37,390
Noterete che in
trasformare il vostro normale HTML

408
00:19:37,390 --> 00:19:39,800
sito in un Bootstrap-afied
sito, avrete

409
00:19:39,800 --> 00:19:43,139
per aggiungere la struttura in più per il sito web.

410
00:19:43,139 --> 00:19:45,430
Ad esempio, abbiamo in più
div qui solo perché quelli

411
00:19:45,430 --> 00:19:46,830
sono necessari per fare un pannello.

412
00:19:46,830 --> 00:19:49,739
Quindi, solo tenere a mente che
dovrete avere una struttura in più.

413
00:19:49,739 --> 00:19:50,780
Quindi, "Pannello-default pannello".

414
00:19:50,780 --> 00:19:55,740

415
00:19:55,740 --> 00:19:56,740
Forse è pannello-header.

416
00:19:56,740 --> 00:20:03,265

417
00:20:03,265 --> 00:20:04,390
Penso che sia del pannello-voce.

418
00:20:04,390 --> 00:20:10,680

419
00:20:10,680 --> 00:20:11,180
Sì.

420
00:20:11,180 --> 00:20:11,910
Ci siamo.

421
00:20:11,910 --> 00:20:14,420
Così, ancora una volta, c'è il nostro pannello.

422
00:20:14,420 --> 00:20:17,090
>> Un'altra cosa che abbiamo
ancora non coprire, tavoli.

423
00:20:17,090 --> 00:20:19,880
Tavoli, per impostazione predefinita sguardo gentile di brutto.

424
00:20:19,880 --> 00:20:20,441
Come questo.

425
00:20:20,441 --> 00:20:22,440
Ma tavoli sono, naturalmente,
una parte molto importante

426
00:20:22,440 --> 00:20:24,520
di ciò che si farà in sviluppo web.

427
00:20:24,520 --> 00:20:28,156
In Pset7, per esempio, CS50
Finanza, che uscirà presto,

428
00:20:28,156 --> 00:20:29,280
viene utilizzato un sacco di tavoli.

429
00:20:29,280 --> 00:20:33,060
E un sacco di web dev utilizzano un sacco
di tabelle per visualizzare le informazioni,

430
00:20:33,060 --> 00:20:35,320
come azioni, o punteggi, o qualsiasi altra cosa.

431
00:20:35,320 --> 00:20:37,890
>> Così tavoli styling è in realtà molto semplice.

432
00:20:37,890 --> 00:20:41,190
Si aggiunge la classe tavolo al vostro tavolo.

433
00:20:41,190 --> 00:20:46,834
E, io oso dire, sembra piuttosto bello.

434
00:20:46,834 --> 00:20:49,000
Si possono fare cose in più,
come "table-strisce tavolo".

435
00:20:49,000 --> 00:20:52,240

436
00:20:52,240 --> 00:20:54,980
E vedrete i risultati qui.

437
00:20:54,980 --> 00:20:56,835
Si può fare tabella bordata.

438
00:20:56,835 --> 00:20:58,210
C'è un sacco di opzioni è possibile.

439
00:20:58,210 --> 00:21:00,960
Ma fondamentalmente, aggiungendo un
tavolo, il tavolo classe,

440
00:21:00,960 --> 00:21:02,920
renderà le vostre tabelle carina bello.

441
00:21:02,920 --> 00:21:07,070
Quindi questo è un breve riepilogo di
alcuni degli stili più importanti

442
00:21:07,070 --> 00:21:11,450
e componenti Potrai
necessario utilizzare per Bootstrap.

443
00:21:11,450 --> 00:21:16,481
Quindi penso che avvolge
la nostra bella parte.

444
00:21:16,481 --> 00:21:19,230
Tutte le domande adesso su come
rendere il sito web bello?

445
00:21:19,230 --> 00:21:24,139
Come è possibile utilizzare questi
componenti a vostro vantaggio?

446
00:21:24,139 --> 00:21:24,680
Sentirsi bene?

447
00:21:24,680 --> 00:21:25,702
Sì?

448
00:21:25,702 --> 00:21:27,410
PUBBLICO: Forse questo
è una domanda stupida,

449
00:21:27,410 --> 00:21:31,160
ma è possibile utilizzare Bootstrap su Wikipedia?

450
00:21:31,160 --> 00:21:33,304
Se si sta modificando una pagina di Wikipedia?

451
00:21:33,304 --> 00:21:33,970
NEEL MEHTA: Sì.

452
00:21:33,970 --> 00:21:36,630
Quindi la domanda era, io sono
la modifica di una pagina di Wikipedia,

453
00:21:36,630 --> 00:21:38,360
posso includere stili Bootstrap in là?

454
00:21:38,360 --> 00:21:38,970
>> PUBBLICO: Sì.

455
00:21:38,970 --> 00:21:44,020
>> NEEL MEHTA: E così è Bootstrap
fondamentalmente un grande foglio di stile CSS.

456
00:21:44,020 --> 00:21:48,610
Un foglio di stile CSS dice solo, ogni volta
Ho questa classe, allego questi stili.

457
00:21:48,610 --> 00:21:56,440
Così il foglio di stile CSS per Bootstrap
sta per essere qualcosa di simile .btn,

458
00:21:56,440 --> 00:22:01,960
la classe tasto, otterrà come un
confine angolo arrotondato o qualsiasi altra cosa.

459
00:22:01,960 --> 00:22:06,350
Quindi, fondamentalmente, Bootstrap solo una
mazzo di classi e un sacco di stili

460
00:22:06,350 --> 00:22:07,950
specificata per le classi.

461
00:22:07,950 --> 00:22:12,030
Quindi, finché si dispone che i CSS,
questo elenco di regole nella vostra pagina,

462
00:22:12,030 --> 00:22:13,587
si otterrà lo stile Bootstrap.

463
00:22:13,587 --> 00:22:16,670
Cioè, ovviamente, subordinato
con gli stili Bootstrap nella tua pagina

464
00:22:16,670 --> 00:22:17,710
iniziare con.

465
00:22:17,710 --> 00:22:19,710
>> E così in Wikipedia,
probabilmente non poteva

466
00:22:19,710 --> 00:22:23,120
farlo perché Wikipedia
non ha Bootstrap in esso.

467
00:22:23,120 --> 00:22:26,630
Ma se ha avuto Bootstrap,
probabilmente si potrebbe fare.

468
00:22:26,630 --> 00:22:31,380
E se si voleva, si potrebbe
includerlo, ma che potrebbero

469
00:22:31,380 --> 00:22:33,260
rompere il layout esistente della pagina.

470
00:22:33,260 --> 00:22:34,350
Ma molto bella domanda.

471
00:22:34,350 --> 00:22:37,380
È possibile utilizzare Bootstrap
dovunque siano inclusi,

472
00:22:37,380 --> 00:22:40,060
ma non è costruito in default.

473
00:22:40,060 --> 00:22:40,980
>> PUBBLICO: Grazie.

474
00:22:40,980 --> 00:22:41,900
>> NEEL MEHTA: Sì.

475
00:22:41,900 --> 00:22:44,210
Altre domande?

476
00:22:44,210 --> 00:22:44,710
Sì.

477
00:22:44,710 --> 00:22:48,650
Quindi, se sei qui o in casa,
basta ricordare ancora una volta getboostrap.com--,

478
00:22:48,650 --> 00:22:50,755
getboostrap.com-- è tuo amico.

479
00:22:50,755 --> 00:22:52,880
Ogni volta che si sta utilizzando
Bootstrap, questo vi darà

480
00:22:52,880 --> 00:22:55,842
istruzioni su come ottenere
ha iniziato, come utilizzare i componenti.

481
00:22:55,842 --> 00:22:58,550
C'è un po 'di fresco JavaScript
plug-in che non andremo qui,

482
00:22:58,550 --> 00:23:00,240
ma sono la pena di verificare pure.

483
00:23:00,240 --> 00:23:01,490
Quindi questo è tuo amico.

484
00:23:01,490 --> 00:23:05,230
E 'solo importante per ottenere
utilizzato per come usare questo.

485
00:23:05,230 --> 00:23:10,120
>> Quindi cerchiamo di chiacchierare un po '
creare siti web sensibili.

486
00:23:10,120 --> 00:23:14,600
Quindi, come ho detto prima, la gente
i loro computer portatili, usano i loro telefoni.

487
00:23:14,600 --> 00:23:18,946
E come si potrebbe immaginare, questo è
una dimensione molto diversa da quella dello schermo.

488
00:23:18,946 --> 00:23:21,070
E così lo stesso sito web
che sembra buono sul mio telefono

489
00:23:21,070 --> 00:23:23,880
non sta andando a guardare bene,
necessariamente, in un computer.

490
00:23:23,880 --> 00:23:27,130
Così che cosa dovete fare è
rendere il vostro sito web adattarsi.

491
00:23:27,130 --> 00:23:30,060
Deve adattarsi ai vari
dimensioni dello schermo che si trova.

492
00:23:30,060 --> 00:23:34,090
>> Deve dire, so di essere in un
computer, un grande computer portatile, mi dovrebbe espandersi.

493
00:23:34,090 --> 00:23:35,920
So di essere su un telefono, dovrei ridursi.

494
00:23:35,920 --> 00:23:40,470
E così Bootstrap fornisce alcune
molto, strumenti molto utili per fare questo.

495
00:23:40,470 --> 00:23:44,490
Così Bootstrap ti permette di pausa
un sito web in 12 colonne.

496
00:23:44,490 --> 00:23:46,420
È possibile effettuare le righe e hanno 12 colonne.

497
00:23:46,420 --> 00:23:48,490
Ed è possibile partizionare
quelli però si desidera.

498
00:23:48,490 --> 00:23:51,860
Si può avere uno, grande cosa,
che è larga 12 colonne.

499
00:23:51,860 --> 00:23:53,980
È possibile avere due cose
che sono sei ciascuno.

500
00:23:53,980 --> 00:23:56,817
Si può fare una cosa che è quattro,
uno che è a due, o uno che è di sei.

501
00:23:56,817 --> 00:23:58,400
Si può fare tre, tre, tre, tre.

502
00:23:58,400 --> 00:24:00,570
Puoi fare quello
ripartizione che si desidera.

503
00:24:00,570 --> 00:24:05,730
>> Quindi forse la tua pagina web deve avere un
colonna di sinistra che è un terzo della larghezza.

504
00:24:05,730 --> 00:24:08,250
In modo che sarebbe quattro colonne
ampia e il resto della pagina

505
00:24:08,250 --> 00:24:09,690
sarebbe larga otto colonne.

506
00:24:09,690 --> 00:24:11,100
Quindi questo è un esempio.

507
00:24:11,100 --> 00:24:14,380
Facciamo tirare un altro esempio.

508
00:24:14,380 --> 00:24:17,290
>> PUBBLICO: Fa sempre
deve essere un ancora diviso?

509
00:24:17,290 --> 00:24:18,750
Potrebbe essere un sette, cinque scissione?

510
00:24:18,750 --> 00:24:19,416
>> NEEL MEHTA: Sì.

511
00:24:19,416 --> 00:24:20,470
Potrebbe essere sette, cinque.

512
00:24:20,470 --> 00:24:20,970
Sì.

513
00:24:20,970 --> 00:24:24,110
Finché si aggiunge al 12, va bene.

514
00:24:24,110 --> 00:24:26,270
Quindi cerchiamo di tornare qui.

515
00:24:26,270 --> 00:24:29,960
Anche in questo caso, il codice che è
qui è anche disponibile qui,

516
00:24:29,960 --> 00:24:34,130
sotto esempio reattivo.

517
00:24:34,130 --> 00:24:36,840
Così ho tirato un po '
esempio di codice di risposta qui.

518
00:24:36,840 --> 00:24:40,870
Quindi si esegue questa operazione utilizzando
una cosa chiamata fila.

519
00:24:40,870 --> 00:24:42,030
Row è solo un'altra classe.

520
00:24:42,030 --> 00:24:46,920
Si tratta di un altro stile di aggiungere sul vostro
DIV per farli i propri componenti.

521
00:24:46,920 --> 00:24:50,430
>> Così dite, div
class = "fila" per fare una fila,

522
00:24:50,430 --> 00:24:52,990
per darti 12 colonne di spazio.

523
00:24:52,990 --> 00:24:55,000
E allora si mette le colonne all'interno di questo.

524
00:24:55,000 --> 00:24:57,609
Quindi qui si COL-xs-6.

525
00:24:57,609 --> 00:24:58,650
Non preoccuparti per le x.

526
00:24:58,650 --> 00:24:59,880
Parleremo in un secondo.

527
00:24:59,880 --> 00:25:03,560
Ma in fondo, abbiamo una
cosa che è di sei di larghezza.

528
00:25:03,560 --> 00:25:04,250
Noi lo chiamiamo sinistra.

529
00:25:04,250 --> 00:25:06,120
E così questa è la casella a sinistra qui.

530
00:25:06,120 --> 00:25:08,390
Abbiamo una cosa che è
sei dei 12 colonne di larghezza.

531
00:25:08,390 --> 00:25:10,620
E quello si trova sulla destra.

532
00:25:10,620 --> 00:25:13,560
>> bene dà solo marche
div riempirlo grigio.

533
00:25:13,560 --> 00:25:16,790
Quindi questo è solo così che possiamo
vedere che sono distinti.

534
00:25:16,790 --> 00:25:18,500
E così questo primo esempio.

535
00:25:18,500 --> 00:25:22,870
Si tratta di un esempio molto semplice di come si
avrebbe utilizzato le righe e le colonne qui.

536
00:25:22,870 --> 00:25:25,120
Si definisce una riga usando class = "riga".

537
00:25:25,120 --> 00:25:32,000
E poi si fa class = "col-XS-6" fare
mezzo, "col-XS-6" per fare l'altra metà.

538
00:25:32,000 --> 00:25:34,240
Ecco un esempio più complicato.

539
00:25:34,240 --> 00:25:37,320
Diamo un'occhiata a Tiny,
Enorme, il resto si.

540
00:25:37,320 --> 00:25:41,370
>> Siamo in grado di fare un'ampia Piccole due colonne,
possiamo fare largo enormi sei colonne,

541
00:25:41,370 --> 00:25:42,800
E il resto quattro colonne di larghezza.

542
00:25:42,800 --> 00:25:43,960
Che aggiunge fino a 12.

543
00:25:43,960 --> 00:25:46,950
E così questi finiscono spanning
la larghezza della pagina.

544
00:25:46,950 --> 00:25:49,030
Anche in questo caso, abbiamo una riga di fuori.

545
00:25:49,030 --> 00:25:54,760
Poi abbiamo div class = "col-xs-2"
e poi 6, e quindi 4.

546
00:25:54,760 --> 00:25:58,190
E che fornirà
la struttura per noi.

547
00:25:58,190 --> 00:26:01,740
E così possiamo mettere qualunque cosa
diamine vogliamo qui dentro.

548
00:26:01,740 --> 00:26:03,410
Invece di Tiny, siamo in grado di mettere un pulsante.

549
00:26:03,410 --> 00:26:04,701
class = tasto "BTN BTN-primario".

550
00:26:04,701 --> 00:26:11,820

551
00:26:11,820 --> 00:26:16,260
E così notare che il nostro pulsante
non occupa tutta la larghezza,

552
00:26:16,260 --> 00:26:20,080
ma almeno è limitato
a tale spazio.

553
00:26:20,080 --> 00:26:21,770
>> Ecco, questo è cosa buona e giusta.

554
00:26:21,770 --> 00:26:26,800
Così ora siamo in grado di spezzare il nostro web
Pagina in blocchi, larghezza saggio.

555
00:26:26,800 --> 00:26:29,990
Possiamo dire che vogliamo avere una sinistra
colonna e una colonna di destra, e così via.

556
00:26:29,990 --> 00:26:33,220
Ma non abbiamo superato
come si rendono reattiva.

557
00:26:33,220 --> 00:26:36,130
E così Bootstrap facciamo quello.

558
00:26:36,130 --> 00:26:38,000
Ha queste cose chiamate punti di interruzione.

559
00:26:38,000 --> 00:26:42,230
Così ha un modo di sapere se
siete su un computer portatile, sei su una tavoletta,

560
00:26:42,230 --> 00:26:44,730
siete su un orizzontali telefono,
o sei su un telefono verticale.

561
00:26:44,730 --> 00:26:46,180
Conosce le dimensioni dello schermo.

562
00:26:46,180 --> 00:26:50,630
E rompe questo in quattro categorie--
grande o lg, che è computer portatili, di solito.

563
00:26:50,630 --> 00:26:52,660
md o medio, che è compresse.

564
00:26:52,660 --> 00:26:54,020
sm, piccolo.

565
00:26:54,020 --> 00:26:55,810
Oppure xs, extra small.

566
00:26:55,810 --> 00:27:00,500
E così quando si specifica
una colonna, si dice,

567
00:27:00,500 --> 00:27:03,780
dovrebbe essere largo sei colonne
su un piccolo dispositivo in più.

568
00:27:03,780 --> 00:27:06,645
È per questo che abbiamo fatto col-xs-6.

569
00:27:06,645 --> 00:27:09,020
Stiamo dicendo che dovrebbe
essere sei dei 12 colonne larghe

570
00:27:09,020 --> 00:27:11,110
su un piccolo dispositivo in più.

571
00:27:11,110 --> 00:27:16,570
E se si tratta di qualcosa di più grande, dobbiamo solo
default con la piccola dimensione in più.

572
00:27:16,570 --> 00:27:20,770
Se si tratta di qualcosa di più grande di
extra small, sarà di sei di larghezza.

573
00:27:20,770 --> 00:27:25,800
E così possiamo sfruttare
questi per fare delle nostre colonne

574
00:27:25,800 --> 00:27:29,470
assumere diverse quantità di
colonne in base alle dimensioni dello schermo.

575
00:27:29,470 --> 00:27:32,580
Andiamo a questo ridimensionamento reattivo.

576
00:27:32,580 --> 00:27:34,834
Così abbiamo le nostre colonne.

577
00:27:34,834 --> 00:27:36,250
E dice, "col-lg-6 col-xs-12".

578
00:27:36,250 --> 00:27:40,630

579
00:27:40,630 --> 00:27:43,150
Quindi, dato quello che sai
fino ad ora, che cosa fare

580
00:27:43,150 --> 00:27:46,150
pensare sta per
accadere su un grande schermo?

581
00:27:46,150 --> 00:27:47,987
Beh, è ​​una specie di
lasciato il posto, ma che cosa fare

582
00:27:47,987 --> 00:27:49,820
si pensa che sarà guardare
come su un grande schermo?

583
00:27:49,820 --> 00:27:50,580
E perché mai?

584
00:27:50,580 --> 00:27:59,990

585
00:27:59,990 --> 00:28:03,820
>> PUBBLICO: E 'che
su un grande schermo, è

586
00:28:03,820 --> 00:28:11,850
andando a prendere solo
porzione dello spazio pieno?

587
00:28:11,850 --> 00:28:13,220
Come la metà di esso, immagino?

588
00:28:13,220 --> 00:28:14,420
>> NEEL MEHTA: Sì.

589
00:28:14,420 --> 00:28:16,960
>> PUBBLICO: E su minore
schermo, sta andando

590
00:28:16,960 --> 00:28:18,544
a prendere l'intero schermo, il 12.

591
00:28:18,544 --> 00:28:19,210
NEEL MEHTA: Sì.

592
00:28:19,210 --> 00:28:19,710
Destra.

593
00:28:19,710 --> 00:28:22,361
Così ad esempio, diamo
basta guardare qui.

594
00:28:22,361 --> 00:28:22,860
Sì.

595
00:28:22,860 --> 00:28:27,110
Così su tutto ciò che è o lg
bigger-- così il mio computer accade

596
00:28:27,110 --> 00:28:29,820
da lg perché è
piuttosto wide-- farà

597
00:28:29,820 --> 00:28:32,820
fianco a fianco, perché è col-lg-6.

598
00:28:32,820 --> 00:28:37,870
Così perché è il grande, lo rende
sei colonne di larghezza e sei colonne di larghezza.

599
00:28:37,870 --> 00:28:40,977
Vediamo cosa succede se
fare questo in uno più piccolo.

600
00:28:40,977 --> 00:28:42,560
Sto solo andando a schermo un-pieno questo.

601
00:28:42,560 --> 00:28:44,550
E ho intenzione di ridursi lo schermo.

602
00:28:44,550 --> 00:28:50,590
Ho intenzione di ridursi lo schermo, in modo da
sembra che io sono su un dispositivo più piccolo.

603
00:28:50,590 --> 00:28:53,040
Quindi ho intenzione di ridursi in questo modo.

604
00:28:53,040 --> 00:28:53,880
>> E voilà.

605
00:28:53,880 --> 00:28:56,010
Ora è impilato
perché ora siamo passati

606
00:28:56,010 --> 00:28:59,280
da grande a-- questo è probabilmente
una dimensione dello schermo piccolo supplemento.

607
00:28:59,280 --> 00:29:02,460
E così ora si dice, OK, non siamo
in grande, siamo in piccola terra supplementare.

608
00:29:02,460 --> 00:29:04,251
Quindi stiamo andando a utilizzare
la piccola dimensione supplementare.

609
00:29:04,251 --> 00:29:06,320
E stiamo andando a xs-12, xs-12.

610
00:29:06,320 --> 00:29:08,630
Così sta andando per essere impilati.

611
00:29:08,630 --> 00:29:11,626
E proprio notare che non c'è
una cosa chiamata un punto di interruzione.

612
00:29:11,626 --> 00:29:13,500
Un punto di interruzione è dove
hai fatto la transizione

613
00:29:13,500 --> 00:29:17,060
da extra small a piccolo,
piccole a grandi, e così via.

614
00:29:17,060 --> 00:29:20,807
>> Così appena notato che mentre scivolo questo
fuori, alla fine, si arriva al punto

615
00:29:20,807 --> 00:29:22,695
dove faranno saltare di essere fianco a fianco.

616
00:29:22,695 --> 00:29:28,780

617
00:29:28,780 --> 00:29:29,330
Ci si va.

618
00:29:29,330 --> 00:29:31,020
Quindi c'è il punto di interruzione proprio lì.

619
00:29:31,020 --> 00:29:33,600

620
00:29:33,600 --> 00:29:37,790
Così possiamo rendere ancora più complicato.

621
00:29:37,790 --> 00:29:40,260
Ora possiamo dire, si tratta
le cose dovrebbero essere quattro di larghezza.

622
00:29:40,260 --> 00:29:42,010
Cioè, dovrebbero
prendere circa un terzo

623
00:29:42,010 --> 00:29:44,530
del discorso molto grandi dispositivi.

624
00:29:44,530 --> 00:29:47,600
In un dispositivo di media, si dovrebbe prendere
metà dello schermo, perché è md-6.

625
00:29:47,600 --> 00:29:49,790
Su un dispositivo molto piccolo,
dovrebbe prendere 12.

626
00:29:49,790 --> 00:29:52,550
E così questo sembra piuttosto naturale.

627
00:29:52,550 --> 00:29:55,180
Diciamo solo provare questo per noi stessi.

628
00:29:55,180 --> 00:29:58,000
>> Così su un grande schermo, sono quattro di larghezza.

629
00:29:58,000 --> 00:30:02,090

630
00:30:02,090 --> 00:30:03,450
Shrink è un po '.

631
00:30:03,450 --> 00:30:05,430
E sono ora sei di larghezza.

632
00:30:05,430 --> 00:30:08,180
Quindi questo è sei, sei, sei.

633
00:30:08,180 --> 00:30:11,900
Ridurla ancora di più e poi
saranno totalmente impilati.

634
00:30:11,900 --> 00:30:17,000
Quindi questo, per esempio, ha un senso se
hai le carte, come le carte di notizie,

635
00:30:17,000 --> 00:30:19,337
per esempio, dove se
è su un grande schermo,

636
00:30:19,337 --> 00:30:22,670
E 'ok se si dispone di più fianco a fianco
perché sarebbero tutti avere abbastanza spazio.

637
00:30:22,670 --> 00:30:23,620
Ma hanno bisogno di avere spazio sufficiente.

638
00:30:23,620 --> 00:30:25,578
Quindi su uno schermo più piccolo,
che ci si vuole dare loro

639
00:30:25,578 --> 00:30:29,170
più spazio, proporzionalmente, della pagina.

640
00:30:29,170 --> 00:30:32,290
>> Così come un esempio reale,
diciamo che abbiamo Twitter.

641
00:30:32,290 --> 00:30:35,180
E abbiamo casella di testo, in modo da
è possibile Tweet sul lato.

642
00:30:35,180 --> 00:30:39,020
E abbiamo una lista di trend
argomenti sul lato destro.

643
00:30:39,020 --> 00:30:41,470
Così su un grande schermo, dovremmo
li hanno essere fianco a fianco,

644
00:30:41,470 --> 00:30:43,110
in modo da poterli vedere in un bicchiere.

645
00:30:43,110 --> 00:30:45,960
Ma su uno schermo più piccolo,
dobbiamo fare 12 e 12,

646
00:30:45,960 --> 00:30:49,315
in modo che gli argomenti di tendenza
sono sotto l'area di Tweet.

647
00:30:49,315 --> 00:30:52,770
Poiché l'area Tweet è il
cosa principale e su un piccolo schermo,

648
00:30:52,770 --> 00:30:56,050
gli argomenti di tendenza non lo fanno
importa abbastanza tanto.

649
00:30:56,050 --> 00:30:59,730
E così li mettiamo a destra in basso, così
che entrambi possono avere abbastanza spazio.

650
00:30:59,730 --> 00:31:00,480
Dare un senso fino ad ora?

651
00:31:00,480 --> 00:31:01,470
>> PUBBLICO: Sì.

652
00:31:01,470 --> 00:31:02,530
>> NEEL MEHTA: Solido.

653
00:31:02,530 --> 00:31:04,500
Ecco, questo è tutti gli esempi che ho qui.

654
00:31:04,500 --> 00:31:07,190
Cerchiamo di fare una sfida.

655
00:31:07,190 --> 00:31:18,560
Quindi, di nuovo, questo è sfida-2.html per
quelli di voi seguendo lungo a casa.

656
00:31:18,560 --> 00:31:22,500
Quindi il mio compagno, Mark Zuckerberg,
è venuto da me l'altro giorno.

657
00:31:22,500 --> 00:31:25,780
E lui è come, Neel, ho
ottenuto abbastanza bravo a web design.

658
00:31:25,780 --> 00:31:26,700
Posso fare il codice HTML.

659
00:31:26,700 --> 00:31:29,570
Ho fatto questo piccolo,
nuova modifica a Facebook.

660
00:31:29,570 --> 00:31:31,930
Ho una nuova idea di come
dovremmo stile Facebook.

661
00:31:31,930 --> 00:31:32,700
Ed eccolo qui.

662
00:31:32,700 --> 00:31:33,200
Giusto qui.

663
00:31:33,200 --> 00:31:34,241
Ecco qualche esempio di codice.

664
00:31:34,241 --> 00:31:35,820
Così si chiama Fancybook.

665
00:31:35,820 --> 00:31:37,340
>> Abbiamo alcuni aggiornamenti di stato.

666
00:31:37,340 --> 00:31:41,010
Abbiamo Nemo, Mike Kosowski,
Woody-- tre aggiornamenti di stato.

667
00:31:41,010 --> 00:31:44,107
E poi abbiamo una lista di
amici online a destra sotto di essa.

668
00:31:44,107 --> 00:31:45,190
Così ha fatto il suo dovere.

669
00:31:45,190 --> 00:31:47,814
Sa un po 'di
Bootstrap, che ha fatto la visualizzazione elenco,

670
00:31:47,814 --> 00:31:49,870
che ha fatto un po 'di HTML.

671
00:31:49,870 --> 00:31:51,150
Così egli ha la pagina web.

672
00:31:51,150 --> 00:31:54,450
Ma lui è come, Neel, non lo faccio
capire responsive design a tutti.

673
00:31:54,450 --> 00:31:56,960
Avete esperti che
mi potrebbe aiutare con questo?

674
00:31:56,960 --> 00:32:00,000
E per fortuna, si è ora
esperti di responsive design.

675
00:32:00,000 --> 00:32:05,290
>> Allora, cosa ha detto a me era che lui
vuole Fancybook a guardare come questo.

676
00:32:05,290 --> 00:32:08,220
Su un dispositivo molto piccolo,
come un telefono, tutto

677
00:32:08,220 --> 00:32:09,790
dovrebbero essere accatastati, come qui.

678
00:32:09,790 --> 00:32:12,240
In modo da avere la timeline
in anticipo, fino in alto, e poi

679
00:32:12,240 --> 00:32:15,370
si dovrebbe avere la
chiacchierata barra nella parte inferiore.

680
00:32:15,370 --> 00:32:19,760
Ma su una tavoletta o supporto
dispositivo, dovrebbe essere metà e metà,

681
00:32:19,760 --> 00:32:24,010
come nella timeline dovrebbe essere
la metà e la lista di amici di chat

682
00:32:24,010 --> 00:32:25,450
dovrebbe essere sull'altra metà.

683
00:32:25,450 --> 00:32:27,960
>> Poi su un computer portatile, la linea temporale
dovrebbe prendere tre quarti

684
00:32:27,960 --> 00:32:32,120
e poi la chat dovrebbe siepe
prendere un altro quarto.

685
00:32:32,120 --> 00:32:36,350
E così è come, Neel, ho questo
codice qui, ma non è reattivo.

686
00:32:36,350 --> 00:32:38,760
Ha bisogno di comportarsi in questo modo.

687
00:32:38,760 --> 00:32:42,390
Quindi la mia sfida a voi
è dato questo codice qui--

688
00:32:42,390 --> 00:32:45,030
se si aggiorna il tuo
CodePens, vedrete questo.

689
00:32:45,030 --> 00:32:48,840
O se semplicemente incollare il codice
sulla sfida-2, si vedrà questo.

690
00:32:48,840 --> 00:32:50,380
>> Ecco questo esempio di codice.

691
00:32:50,380 --> 00:32:53,450
Vedrete alcuni XXXS.

692
00:32:53,450 --> 00:33:00,860
Voglio di modificare le xxxs, in modo tale che
timeline e la lista di amici

693
00:33:00,860 --> 00:33:04,160
segue queste specifiche qui.

694
00:33:04,160 --> 00:33:06,660
Non preoccupatevi di ciò che è
all'interno della linea temporale per ora.

695
00:33:06,660 --> 00:33:08,020
Otterremo che nel passaggio successivo.

696
00:33:08,020 --> 00:33:11,600
Ma per ora, vediamo se otteniamo
queste cose di dividerlo in questo modo.

697
00:33:11,600 --> 00:33:12,935
Così fa che senso?

698
00:33:12,935 --> 00:33:14,810
Quindi, se siete a casa,
mettere in pausa il video e provare

699
00:33:14,810 --> 00:33:18,410
per rendere la vostra pagina web
guardare reattivo come questo.

700
00:33:18,410 --> 00:33:20,530
Se siete qui, prendere
come due, tre minuti.

701
00:33:20,530 --> 00:33:24,770
Sentitevi liberi di parlare con un vicino di casa,
e provare, e fissare il signor Zuckerberg di

702
00:33:24,770 --> 00:33:26,045
problema responsive design.

703
00:33:26,045 --> 00:33:49,604

704
00:33:49,604 --> 00:33:51,770
Se hai qualche domanda,
non esitate a farmi sapere.

705
00:33:51,770 --> 00:34:15,520

706
00:34:15,520 --> 00:34:16,860
Sentirsi bene?

707
00:34:16,860 --> 00:34:17,610
Fatto?

708
00:34:17,610 --> 00:34:18,109
Bello.

709
00:34:18,109 --> 00:34:19,025
>> PUBBLICO: [incomprensibile].

710
00:34:19,025 --> 00:34:19,929
NEEL MEHTA: Che cosa?

711
00:34:19,929 --> 00:34:20,500
>> PUBBLICO: Sto bene.

712
00:34:20,500 --> 00:34:21,379
>> NEEL MEHTA: Oh, bene.

713
00:34:21,379 --> 00:34:21,879
Bello.

714
00:34:21,879 --> 00:34:28,820

715
00:34:28,820 --> 00:34:32,120
PUBBLICO: La cosa
il 12, ed è quello che Bootstrap

716
00:34:32,120 --> 00:34:42,150
tratta un dato spazio schermo 12
unità in tutto e poi divide che fino?

717
00:34:42,150 --> 00:34:44,500
Come funziona esattamente il
proporzionare lavoro per questo?

718
00:34:44,500 --> 00:34:44,750
>> NEEL MEHTA: Sì.

719
00:34:44,750 --> 00:34:46,190
Quindi la domanda è: come
fa il dosaggio

720
00:34:46,190 --> 00:34:47,299
lavorare per Bootstrap, giusto?

721
00:34:47,299 --> 00:34:47,882
>> PUBBLICO: Sì.

722
00:34:47,882 --> 00:34:50,659
NEEL MEHTA: Così ogni volta
si dispone di un div class = "riga",

723
00:34:50,659 --> 00:34:54,879
non importa quanto grande lo schermo è,
Bootstrap vi darà 12 unità

724
00:34:54,879 --> 00:34:56,670
della stessa dimensione
prendere più di tanto le dimensioni.

725
00:34:56,670 --> 00:35:01,830
Quindi, in Col 1, è sempre 8,33%
delle dimensioni dello schermo,

726
00:35:01,830 --> 00:35:04,010
se questo è questo ampio
o che è questo ampio.

727
00:35:04,010 --> 00:35:08,030
E così, naturalmente, su un più piccolo
schermo, ogni colonna è più piccolo.

728
00:35:08,030 --> 00:35:10,360
Hai ancora 12 colonne
di larghezza, è una più piccola.

729
00:35:10,360 --> 00:35:12,985
Quindi spetta a voi per assicurarsi che
che le cose occupano più colonne,

730
00:35:12,985 --> 00:35:15,960
proporzionalmente, per compensare
a tale mancanza di spazio.

731
00:35:15,960 --> 00:35:16,944
Questo fa senso?

732
00:35:16,944 --> 00:35:17,527
>> PUBBLICO: Sì.

733
00:35:17,527 --> 00:35:18,157
Grazie.

734
00:35:18,157 --> 00:35:19,240
NEEL MEHTA: Bella domanda.

735
00:35:19,240 --> 00:35:55,318

736
00:35:55,318 --> 00:35:57,026
PUBBLICO: Su un grande
schermo, si può avere

737
00:35:57,026 --> 00:35:58,622
timeline occupano tre quarti?

738
00:35:58,622 --> 00:35:59,288
>> NEEL MEHTA: Sì.

739
00:35:59,288 --> 00:36:24,036

740
00:36:24,036 --> 00:36:25,410
NEEL MEHTA: Come sono i ragazzi sentono?

741
00:36:25,410 --> 00:36:26,330
Buona?

742
00:36:26,330 --> 00:36:26,830
Raffreddare.

743
00:36:26,830 --> 00:36:27,621
Così torniamo.

744
00:36:27,621 --> 00:36:32,740
E cerchiamo di fissare questa parte
del sito di Zuckerberg.

745
00:36:32,740 --> 00:36:36,640
Così i tempi è qui, in
la parte superiore, e la lista di amici

746
00:36:36,640 --> 00:36:37,460
è in basso.

747
00:36:37,460 --> 00:36:41,530
E così abbiamo solo bisogno di assegnare
colonne, con dimensionamento proporzionale,

748
00:36:41,530 --> 00:36:42,820
in ciascuno di questi.

749
00:36:42,820 --> 00:36:45,280
Quindi questa prima xxx è per la timeline.

750
00:36:45,280 --> 00:36:47,720
Quali classi mettiamo qui?

751
00:36:47,720 --> 00:36:53,960

752
00:36:53,960 --> 00:36:55,210
Che cosa vi siete messo qui dentro?

753
00:36:55,210 --> 00:37:00,477

754
00:37:00,477 --> 00:37:03,810
Quindi ricorda, su un grande schermo, ha bisogno di
a prendere i tre quarti della larghezza.

755
00:37:03,810 --> 00:37:05,470
E così quello stile che darebbe?

756
00:37:05,470 --> 00:37:08,480
Su un grande schermo, tre
quarti della larghezza.

757
00:37:08,480 --> 00:37:09,680
Quale classe usiamo lì?

758
00:37:09,680 --> 00:37:25,980

759
00:37:25,980 --> 00:37:29,320
PUBBLICO: Quindi siamo solo andare a essere
la modifica che prima istanza di class.

760
00:37:29,320 --> 00:37:30,153
NEEL MEHTA: Per ora.

761
00:37:30,153 --> 00:37:30,790
Sì.

762
00:37:30,790 --> 00:37:36,600
>> PUBBLICO: Non stiamo modificando ogni,
caratteristica individuale della timeline?

763
00:37:36,600 --> 00:37:37,850
NEEL MEHTA: Non adesso, almeno.

764
00:37:37,850 --> 00:37:40,020
Quindi, tutta questa cosa è un blocco.

765
00:37:40,020 --> 00:37:42,180
Stiamo cambiando solo il
progettazione del blocco.

766
00:37:42,180 --> 00:37:49,750
Così qui facciamo col-lg-9 perché è
nove su 12 di larghezza su un grande schermo.

767
00:37:49,750 --> 00:37:55,867
E poi su supporto,
quante colonne dovrei ottenere?

768
00:37:55,867 --> 00:37:57,700
PUBBLICO: Si suppone
per essere metà e metà.

769
00:37:57,700 --> 00:37:57,930
NEEL MEHTA: Giusto.

770
00:37:57,930 --> 00:37:58,950
Così come molti è che?

771
00:37:58,950 --> 00:37:59,658
>> PUBBLICO: Quindi sei.

772
00:37:59,658 --> 00:38:00,430
NEEL MEHTA: Six.

773
00:38:00,430 --> 00:38:08,970
E poi in più piccola dovrebbe essere-- se
occupa l'intera larghezza della fila,

774
00:38:08,970 --> 00:38:10,169
quanti dovrebbero essere?

775
00:38:10,169 --> 00:38:10,710
PUBBLICO: 12.

776
00:38:10,710 --> 00:38:11,335
NEEL MEHTA: 12.

777
00:38:11,335 --> 00:38:12,217
Sì.

778
00:38:12,217 --> 00:38:14,050
E ora dobbiamo
cambiare questo altri,

779
00:38:14,050 --> 00:38:16,120
modo che occupa il resto dello spazio.

780
00:38:16,120 --> 00:38:19,314
Così col-lg--

781
00:38:19,314 --> 00:38:25,409

782
00:38:25,409 --> 00:38:27,450
PUBBLICO: Sta andando a
prendere tutto lo schermo?

783
00:38:27,450 --> 00:38:31,540
NEEL MEHTA: Ci vuole un quarto
dello schermo su un dispositivo di grandi dimensioni,

784
00:38:31,540 --> 00:38:32,290
come abbiamo mostrato qui.

785
00:38:32,290 --> 00:38:35,040

786
00:38:35,040 --> 00:38:35,740
>> PUBBLICO: Tre.

787
00:38:35,740 --> 00:38:36,490
>> NEEL MEHTA: Three.

788
00:38:36,490 --> 00:38:39,250
E poi col-md-6 per prendere
il resto dello spazio.

789
00:38:39,250 --> 00:38:39,750
col-XS-12.

790
00:38:39,750 --> 00:38:43,404

791
00:38:43,404 --> 00:38:45,570
Così ora abbiamo la timeline
riprendendo i tre quarti

792
00:38:45,570 --> 00:38:49,610
della pagina nel grande schermo
e poi un quarto sul lato.

793
00:38:49,610 --> 00:38:54,045
E poi se le dimensioni lo schermo verso il basso,
dovrebbe ridimensionare di conseguenza.

794
00:38:54,045 --> 00:38:56,580

795
00:38:56,580 --> 00:38:59,070
Quindi è ora accatastati,
su un piccolo schermo.

796
00:38:59,070 --> 00:39:06,910
E se abbiamo formato in su un po ',
dovrebbero essere esattamente metà e metà.

797
00:39:06,910 --> 00:39:09,500
Così abbiamo fatto che fino ad ora.

798
00:39:09,500 --> 00:39:11,236
Molto fresco.

799
00:39:11,236 --> 00:39:13,360
E così non faremo la
dall'altra parte della sfida.

800
00:39:13,360 --> 00:39:14,401
Si può fare da soli.

801
00:39:14,401 --> 00:39:18,754
Ma in fondo, bisogna
cercare di rendere questi reattivo

802
00:39:18,754 --> 00:39:21,170
come well-- rendere la timeline
oggetti, essi stessi, reattivo.

803
00:39:21,170 --> 00:39:23,584

804
00:39:23,584 --> 00:39:25,500
Così ora che abbiamo passato
tutto quello che dovete sapere

805
00:39:25,500 --> 00:39:28,160
il lato sensibile di Bootstrap.

806
00:39:28,160 --> 00:39:30,787
Tutte le domande circa reattivo
design con Bootstrap

807
00:39:30,787 --> 00:39:32,370
e come si potrebbe fare per fare che?

808
00:39:32,370 --> 00:39:36,811

809
00:39:36,811 --> 00:39:37,310
Sì?

810
00:39:37,310 --> 00:39:39,855
>> PUBBLICO: E 'simile se
abbiamo avuto un video incorporato

811
00:39:39,855 --> 00:39:43,575
e volevamo controllare la
scala in cui il video era--

812
00:39:43,575 --> 00:39:47,644
la dimensione del video
che va dal computer portatile al telefono.

813
00:39:47,644 --> 00:39:48,310
NEEL MEHTA: Sì.

814
00:39:48,310 --> 00:39:48,870
Più o meno.

815
00:39:48,870 --> 00:39:51,880
Dovreste dire al video
occupare il maggior spazio è dato,

816
00:39:51,880 --> 00:39:53,600
che è un po 'fastidioso a volte.

817
00:39:53,600 --> 00:39:56,570
Ma l'idea di base è la stessa.

818
00:39:56,570 --> 00:40:00,230
Un video, come qualsiasi altro oggetto in
Nella pagina, come un pulsante o qualsiasi altra cosa,

819
00:40:00,230 --> 00:40:02,740
fino a quando si utilizza il
colonne e righe,

820
00:40:02,740 --> 00:40:05,080
si può dare un
certa quantità di spazio.

821
00:40:05,080 --> 00:40:08,580
E così sempre a onorare che è un
domanda diversa perché come YouTube

822
00:40:08,580 --> 00:40:10,780
incorpora hanno una certa, formato preferito.

823
00:40:10,780 --> 00:40:14,264
Ma in teoria
almeno, che avrebbe funzionato.

824
00:40:14,264 --> 00:40:18,990

825
00:40:18,990 --> 00:40:20,120
Raffreddare?

826
00:40:20,120 --> 00:40:23,750
>> PUBBLICO: Suppongo allora,
per un'immagine, fare in realtà

827
00:40:23,750 --> 00:40:31,092
bisogno di avere diverse versioni di
la stessa immagine in diverse dimensioni

828
00:40:31,092 --> 00:40:33,864
laptop contro iPhone?

829
00:40:33,864 --> 00:40:37,030
La domanda è: sì, abbiamo bisogno di
avere immagini che sono sensibili pure.

830
00:40:37,030 --> 00:40:39,040
E in effetti, si può fare.

831
00:40:39,040 --> 00:40:42,167
Penso che sia in CSS.

832
00:40:42,167 --> 00:40:44,000
Ma Bootstrap consente
che tu lo faccia pure.

833
00:40:44,000 --> 00:40:46,080
Si possono avere le immagini sensibili.

834
00:40:46,080 --> 00:40:50,650
Si possono avere le immagini ridimensionare
in base alle dimensioni della pagina.

835
00:40:50,650 --> 00:40:54,360
E c'è una cosa molto nuova
HTML5, la nuova versione di HTML,

836
00:40:54,360 --> 00:40:57,210
e CSS3, il nuovo
versione di CSS, che

837
00:40:57,210 --> 00:41:01,091
vi permetterà di richiedere immagini diverse
in base alle dimensioni dello schermo che ci sei.

838
00:41:01,091 --> 00:41:04,090
Di solito, è abbastanza buono per solo
avere la vostra immagine solo ridurre o crescere fino a

839
00:41:04,090 --> 00:41:05,215
per quanto grande ha bisogno di essere.

840
00:41:05,215 --> 00:41:08,150
Ma si può, se si vuole
a, avere un 32 per 32

841
00:41:08,150 --> 00:41:11,040
per schermi molto piccoli, e
64 del 64 per un grande schermo,

842
00:41:11,040 --> 00:41:12,910
e poi servire coloro selettivamente.

843
00:41:12,910 --> 00:41:14,059
Puoi farlo.

844
00:41:14,059 --> 00:41:15,100
E 'fatto da alcune persone.

845
00:41:15,100 --> 00:41:16,391
E 'ancora piuttosto all'avanguardia.

846
00:41:16,391 --> 00:41:21,537
Ma risposte brevi, images-- reattivo
Bootstrap può salvare la giornata.

847
00:41:21,537 --> 00:41:22,036
Raffreddare?

848
00:41:22,036 --> 00:41:22,920
>> PUBBLICO: Grazie.

849
00:41:22,920 --> 00:41:24,795
>> NEEL MEHTA: Quindi cerchiamo di
parlare veloce reale di come

850
00:41:24,795 --> 00:41:26,590
per ottenere questo nella tua pagina web.

851
00:41:26,590 --> 00:41:30,620
Diciamo che si desidera rendere il vostro
sito web utilizzando Bootstrap.

852
00:41:30,620 --> 00:41:34,675
E così facciamo solo solo
attraversarlo insieme.

853
00:41:34,675 --> 00:41:37,320
Diciamo che si fanno solo
una pagina HTML normale.

854
00:41:37,320 --> 00:41:44,410
Sentitevi liberi di seguire insieme a
qualunque sia il vostro editor preferito è.

855
00:41:44,410 --> 00:41:46,190
Quindi non ci resta che qualche pagina HTML.

856
00:41:46,190 --> 00:41:54,970

857
00:41:54,970 --> 00:41:57,170
Siamo in grado di fare! DOCTYPE HTML.

858
00:41:57,170 --> 00:41:59,310
Questo è anche l'HTML, la nostra pagina.

859
00:41:59,310 --> 00:42:02,840

860
00:42:02,840 --> 00:42:03,340
Niente di nuovo.

861
00:42:03,340 --> 00:42:04,298
Abbiamo fatto prima.

862
00:42:04,298 --> 00:42:08,910

863
00:42:08,910 --> 00:42:12,110
Quindi qui abbiamo il nostro HTML e
possiamo mettere roba qui dentro.

864
00:42:12,110 --> 00:42:20,430

865
00:42:20,430 --> 00:42:21,870
Possiamo avere il nostro pulsante.

866
00:42:21,870 --> 00:42:25,490
E come ho detto prima, questo
non è necessariamente andare a lavorare.

867
00:42:25,490 --> 00:42:26,560
Perché non potrebbe questo lavoro?

868
00:42:26,560 --> 00:42:28,430
Perché non potremo ottenere il nostro
bello, pulsante colorato?

869
00:42:28,430 --> 00:42:35,260

870
00:42:35,260 --> 00:42:40,969
>> PUBBLICO: Perché noi non colleghiamo
per il progetto Bootstrap o il file?

871
00:42:40,969 --> 00:42:41,635
NEEL MEHTA: Sì.

872
00:42:41,635 --> 00:42:42,135
Correggere.

873
00:42:42,135 --> 00:42:44,630
Perché Bootstrap-- è
solo un file CSS di fantasia.

874
00:42:44,630 --> 00:42:47,390
Si tratta di una serie di stili che
sono attaccati ai vostri elementi.

875
00:42:47,390 --> 00:42:51,250
Qui abbiamo detto che noi
desidera utilizzare questi stili.

876
00:42:51,250 --> 00:42:52,794
Io dimensioni che un po '.

877
00:42:52,794 --> 00:42:54,960
Abbiamo detto che vogliamo utilizzare
questi stili, ma non abbiamo mai

878
00:42:54,960 --> 00:42:56,170
detto che ciò che gli stili sono.

879
00:42:56,170 --> 00:42:57,880
Ed è quello che la vostra
domanda da prima era.

880
00:42:57,880 --> 00:42:58,963
Questa è la risposta a questo.

881
00:42:58,963 --> 00:43:02,796
Dobbiamo trovare un modo per ottenere gli stili
e includerli nella nostra pagina in qualche modo.

882
00:43:02,796 --> 00:43:04,670
E la volontà così Bootstrap
ci mostrano come fare.

883
00:43:04,670 --> 00:43:10,800
>> Quindi, se si va verso l'alto
qui, Guida introduttiva.

884
00:43:10,800 --> 00:43:13,980
Ci sono diversi modi per scaricarlo.

885
00:43:13,980 --> 00:43:17,560
Questo potrebbe non avere senso necessariamente.

886
00:43:17,560 --> 00:43:20,180
Bootstrap-- questo vi permetterà di
si afferra il file CSS in sé.

887
00:43:20,180 --> 00:43:21,950
E hai incluso nella propria pagina.

888
00:43:21,950 --> 00:43:24,570
Source Code è se si vuole
di incidere su di essa da soli.

889
00:43:24,570 --> 00:43:25,740
Non hai bisogno di questo in realtà.

890
00:43:25,740 --> 00:43:29,690
Sass è una lingua
che compila in CSS.

891
00:43:29,690 --> 00:43:31,160
Pensate a come un preprocessore.

892
00:43:31,160 --> 00:43:36,280
Proprio come il PHP è un preprocessore di
HTML, Sass è un preprocessore per i CSS.

893
00:43:36,280 --> 00:43:38,930
Quindi, se si vuole fare
in questo modo, si può farlo.

894
00:43:38,930 --> 00:43:42,500
>> Il modo più semplice utilizza un CDN,
o Content Delivery Network.

895
00:43:42,500 --> 00:43:46,050
E 'un sito che solo
serve una copia di Bootstrap

896
00:43:46,050 --> 00:43:49,030
molto veloce per voi
includere nella propria pagina.

897
00:43:49,030 --> 00:43:50,160
Quindi, ecco un esempio.

898
00:43:50,160 --> 00:43:52,375
Vi darà questo elemento link.

899
00:43:52,375 --> 00:43:57,089
Un elemento di collegamento dice il tuo browser,
prendere qualunque file vengono memorizzati qui

900
00:43:57,089 --> 00:43:58,380
e includerlo nella nostra pagina web.

901
00:43:58,380 --> 00:44:01,290
E in questo caso, è
il file CSS Bootstrap.

902
00:44:01,290 --> 00:44:05,210
Quindi ci limiteremo a copiare l'URL, o
quel testo, e noi provvederemo a buttare dentro

903
00:44:05,210 --> 00:44:06,380
della nostra testa.

904
00:44:06,380 --> 00:44:09,740
>> E non mi metterò pagina per questo,
ma ci si può fidare che questo funziona.

905
00:44:09,740 --> 00:44:11,650
Il link ti porterà il CSS.

906
00:44:11,650 --> 00:44:13,910
Includere nella vostra
pagina e poi sarete

907
00:44:13,910 --> 00:44:19,420
in grado di utilizzare tutte le Bootstrap
classi che conosciamo e amiamo.

908
00:44:19,420 --> 00:44:25,350
Se si desidera mantenere a livello locale e
avere sul proprio sistema di file

909
00:44:25,350 --> 00:44:27,550
invece di dover andare a
Internet per afferrarlo,

910
00:44:27,550 --> 00:44:29,300
come se si vuole
utilizzare il sito offline,

911
00:44:29,300 --> 00:44:31,580
è possibile utilizzare l'opzione Download.

912
00:44:31,580 --> 00:44:34,480
Ma per la maggior parte, utilizzando la
CDN è abbastanza veloce perché in questo modo,

913
00:44:34,480 --> 00:44:36,130
è costantemente aggiornato anche per voi.

914
00:44:36,130 --> 00:44:40,060
È necessario aggiornare manualmente neanche.

915
00:44:40,060 --> 00:44:40,900
Ha senso?

916
00:44:40,900 --> 00:44:45,240
>> Così un sacco di strumenti avrà questo costruito
per impostazione predefinita. Nella vostra Pset7 e Pset8,

917
00:44:45,240 --> 00:44:47,970
Credo sia Bootstrap
automaticamente inclusi.

918
00:44:47,970 --> 00:44:49,690
E in CodePen, per
ad esempio, è già

919
00:44:49,690 --> 00:44:51,500
incluso perché
aggiunto aggiungere tale impostazione.

920
00:44:51,500 --> 00:44:54,520
Quindi, se mai voglia di giocare
con esso, si può solo andare avanti CodePen,

921
00:44:54,520 --> 00:44:56,020
o andare sul vostro ID, o qualsiasi altra cosa.

922
00:44:56,020 --> 00:44:58,110
E si potrebbe essere in grado di
accesso Bootstrap lì,

923
00:44:58,110 --> 00:45:02,750
ma non è sempre costruita
in, per impostazione predefinita, al web.

924
00:45:02,750 --> 00:45:03,810
Ha senso?

925
00:45:03,810 --> 00:45:04,450
>> Sì.

926
00:45:04,450 --> 00:45:07,120
proprio come un recap-- abbiamo
come cinque minuti dalla fine.

927
00:45:07,120 --> 00:45:11,922
Ma, come un riassunto, in nuove pagine web,
è possibile includere Bootstrap come questo.

928
00:45:11,922 --> 00:45:14,630
E una volta che lo avete incluso,
si può fare tutte le cose divertenti qui.

929
00:45:14,630 --> 00:45:19,330
Si può andare avanti, e si può solo esaminare
il CSS, è possibile aggiungere alcuni stili freschi,

930
00:45:19,330 --> 00:45:21,830
si può avere componenti
come i pulsanti,

931
00:45:21,830 --> 00:45:25,774
e le tabelle, e la lista
gli elementi che abbiamo menzionato.

932
00:45:25,774 --> 00:45:28,690
Ci sono alcuni plugin JavaScript freschi,
che si potrebbe desiderare di esplorare.

933
00:45:28,690 --> 00:45:31,050
Essi aggiungono un po 'di fresco
interattività alla pagina web.

934
00:45:31,050 --> 00:45:37,110
Come questo rende un dialogo modale.

935
00:45:37,110 --> 00:45:39,310
>> Quindi c'è un po 'di cose divertenti
si può fare con Sputafuoco.

936
00:45:39,310 --> 00:45:44,410
Quindi il mio consiglio è andare avanti
e utilizzarlo nei vostri progetti,

937
00:45:44,410 --> 00:45:46,750
seguire le istruzioni che
appena fatto su come ottenerlo,

938
00:45:46,750 --> 00:45:50,970
e basta leggere il Bootstrap perché
imparerete di più su cosa fare.

939
00:45:50,970 --> 00:45:54,890
E così siamo andati
sopra, oggi, come utilizzare

940
00:45:54,890 --> 00:45:58,820
la documentazione, ciò che l'edificio
blocchi sono, e come si è concettualmente.

941
00:45:58,820 --> 00:46:03,680
Così ora la mia sfida per voi è
fare un sito web utilizzando Bootstrap.

942
00:46:03,680 --> 00:46:05,117
Andate in la documentazione.

943
00:46:05,117 --> 00:46:07,825
E utilizzare gli strumenti che abbiamo
imparato finora per cercare di analizzare

944
00:46:07,825 --> 00:46:09,060
e li capisco.

945
00:46:09,060 --> 00:46:12,230
E utilizzare tali stili e strumenti
si vede lì nel tuo sito web.

946
00:46:12,230 --> 00:46:15,070
Ed è solo un grande,
processo sperimentale.

947
00:46:15,070 --> 00:46:16,110
>> Provate un certo stile.

948
00:46:16,110 --> 00:46:16,651
Funziona?

949
00:46:16,651 --> 00:46:17,380
Non non lo è?

950
00:46:17,380 --> 00:46:18,630
Prova a mettere insieme cose.

951
00:46:18,630 --> 00:46:19,520
Guarda cosa succede.

952
00:46:19,520 --> 00:46:21,690
E 'molto un auto
guidato, processo di scoperta.

953
00:46:21,690 --> 00:46:25,170
Ma oggi, abbiamo imparato la
basi di ciò che è Bootstrap?

954
00:46:25,170 --> 00:46:26,400
Perché funziona?

955
00:46:26,400 --> 00:46:27,110
Come funziona?

956
00:46:27,110 --> 00:46:29,620

957
00:46:29,620 --> 00:46:31,970
Come possiamo iniziare a utilizzare
essa, in primo luogo?

958
00:46:31,970 --> 00:46:33,720
E così ora che sei
oltre che gobba, si

959
00:46:33,720 --> 00:46:36,630
dovrebbe essere in grado di farlo
abbastanza uniformemente da soli.

960
00:46:36,630 --> 00:46:39,450
>> Ancora una volta, tutte le
codice che abbiamo fatto è qui.

961
00:46:39,450 --> 00:46:41,190
Quindi, se volete mai
per ottenere un pennello su,

962
00:46:41,190 --> 00:46:44,640
come, che cosa è un trucco rapido
esemplare per tutti gli stili?

963
00:46:44,640 --> 00:46:47,310
Si può andare in questo campione qui.

964
00:46:47,310 --> 00:46:49,010
Abbiamo alcuni stili di esempio qui.

965
00:46:49,010 --> 00:46:51,300
Se volete provare la
le sfide di nuovo da soli,

966
00:46:51,300 --> 00:46:53,940
si può provare qui e
controllare le soluzioni.

967
00:46:53,940 --> 00:46:57,710
Quindi questo link sarà
incluso le diapositive che

968
00:46:57,710 --> 00:46:59,280
verrà inviato a voi, naturalmente.

969
00:46:59,280 --> 00:47:00,196
Ma è anche qui.

970
00:47:00,196 --> 00:47:02,460
È possibile mettere in pausa il video, se volete.

971
00:47:02,460 --> 00:47:06,302
Tutte le informazioni di cui hai bisogno è
sta per essere proprio qui, su questo sito.

972
00:47:06,302 --> 00:47:09,510
Quindi, se qualcuno ha domande, possiamo
li prendere per i prossimi due minuti.

973
00:47:09,510 --> 00:47:12,460
In caso contrario, grazie a tutti
molto per la visione.

974
00:47:12,460 --> 00:47:13,205