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

2
00:00:05,210 --> 00:00:07,460
>> Neel Mehta: Taigi labas
Kiekvienas, kuris žiūri čia

3
00:00:07,460 --> 00:00:09,450
ar žiūrėti internetu, arba nuotoliniu būdu.

4
00:00:09,450 --> 00:00:11,260
Mano vardas Neel, tai CS50.

5
00:00:11,260 --> 00:00:14,015
Ir šiandien seminaras reaguoja
Web dizainas su bootstrap.

6
00:00:14,015 --> 00:00:15,890
Tai tema, kuri yra
labai artimas mano širdžiai.

7
00:00:15,890 --> 00:00:17,598
Tikimės, kad jis bus
artimas jūsų širdis

8
00:00:17,598 --> 00:00:20,880
taip pat iki šiandienos seminaro pabaigoje.

9
00:00:20,880 --> 00:00:22,230
Taigi įkelties.

10
00:00:22,230 --> 00:00:25,070
Kiek jūs turite padaryti bet
rūšies interneto svetainių kūrimas anksčiau?

11
00:00:25,070 --> 00:00:27,090
Gera suma?

12
00:00:27,090 --> 00:00:27,750
Truputį.

13
00:00:27,750 --> 00:00:30,840
>> Taigi įkelties yra labiausiai pasaulyje
populiarus, front-end sistema.

14
00:00:30,840 --> 00:00:34,430
Ji naudojama by-- aš pasirinkome
pora atsitiktinių websites--

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

16
00:00:35,904 --> 00:00:37,320
Jis naudojamas pagal svetainių skaičius.

17
00:00:37,320 --> 00:00:42,020
Tai web dizainas sistema,
leis jums padaryti jūsų svetainę

18
00:00:42,020 --> 00:00:43,610
tiek gražus ir reaguoja.

19
00:00:43,610 --> 00:00:47,331
Ir aš eisiu per jų
dvi sąvokos čia.

20
00:00:47,331 --> 00:00:47,830
Gražus.

21
00:00:47,830 --> 00:00:51,640
Taigi jūs turite normalų svetainėje ant
kairysis, kuris yra pagamintas vien tik HTML.

22
00:00:51,640 --> 00:00:54,960
Jūs išmoko HTML klasėje
ir skyriaus ilgis.

23
00:00:54,960 --> 00:00:57,290
Bootstrap yra būdas padaryti
jūsų tinklapis gražus.

24
00:00:57,290 --> 00:00:58,860
Galite kas dėl
Kairėje pusėje ekrane

25
00:00:58,860 --> 00:01:01,651
ir paversti ją kas dėl
dešinėje pusėje ekrano, labai,

26
00:01:01,651 --> 00:01:02,710
labai, labai mažai kodą.

27
00:01:02,710 --> 00:01:06,480
>> Jūs gaunate gražią mėlyną mygtuką, gausite
išgalvotas, užapvalintais kraštais ekrane,

28
00:01:06,480 --> 00:01:11,220
Jūs gaunate sąrašo rodinį, galite gauti
kortelės, ir taip toliau su labai mažai kodu.

29
00:01:11,220 --> 00:01:14,110
Yra tikrai ne CSS, kad
jūs turite parašyti patys.

30
00:01:14,110 --> 00:01:16,980
Taigi įkelties leidžia jums
turi šias anksto pastatytas CSS

31
00:01:16,980 --> 00:01:19,610
komponentai galite įdėti
viduje savo tinklalapį

32
00:01:19,610 --> 00:01:22,190
kad ji atrodo gražiai, be
labai daug darbo savo.

33
00:01:22,190 --> 00:01:24,500
Tai tikrai įkrovos,
atspirties taškas,

34
00:01:24,500 --> 00:01:26,270
Jūsų interneto plėtros nuotykius.

35
00:01:26,270 --> 00:01:27,780
Ir todėl, kai jūs tiesiog
tyčiojasi interneto svetainę,

36
00:01:27,780 --> 00:01:29,363
tai labai gera vieta pradėti.

37
00:01:29,363 --> 00:01:31,990
Jūs galite gauti gerą atrodantį svetainės
su labai, labai mažai darbo.

38
00:01:31,990 --> 00:01:34,079
Ir iš tiesų, mes ketiname
tai padaryti patys

39
00:01:34,079 --> 00:01:36,370
į panašaus penkių žinoma
minutes-- per 10 minučių.

40
00:01:36,370 --> 00:01:39,600
Taigi, tai gana lengva
padaryti puikių svetainėse.

41
00:01:39,600 --> 00:01:41,430
Štai pirmoji dalis.

42
00:01:41,430 --> 00:01:44,090
>> Antrasis part-- reaguoja.

43
00:01:44,090 --> 00:01:47,040
Žmonės šiais laikais, ne tik
prieigą prie interneto savo nešiojamuosius kompiuterius.

44
00:01:47,040 --> 00:01:52,450
Tiesą sakant, nuo 2014 m, vis daugiau žmonių
prisijungti prie interneto per mobiliuosius įrenginius,

45
00:01:52,450 --> 00:01:56,580
pavyzdžiui, telefonus, arba tablečių, arba
paslaugas ar pan nei interneto svetainėse.

46
00:01:56,580 --> 00:02:00,540
Ir tinklapis tradiciškai buvo
sukurta nešiojamieji kompiuteriai ar staliniai kompiuteriai

47
00:02:00,540 --> 00:02:01,300
omenyje.

48
00:02:01,300 --> 00:02:04,930
Ir taip dažnai nėra svetainės
labai gerai tinka prie jūsų telefono.

49
00:02:04,930 --> 00:02:07,270
Jei jūs kada nors lankėsi
harvard.edu telefoną,

50
00:02:07,270 --> 00:02:09,479
tai tipo erzina
patirtis, tiesa?

51
00:02:09,479 --> 00:02:11,080
Tai todėl, kad tai ne reaguoja.

52
00:02:11,080 --> 00:02:13,163
Mes stengiamės, kad
svetainių, kurios reaguoja,

53
00:02:13,163 --> 00:02:17,360
kad atsakyti į žmonių ekrano dydžio.

54
00:02:17,360 --> 00:02:19,630
>> Taigi, jei tai telefonas, tai
Išvykstate telefonu.

55
00:02:19,630 --> 00:02:21,505
Jei tai tabletė, tai
Išvykstate tabletę.

56
00:02:21,505 --> 00:02:24,890
Ji prisitaiko prie sutaptų
ekranas, kuris yra naudojamas.

57
00:02:24,890 --> 00:02:28,294
Ir taip įkelties pat pateikiama keletas
labai, labai naudingų komunalinės už tai.

58
00:02:28,294 --> 00:02:29,960
Ir mes ketiname aptarti, kad taip pat.

59
00:02:29,960 --> 00:02:33,597
Taigi, vėl, yra dvi dalys
Bootstrap-- gražus ir atsakinga.

60
00:02:33,597 --> 00:02:34,930
Mes ketiname kalbėti apie juos.

61
00:02:34,930 --> 00:02:35,710
Pirma, gražus.

62
00:02:35,710 --> 00:02:38,790
Ir tada reaguoja.

63
00:02:38,790 --> 00:02:41,280
>> Taigi visą kodą, kad mes
ketiname kalbėti apie today--

64
00:02:41,280 --> 00:02:44,363
mes ketiname turėti daug pavyzdžių,
iššūkių daug, ir todėl jį on--

65
00:02:44,363 --> 00:02:45,949
visi gyvena šioje svetainėje čia.

66
00:02:45,949 --> 00:02:47,240
Tai skaidrių yra tai, ką mes išsiųsti.

67
00:02:47,240 --> 00:02:50,280
Taigi, jei esate čia jūs galite pajusti
laisvai neturite rašyti, kad žemyn.

68
00:02:50,280 --> 00:02:53,480
Ir jei jūs žiūrite nuotoliniu būdu, jausti
nemokama traukti tai ant jūsų kompiuterio

69
00:02:53,480 --> 00:02:53,980
taip pat.

70
00:02:53,980 --> 00:02:57,560
Jūs tikriausiai reikia per
šio seminaro kursą.

71
00:02:57,560 --> 00:02:59,590
>> Taigi mes ketiname naudoti
svetainė vadinamas CodePen,

72
00:02:59,590 --> 00:03:02,540
kuris yra bendradarbiavimo kodavimas
aplinka, šio seminaro metu.

73
00:03:02,540 --> 00:03:05,620
Ir CodePen-- ir aš
parodyti jums, čia nekilnojamojo fast--

74
00:03:05,620 --> 00:03:08,430
jis leidžia jums rašyti
HTML bendradarbiaujant.

75
00:03:08,430 --> 00:03:11,130
Galiu ją parašyti, galiu siųsti jį į
vaikinai, vaikinai gali jį redaguoti.

76
00:03:11,130 --> 00:03:14,300
Net jei esate nuotolinis, jums
vis dar galite naudotis, kad taip.

77
00:03:14,300 --> 00:03:17,000
Galite įvesti HTML kodą ne
viršuje ir jis bus automatiškai

78
00:03:17,000 --> 00:03:19,140
būti konvertuojamos į
interneto puslapis apačioje.

79
00:03:19,140 --> 00:03:22,640
Taigi tai yra už jus būdas
greitai išbandyti kodą

80
00:03:22,640 --> 00:03:26,330
be daryti bet kokio stuff
Jūsų IDE, ar savo svetainę,

81
00:03:26,330 --> 00:03:27,260
ar kas.

82
00:03:27,260 --> 00:03:30,220
>> Taigi pirmyn ir atsigriebti tai
svetainė, jei esate nuotolinio

83
00:03:30,220 --> 00:03:32,870
arba jei esate čia
ypač jei esate maža.

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

85
00:03:35,770 --> 00:03:38,670
Nėra kepurės, jokių pabraukimo, nėra nieko.

86
00:03:38,670 --> 00:03:40,930
Taigi tie iš jūsų, kurie
čia tik man nykščius

87
00:03:40,930 --> 00:03:43,030
kai jūs iškedentas
iki to tinklalapio.

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

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

90
00:03:56,660 --> 00:03:57,460
>> Auditorija: Taip.

91
00:03:57,460 --> 00:04:00,489
>> Neel Mehta: Taigi mes gauti
į tą, kuris vos per sekundę.

92
00:04:00,489 --> 00:04:03,530
Taigi, pirmiausia, mes ketiname gauti, kaip
padaryti, kad jūsų tinklapis gražus?

93
00:04:03,530 --> 00:04:06,696
Mes ketiname sužinoti, kaip imtis nuobodus,
senas HTML, kaip aš parodžiau jus,

94
00:04:06,696 --> 00:04:08,980
ir pasukite, kad į
tikrai gražus komponentai,

95
00:04:08,980 --> 00:04:12,230
patinka gražūs raštai, gražus, spalvotas
mygtukai ir etiketės, ir lenteles,

96
00:04:12,230 --> 00:04:14,230
ir visi, naudojant bootstrap.

97
00:04:14,230 --> 00:04:17,246
Taigi, jei mes visi galėtų eiti per su
CodePen, kad jūs tiesiog išrautas.

98
00:04:17,246 --> 00:04:18,829
Tai turėtų atrodyti šiek tiek panašus į šį.

99
00:04:18,829 --> 00:04:20,020
Ar tai atrodys taip visiems?

100
00:04:20,020 --> 00:04:20,740
>> Auditorija: Taip.

101
00:04:20,740 --> 00:04:23,364
>> Neel Mehta: Jei esate nuotolinis, ją
reikia žiūrėti kaip tai taip pat.

102
00:04:23,364 --> 00:04:26,350
Jei ne, aš jums parodysiu, kaip greitai
Jūs galite gauti tai atrodys taip

103
00:04:26,350 --> 00:04:28,860
į būsimą dalį vaizdo.

104
00:04:28,860 --> 00:04:32,720
Taigi čia mes parašėme
labai paprastas HTML,

105
00:04:32,720 --> 00:04:35,300
kaip rūšies jūs
naudoja klasėje.

106
00:04:35,300 --> 00:04:36,350
Tai gana pagrindinis.

107
00:04:36,350 --> 00:04:37,310
Ne maivymasis.

108
00:04:37,310 --> 00:04:39,950
Ir mes turime kai kurių dalykų.

109
00:04:39,950 --> 00:04:43,200
Mes sukūrėme labai,
labai paprastas pradėti

110
00:04:43,200 --> 00:04:46,000
skambinti Yalp! su kuria jūs galite
rasti restoranų srityje,

111
00:04:46,000 --> 00:04:48,379
ir sužinoti nuomones ir
kryptimis visi tie.

112
00:04:48,379 --> 00:04:49,420
Tai labai geras sąvoka.

113
00:04:49,420 --> 00:04:50,700
Jis niekada nebuvo padaryta anksčiau.

114
00:04:50,700 --> 00:04:51,940
Tai labai unikalus vardas, taip pat.

115
00:04:51,940 --> 00:04:55,270
>> Taigi, ką mes ketiname pabandyti
padaryti, tai padėti savininką

116
00:04:55,270 --> 00:04:58,150
iš Yalp! padaryti savo svetainėje
atrodo tikrai, tikrai cool.

117
00:04:58,150 --> 00:05:01,560
Taigi, norint pradėti su, kad savininkas
Yalp! padarė mažai paiešką

118
00:05:01,560 --> 00:05:05,440
dėžutė, ir šiek tiek mygtuką,
ir tada gal šiek tiek

119
00:05:05,440 --> 00:05:09,014
pažymėtą sritį dėl
Pažymėtas restoranas, tada

120
00:05:09,014 --> 00:05:12,300
kitų restoranų sąrašas
kad yra toje srityje.

121
00:05:12,300 --> 00:05:15,045
Taigi, mes galime tiesiog pereiti per
HTML kodas labai greitai.

122
00:05:15,045 --> 00:05:16,670
Kaip patogu esate vaikinai su HTML?

123
00:05:16,670 --> 00:05:19,230
Mes padaryti šiek tiek
sekcija, o taip pat klasės.

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

125
00:05:20,110 --> 00:05:22,700
>> Taigi tik kaip Priminti,
HTML yra visa informacija apie, turintys

126
00:05:22,700 --> 00:05:26,590
Žymos ar elementai, kad papasakoti
kompiuteris kaip išdėstyti tinklalapį.

127
00:05:26,590 --> 00:05:32,300
Taigi, tai H1 here-- pradėti h1, Sveiki atvykę
į Yalp !, pabaiga h1-- pasakoja kompiuterį,

128
00:05:32,300 --> 00:05:35,890
nubrėžti didelį antraštę jis
sako, Sveiki atvykę į Yalp!

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

130
00:05:37,080 --> 00:05:38,290
Mes taip pat turime formas.

131
00:05:38,290 --> 00:05:43,080
Mes galime įėjimai, kaip šis, teksto įvestis,
kuri bus pateikta kaip teksto laukus

132
00:05:43,080 --> 00:05:45,530
rašote.

133
00:05:45,530 --> 00:05:46,840
Jūs taip pat turite mygtukus.

134
00:05:46,840 --> 00:05:48,630
Jūs gaunate gražus, spausti mygtuką.

135
00:05:48,630 --> 00:05:52,210
Jis nedaro nieko teisę
dabar, bet jūs gaunate mygtuką.

136
00:05:52,210 --> 00:05:57,210
Jūs galite turėti DIV-ų arba pertvaros, į
lūžti savo puslapį į įvairias grupes.

137
00:05:57,210 --> 00:06:00,770
>> Jūs galite turėti pastraipas,
turite mygtukus.

138
00:06:00,770 --> 00:06:03,210
Jei turite pastraipas, tada
turite netvarkingai sąrašus, UL,

139
00:06:03,210 --> 00:06:05,124
ir sąrašus viduje, kad li.

140
00:06:05,124 --> 00:06:07,540
Taigi tai yra labai paprastas
blokai puslapyje.

141
00:06:07,540 --> 00:06:09,415
Ir iš tiesų, gana daug
Kiekviena svetainė matote

142
00:06:09,415 --> 00:06:12,170
bus pastatytas
naudojant tuos pačius įrankius.

143
00:06:12,170 --> 00:06:14,420
Žinoma, jie ne visi
žiūrėti šį blogai, nes mes

144
00:06:14,420 --> 00:06:17,380
ketina paįvairinti jį šiek tiek.

145
00:06:17,380 --> 00:06:21,440
Taigi leiskite šį nuobodų seną HTML ir pradėti
paversti jį gražus svetainėje

146
00:06:21,440 --> 00:06:24,290
kad mes tik pamačiau pora minutes.

147
00:06:24,290 --> 00:06:28,060
>> Taigi pradėkime nuo labai paprasta.

148
00:06:28,060 --> 00:06:30,120
Taigi, mes turime šį mygtuką čia.

149
00:06:30,120 --> 00:06:33,960
Be bootstrap, kaip matėme, mes galime
turėti gražią, gražus, mėlyną mygtuką.

150
00:06:33,960 --> 00:06:36,580
Ir tai daroma ne atlikdami užsakymą CSS.

151
00:06:36,580 --> 00:06:38,700
Nėra užsakymą CSS čia.

152
00:06:38,700 --> 00:06:41,970
Tai daroma pridedant klases
į savo HTML elementų.

153
00:06:41,970 --> 00:06:49,520
Jei bandėte klases, ar HREF arba
inkarai, arba type = "text" už inputs--

154
00:06:49,520 --> 00:06:51,240
HTML elementai gali turėti šiuos atributus.

155
00:06:51,240 --> 00:06:53,880
Jie gali turėti papildomos informacijos
kad jums gali suteikti jiems.

156
00:06:53,880 --> 00:06:56,290
>> Ir taip, šiuo atveju,
klasės yra atributas.

157
00:06:56,290 --> 00:07:00,800
Taigi jūs norite rašyti mygtuką class =
kažkas viduje stygos.

158
00:07:00,800 --> 00:07:04,080
Ir tai atributas pasakys
kompiuteris, tai ne toks yra, amžiaus mygtuką.

159
00:07:04,080 --> 00:07:07,940
Tai mygtukas, kuris yra
Tai mygtukų klasė.

160
00:07:07,940 --> 00:07:13,335
Ir taip įkelties, jei mano, kad tai
tam tikras stilius jūsų elementas,

161
00:07:13,335 --> 00:07:15,020
ji parengia jai tam tikru būdu.

162
00:07:15,020 --> 00:07:18,110
Taigi aš rašau "BTN BTN-pagrindinis.

163
00:07:18,110 --> 00:07:21,150
btn yra už mygtuko santrumpa.

164
00:07:21,150 --> 00:07:23,000
Jūs pastebėsite, kad dabar
mano negraži mygtuką pasuko

165
00:07:23,000 --> 00:07:24,500
į gražus, gražus, mėlyną mygtuką.

166
00:07:24,500 --> 00:07:26,630
Jis atrodo labai gražus, kai mes spustelėkite ją.

167
00:07:26,630 --> 00:07:32,780
>> Ir kas atsitinka todėl yra mes turime
btn klasės ir BTN ugdymo klasė

168
00:07:32,780 --> 00:07:34,080
mūsų elementas.

169
00:07:34,080 --> 00:07:38,340
Ir įkelties bus eiti ir pasakyti, gerai, aš
žinoti, kad yra šios dvi klasės.

170
00:07:38,340 --> 00:07:42,330
Bet koks elementas, kuris turi šias dvi
klasių turėtų būti sudarytas, kaip šis.

171
00:07:42,330 --> 00:07:46,000
Štai klausimas, kaip jums pridėti branduolys
stilių elementų bootstrap.

172
00:07:46,000 --> 00:07:50,480
Jūs tiesiog pridėti klases jiems ir
tai svorio jį kaip mano esant tinkama.

173
00:07:50,480 --> 00:07:52,440
Taigi čia dar vienas pavyzdys.

174
00:07:52,440 --> 00:07:57,700
Į įvesties, mes galime pridėti
klasė = "forma-kontrolė".

175
00:07:57,700 --> 00:08:01,140
Ir aš greičiau parodyti, kur jūs
sužinoti, kokios klases

176
00:08:01,140 --> 00:08:03,030
yra prieinami kiekvieno elemento rūšies.

177
00:08:03,030 --> 00:08:10,490
Bet klasės, kad mes tiesiog
Pridėta yra gražus, užapvalintais kampais,

178
00:08:10,490 --> 00:08:13,230
ji turi gražią kamšalo, ji turi
gražus, mėlynas švytėjimas į jį.

179
00:08:13,230 --> 00:08:15,130
>> Mes taip pat galime eiti į šią formą.

180
00:08:15,130 --> 00:08:22,040
Ir class = "forma-inline", kuris leis
Mūsų forma, kaip galite įsivaizduoti, Inline.

181
00:08:22,040 --> 00:08:25,680
Taigi jis ieško šiek tiek daugiau
patinka tai, ką mes turėjome prieš jau.

182
00:08:25,680 --> 00:08:29,430
Taigi, kol mes eiti stilius poilsio
puslapis, kokių nors klausimų apie tai, ką mes

183
00:08:29,430 --> 00:08:29,930
padarė?

184
00:08:29,930 --> 00:08:31,971
Mes tiesiog pridedamas klasės
mūsų įvairių elementų.

185
00:08:31,971 --> 00:08:35,080
Ir aš jums parodysiu vėliau, kaip jūs galite
išsiaiškinti, kas klasių nėra.

186
00:08:35,080 --> 00:08:37,659
Mes pridedamas klases, kurios
turi tam tikrų stilių.

187
00:08:37,659 --> 00:08:41,789
Ir tai pasakoja naršyklę
Kaip išdėstymo puslapį naudojant

188
00:08:41,789 --> 00:08:43,289
Bootstrap anketa numatytos stilių.

189
00:08:43,289 --> 00:08:45,920
Bet iš auditorijos klausimus?

190
00:08:45,920 --> 00:08:46,770
>> Geras šiol?

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

192
00:08:47,290 --> 00:08:49,206
A iššūkius daug
su įkelties yra tik

193
00:08:49,206 --> 00:08:51,730
žinant, kas komponentai
galima ir kaip jūs juos naudoti.

194
00:08:51,730 --> 00:08:53,730
Ir tai yra viskas, išmoko
su patirtimi, o taip pat

195
00:08:53,730 --> 00:08:58,180
per svarstymo dokumentus,
kuri mes kalbame apie netrukus.

196
00:08:58,180 --> 00:08:59,950
Taigi, mes turime DIV.

197
00:08:59,950 --> 00:09:01,520
Tai tiesiog nuobodus, senas dalykas.

198
00:09:01,520 --> 00:09:03,710
Norime pabrėžti, kad kažkaip.

199
00:09:03,710 --> 00:09:06,490
Taigi bootstrap, yra
daug komponentų prieinama.

200
00:09:06,490 --> 00:09:08,190
Ir tai getbootstrap.com.

201
00:09:08,190 --> 00:09:09,410
Tai labai naudinga nuoroda.

202
00:09:09,410 --> 00:09:12,960
Jame yra dalykų like--
Štai kaip jūs darote mygtuką.

203
00:09:12,960 --> 00:09:16,710
Ir jūs galite padaryti navigacijos juostas, jūs galite
etiketės, galite progresuoti barai,

204
00:09:16,710 --> 00:09:19,410
jūs galite padaryti sąrašas grupes.

205
00:09:19,410 --> 00:09:22,290
Iš esmės, tai visi rūšių
iš jūs galite pamatyti interneto puslapyje.

206
00:09:22,290 --> 00:09:24,180
>> Štai vienas, kad mes bandysime dabar.

207
00:09:24,180 --> 00:09:25,150
Tai vadinama skydelis.

208
00:09:25,150 --> 00:09:27,270
Jei jūs kada nors naudoti "Google"
Dabar, jie turi korteles.

209
00:09:27,270 --> 00:09:29,050
Arba bet Android įtaisas turi korteles.

210
00:09:29,050 --> 00:09:31,601
Jie turi mažai baltųjų dėžės
kad turi stuff viduje ji.

211
00:09:31,601 --> 00:09:34,350
Ir taip mes ketiname pabandyti ir padaryti
kad patys čia naudodamas dalyką

212
00:09:34,350 --> 00:09:35,480
vadinamas skydelis.

213
00:09:35,480 --> 00:09:44,872
Taigi, jei mes pridėti class = "panelė
panelė neįvykdymo "mūsų išorinio div,

214
00:09:44,872 --> 00:09:49,900
tada mes pridėti div class = - tegul
tiesiog patikrinti šiuos dokumentus.

215
00:09:49,900 --> 00:09:54,040
div class = "panelė-antraštė" ir
tada div class = "plokštės kūno".

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

217
00:09:56,644 --> 00:09:58,560
Vėlgi, nereikia jaudintis
įsiminti šį kodą.

218
00:09:58,560 --> 00:10:00,510
Tai bus galima rasti internete.

219
00:10:00,510 --> 00:10:04,700
>> Taigi, mes tai padarėme ir dabar mūsų nuobodus, senas
div virto šį gražus, mažai kortelę.

220
00:10:04,700 --> 00:10:07,580
Jis turi gražią padding, ją
turi sienas, ji išsiskiria

221
00:10:07,580 --> 00:10:09,760
nuo puslapyje poilsio,
kuri yra gana kietas.

222
00:10:09,760 --> 00:10:13,524
Taigi eikime ir tai pakeisti Gauk
kryptys mygtukas gražiai atrodo.

223
00:10:13,524 --> 00:10:16,190
Kas į auditoriją nori pasakyti
man, ką aš galiu padaryti, kad mygtukas

224
00:10:16,190 --> 00:10:18,220
kad ji atrodo gražiai, naudojant bootstrap?

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

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

227
00:10:21,255 --> 00:10:22,905
>> Auditorija: Galėtume pridėti klasę.

228
00:10:22,905 --> 00:10:24,690
Ir mes galime padaryti class = "BTN BTN ugdymo".

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

230
00:10:30,004 --> 00:10:30,960
Neel Mehta: Taip.

231
00:10:30,960 --> 00:10:34,040
Yra daug kitų krūva
galimos spalvos buttons--

232
00:10:34,040 --> 00:10:35,590
arba nieko, tuo klausimu.

233
00:10:35,590 --> 00:10:39,010
Mes galime padaryti BTN-pavojų ir padaryti jį raudonai.

234
00:10:39,010 --> 00:10:40,940
Čia mes eiti.

235
00:10:40,940 --> 00:10:50,300
Mes galime padaryti BTN-sėkmės, kad ji žalia.

236
00:10:50,300 --> 00:10:57,620
Mes galime padaryti BTN-info-- ten krūva
dalykų, kurie yra prieinami jums.

237
00:10:57,620 --> 00:11:00,550
Taigi turiu šiek tiek iššūkis jums dabar.

238
00:11:00,550 --> 00:11:04,730
Taigi yra dar vienas dalykas,
kad man liko JT stiliaus.

239
00:11:04,730 --> 00:11:05,870
Tai aukščiausios restoranai.

240
00:11:05,870 --> 00:11:10,140
>> Ir mes norite naudoti dalyką
vadinamas sąrašas grupę stiliaus ją.

241
00:11:10,140 --> 00:11:13,530
Taigi, mano problema jums yra
pereiti prie getbootstrap.com--

242
00:11:13,530 --> 00:11:15,540
Aš traukti ją čia.

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

244
00:11:17,190 --> 00:11:24,850
Eiti į getbootstrap.com, rasti
skyrių, kur jie eiti per sąrašą grupes.

245
00:11:24,850 --> 00:11:28,110
Ir jūs pamatysite, čia
pavyzdys ir teisė klasės

246
00:11:28,110 --> 00:11:34,170
kad jūs galite naudoti, kad jūsų
sąrašus į šių gražių sąrašą grupėms.

247
00:11:34,170 --> 00:11:37,260
Tai dirbo pavyzdžiai
Kodų pavyzdžių, ką

248
00:11:37,260 --> 00:11:40,720
kodas jūs naudojate, kokie HTML kodą
naudoti, ir kas, kad išveda.

249
00:11:40,720 --> 00:11:43,410
>> Taigi, mano iššūkis you--
eiti getbootstrap.com,

250
00:11:43,410 --> 00:11:47,860
ar esate čia arba namuose,
pabandyti ir pridėti stilių su šiuo ul

251
00:11:47,860 --> 00:11:49,150
kad ji atrodytų gražus.

252
00:11:49,150 --> 00:11:52,084
Ir naudokite sąrašas grupės stilių.

253
00:11:52,084 --> 00:11:54,750
Jūs norite priimti porą minučių,
ir ieškoti dokumentaciją,

254
00:11:54,750 --> 00:11:56,330
Išbandykite šį patys?

255
00:11:56,330 --> 00:11:59,710
Kadangi, kaip jūs darote interneto svetainių kūrimas,
jums realizuoti savo darbą daug

256
00:11:59,710 --> 00:12:01,867
ketina skaityti
Ši dokumentacija.

257
00:12:01,867 --> 00:12:04,700
Taigi aš manau, kad tai geras susipažinti
su tuo, kaip skaityti dokumentus,

258
00:12:04,700 --> 00:12:07,870
Kaip išsiaiškinti, kas, kur,
Koks kodas pavyzdžių galite naudoti,

259
00:12:07,870 --> 00:12:09,160
ką jūs galite naudoti.

260
00:12:09,160 --> 00:12:13,170
>> Taigi dar kartą, getbootstrap.com,
pereiti prie komponentai kortelėje

261
00:12:13,170 --> 00:12:15,030
ir tada slinkite žemyn į sąrašą grupę.

262
00:12:15,030 --> 00:12:20,870
Ir jūs pamatysite pavyzdžių kodą,
galite naudoti, kad jūsų HTML tilptų tai.

263
00:12:20,870 --> 00:12:23,370
Taigi imtis keletą minučių ir
išbandyti ir ištirti patys,

264
00:12:23,370 --> 00:12:24,661
ar esate čia arba namuose.

265
00:12:24,661 --> 00:12:27,660
Jei esate namie, pristabdyti vaizdo įrašą,
galbūt, ir ją išbandyti save.

266
00:12:27,660 --> 00:12:32,329
Jei esate čia, jei jūs einate į mūsų
website-- jei atnaujinkite puslapį,

267
00:12:32,329 --> 00:12:33,370
pamatysite tai ten.

268
00:12:33,370 --> 00:12:36,970
Tai labai pati kodas yra tik
pridėti naują stilių teisę ten.

269
00:12:36,970 --> 00:12:38,005
Taigi užtrukti keletą minučių.

270
00:12:38,005 --> 00:12:41,130
Leiskite man žinoti, jei jaučiatės gerai
apie tai, arba kai esate visiškai prarasta.

271
00:12:41,130 --> 00:12:42,230
Garsas geras?

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

273
00:12:44,034 --> 00:12:46,450
Greita skirta tiems iš jūsų,
namuose, o mes laukiame,

274
00:12:46,450 --> 00:12:50,080
jei jūs einate į GitHub svetainėje
kad aš taikstytis prieš porą skaidres,

275
00:12:50,080 --> 00:12:53,500
link vaizdo pradžioje,
Turiu GitHub atpirkimo, kapinynas,

276
00:12:53,500 --> 00:12:55,720
Šio pokalbio.

277
00:12:55,720 --> 00:12:59,590
Visi šie pavyzdžiai kodas, kad mes būsime
kalbame apie saugomi čia.

278
00:12:59,590 --> 00:13:09,250
Taigi, jei jūs einate į iššūkį-1.html, tai
yra visa kodas, kad mes turime dabar

279
00:13:09,250 --> 00:13:10,000
Mūsų CodePen.

280
00:13:10,000 --> 00:13:12,900
Taigi jūs galite tiesiog eiti į priekį ir kopijuoti
tai ir įklijuokite jį savo CodePen.

281
00:13:12,900 --> 00:13:15,275
Ir tokiu būdu, galite suspėti
su tuo, ką mes darome čia.

282
00:13:15,275 --> 00:13:19,020
Taigi turime šį puslapį atvirą, taip pat kaip ir mes
eiti per seminaro poilsio.

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

284
00:13:33,131 --> 00:13:36,380
Vėlgi, jūs norite, kad jis atrodys, ką jūs
pamatyti žemyn ekrano apačioje

285
00:13:36,380 --> 00:13:36,879
ten.

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

287
00:14:05,450 --> 00:14:06,800
Jaustis gerai?

288
00:14:06,800 --> 00:14:07,740
Kieta medžiaga.

289
00:14:07,740 --> 00:14:10,570
Palaukime ir visi kiti, kad
baigti su tuo, ką jie daro.

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

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

292
00:14:42,950 --> 00:14:45,864
>> Auditorija: Tarkime, kad aš norėjau
naudoti bootstrap ne home--

293
00:14:45,864 --> 00:14:46,530
Neel Mehta: Taip.

294
00:14:46,530 --> 00:14:52,140
Auditorija: Matau, svetainėje,
Getting Started puslapį.

295
00:14:52,140 --> 00:14:57,671
Jie man parinktis
Bootstrap, šaltinio kodas arba Sass.

296
00:14:57,671 --> 00:14:58,730
Kuris iš šių aš noriu?

297
00:14:58,730 --> 00:14:58,940
>> Neel Mehta: Taip.

298
00:14:58,940 --> 00:15:01,620
Taigi klausimas yra, kaip jūs gaunate
pradėjo naudoti įkelties patys?

299
00:15:01,620 --> 00:15:03,656
Tai tiesiog nutinka
stebuklingai dirbti čia.

300
00:15:03,656 --> 00:15:05,530
Taigi, jei mes turime laikas
Seminaro pabaigoje,

301
00:15:05,530 --> 00:15:08,560
Aš jums parodysiu, kaip jūs galite
gauti jį savo interneto puslapyje.

302
00:15:08,560 --> 00:15:10,799
Kaip čia aš iš tikrųjų
įdėti į kai kuriuos nustatymus, kad

303
00:15:10,799 --> 00:15:12,590
turės automatiškai
pakrautas, bet aš

304
00:15:12,590 --> 00:15:14,720
parodyti jums tai padaryti iš
subraižyti savo žiniatinklio puslapiuose.

305
00:15:14,720 --> 00:15:15,600
>> Auditorija: Ačiū.

306
00:15:15,600 --> 00:15:15,680
>> Neel Mehta: Taip.

307
00:15:15,680 --> 00:15:16,263
Geras klausimas.

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

309
00:15:19,520 --> 00:15:21,500
Jaustis gerai?

310
00:15:21,500 --> 00:15:22,290
Jaustis gerai?

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

312
00:15:22,790 --> 00:15:27,919
Taigi, kas nori man papasakoti, kaip jie padarė
šis dalykas atrodo gražiai ir Boostrappy?

313
00:15:27,919 --> 00:15:29,585
Kas yra pirmos klasės, mes pridėti prie ul?

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

315
00:15:34,347 --> 00:15:35,555
Auditorija: class = "sąrašo Group".

316
00:15:35,555 --> 00:15:36,721
Neel Mehta: Taip. sąrašo grupė.

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

318
00:15:38,917 --> 00:15:40,500
Ir kas tada mes pridėti prie lis?

319
00:15:40,500 --> 00:15:41,072
Kažkas kitas?

320
00:15:41,072 --> 00:15:43,405
Auditorija: Ir tada, po
kad class = "sąrašo grupė elementas".

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

322
00:15:46,230 --> 00:15:47,950
>> Neel Mehta: Taip.

323
00:15:47,950 --> 00:15:48,640
>> Auditorija: ir tai
pats už kito.

324
00:15:48,640 --> 00:15:50,265
>> Neel Mehta: Li class = "sąrašo grupė elementas".

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

326
00:15:53,960 --> 00:15:55,049
Na štai.

327
00:15:55,049 --> 00:15:57,340
Mes turime gražią sąrašas grupę,
kaip mes tikėjomės.

328
00:15:57,340 --> 00:15:58,560
Taigi jūs einate.

329
00:15:58,560 --> 00:16:01,546
Per 10 minučių, mes padarėme
tai nuobodu, senas Yalp! puslapis

330
00:16:01,546 --> 00:16:02,670
atrodo gražiai ir profesionaliai.

331
00:16:02,670 --> 00:16:04,549
Ir tai tik pradžia.

332
00:16:04,549 --> 00:16:06,340
Taigi dabar, kad jūs manote,
geras apie tai, tegul

333
00:16:06,340 --> 00:16:08,850
tiesiog eiti į priekį ir kalbėti apie
pora daugiau komponentų, kurie

334
00:16:08,850 --> 00:16:11,320
gali praversti kaip jums
eiti per savo nuotykius.

335
00:16:11,320 --> 00:16:12,778
>> Žinoma, yra daug tie čia.

336
00:16:12,778 --> 00:16:14,940
Ir dabar, kad jūs sužinojote
kaip padaryti sąrašas grupes,

337
00:16:14,940 --> 00:16:17,080
Jūs galite labai daug mokyti
Būk kaip tai padaryti bet kurį iš šių.

338
00:16:17,080 --> 00:16:19,770
Bet, žinoma, tegul tiesiog pabandykite
ir padaryti pora daugiau save,

339
00:16:19,770 --> 00:16:22,730
tik tokiu būdu jūs gaunate už jaustis
kaip jums gali juos naudoti.

340
00:16:22,730 --> 00:16:24,530
Aš tik ketina eiti
kad šiame pavyzdyje čia.

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

342
00:16:28,480 --> 00:16:34,510
Vėlgi, kodas, kad aš tiesiog įklijuoti
čia yra čia.

343
00:16:34,510 --> 00:16:37,630
Taigi nedvejodami traukti jį.

344
00:16:37,630 --> 00:16:40,100
>> Taigi, mes jau išgyveno
iš šių pavyzdžių pora.

345
00:16:40,100 --> 00:16:43,850
Taigi, mes turime mygtukus, kuriuos mes
jau matėme, kaip tai padaryti.

346
00:16:43,850 --> 00:16:46,270
Mes galime padaryti mygtukai didesni.

347
00:16:46,270 --> 00:16:53,690
Iki mygtuką class-- jis eina, btn btn-LG
ir BTN neįvykdymo leidžia baltos spalvos.

348
00:16:53,690 --> 00:16:57,790
Taigi tai daro mūsų mygtuką didesnis
nei jis gali kitaip.

349
00:16:57,790 --> 00:17:00,900
Tai gali praversti, jei turite
didelis mygtuką "Siųsti" ar kažką.

350
00:17:00,900 --> 00:17:04,599
Matėme sąrašas grupės pavyzdžiu,
mes matėme formos pavyzdys.

351
00:17:04,599 --> 00:17:07,569
>> Vienas labai svarbus yra piktogramos.

352
00:17:07,569 --> 00:17:13,240
Ir piktogramos yra jums pridėti būdas
įdomių dalykų, pavyzdžiui, pažymėkite žymės

353
00:17:13,240 --> 00:17:16,589
ženklai arba pliusai, arba draugas
piktogramos, ar iš naujo piktogramos,

354
00:17:16,589 --> 00:17:19,349
ar kas į savo interneto app.

355
00:17:19,349 --> 00:17:23,400
Taigi dar kartą, jei mes į čia
sudėtines dalis, glyphicons,

356
00:17:23,400 --> 00:17:25,579
yra piktogramos turimi bootstrap.

357
00:17:25,579 --> 00:17:28,050
Yra išsamus
sąrašas visų tie čia.

358
00:17:28,050 --> 00:17:30,250
Taigi tik kaip, pavyzdžiui,
pabandykime ir pridėti.

359
00:17:30,250 --> 00:17:34,290
>> Taigi, kaip "Facebook", mes bando
turėti Pridėti draugą mygtuką.

360
00:17:34,290 --> 00:17:35,620
Tegul pirmasis pridėti šiek tiek stilių.

361
00:17:35,620 --> 00:17:36,911
mygtuką class = "BTN BTN-sėkmę".

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

363
00:17:40,656 --> 00:17:42,050
Ir mes einame.

364
00:17:42,050 --> 00:17:43,730
Leiskite pridėti piktogramą čia.

365
00:17:43,730 --> 00:17:46,080
Kas piktogramą, jūs manote,
gali prasmės įdėti čia?

366
00:17:46,080 --> 00:17:48,632
Jūs tikriausiai matė
Kai kurie interneto puslapiai ar kas,

367
00:17:48,632 --> 00:17:51,590
bet kas AN piktograma pavyzdys,
gali eiti gerai viduje šį mygtuką?

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

369
00:17:55,550 --> 00:17:58,697
Jauskitės laisvai naršyti šią nuomonę,
jei jums reikia įkvėpimo.

370
00:17:58,697 --> 00:18:00,530
Yra daug naudingos daug
tie rasite čia.

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

372
00:18:04,330 --> 00:18:04,830
Taip?

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

374
00:18:07,400 --> 00:18:13,455
>> Auditorija: Gal glyphicon vartotojas viena?

375
00:18:13,455 --> 00:18:14,080
Neel Mehta: "Gerai".

376
00:18:14,080 --> 00:18:14,959
Šitas.

377
00:18:14,959 --> 00:18:15,750
Tai gana gerai.

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

379
00:18:16,250 --> 00:18:18,730
"Facebook", manau, kad tai
atrodytų šiek tiek patinka.

380
00:18:18,730 --> 00:18:22,730
Taigi čia, kaip mes einame apie
pridėti piktogramas mūsų puslapiuose.

381
00:18:22,730 --> 00:18:26,080
Mes tiesiog turime span-- sprindžio yra
neutrali konteineris už kažką.

382
00:18:26,080 --> 00:18:29,080
Div yra kažko konteineris,
sprindžio yra dar vienas konteineris.

383
00:18:29,080 --> 00:18:31,100
Divs turi eilučių
aplink juos, tęsiasi ne.

384
00:18:31,100 --> 00:18:33,592
Taigi ten įvairiais būdais
turintys bendruosius konteinerius.

385
00:18:33,592 --> 00:18:36,550
Kaip tai nėra prasmės jį
viduje dalyje, arba nieko.

386
00:18:36,550 --> 00:18:38,560
Mes turime įdėti ją
viduje kažkas, nors,

387
00:18:38,560 --> 00:18:39,910
todėl mes tiesiog įdėti viduje trukmę.

388
00:18:39,910 --> 00:18:46,550
Taigi span class = glyphicon
glyphicon vartotojas "arti trukmę.

389
00:18:46,550 --> 00:18:51,710
Ir dabar mes turime
piktograma viduje mygtuką.

390
00:18:51,710 --> 00:18:56,486
>> Taigi jis neatrodo visiškai skirtingai
Ką jūs galite pamatyti ant facebook.com.

391
00:18:56,486 --> 00:18:59,360
Ir todėl malonu, kad jie gali
iš tikrųjų būti įdėtas bet kur norite.

392
00:18:59,360 --> 00:19:01,480
Be antraštę barų,
Jūsų sąraše grupes.

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

394
00:19:02,110 --> 00:19:04,050
Ji neturi būti
viduje mygtuką.

395
00:19:04,050 --> 00:19:06,315
Taigi kaip, pavyzdžiui, aš galiu
įdėti tos pačios klasės čia.

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

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

398
00:19:11,383 --> 00:19:12,725
Ir atrodo, tik ta pati.

399
00:19:12,725 --> 00:19:15,850
Taigi šie icons-- galite naudoti trukmę
class = "glyphicon glyphicon-ką".

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

401
00:19:18,570 --> 00:19:21,170
Ir tai leis jums pridėti
piktogramos, kur norite.

402
00:19:21,170 --> 00:19:24,000
Ir piktogramos yra labai svarbus
dalis padaryti svetainę atrodo

403
00:19:24,000 --> 00:19:25,470
profesionaliai ir gerai padaryta.

404
00:19:25,470 --> 00:19:29,960
Taigi nereikia persistengti, bet tai
dažnai yra geras dalykas žinoti.

405
00:19:29,960 --> 00:19:31,250
>> Plokštės, dar kartą.

406
00:19:31,250 --> 00:19:34,910
Aš tiesiog tai padaryti dar kartą, kaip Priminti
nes jie rūšies dalyvauja.

407
00:19:34,910 --> 00:19:37,390
Jūs pastebėsite, kad
paversti savo įprastą HTML

408
00:19:37,390 --> 00:19:39,800
svetainę į "bootstrap-afied
svetainėje, Jūs turėsite

409
00:19:39,800 --> 00:19:43,139
pridėti papildomą struktūrą į svetainę.

410
00:19:43,139 --> 00:19:45,430
Pavyzdžiui, turime papildomai
Divs čia tik nes tie

411
00:19:45,430 --> 00:19:46,830
reikia padaryti skydelį.

412
00:19:46,830 --> 00:19:49,739
Taigi tiesiog laikyti tai galvoje, kad
jūs turite turėti papildomą struktūrą.

413
00:19:49,739 --> 00:19:50,780
Taigi "panelė skydelis neįvykdymo".

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

415
00:19:55,740 --> 00:19:56,740
Gal tai panelė-pjaunamosios.

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

417
00:20:03,265 --> 00:20:04,390
Manau, kad tai skydelio antraštinės.

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

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

420
00:20:11,180 --> 00:20:11,910
Čia mes eiti.

421
00:20:11,910 --> 00:20:14,420
Taigi, dar kartą, yra mūsų panelė.

422
00:20:14,420 --> 00:20:17,090
>> Dar vienas dalykas, kad mes
neapėmė dar, lenteles.

423
00:20:17,090 --> 00:20:19,880
Stalai, pagal nutylėjimą išvaizdą rūšies negraži.

424
00:20:19,880 --> 00:20:20,441
Kaip šitas.

425
00:20:20,441 --> 00:20:22,440
Bet lentelės, žinoma,
labai svarbi dalis

426
00:20:22,440 --> 00:20:24,520
ką jums reikia padaryti, interneto svetainių kūrimas.

427
00:20:24,520 --> 00:20:28,156
Be Pset7, pavyzdžiui, CS50
Finansai, kuri išeis greičiau,

428
00:20:28,156 --> 00:20:29,280
jums naudoti lentelių daug.

429
00:20:29,280 --> 00:20:33,060
Ir iš interneto dev daug naudoti daug
Lentelių rodyti informaciją,

430
00:20:33,060 --> 00:20:35,320
kaip atsargos, ar rezultatas, ar dar kas.

431
00:20:35,320 --> 00:20:37,890
>> Taigi stiliaus lenteles yra iš tikrųjų labai paprasta.

432
00:20:37,890 --> 00:20:41,190
Jūs pridėkite stalo klasę į savo stalo.

433
00:20:41,190 --> 00:20:46,834
Ir, drįstu sakyti, atrodo gana gražiai.

434
00:20:46,834 --> 00:20:49,000
Jūs galite tai padaryti papildomų dalykų,
kaip "stalo stalo dryžuotas".

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

436
00:20:52,240 --> 00:20:54,980
Ir jūs pamatysite rezultatus čia.

437
00:20:54,980 --> 00:20:56,835
Jūs galite tai padaryti stalo ribojasi.

438
00:20:56,835 --> 00:20:58,210
Yra daug variantų, galite daug.

439
00:20:58,210 --> 00:21:00,960
Bet iš esmės, pridedant
stalas, stalo klasė,

440
00:21:00,960 --> 00:21:02,920
padarys Jūsų stalai atrodo gana gražiai.

441
00:21:02,920 --> 00:21:07,070
Štai trumpas suniokota
kai iš svarbesnių stilius

442
00:21:07,070 --> 00:21:11,450
ir komponentai jums
reikia naudoti bootstrap.

443
00:21:11,450 --> 00:21:16,481
Taigi manau, kad apsiaustas
iki mūsų gražioje dalis.

444
00:21:16,481 --> 00:21:19,230
Turite klausimų dabar apie tai, kaip
kad jūsų tinklapis gražus?

445
00:21:19,230 --> 00:21:24,139
Kaip jūs galite naudoti juos
komponentai savo pranašumą?

446
00:21:24,139 --> 00:21:24,680
Jaustis gerai?

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

448
00:21:25,702 --> 00:21:27,410
Auditorija: Gal tai
yra kvailas klausimas,

449
00:21:27,410 --> 00:21:31,160
bet jūs galite naudoti bootstrap Vikipedijos?

450
00:21:31,160 --> 00:21:33,304
Jei redaguojate Wikipedia puslapį?

451
00:21:33,304 --> 00:21:33,970
Neel Mehta: Taip.

452
00:21:33,970 --> 00:21:36,630
Taigi klausimas buvo, aš
Redaguodami Wikipedia puslapį,

453
00:21:36,630 --> 00:21:38,360
galiu įtraukti bootstrap stilius ten?

454
00:21:38,360 --> 00:21:38,970
>> Auditorija: Taip.

455
00:21:38,970 --> 00:21:44,020
>> Neel Mehta: Ir taip įkelties yra
iš esmės didelis CSS stilių.

456
00:21:44,020 --> 00:21:48,610
CSS stiliaus lapas tiesiog sako, kai
Turiu šį klasę, pridėti šių stilių.

457
00:21:48,610 --> 00:21:56,440
Taigi CSS stiliaus lapo bootstrap
bus kažkas panašaus .btn,

458
00:21:56,440 --> 00:22:01,960
mygtuką klasė, gausite tarsi
apvalus kampas sienos ar kas.

459
00:22:01,960 --> 00:22:06,350
Taigi, iš esmės, bootstrap tai tik
krūva klasių ir stilių krūva

460
00:22:06,350 --> 00:22:07,950
nurodyta šių klasių.

461
00:22:07,950 --> 00:22:12,030
Taigi, kaip ilgai, kaip jūs turite, kad CSS,
Šis taisyklių jūsų puslapyje sąrašas

462
00:22:12,030 --> 00:22:13,587
gausite bootstrap stilių.

463
00:22:13,587 --> 00:22:16,670
Tai, žinoma, priklauso nuo
turintys bootstrap stilių jūsų puslapyje

464
00:22:16,670 --> 00:22:17,710
pradėti su.

465
00:22:17,710 --> 00:22:19,710
>> Ir taip Vikipedijos,
tikriausiai negalėjo

466
00:22:19,710 --> 00:22:23,120
daryti, nes Wikipedia
neturi bootstrap į jį.

467
00:22:23,120 --> 00:22:26,630
Bet jei ji turi bootstrap,
Jūs turbūt galėtų tai padaryti.

468
00:22:26,630 --> 00:22:31,380
Ir jei jūs norėjote, galite
įtraukti ją, bet galėtų

469
00:22:31,380 --> 00:22:33,260
pertrauka esamą išdėstymą puslapyje.

470
00:22:33,260 --> 00:22:34,350
Bet labai geras klausimas.

471
00:22:34,350 --> 00:22:37,380
Galite naudoti bootstrap
kur jis yra įtrauktas,

472
00:22:37,380 --> 00:22:40,060
Bet tai ne pastatyta pagal nutylėjimą.

473
00:22:40,060 --> 00:22:40,980
>> Auditorija: Ačiū.

474
00:22:40,980 --> 00:22:41,900
>> Neel Mehta: Taip.

475
00:22:41,900 --> 00:22:44,210
Bet daugiau klausimų?

476
00:22:44,210 --> 00:22:44,710
Taip.

477
00:22:44,710 --> 00:22:48,650
Taigi, ar jūs esate čia arba namuose,
tik nepamirškite getboostrap.com-- vėl,

478
00:22:48,650 --> 00:22:50,755
getboostrap.com-- yra jūsų draugas.

479
00:22:50,755 --> 00:22:52,880
Kai jūs naudojate
Bootstrap, tai suteiks jums

480
00:22:52,880 --> 00:22:55,842
instrukcijos apie tai, kaip gauti
prasidėjo, kaip naudotis komponentus.

481
00:22:55,842 --> 00:22:58,550
Yra keletas atvėsti Javaskriptą
plug-ins, kad mes ne eiti per čia

482
00:22:58,550 --> 00:23:00,240
bet jie verta patikrinti, kaip gerai.

483
00:23:00,240 --> 00:23:01,490
Taigi tai yra jūsų draugas.

484
00:23:01,490 --> 00:23:05,230
Tai tiesiog svarbu gauti
naudojamas kaip naudoti tai.

485
00:23:05,230 --> 00:23:10,120
>> Taigi leiskite kalbėtis tiek apie
priėmimo reaguoja svetainėse.

486
00:23:10,120 --> 00:23:14,600
Taigi, kaip minėjau anksčiau, naudojamas žmonių
savo nešiojamuosius kompiuterius, jie naudoja savo telefonus.

487
00:23:14,600 --> 00:23:18,946
Ir kaip jūs galite įsivaizduoti, tai
labai skiriasi ekrano dydis, kad ne.

488
00:23:18,946 --> 00:23:21,070
Ir taip tas pats svetainė
kad gerai atrodo ant mano telefoną

489
00:23:21,070 --> 00:23:23,880
nesiruošia atrodo gerai,
nebūtinai, kompiuteryje.

490
00:23:23,880 --> 00:23:27,130
Taigi, ką jūs turite padaryti, tai
padaryti jūsų svetainę prisitaikyti.

491
00:23:27,130 --> 00:23:30,060
Ji turi prisitaikyti prie įvairių
Ekrano dydis, kad ji toliau.

492
00:23:30,060 --> 00:23:34,090
>> Jis turi pasakyti, aš žinau, aš ant
kompiuteris, didelis nešiojamas turėčiau plėstis.

493
00:23:34,090 --> 00:23:35,920
Aš žinau, aš ant telefono, turėčiau trauktis.

494
00:23:35,920 --> 00:23:40,470
Ir taip įkelties pateikiama keletas
labai, labai naudingų įrankių tai padaryti.

495
00:23:40,470 --> 00:23:44,490
Taigi įkelties Leiskite jums pertraukos
svetainės į 12 stulpelių.

496
00:23:44,490 --> 00:23:46,420
Jūs galite padaryti eilutes ir turi 12 stulpelių.

497
00:23:46,420 --> 00:23:48,490
Ir jūs galite išskaidyti
tie tačiau norite.

498
00:23:48,490 --> 00:23:51,860
Jūs galite turėti vieną, didelis dalykas,
kuri yra labai platus 12 stulpeliai.

499
00:23:51,860 --> 00:23:53,980
Jūs galite turėti du dalykus
kad yra šeši kiekvienas.

500
00:23:53,980 --> 00:23:56,817
Jūs galite padaryti vieną dalyką, kad keturių,
vienas, kad du arba vienas, kad yra šeši.

501
00:23:56,817 --> 00:23:58,400
Jūs galite padaryti tris, trys, trys, trys.

502
00:23:58,400 --> 00:24:00,570
Galite daryti viską,
paskirstymas, kad jūs norite.

503
00:24:00,570 --> 00:24:05,730
>> Taigi gal jūsų interneto puslapis turi turėti
kairysis stulpelis tai trečdalio pločio.

504
00:24:05,730 --> 00:24:08,250
Taigi, kad būtų keturi stulpeliai
pločio ir likusios puslapio

505
00:24:08,250 --> 00:24:09,690
Būtų aštuoni stulpeliai pločio.

506
00:24:09,690 --> 00:24:11,100
Taigi, šis yra pavyzdys.

507
00:24:11,100 --> 00:24:14,380
Leiskite atsigriebti kitą pavyzdį.

508
00:24:14,380 --> 00:24:17,290
>> Auditorija: ji visada
turi būti dar padalinti?

509
00:24:17,290 --> 00:24:18,750
Ar gali būti, septyni, penkios skirtingos?

510
00:24:18,750 --> 00:24:19,416
>> Neel Mehta: Taip.

511
00:24:19,416 --> 00:24:20,470
Tai gali būti septyni, penki.

512
00:24:20,470 --> 00:24:20,970
Taip.

513
00:24:20,970 --> 00:24:24,110
Tol, kol ji priduria, iki 12, tai gerai.

514
00:24:24,110 --> 00:24:26,270
Taigi grįžkime čia.

515
00:24:26,270 --> 00:24:29,960
Vėl, kodas, kuris yra
čia taip pat galima čia

516
00:24:29,960 --> 00:24:34,130
pagal reaguoja pavyzdyje.

517
00:24:34,130 --> 00:24:36,840
Taigi aš tiesiog išrautas kai
pavyzdys reaguoja kodas čia.

518
00:24:36,840 --> 00:24:40,870
Taigi jūs tai padaryti naudojant
dalykas vadinamas eilės.

519
00:24:40,870 --> 00:24:42,030
Eilutės yra tik dar vienas klasė.

520
00:24:42,030 --> 00:24:46,920
Tai dar vienas stilius jums pridėti į savo
Divs padaryti jiems savo komponentus.

521
00:24:46,920 --> 00:24:50,430
>> Taigi jūs sakote, DIV
class = "eilutė" padaryti eilutę,

522
00:24:50,430 --> 00:24:52,990
suteikti sau 12 stulpelių erdvėje.

523
00:24:52,990 --> 00:24:55,000
Ir tada jūs įdėti stulpelius viduje, kad.

524
00:24:55,000 --> 00:24:57,609
Taigi čia mes pulkininkas XS-6.

525
00:24:57,609 --> 00:24:58,650
Nesijaudinkite XS.

526
00:24:58,650 --> 00:24:59,880
Mes kalbame apie tam sek.

527
00:24:59,880 --> 00:25:03,560
Bet iš esmės, mes turime vieną
dalykas, kad yra šešių pločio.

528
00:25:03,560 --> 00:25:04,250
Mes vadiname jį į kairę.

529
00:25:04,250 --> 00:25:06,120
Ir taip tai kairysis langelis čia.

530
00:25:06,120 --> 00:25:08,390
Mes turime vienas dalykas, kad yra
šeši iš 12 stulpelių pločio.

531
00:25:08,390 --> 00:25:10,620
Ir kad vienas yra dešinėje.

532
00:25:10,620 --> 00:25:13,560
>> gerai tik suteikia markių
Jūsų div užpildyti jį pilka.

533
00:25:13,560 --> 00:25:16,790
Taigi, kad tik taip mes galime
matyti, kad jie skiriasi.

534
00:25:16,790 --> 00:25:18,500
Ir todėl tai pirmasis pavyzdys.

535
00:25:18,500 --> 00:25:22,870
Tai labai paprasta pavyzdys, kaip jūs
būtų naudoti savo eilutes ir stulpelius.

536
00:25:22,870 --> 00:25:25,120
Jūs apibrėžti eilutę naudojant class = "eilutę".

537
00:25:25,120 --> 00:25:32,000
Ir tada jūs class = "Col-XS-6" daryti
pusė, "Col-XS-6" padaryti kitą pusę.

538
00:25:32,000 --> 00:25:34,240
Štai sudėtingesnis pavyzdys.

539
00:25:34,240 --> 00:25:37,320
Pažvelkime Tiny,
Milžiniškas, likusi viena.

540
00:25:37,320 --> 00:25:41,370
>> Mes galime padaryti Tiny du stulpeliai pločio,
mes galime padaryti Milžiniškas šeši stulpeliai pločio,

541
00:25:41,370 --> 00:25:42,800
o likusieji keturi stulpeliai pločio.

542
00:25:42,800 --> 00:25:43,960
Kad išauga iki 12.

543
00:25:43,960 --> 00:25:46,950
Ir taip jie galų gale, apimanti
"puslapio, plotis.

544
00:25:46,950 --> 00:25:49,030
Vėlgi, mes turime eilutę ribų.

545
00:25:49,030 --> 00:25:54,760
Tada mes turime div class = "pulkininkas XS-2"
ir tada 6, ir tada 4.

546
00:25:54,760 --> 00:25:58,190
Ir tai suteiks
už mus struktūra.

547
00:25:58,190 --> 00:26:01,740
Ir todėl mes galime įdėti kokia
gi mes norime viduje čia.

548
00:26:01,740 --> 00:26:03,410
Vietoj Mažyčiai, mes galime įdėti mygtuką.

549
00:26:03,410 --> 00:26:04,701
mygtuką class = "BTN BTN ugdymo".

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

551
00:26:11,820 --> 00:26:16,260
Ir taip pastebėsite, kad mūsų mygtuką
neužima visą plotį,

552
00:26:16,260 --> 00:26:20,080
bet bent jau jis ribojamas
tai daug vietos.

553
00:26:20,080 --> 00:26:21,770
>> Taigi, kad viskas gerai ir gerai.

554
00:26:21,770 --> 00:26:26,800
Taigi mes dabar gali lūžti mūsų interneto
puslapis į gabaliukus, plotis išmintingas.

555
00:26:26,800 --> 00:26:29,990
Galime sakyti, kad mes norime turėti kairę
kolona, ​​ir dešinysis stulpelis, ir taip toliau.

556
00:26:29,990 --> 00:26:33,220
Bet mes ne perėjo
kaip jūs galite padaryti jį reaguoja.

557
00:26:33,220 --> 00:26:36,130
Ir taip įkelties darykime, kad taip pat.

558
00:26:36,130 --> 00:26:38,000
Jis turi šiuos dalykus, vadinamus ribomis.

559
00:26:38,000 --> 00:26:42,230
Taigi, ji turi apie žinant, ar kelią
Jūs esate ant laptopo, esate tabletės,

560
00:26:42,230 --> 00:26:44,730
Jūs esate telefono horizontali,
ar esate telefoną vertikaliai.

561
00:26:44,730 --> 00:26:46,180
Ji žino, ekrano dydį.

562
00:26:46,180 --> 00:26:50,630
Ir pertraukos į keturias categories-- tai
didelis arba LG, kuri yra nešiojamieji kompiuteriai, paprastai.

563
00:26:50,630 --> 00:26:52,660
md arba vidutinio, kuri yra tabletės.

564
00:26:52,660 --> 00:26:54,020
cm, mažas.

565
00:26:54,020 --> 00:26:55,810
Arba XS, papildomas mažas.

566
00:26:55,810 --> 00:27:00,500
Ir todėl, kai jūs nurodote
kolona, ​​jūs sakote,

567
00:27:00,500 --> 00:27:03,780
jis turėtų būti šešios kolonos pločio
ant papildomą mažas prietaisas.

568
00:27:03,780 --> 00:27:06,645
Štai kodėl mes padarėme Col-XS-6.

569
00:27:06,645 --> 00:27:09,020
Mes sakydamas, kad ji turėtų
šeši iš 12 stulpelių pločio

570
00:27:09,020 --> 00:27:11,110
ant papildomą mažas prietaisas.

571
00:27:11,110 --> 00:27:16,570
Ir jei ji nieko daugiau, mes tiesiog
nutylėjimą naudojant papildomą nedidelį dydį.

572
00:27:16,570 --> 00:27:20,770
Jei jis nieko daugiau nei
Papildomas mažas, jis bus šešios pločio.

573
00:27:20,770 --> 00:27:25,800
Ir todėl mes galime sverto
tai padaryti iš mūsų kolonos

574
00:27:25,800 --> 00:27:29,470
imtis skirtingą kiekį
remiantis ekrano dydis stulpeliai.

575
00:27:29,470 --> 00:27:32,580
Vykime į šį reaguoja dydžio keitimas.

576
00:27:32,580 --> 00:27:34,834
Taigi, mes turime stulpelius.

577
00:27:34,834 --> 00:27:36,250
Ir ji sako, "sp-lg-6 sp-XS-12".

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

579
00:27:40,630 --> 00:27:43,150
Taigi atsižvelgiant į tai, ką jūs žinote,
Iki šiol, ką jūs

580
00:27:43,150 --> 00:27:46,150
manau, ketina
atsitikti dideliame ekrane?

581
00:27:46,150 --> 00:27:47,987
Na, tai kokios
užleido, bet ką daryti

582
00:27:47,987 --> 00:27:49,820
manote, kad tai atrodys
patinka dideliame ekrane?

583
00:27:49,820 --> 00:27:50,580
Ir kodėl taip yra?

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

585
00:27:59,990 --> 00:28:03,820
>> Auditorija: Ar tai, kad
dideliame ekrane, tai

586
00:28:03,820 --> 00:28:11,850
ketina imtis tik
dalis visiško erdvėje?

587
00:28:11,850 --> 00:28:13,220
Kaip pusmetį jį, manau?

588
00:28:13,220 --> 00:28:14,420
>> Neel Mehta: Taip.

589
00:28:14,420 --> 00:28:16,960
>> Auditorija: Ir mažesni
ekranas, jis ketina

590
00:28:16,960 --> 00:28:18,544
imtis visą ekraną, 12.

591
00:28:18,544 --> 00:28:19,210
Neel Mehta: Taip.

592
00:28:19,210 --> 00:28:19,710
Teisė.

593
00:28:19,710 --> 00:28:22,361
Taigi kaip, pavyzdžiui, tegul
tiesiog žiūrėti žemyn čia.

594
00:28:22,361 --> 00:28:22,860
Taip.

595
00:28:22,860 --> 00:28:27,110
Tad nieko, kad yra LG arba
bigger-- kad mano kompiuteris atsitinka

596
00:28:27,110 --> 00:28:29,820
būti lg, nes tai
gana wide-- tai leis

597
00:28:29,820 --> 00:28:32,820
tai side by side, nes tai COL-lg-6.

598
00:28:32,820 --> 00:28:37,870
Taigi todėl, kad tai stambaus, ji tampa
šešių kolonų pločio ir šešių kolonų pločio.

599
00:28:37,870 --> 00:28:40,977
Pažiūrėkime, kas atsitiks, jei aš
kad į mažesnius vienas tai.

600
00:28:40,977 --> 00:28:42,560
Aš tik ketina JT visą ekraną tai.

601
00:28:42,560 --> 00:28:44,550
Ir aš ruošiuosi trauktis ekraną.

602
00:28:44,550 --> 00:28:50,590
Aš ruošiuosi trauktis į ekraną, todėl ji
atrodo Esu mažesniu įrenginiu.

603
00:28:50,590 --> 00:28:53,040
Taigi, aš ruošiuosi trauktis, kaip šis.

604
00:28:53,040 --> 00:28:53,880
>> Ir voila.

605
00:28:53,880 --> 00:28:56,010
Šiuo metu tai yra sukrauti
nes dabar mes turime dingo

606
00:28:56,010 --> 00:28:59,280
iš didelio to-- tai tikriausiai
papildomas mažas ekrano dydis.

607
00:28:59,280 --> 00:29:02,460
Ir todėl dabar ji sako, gerai, mes ne
didelio, mes į papildomą mažame krašte.

608
00:29:02,460 --> 00:29:04,251
Taigi mes ketiname naudoti
papildomas mažas dydis.

609
00:29:04,251 --> 00:29:06,320
Ir mes ketiname XS-12, XS-12.

610
00:29:06,320 --> 00:29:08,630
Taigi jis ketina būti sukrauti.

611
00:29:08,630 --> 00:29:11,626
Ir tik pastebėsite, kad ten
dalykas vadinamas atskaitos tašką.

612
00:29:11,626 --> 00:29:13,500
Atskaitos tašką, kur
Jūs padarė perėjimas

613
00:29:13,500 --> 00:29:17,060
iš papildomų mažas, mažas,
mažas, kad didelis, ir taip toliau.

614
00:29:17,060 --> 00:29:20,807
>> Taigi tik pastebėti, kad, kaip aš skaidrę tai
out, galiausiai, gausite iki taško

615
00:29:20,807 --> 00:29:22,695
kur jie šokčiau būti šalia.

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

617
00:29:28,780 --> 00:29:29,330
Na štai.

618
00:29:29,330 --> 00:29:31,020
Taigi ten ji buvo sustabdyta teisę ten.

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

620
00:29:33,600 --> 00:29:37,790
Taigi, mes galime tai padaryti dar sunkiau.

621
00:29:37,790 --> 00:29:40,260
Dabar mes galime pasakyti, tai
viskas turėtų būti keturių pločio.

622
00:29:40,260 --> 00:29:42,010
Tai yra, jie turėtų
užtrukti iki maždaug trečdaliu

623
00:29:42,010 --> 00:29:44,530
iš labai didelių prietaisų kalboje.

624
00:29:44,530 --> 00:29:47,600
Dėl vidutinio įrenginį, ji turėtų imtis
iki pusės ekrano, nes jis md-6.

625
00:29:47,600 --> 00:29:49,790
Labai mažo prietaiso,
jis turėtų būti iki 12.

626
00:29:49,790 --> 00:29:52,550
Ir todėl tai atrodo gana natūralus.

627
00:29:52,550 --> 00:29:55,180
Tegul tik tai išbandyti patys.

628
00:29:55,180 --> 00:29:58,000
>> Taigi dideliame ekrane, jie keturių pločio.

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

630
00:30:02,090 --> 00:30:03,450
Trauktis Taip truputį.

631
00:30:03,450 --> 00:30:05,430
Ir dabar jie yra šeši pločio.

632
00:30:05,430 --> 00:30:08,180
Taigi tai yra šeši, šeši, šeši.

633
00:30:08,180 --> 00:30:11,900
Trauktis Taip dar ir tada
jie bus visiškai sukrauti.

634
00:30:11,900 --> 00:30:17,000
Taigi, šis, pavyzdžiui, prasminga, jeigu
jums kyla kortelės, kaip naujienų korteles,

635
00:30:17,000 --> 00:30:19,337
Pavyzdžiui, kur, jei
tai dėl labai dideliame ekrane,

636
00:30:19,337 --> 00:30:22,670
tai gerai, jei turite kelias viena šalia kitos
nes jie visi gauti pakankamai vietos.

637
00:30:22,670 --> 00:30:23,620
Bet jie turi turėti pakankamai vietos.

638
00:30:23,620 --> 00:30:25,578
Taigi mažesnio ekrano,
jūs norite suteikti jiems

639
00:30:25,578 --> 00:30:29,170
daugiau kambarys, proporcingai puslapio.

640
00:30:29,170 --> 00:30:32,290
>> Taigi, kaip realaus pasaulio, pavyzdžiui,
tarkim mes turime Twitter.

641
00:30:32,290 --> 00:30:35,180
Ir mes turime teksto laukelį, todėl
galite Čivināšana ant šono.

642
00:30:35,180 --> 00:30:39,020
Ir mes turime tendencijos sąrašą
Temos dešinėje pusėje.

643
00:30:39,020 --> 00:30:41,470
Taigi dideliame ekrane, turėtume
juos būti šalia,

644
00:30:41,470 --> 00:30:43,110
todėl jūs galite pamatyti juos stiklinėje.

645
00:30:43,110 --> 00:30:45,960
Tačiau mažesnio ekrano,
turėtume daryti 12 ir 12 straipsniuose,

646
00:30:45,960 --> 00:30:49,315
taip, kad tendencijos temos
yra žemiau Čivināšana srityje.

647
00:30:49,315 --> 00:30:52,770
Kadangi Čivināšana sritis yra
Svarbiausia ir mažame ekrane,

648
00:30:52,770 --> 00:30:56,050
kad tendencijos temos nėra
Nesvarbu gana daug.

649
00:30:56,050 --> 00:30:59,730
Ir taip mes juos tiesiai po, todėl
, kad jie gali tiek gauti pakankamai vietos.

650
00:30:59,730 --> 00:31:00,480
Prasmės iki šiol?

651
00:31:00,480 --> 00:31:01,470
>> Auditorija: Taip.

652
00:31:01,470 --> 00:31:02,530
>> Neel Mehta: Kieta medžiaga.

653
00:31:02,530 --> 00:31:04,500
Taigi, kad visi pavyzdžiai Turiu čia.

654
00:31:04,500 --> 00:31:07,190
Pabandykime ir padaryti iššūkis.

655
00:31:07,190 --> 00:31:18,560
Taigi dar kartą, tai yra iššūkis-2.html už
Tiems iš jūsų, taip kartu namuose.

656
00:31:18,560 --> 00:31:22,500
Taigi, mano bičiulis Mark Zuckerberg,
atėjo pas mane kita diena.

657
00:31:22,500 --> 00:31:25,780
Ir jis patinka, Neel, turiu
Dotarłeś gana gerai web dizainas.

658
00:31:25,780 --> 00:31:26,700
Galiu padaryti HTML.

659
00:31:26,700 --> 00:31:29,570
Aš padariau tai mažai,
Naujas redaguoti Facebook.

660
00:31:29,570 --> 00:31:31,930
Turiu naują idėja, kaip
turėtume stiliaus "Facebook".

661
00:31:31,930 --> 00:31:32,700
Ir čia jis yra.

662
00:31:32,700 --> 00:31:33,200
Štai čia.

663
00:31:33,200 --> 00:31:34,241
Štai keletas pavyzdžių kodą.

664
00:31:34,241 --> 00:31:35,820
Taigi ji vadinama Fancybook.

665
00:31:35,820 --> 00:31:37,340
>> Mes turime keletą būsenos atnaujinimus.

666
00:31:37,340 --> 00:31:41,010
Mes turime Nemo, Mike Kosowski,
Woody-- trys būsenos atnaujinimai.

667
00:31:41,010 --> 00:31:44,107
Ir tada mes turime sąrašą
Dabar draugą tiesiai po juo.

668
00:31:44,107 --> 00:31:45,190
Taigi jis padarė savo namų darbus.

669
00:31:45,190 --> 00:31:47,814
Jis žino šiek tiek apie
Bootstrap, jis padarė sąrašo rodinį,

670
00:31:47,814 --> 00:31:49,870
Jis padarė šiek tiek HTML.

671
00:31:49,870 --> 00:31:51,150
Taigi jis turi tinklalapį.

672
00:31:51,150 --> 00:31:54,450
Bet jis patinka, Neel, aš ne
suprasti reaguoja dizainas ne visiems.

673
00:31:54,450 --> 00:31:56,960
Ar turite kokių nors ekspertus, kurie
galėtų padėti man su tuo?

674
00:31:56,960 --> 00:32:00,000
Ir, laimei, dabar jūs esate
ekspertai reaguoja dizainas.

675
00:32:00,000 --> 00:32:05,290
>> Taigi, ką jis man pasakė, buvo, kad jis
nori Fancybook atrodyti taip.

676
00:32:05,290 --> 00:32:08,220
Labai mažo prietaiso,
kaip telefonas, viskas

677
00:32:08,220 --> 00:32:09,790
turėtų būti sukrauti, kaip čia.

678
00:32:09,790 --> 00:32:12,240
Taigi jūs turite laiko juostą
iš anksto, iki viršaus, ir tada

679
00:32:12,240 --> 00:32:15,370
jūs turėtumėte turėti
čate baras apačioje.

680
00:32:15,370 --> 00:32:19,760
Bet ant tabletės arba terpėje,
Įrenginys, ji turėtų būti pusė ir pusė,

681
00:32:19,760 --> 00:32:24,010
kaip laiko juostoje, turėtų būti
pusę ir pokalbių draugų sąrašą

682
00:32:24,010 --> 00:32:25,450
turėtų būti kita pusė.

683
00:32:25,450 --> 00:32:27,960
>> Tada ant laptopo, Chronologija
turėtų imtis trys ketvirtadaliai

684
00:32:27,960 --> 00:32:32,120
ir tada čate gyvatvorių turėtų
imtis dar vieną ketvirtadalį.

685
00:32:32,120 --> 00:32:36,350
Ir taip jis patinka, Neel, turiu tai
kodas čia, bet tai ne reaguoja.

686
00:32:36,350 --> 00:32:38,760
Ji turi elgtis, kaip šis.

687
00:32:38,760 --> 00:32:42,390
Taigi, mano iššūkis jums
skiriamas šį kodą here--

688
00:32:42,390 --> 00:32:45,030
Jei atnaujinkite savo
CodePens, pamatysite tai.

689
00:32:45,030 --> 00:32:48,840
Arba, jei jūs tiesiog įklijuoti kodą
nuo iššūkio-2, pamatysite tai.

690
00:32:48,840 --> 00:32:50,380
>> Štai pavyzdys kodas.

691
00:32:50,380 --> 00:32:53,450
Pamatysite keletą Matmenys XXXS.

692
00:32:53,450 --> 00:33:00,860
Noriu pakeisti Matmenys XXXS taip, kad
Laiko juostos ir draugų sąrašą

693
00:33:00,860 --> 00:33:04,160
laikosi šių Specifikacijos čia.

694
00:33:04,160 --> 00:33:06,660
Nesijaudinkite apie tai, kas
viduje dabar laiko juostoje.

695
00:33:06,660 --> 00:33:08,020
Mes gauti, kad kitame žingsnyje.

696
00:33:08,020 --> 00:33:11,600
Bet dabar pažiūrėkime, jei mes
šie dalykai padalinti jį kaip šis.

697
00:33:11,600 --> 00:33:12,935
Taigi ar tai prasminga?

698
00:33:12,935 --> 00:33:14,810
Taigi, jei esate namie,
pristabdyti vaizdo įrašą ir pabandykite

699
00:33:14,810 --> 00:33:18,410
padaryti savo tinklalapį
ieškoti reaguoja kaip šis.

700
00:33:18,410 --> 00:33:20,530
Jei esate čia, imtis
kaip dvi, tris minutes.

701
00:33:20,530 --> 00:33:24,770
Jauskitės laisvai kalbėtis su kaimynu,
ir bandyti, ir nustatyti p Zuckerberg s

702
00:33:24,770 --> 00:33:26,045
reaguoja dizainas problema.

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

704
00:33:49,604 --> 00:33:51,770
Jei turite kokių nors klausimų,
nedvejodami praneškite man žinoti.

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

706
00:34:15,520 --> 00:34:16,860
Jaustis gerai?

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

708
00:34:17,610 --> 00:34:18,109
Gražus.

709
00:34:18,109 --> 00:34:19,025
>> Auditorija: [nesigirdi].

710
00:34:19,025 --> 00:34:19,929
Neel Mehta: Kas?

711
00:34:19,929 --> 00:34:20,500
>> Auditorija: Aš gerai.

712
00:34:20,500 --> 00:34:21,379
>> Neel Mehta: O, geras.

713
00:34:21,379 --> 00:34:21,879
Gražus.

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

715
00:34:28,820 --> 00:34:32,120
Auditorija: Apie dalykas
12, tai, kad įkelties

716
00:34:32,120 --> 00:34:42,150
gydo tam tikrą ekrano erdvę kaip 12
vienetai skersai ir tada dalina, kad iki?

717
00:34:42,150 --> 00:34:44,500
Kaip tiksliai veikia
dozavimą darbą už tai?

718
00:34:44,500 --> 00:34:44,750
>> Neel Mehta: Taip.

719
00:34:44,750 --> 00:34:46,190
Taigi kyla klausimas, kaip
veikia Sumaišymo

720
00:34:46,190 --> 00:34:47,299
dirbti bootstrap, tiesa?

721
00:34:47,299 --> 00:34:47,882
>> Auditorija: Taip.

722
00:34:47,882 --> 00:34:50,659
Neel Mehta: Taigi, jei
turite div class = "eilutės"

723
00:34:50,659 --> 00:34:54,879
nesvarbu, kaip didelis ekranas,
Bootstrap duos jums 12 vienetų

724
00:34:54,879 --> 00:34:56,670
to paties dydžio prie
imtis, kad daug dydį.

725
00:34:56,670 --> 00:35:01,830
Taigi Kol 1, tai visada 8.33%
iš ekrano dydžio,

726
00:35:01,830 --> 00:35:04,010
ar tai toks "platus
ar tai šis platus.

727
00:35:04,010 --> 00:35:08,030
Ir taip, žinoma, dėl mažesnio
ekranas, kiekviename stulpelyje yra mažesnis.

728
00:35:08,030 --> 00:35:10,360
Jūs vis dar turite 12 stulpelius
pločio, tai mažesnė.

729
00:35:10,360 --> 00:35:12,985
Taigi, tai iki jums įsitikinti,
kad viskas užima daugiau stulpelį,

730
00:35:12,985 --> 00:35:15,960
proporcingai kompensuoti
tos vietos stokos.

731
00:35:15,960 --> 00:35:16,944
Ar tai prasminga?

732
00:35:16,944 --> 00:35:17,527
>> Auditorija: Taip.

733
00:35:17,527 --> 00:35:18,157
Ačiū.

734
00:35:18,157 --> 00:35:19,240
Neel Mehta: Geras klausimas.

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

736
00:35:55,318 --> 00:35:57,026
Auditorija: ant didelio
ekranas, galite turėti

737
00:35:57,026 --> 00:35:58,622
Laiko juostos užima tris ketvirtadalius?

738
00:35:58,622 --> 00:35:59,288
>> Neel Mehta: Taip.

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

740
00:36:24,036 --> 00:36:25,410
Neel Mehta: Kaip vaikinai jausmas?

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

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

743
00:36:26,830 --> 00:36:27,621
Taigi leiskite grįžti.

744
00:36:27,621 --> 00:36:32,740
Ir tegul pabandyti išspręsti šią dalį
pono Zuckerberg tinklalapyje.

745
00:36:32,740 --> 00:36:36,640
Taigi terminai yra čia, ne
į viršų, o draugų sąrašą

746
00:36:36,640 --> 00:36:37,460
yra apačioje.

747
00:36:37,460 --> 00:36:41,530
Ir todėl mes tiesiog reikia priskirti
kolonos, kurių dydžio proporcinga,

748
00:36:41,530 --> 00:36:42,820
kiekvienoje iš jų.

749
00:36:42,820 --> 00:36:45,280
Taigi šis pirmasis xxx dėl laiko juostoje.

750
00:36:45,280 --> 00:36:47,720
Kas klases mes įdėti čia?

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

752
00:36:53,960 --> 00:36:55,210
Ką vaikinai įdėti čia?

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

754
00:37:00,477 --> 00:37:03,810
Taigi nepamirškite, dideliame ekrane, ji turi
imtis tris ketvirtadalius jų pločio.

755
00:37:03,810 --> 00:37:05,470
Ir taip, kokio stiliaus duos jums tai?

756
00:37:05,470 --> 00:37:08,480
Dideliame ekrane, trijų
ketvirtadaliai pločio.

757
00:37:08,480 --> 00:37:09,680
Kas klasė mes naudojame ten?

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

759
00:37:25,980 --> 00:37:29,320
Auditorija: Taigi mes tiesiog bus
redaguoti kad pirmosios instancijos klasėje.

760
00:37:29,320 --> 00:37:30,153
Neel Mehta: Nes dabar.

761
00:37:30,153 --> 00:37:30,790
Taip.

762
00:37:30,790 --> 00:37:36,600
>> Auditorija: Mes ne redaguoti kiekvienas,
individualus bruožas laiko juostoje?

763
00:37:36,600 --> 00:37:37,850
Neel Mehta: Ne dabar, bent jau.

764
00:37:37,850 --> 00:37:40,020
Taigi visa tai, ką yra blokas.

765
00:37:40,020 --> 00:37:42,180
Užtenka tik keičiant
projektavimas blokas.

766
00:37:42,180 --> 00:37:49,750
Taigi čia mes pulkininkas LG-9, nes tai
devyni iš 12 pločio dideliame ekrane.

767
00:37:49,750 --> 00:37:55,867
Ir tada ant vidutinio ekrane
kiek stulpeliai turėčiau gauti?

768
00:37:55,867 --> 00:37:57,700
Auditorija: Tai turėtų
būti pusė ir pusė.

769
00:37:57,700 --> 00:37:57,930
Neel Mehta: Teisė.

770
00:37:57,930 --> 00:37:58,950
Taigi, kiek tai yra?

771
00:37:58,950 --> 00:37:59,658
>> Auditorija: Taigi šeši.

772
00:37:59,658 --> 00:38:00,430
Neel Mehta: šeši.

773
00:38:00,430 --> 00:38:08,970
Ir tada Papildomas mažas turėtų be-- jei ji
užima visą plotį eilės,

774
00:38:08,970 --> 00:38:10,169
kiek ji turėtų būti?

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

776
00:38:10,710 --> 00:38:11,335
Neel Mehta: 12.

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

778
00:38:12,217 --> 00:38:14,050
Ir dabar mes turime
pakeisti kitų tie,

779
00:38:14,050 --> 00:38:16,120
todėl jis užima erdvę poilsio.

780
00:38:16,120 --> 00:38:19,314
Taigi COL-lg--

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

782
00:38:25,409 --> 00:38:27,450
Auditorija: jis ketina
imtis visą ekraną?

783
00:38:27,450 --> 00:38:31,540
Neel Mehta: Jis užima ketvirtadalį
iš dėl didelio prietaiso ekrane,

784
00:38:31,540 --> 00:38:32,290
kaip mes parodėme čia.

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

786
00:38:35,040 --> 00:38:35,740
>> Auditorija: Trys.

787
00:38:35,740 --> 00:38:36,490
>> Neel Mehta: Trys.

788
00:38:36,490 --> 00:38:39,250
Ir tada sp-MD-6 imtis
iki į kosmosą poilsio.

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
Taigi dabar mes turime grafikas
pradėjimo tris ketvirtadalius

792
00:38:45,570 --> 00:38:49,610
iš didžiojo ekrano puslapyje
ir tada vienas ketvirtadalis pusėje.

793
00:38:49,610 --> 00:38:54,045
Ir tada, jei dydis ekranas žemyn,
jis turėtų būti atitinkamai keisti.

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

795
00:38:56,580 --> 00:38:59,070
Taigi, tai sukrauti dabar
labai mažo ekrano.

796
00:38:59,070 --> 00:39:06,910
Ir jei mes Dydis jį šiek tiek,
jie turėtų būti tiksliai pusė ir pusė.

797
00:39:06,910 --> 00:39:09,500
Taigi mes padarėme, kad iki šiol.

798
00:39:09,500 --> 00:39:11,236
Labai kietas.

799
00:39:11,236 --> 00:39:13,360
Ir taip mes ne padaryti
Kita dalis įspėtas.

800
00:39:13,360 --> 00:39:14,401
Jūs galite padaryti, kad sau.

801
00:39:14,401 --> 00:39:18,754
Bet iš esmės, jūs turite
pabandyti ir padaryti tai reaguoja

802
00:39:18,754 --> 00:39:21,170
kaip well-- padaryti grafikas
daiktai, patys, reaguoja.

803
00:39:21,170 --> 00:39:23,584

804
00:39:23,584 --> 00:39:25,500
Taigi dabar mes išgyveno
Viskas, ką jums reikia žinoti

805
00:39:25,500 --> 00:39:28,160
apie reaguoja pusėje bootstrap.

806
00:39:28,160 --> 00:39:30,787
Bet apie reaguoja klausimai
dizainas su bootstrap

807
00:39:30,787 --> 00:39:32,370
ir kaip jūs galite eiti apie tai daro?

808
00:39:32,370 --> 00:39:36,811

809
00:39:36,811 --> 00:39:37,310
Taip?

810
00:39:37,310 --> 00:39:39,855
>> Auditorija: Ar panašiai, jei
mes turėjome įterptais vaizdo

811
00:39:39,855 --> 00:39:43,575
ir mes norėjome kontroliuoti
skalė, kuria vaizdo was--

812
00:39:43,575 --> 00:39:47,644
iš vaizdo dydis
vyksta nuo nešiojamojo kompiuterio į telefoną.

813
00:39:47,644 --> 00:39:48,310
Neel Mehta: Taip.

814
00:39:48,310 --> 00:39:48,870
Mažiau ar daugiau.

815
00:39:48,870 --> 00:39:51,880
Jums tektų pasakyti su vaizdo
imtis tiek kambarį, kaip jis pateiktas,

816
00:39:51,880 --> 00:39:53,600
kuris yra šiek tiek erzina kartais.

817
00:39:53,600 --> 00:39:56,570
Bet pagrindinė idėja yra ta pati.

818
00:39:56,570 --> 00:40:00,230
Vaizdo, kaip ir bet kuris kitas objektas
puslapis, kaip ir mygtuko ar kas,

819
00:40:00,230 --> 00:40:02,740
kaip ilgai, kaip jūs naudojate
stulpeliai ir eilutės,

820
00:40:02,740 --> 00:40:05,080
galite suteikti jai
tam tikrą erdvę.

821
00:40:05,080 --> 00:40:08,580
Ir taip vis tai pagerbti, kad yra
kitas klausimas, nes kaip "YouTube"

822
00:40:08,580 --> 00:40:10,780
Įterpti turi tam tikrą, norimą dydį.

823
00:40:10,780 --> 00:40:14,264
Tačiau teoriškai ne
mažiau, ji turėtų dirbti.

824
00:40:14,264 --> 00:40:18,990

825
00:40:18,990 --> 00:40:20,120
Saunus?

826
00:40:20,120 --> 00:40:23,750
>> Auditorija: Aš manau, kad tada,
už nuotraukas jūs iš tikrųjų

827
00:40:23,750 --> 00:40:31,092
reikia turėti skirtingas versijas
tas pats vaizdas įvairių dydžių

828
00:40:31,092 --> 00:40:33,864
nešiojamas palyginti iPhone "?

829
00:40:33,864 --> 00:40:37,030
Taip Kyla klausimas, ar mes turime
turi vaizdus, ​​kurie yra reaguoja taip pat.

830
00:40:37,030 --> 00:40:39,040
Ir iš tiesų, galite tai padaryti.

831
00:40:39,040 --> 00:40:42,167
Manau, kad tai CSS.

832
00:40:42,167 --> 00:40:44,000
Bet įkelties leidžia
jums reikia padaryti, kad taip pat.

833
00:40:44,000 --> 00:40:46,080
Jūs galite turėti reaguoja vaizdų.

834
00:40:46,080 --> 00:40:50,650
Jūs galite turėti jūsų vaizdai dydį
pagal puslapio dydžio.

835
00:40:50,650 --> 00:40:54,360
Ir ten labai naujas dalykas
HTML5, naujausia versija HTML,

836
00:40:54,360 --> 00:40:57,210
ir css3, naujausias
versija CSS, kuris

837
00:40:57,210 --> 00:41:01,091
leis jums paprašyti kitokių vaizdų
remiantis ekrano dydis esate ne.

838
00:41:01,091 --> 00:41:04,090
Paprastai, tai pakankamai geras, kad tik
turi savo įvaizdį tik susitraukti arba auga

839
00:41:04,090 --> 00:41:05,215
Tačiau didelis jis turi būti.

840
00:41:05,215 --> 00:41:08,150
Bet jūs galite, jei norite,
kad, turėti vieną 32 iki 32

841
00:41:08,150 --> 00:41:11,040
labai mažų ekranų, ir
64 64 dėl dideliame ekrane,

842
00:41:11,040 --> 00:41:12,910
ir tada tarnauti tiems, pasirinktinai.

843
00:41:12,910 --> 00:41:14,059
Tu gali tai padaryti.

844
00:41:14,059 --> 00:41:15,100
Tai daroma kai kurių žmonių.

845
00:41:15,100 --> 00:41:16,391
Tai dar gana pažangi.

846
00:41:16,391 --> 00:41:21,537
Bet Trumpas atsakymas, reaguoja images--
Bootstrap gali išgelbėti dieną ten.

847
00:41:21,537 --> 00:41:22,036
Saunus?

848
00:41:22,036 --> 00:41:22,920
>> Auditorija: Ačiū.

849
00:41:22,920 --> 00:41:24,795
>> Neel Mehta: tad
pasikalbėti labai greitai apie tai, kaip

850
00:41:24,795 --> 00:41:26,590
gauti tai savo interneto puslapyje.

851
00:41:26,590 --> 00:41:30,620
Tarkime, jūs norite, kad jūsų
savo interneto svetainę naudojant bootstrap.

852
00:41:30,620 --> 00:41:34,675
Ir todėl galime tik tik
vaikščioti per ją kartu.

853
00:41:34,675 --> 00:41:37,320
Tarkime, jūs padaryti tik
normalus HTML puslapis.

854
00:41:37,320 --> 00:41:44,410
Jauskitės laisvai sekti palei
kokia jūsų mėgstamiausia redaktorius.

855
00:41:44,410 --> 00:41:46,190
Taigi mes tiesiog šiek tiek HTML puslapį.

856
00:41:46,190 --> 00:41:54,970

857
00:41:54,970 --> 00:41:57,170
Mes galime padaryti! DOCTYPE HTML.

858
00:41:57,170 --> 00:41:59,310
Tai taip pat HTML, mūsų puslapis.

859
00:41:59,310 --> 00:42:02,840

860
00:42:02,840 --> 00:42:03,340
Nieko naujo.

861
00:42:03,340 --> 00:42:04,298
Mes tai padarė anksčiau.

862
00:42:04,298 --> 00:42:08,910

863
00:42:08,910 --> 00:42:12,110
Taigi čia mes turime HTML ir
mes galime įdėti stuff viduje čia.

864
00:42:12,110 --> 00:42:20,430

865
00:42:20,430 --> 00:42:21,870
Mes galime turime mygtuką.

866
00:42:21,870 --> 00:42:25,490
Ir kaip jau minėjau anksčiau, tai
nebūtinai ketina dirbti.

867
00:42:25,490 --> 00:42:26,560
Kodėl gali tai neveikia?

868
00:42:26,560 --> 00:42:28,430
Kodėl ne mes gauti mūsų
gražus, spalvingas mygtuką?

869
00:42:28,430 --> 00:42:35,260

870
00:42:35,260 --> 00:42:40,969
>> Auditorija: Kadangi mes ne susieti jį
į bootstrap projektą ar faile?

871
00:42:40,969 --> 00:42:41,635
Neel Mehta: Taip.

872
00:42:41,635 --> 00:42:42,135
Teisingas.

873
00:42:42,135 --> 00:42:44,630
Kadangi Bootstrap-- tai
tik išgalvotas CSS failą.

874
00:42:44,630 --> 00:42:47,390
Tai stilių serija, kuri
pridedami prie jūsų elementais.

875
00:42:47,390 --> 00:42:51,250
Čia mes papasakojo, kad mes
norite naudoti šių stilių.

876
00:42:51,250 --> 00:42:52,794
Aš dydis, iki šiek tiek.

877
00:42:52,794 --> 00:42:54,960
Mes papasakojo norime naudoti
Šie stiliai, bet mes niekada

878
00:42:54,960 --> 00:42:56,170
papasakojo, ką stiliai.

879
00:42:56,170 --> 00:42:57,880
Ir tai, ką jūsų
klausimas iš anksčiau buvo.

880
00:42:57,880 --> 00:42:58,963
Štai atsakymas į šį.

881
00:42:58,963 --> 00:43:02,796
Mums reikia rasti būdą, kaip gauti stilius
ir įtraukti juos į mūsų puslapyje kažkaip.

882
00:43:02,796 --> 00:43:04,670
Ir taip įkelties valia
parodyti mums, kaip tai padaryti.

883
00:43:04,670 --> 00:43:10,800
>> Taigi, jei jūs einate į viršų
čia Pradedama.

884
00:43:10,800 --> 00:43:13,980
Yra įvairių būdų, kaip ją atsisiųsti.

885
00:43:13,980 --> 00:43:17,560
Tai gali prasmės nebūtinai.

886
00:43:17,560 --> 00:43:20,180
Bootstrap-- tai leis
patraukti CSS failą pati.

887
00:43:20,180 --> 00:43:21,950
Ir jūs įtraukė jį į savo puslapį.

888
00:43:21,950 --> 00:43:24,570
Originalus kodas yra, jei norite
nulaužti jį patys.

889
00:43:24,570 --> 00:43:25,740
Jums nereikia tai tikrai.

890
00:43:25,740 --> 00:43:29,690
Sass kalba
kad kaupia į CSS.

891
00:43:29,690 --> 00:43:31,160
Pagalvokite apie tai, kaip preprocesoriaus.

892
00:43:31,160 --> 00:43:36,280
Panašiai kaip PHP yra Preprocesorius
HTML Sass yra CSS Preprocesorius.

893
00:43:36,280 --> 00:43:38,930
Taigi, jei jūs norite tai padaryti
Tokiu būdu, jūs galite tai padaryti.

894
00:43:38,930 --> 00:43:42,500
>> Paprasčiausias būdas yra naudojant CDN,
ar turinio pristatymo tinklo.

895
00:43:42,500 --> 00:43:46,050
Tai svetainė, kuri kaip tik
aptarnauja bootstrapu kopiją

896
00:43:46,050 --> 00:43:49,030
labai greitai jums
įtraukti į savo puslapį.

897
00:43:49,030 --> 00:43:50,160
Taigi čia pavyzdys.

898
00:43:50,160 --> 00:43:52,375
Jis jums duos šią nuorodą elementas.

899
00:43:52,375 --> 00:43:57,089
Nuorodą elementas pasakoja savo naršyklę,
imtis visų failai saugomi čia

900
00:43:57,089 --> 00:43:58,380
ir įtraukti jį į mūsų tinklalapį.

901
00:43:58,380 --> 00:44:01,290
Ir šiuo atveju, tai
paleisties CSS failą.

902
00:44:01,290 --> 00:44:05,210
Taigi mes tiesiog nukopijuokite šį URL, arba
kad tekstas, ir mes mesti jį viduje

903
00:44:05,210 --> 00:44:06,380
mūsų galvos.

904
00:44:06,380 --> 00:44:09,740
>> Ir aš ne paleisti puslapį už tai,
bet jūs galite pasitikėti, kad tai veikia.

905
00:44:09,740 --> 00:44:11,650
Nuorodą bus jums CSS.

906
00:44:11,650 --> 00:44:13,910
Įtraukti jį į savo
puslapis ir tada jūs būsite

907
00:44:13,910 --> 00:44:19,420
gali naudoti visi bootstrap
klases, kad žinote ir meilės.

908
00:44:19,420 --> 00:44:25,350
Jei norite palikti jį vietoje ir
jį į savo failų sistemą

909
00:44:25,350 --> 00:44:27,550
vietoj to, kad eiti į
interneto patraukti jį,

910
00:44:27,550 --> 00:44:29,300
pavyzdžiui, jei norite
naudoti svetainės offline

911
00:44:29,300 --> 00:44:31,580
galite naudoti Parsisiųsti parinktį.

912
00:44:31,580 --> 00:44:34,480
Tačiau didžioji dalis, naudojant
CDN yra gana greitai, nes tokiu būdu,

913
00:44:34,480 --> 00:44:36,130
jis nuolat atnaujinami Jums taip pat.

914
00:44:36,130 --> 00:44:40,060
Jūs turite rankiniu būdu atnaujinti arba.

915
00:44:40,060 --> 00:44:40,900
Logiška?

916
00:44:40,900 --> 00:44:45,240
>> Taigi įrankių daug bus tai pastatė
pagal numatytuosius nustatymus. Savo Pset7 ir Pset8,

917
00:44:45,240 --> 00:44:47,970
Manau įkelties yra
automatiškai įtraukiami.

918
00:44:47,970 --> 00:44:49,690
Ir CodePen, už
Pavyzdžiui, jis jau

919
00:44:49,690 --> 00:44:51,500
įtraukti, nes aš
įtraukta pridėti, kad nustatymą.

920
00:44:51,500 --> 00:44:54,520
Taigi, jei jūs kada nors norite pažaisti
Su juo jūs galite tiesiog eiti CodePen,

921
00:44:54,520 --> 00:44:56,020
arba eikite ant jūsų ID, ar kas.

922
00:44:56,020 --> 00:44:58,110
Ir jums gali būti suteikta galimybė
prieiga įkelties ten,

923
00:44:58,110 --> 00:45:02,750
Bet tai ne visada pastatytas
į, pagal nutylėjimą, prie interneto.

924
00:45:02,750 --> 00:45:03,810
Logiška?

925
00:45:03,810 --> 00:45:04,450
>> Taip.

926
00:45:04,450 --> 00:45:07,120
tik kaip recap-- turime
kaip penkias minutes kairę.

927
00:45:07,120 --> 00:45:11,922
Bet kaip Priminti, naujų tinklalapių,
galite įtraukti bootstrap, kaip šis.

928
00:45:11,922 --> 00:45:14,630
Ir kai jūs turite jį įtraukti,
jūs galite padaryti visą atrakcionus čia.

929
00:45:14,630 --> 00:45:19,330
Jūs galite pereiti į, ir jūs galite tiesiog žiūrinėti
CSS, galite pridėti šiek tiek atvėsti stilių,

930
00:45:19,330 --> 00:45:21,830
Jūs galite turėti komponentai
kaip mygtukai,

931
00:45:21,830 --> 00:45:25,774
ir stalai, ir sąrašas
elementus, kurie jau minėjome.

932
00:45:25,774 --> 00:45:28,690
Yra keletas cool JavaScript įskiepių,
kuris galbūt norėsite ištirti.

933
00:45:28,690 --> 00:45:31,050
Jie pridėti šiek tiek atvėsti
interaktyvumo į interneto puslapį.

934
00:45:31,050 --> 00:45:37,110
Kaip šis pademonstravo modalinį dialogą.

935
00:45:37,110 --> 00:45:39,310
>> Taigi yra keletas atrakcionus
jūs galite padaryti su bootstrap.

936
00:45:39,310 --> 00:45:44,410
Taigi, mano patarimas jums eiti į priekį
ir jį naudoti savo projektuose,

937
00:45:44,410 --> 00:45:46,750
vadovaukitės instrukcijomis
tiesiog padarė kaip jį gauti,

938
00:45:46,750 --> 00:45:50,970
ir tiesiog skaityti bootstrap, nes
jums sužinoti daugiau apie tai, ką daryti.

939
00:45:50,970 --> 00:45:54,890
Ir taip mes dingo
daugiau, šiandien, kaip naudoti

940
00:45:54,890 --> 00:45:58,820
dokumentai, ką pastatas
blokai yra ir kaip ji yra konceptualiai.

941
00:45:58,820 --> 00:46:03,680
Taigi dabar mano iššūkis jums yra
padaryti svetainę, naudojant bootstrap.

942
00:46:03,680 --> 00:46:05,117
Eiti į docs.

943
00:46:05,117 --> 00:46:07,825
Ir naudoti įrankius, kad mes
sužinojo, kad iki šiol pabandyti ir išanalizuoti juos

944
00:46:07,825 --> 00:46:09,060
ir suprasti juos.

945
00:46:09,060 --> 00:46:12,230
Ir naudoti šiuos stilių ir įrankiai
matai ten jūsų svetainę.

946
00:46:12,230 --> 00:46:15,070
Ir tai tik didelis,
eksperimentinis procesas.

947
00:46:15,070 --> 00:46:16,110
>> Išbandykite tam tikrą stilių.

948
00:46:16,110 --> 00:46:16,651
Ar tai veikia?

949
00:46:16,651 --> 00:46:17,380
Ar ne?

950
00:46:17,380 --> 00:46:18,630
Pabandykite stuff kartu.

951
00:46:18,630 --> 00:46:19,520
Žiūrėkite, kas atsitinka.

952
00:46:19,520 --> 00:46:21,690
Tai labai daug savarankiškai
vadovaujasi atradimas procesas.

953
00:46:21,690 --> 00:46:25,170
Tačiau šiandien, mes išmoko
patys pagrindai kas įkelties?

954
00:46:25,170 --> 00:46:26,400
Kodėl tai veikia?

955
00:46:26,400 --> 00:46:27,110
Kaip tai veikia?

956
00:46:27,110 --> 00:46:29,620

957
00:46:29,620 --> 00:46:31,970
Kaip mes pradėti naudoti
ji, į pirmąją vietą?

958
00:46:31,970 --> 00:46:33,720
Ir todėl dabar, kad jūs
per tą kupra, jums

959
00:46:33,720 --> 00:46:36,630
turėtų būti suteikta galimybė tai padaryti
gana sklandžiai patys.

960
00:46:36,630 --> 00:46:39,450
>> Taigi, dar kartą, visi
kodas darėme yra čia.

961
00:46:39,450 --> 00:46:41,190
Taigi, jei jūs kada nors norite
gauti atsigaivinti,

962
00:46:41,190 --> 00:46:44,640
kaip, kas greitai apgauti
lapas visi stiliai?

963
00:46:44,640 --> 00:46:47,310
Jūs galite pereiti į šį mėginį čia.

964
00:46:47,310 --> 00:46:49,010
Mes turime keletą pavyzdžių stilių čia.

965
00:46:49,010 --> 00:46:51,300
Jei norite pabandyti
iššūkiai ir vėl patys,

966
00:46:51,300 --> 00:46:53,940
galite pabandyti juos čia ir
patikrinti sprendimai.

967
00:46:53,940 --> 00:46:57,710
Taigi ši nuoroda bus
įtraukti skaidres, kurios

968
00:46:57,710 --> 00:46:59,280
bus išsiųstas jums žinoma.

969
00:46:59,280 --> 00:47:00,196
Bet tai taip pat čia.

970
00:47:00,196 --> 00:47:02,460
Galite pristabdyti vaizdo įrašą, jei norite.

971
00:47:02,460 --> 00:47:06,302
Visa jums reikalinga informacija yra
bus čia, šioje svetainėje.

972
00:47:06,302 --> 00:47:09,510
Taigi, jei kas nors turi kokių nors klausimų, mes galime
juos per ateinančius porą minučių.

973
00:47:09,510 --> 00:47:12,460
Priešingu atveju, ačiū visiems
labai daug žiūri.

974
00:47:12,460 --> 00:47:13,205