1
00:00:00,660 --> 00:00:06,740
Welkom terug in deze les gaan we een klein project uit te bouwen met behulp van wat we tot nu toe over bootstrap heb geleerd.

2
00:00:06,770 --> 00:00:13,590
Het zal een groot deel van de componenten die we hebben gesproken over het op te nemen nu de bar van het jumbotron en het net.

3
00:00:13,920 --> 00:00:17,370
Ik gooide ook in een of twee nieuwe dingen met inbegrip van de icoontjes hier.

4
00:00:17,370 --> 00:00:19,180
We hebben niet gezien hoe die doen gewoon nog niet.

5
00:00:19,500 --> 00:00:30,360
En ook het feit dat dit nav bar zoals ik bladeren het zal zien blijft bevestigd aan de bovenkant, zodat het niet de manier waarop we hebben een vaste nav bar die we ook hebben gewoon nog niet gezien hoeft te scrollen.

6
00:00:30,360 --> 00:00:34,800
En dan tot slot zijn we het veranderen van een aantal van de kleuren van de standaard bootstrap componenten.

7
00:00:34,800 --> 00:00:37,290
Dus dit is eigenlijk een iets andere grijstint.

8
00:00:37,380 --> 00:00:40,480
Dit is de schaduw van blauw en de nav bar heeft een aantal verschillende kleuren.

9
00:00:40,560 --> 00:00:44,250
Dus ik zal je laten zien hoe je dat allemaal doen voordat we begonnen met het schrijven van een code.

10
00:00:44,320 --> 00:00:52,620
Ik wil gewoon een moment te nemen om te wijzen op het feit dat deze beelden voor het grootste deel zijn van een website een geweldige bron genaamd Splash.

11
00:00:52,920 --> 00:00:57,640
Dus splash biedt een heleboel mooie hoge rez foto's die je kunt doen wat je wilt met.

12
00:00:57,750 --> 00:01:00,630
U kunt de licentie hier lezen, maar het is vrij veel wat je wilt.

13
00:01:00,630 --> 00:01:09,390
Het is een creative commons licentie blah blah blah Ik weet zeker dat ik niet echt zorgen over, maar de foto's zijn echt geweldig en ik ben met behulp van veel van deze acht van hen.

14
00:01:09,390 --> 00:01:11,450
In feite is in onze galerij.

15
00:01:11,790 --> 00:01:21,090
En dat ene beeld, dat is dit een recht hier dat ik mezelf daadwerkelijk heeft overgenomen een fotografie klasse en dit is het eerste wat ik heb genomen dat lijkt half fatsoenlijk verlaat.

16
00:01:21,090 --> 00:01:24,780
Ik denk dat zelfs al vergeleken met dezen niet op zoek zo heet.

17
00:01:24,780 --> 00:01:28,650
Hoe dan ook als u deze exact dezelfde beelden, die niet van belang is te gebruiken.

18
00:01:28,740 --> 00:01:30,430
Dit werkt met alle beelden op alle.

19
00:01:30,450 --> 00:01:42,570
Maar als je exact dezelfde die wil ik hebben allemaal van de links in dit bestand galerie M.D dat samen met deze video hebt geüpload en hebben ook de twee kleuren die we gaan naar de donkere blauw en de lichtgrijze gebruiken inbegrepen.

20
00:01:42,740 --> 00:01:42,990
OK.

21
00:01:42,990 --> 00:01:46,790
Dus met dat alles uit de weg laten we nu aan de slag aan het project.

22
00:01:47,100 --> 00:01:48,740
Dus ik heb een leeg bestand galerie.

23
00:01:48,750 --> 00:01:49,620
H m l.

24
00:01:49,860 --> 00:01:58,670
Ik zal toevoegen in mijn h d m l skelet hier en we zullen gewoon noemen image gallery en het eerste wat we moeten doen is omvatten bootstrap.

25
00:01:58,800 --> 00:02:06,490
En ik ga gewoon kopiëren over de cd eindigt van een oud project dus ik zal dat doen op dit moment.

26
00:02:06,900 --> 00:02:07,640
Daar gaan we.

27
00:02:07,710 --> 00:02:09,830
Ik linken naar de bootstrap CDN.

28
00:02:10,200 --> 00:02:25,990
En terwijl ik hier ben ik ook grijpen de bootstraps CSSA en Jay queery stad en dat we in de navigatiebalk les en zet die op de bodem hier zodat wanneer we voegen de nav bar in dat we niet hoeven te jagen gaan voor deze bestanden of voor het script-tags.

29
00:02:26,250 --> 00:02:30,250
Dus een te slaan en het eerste wat we kunnen doen is aan onze Jumbotron.

30
00:02:30,510 --> 00:02:32,160
Dat is leuk en gemakkelijk.

31
00:02:32,400 --> 00:02:38,470
Dus we een div hebben en die klasse zal zijn gelijk Jumbotron.

32
00:02:38,880 --> 00:02:47,520
En dan in de Jumbotron zal beginnen met een H1 dat gewoon zegt dat de image gallery.

33
00:02:47,670 --> 00:02:51,420
Daar gaan we en we zullen besparen en laten we ervoor zorgen dat dit werkt.

34
00:02:51,720 --> 00:02:53,660
Dus het zal leiden tot dit bestand.

35
00:02:54,060 --> 00:02:55,330
Dus hebben we Boucek inbegrepen.

36
00:02:55,350 --> 00:02:56,780
We zien het lettertype veranderen.

37
00:02:56,820 --> 00:02:58,980
We zien dit grijs uit de Jumbotron.

38
00:02:58,980 --> 00:03:07,040
Laten we er nu voor zorgen dat het in een container als het is hier in plaats van wat we hebben, waar het gewoon gaat helemaal over het scherm.

39
00:03:07,320 --> 00:03:12,850
Dus we zullen dat doen div class gelijk container.

40
00:03:14,010 --> 00:03:21,900
Daar gaan we en laten we dit doen naar behoren en verfrissen en we zullen teruggaan.

41
00:03:21,900 --> 00:03:25,140
Oké dus we hebben de Jumbotron maar toe te voegen in deze paragraaf.

42
00:03:25,140 --> 00:03:33,080
Nu gaan we terug te komen en doen het pictogram maar dat is slechts een paragraaf tag onder de H-1 zullen we redden.

43
00:03:33,090 --> 00:03:38,040
Voel je vrij om te zetten wat tekst die u wilt daar en we zijn klaar met de Jumbotron voor nu.

44
00:03:38,730 --> 00:03:45,190
Dus laten we terug gaan en laten we nu doen de nav bar en ik ben niet van plan om genoeg bar vanaf nul te typen om twee redenen.

45
00:03:45,210 --> 00:03:46,970
Een daarvan is dat het is nogal een stukje code.

46
00:03:47,010 --> 00:03:48,000
Het zal een lange tijd in beslag nemen.

47
00:03:48,010 --> 00:03:48,840
En deze video.

48
00:03:48,960 --> 00:03:52,870
Maar twee is het feit dat ik bijna nooit typ in Ackbar vanaf nul.

49
00:03:53,220 --> 00:04:02,580
Zoals ik in de NASCAR video merendeel van de tijd noemde mijn workflow is dat ik naar de bootstrap site of naar een vorige site die ik heb gemaakt met een NAV bar en kopieer ik dat.

50
00:04:02,580 --> 00:04:04,990
En ik controleerde het gewoon en ik te ontdoen van de stukken die ik niet wil.

51
00:04:05,010 --> 00:04:06,530
Ik voeg een aantal nieuwe stukken in.

52
00:04:06,570 --> 00:04:08,020
Dus dat is waar ik ga hier te doen.

53
00:04:08,160 --> 00:04:14,160
Ik heb al genoeg deel dat ik deed in de navigatiebalk zei elke HTML-toepassing.

54
00:04:14,280 --> 00:04:19,570
Het is hier en ik ga gewoon te kopiëren die in en dan zullen we het tweaken een beetje.

55
00:04:19,620 --> 00:04:27,220
Dus laten we kopieer het in en ik kom terug te gaan en we zullen gewoon dit helemaal aan het begin van het bestand net als dat.

56
00:04:27,330 --> 00:04:32,770
En laten we eens kijken wat we krijgen zijn fris en we hebben de nav bar.

57
00:04:33,030 --> 00:04:34,010
Het is dichtbij.

58
00:04:34,050 --> 00:04:36,410
We willen het merk veranderen.

59
00:04:36,420 --> 00:04:43,020
We willen ook de kleur uiteindelijk veranderen en we willen ervoor zorgen dat het wordt bevestigd aan de top, die het nu niet, maar we komen er wel.

60
00:04:43,290 --> 00:04:45,500
Laten we terug gaan en verander gewoon het merk.

61
00:04:45,690 --> 00:04:49,980
Dus in plaats van koffie Ik belde mijn foto's kun je dit wat je wilt bellen.

62
00:04:49,980 --> 00:04:53,970
Natuurlijk is er zeker van dat het werkt ok.

63
00:04:54,250 --> 00:05:01,690
Het volgende wat ik zal je laten zien is een snelle verandering die we kunnen leveren aan de kleur, waar weergegeven in plaats van nap of verzuim te wijzigen.

64
00:05:01,700 --> 00:05:06,880
We kunnen nu doen als bar in vers en ik zal je laten zien hoe dat eruit ziet.

65
00:05:06,880 --> 00:05:12,500
We krijgen een donkere nu voor nu of de kleuren zijn omgekeerd waar de tekst is licht en we krijgen een donkere achtergrond.

66
00:05:12,750 --> 00:05:15,660
Het is nog steeds niet de blauwe kleur die ik ga voor meer dan hier.

67
00:05:16,030 --> 00:05:19,740
En het lettertype is ook niet wit, maar we zullen terugkomen en dat oplossen.

68
00:05:19,750 --> 00:05:21,650
Dit is dicht genoeg voor nu.

69
00:05:21,670 --> 00:05:26,100
Nu kunnen we ons richten op de werkelijke afbeelding galerie op dat rooster hier beneden.

70
00:05:26,350 --> 00:05:29,640
En laten we beginnen door te kijken naar hoe het zich gedraagt ​​op de oplossing.

71
00:05:29,860 --> 00:05:44,480
het begint zo met drie beelden over te gaan en vervolgens als ik de grootte van het naar beneden gaat tot twee en dan gaat het naar twee en dan eindelijk op de kleine omvang gaat het naar één zoals je hier kunt zien.

72
00:05:44,720 --> 00:05:47,110
En we hebben een beeld gaan over.

73
00:05:47,500 --> 00:05:52,780
Laten we beginnen met het opzetten van de grid voor deze grote omvang, waar we drie gaan over.

74
00:05:52,780 --> 00:05:54,850
Onthoud, wij hebben 12 stuks in totaal.

75
00:05:54,910 --> 00:05:59,730
Dus als we willen drie gaan over gaan we aan elk van hen aanwijzen als vier eenheden.

76
00:06:00,160 --> 00:06:04,420
Dus laten we stellen dat tot net onder onze Jumbotron.

77
00:06:04,420 --> 00:06:17,680
Nog steeds in de container al zijn we gewoon gaan doen div class is gelijk aan rij en dan de binnenkant van dat zullen we moeten div class is gelijk aan en we willen dat het vier eenheden.

78
00:06:17,770 --> 00:06:30,260
Dus we kolom grote dash 4 doen en druk op enter en we kunnen beginnen door gewoon wat tekst hier zetten en dan zal ik dupliceren dat, omdat we willen dat drie van die.

79
00:06:30,430 --> 00:06:35,770
En ik zal niet zorgen te maken over de vaststelling nog de insprong want we gaan naar een grotere verandering in slechts een moment te maken.

80
00:06:36,100 --> 00:06:40,170
Maar laten verversen en krijgen we die drie kolommen over te gaan.

81
00:06:40,180 --> 00:06:52,860
Dus de volgende ding dat we willen doen is nog wat foto's te gaan en al beginnen, maar gewoon het nemen van de L van mijn Golden Gate Bridge foto en we gaan een afbeelding tag in plaats van toe te voegen dan tekst.

82
00:06:52,910 --> 00:07:02,620
Dus image source gelijk aan dat van de Golden Gate Bridge u ziek bent en ik zal gewoon plakken dat drie keer en op te slaan.

83
00:07:02,620 --> 00:07:10,310
En als we terug gaan we een probleem en dat is dat dat imago is enorm, zelfs al hebben we die drie kolommen.

84
00:07:10,360 --> 00:07:14,010
Ons beeld is niet verblijf binnen onze column is het niet krimpen naar beneden.

85
00:07:14,010 --> 00:07:19,010
U kunt zien wat we zullen doen om dit op te lossen is het toevoegen van het toevoegen van een beetje meer bootstrap.

86
00:07:19,030 --> 00:07:24,670
Ik heb je nog niet liet zien om dit mooie kleine rand om het te maken en het heet een miniatuur.

87
00:07:24,700 --> 00:07:33,250
Alles wat we moeten doen is schrijven een div met klasse gelijk is aan thumbnail en vervolgens wat beeld dat wij erin zullen worden verkleind om te passen in de kolom te zetten.

88
00:07:33,250 --> 00:07:37,090
En het wordt ook dit kleine grens hier waarvan ik denk dat ziet er vrij aardig.

89
00:07:37,090 --> 00:07:52,600
Dus om dat te doen ik ben eigenlijk van plan om zich te ontdoen van wat we hebben met die om gewoon te gaan terug naar één enkel beeld en voeg in een div class te krijgen gelijk miniatuur en dat gedaan correct.

90
00:07:52,930 --> 00:07:57,880
En we wikkel die rond de afbeelding en op te slaan.

91
00:07:57,880 --> 00:08:00,350
Nu als we vernieuwen.

92
00:08:01,150 --> 00:08:06,470
Je zult zien of we een enkel beeld, dat in beslag neemt de juiste hoeveelheid ruimte binnen dat netwerk te krijgen.

93
00:08:06,730 --> 00:08:12,200
Dit is de kolom en het heeft een beetje rand er omheen en het beeld is niet gigantisch wat geweldig is.

94
00:08:12,700 --> 00:08:15,980
Dus laten we ervoor zorgen dat het werkt als we dit te dupliceren.

95
00:08:16,060 --> 00:08:22,430
Dus dit is een beeld laten dupliceren het drie keer en zie wat er gebeurt refresh.

96
00:08:22,780 --> 00:08:23,610
En daar gaan we.

97
00:08:23,710 --> 00:08:25,380
We hebben drie beelden.

98
00:08:25,380 --> 00:08:27,290
Ik zal doorgaan en voeg zes meer in.

99
00:08:27,360 --> 00:08:29,790
Dus hebben we negen in totaal, zoals we hier doen.

100
00:08:30,490 --> 00:08:32,830
En we eigenlijk niet hoeven te aparte rijen toe te voegen.

101
00:08:33,040 --> 00:08:35,110
We kunnen alleen maar zet ze allemaal in dezelfde rij.

102
00:08:35,200 --> 00:08:40,420
Dus kopieer alle drie die we tot nu toe te keren en op te slaan.

103
00:08:40,480 --> 00:08:42,730
Dat zal ons negen beelden.

104
00:08:42,730 --> 00:08:46,950
En als ik vernieuw je zult zien dat ze automatisch verpakken naar de volgende regel.

105
00:08:47,230 --> 00:08:52,390
Dus we hebben maar één rij te hebben en toe te voegen in deze kolommen jij medisch nos.

106
00:08:52,480 --> 00:08:58,720
Als we willen dat elk beeld tot het nemen van vier eenheden dan betekent dat drie per rij en dan moeten we drie rijen van beelden.

107
00:08:58,780 --> 00:09:02,150
Ik ga terug en verander al deze afbeelding die u elfen aan het einde van de video.

108
00:09:02,160 --> 00:09:03,600
Ik wil niet om je dat te kijken.

109
00:09:03,630 --> 00:09:08,580
Zeer interessant gewoon kopiëren en plakken maar laten we focussen op de rest van dit raster.

110
00:09:08,580 --> 00:09:21,420
Dus nu zo snel een hit medium gaat het naar een beeld over dat is niet wat we willen wat we zoekt naar twee beelden over op dat medium breekpunt.

111
00:09:21,700 --> 00:09:28,730
En dan na het medium breekpunt waarin sprake is van we slaan klein en we willen nog steeds verblijven in 2.

112
00:09:28,750 --> 00:09:39,310
Dus om vast te stellen dat er in ons of het gaat om een ​​onmiddellijk aan de grote breekpunt of het medium breekpunt en vervolgens kleine en extra kleine verblijf in 1.

113
00:09:39,460 --> 00:09:53,970
We kunnen terug gaan hier en we zullen al die jij selecteert veranderen en command d alle exemplaren van noemen ze groot zijn voor selecteren en dan zal ik de linker of rechter pijl om de cursor te verplaatsen raken.

114
00:09:53,990 --> 00:09:55,840
Nu kan ik ze allemaal tegelijk bewerken.

115
00:09:56,020 --> 00:10:04,350
En wat ik wil doen ik zou kunnen toevoegen in kolom medium zes want we willen Perrow en dat zal werken.

116
00:10:04,410 --> 00:10:11,920
En als ik terug te gaan en te vernieuwen je zult zien dat ze een verblijf in 3 per rij en dan druk ik de mediaan breekpunt en ze gaan naar 2.

117
00:10:12,280 --> 00:10:20,820
Maar toen raakte ik klein en het springt naar een en die van ons toen wij slaan klein de oplossing blijft op 2.

118
00:10:20,830 --> 00:10:33,390
Dus om dat in plaats van het doen van kolom medium zes kunnen we doen column kleine 6 vast te stellen en gaan weer terug deze versie te vernieuwen.

119
00:10:33,730 --> 00:10:34,680
We troffen medium.

120
00:10:34,680 --> 00:10:35,590
We gaan naar twee.

121
00:10:35,800 --> 00:10:36,750
We troffen klein.

122
00:10:36,760 --> 00:10:43,530
We verblijven in 2 en dan gaan we naar extra klein en we zijn 1 1 beeld per rij.

123
00:10:43,810 --> 00:10:44,620
Perfect.

124
00:10:44,910 --> 00:10:49,060
Dus dat is alles wat we moeten doen voor het net en we klaar zijn met de meeste van de functionaliteit hier.

125
00:10:49,170 --> 00:10:51,050
Zeer zeer snel te krijgen dat up and running.

126
00:10:51,220 --> 00:10:55,570
Wat we willen richten op nu zijn enkele van de kleuren en ook de iconen.

127
00:10:55,870 --> 00:10:58,890
Ik zal beginnen door te laten zien hoe we met behulp van pictogrammen bootstrap toe te voegen.

128
00:10:59,080 --> 00:11:07,670
Dus krijgen bootstrap als je naar onderdelen zijn er deze glyph iconen bovenin en er is een heleboel van hen om uit te kiezen.

129
00:11:08,320 --> 00:11:11,840
En we zullen er een die we willen gebruiken en degene die ik gebruik te vinden.

130
00:11:12,100 --> 00:11:14,710
Ik zal gewoon een zoekopdracht voor ik denk dat het de camera.

131
00:11:14,710 --> 00:11:17,920
Dus er is deze camera hier en ik ben niet met behulp van die camera.

132
00:11:18,040 --> 00:11:19,310
Het is iets anders.

133
00:11:19,330 --> 00:11:23,080
Degene die ik gebruik is een meer retro camera en ik zal je laten zien hoe aan toevoegen dat in.

134
00:11:23,080 --> 00:11:28,680
Het is eigenlijk geen deel uit van bootstrap Maar laten we beginnen met de reguliere camera die is uitgerust met een bootstrap.

135
00:11:28,810 --> 00:11:32,040
Zo schrijven we Clifford Kahn en ga dan met de Conn dashboard camera.

136
00:11:32,160 --> 00:11:43,450
En als u verder naar beneden scrollen kun je zien waar ze uitleggen hoe het te gebruiken om een ​​overspanning te creëren waarin een klasse gelijk is aan met Con is en dan glyph het kan de naam van het pictogram glyph stoot.

137
00:11:43,480 --> 00:11:58,200
Dus laten we kopieer deze overspanning in en we beginnen door het te doen in de H-1 zet ze gewoon aan het begin van de H-1 en we willen een snelle A-Kon dashboard camera en we zullen slaan en te vernieuwen.

138
00:11:58,600 --> 00:12:01,060
En net als dat je een camera naar binnen.

139
00:12:01,410 --> 00:12:07,350
En als we willen ruimte die we kunnen ook doen door middel van padding of we kunnen gewoon voeg een spatie daar.

140
00:12:08,260 --> 00:12:16,970
En krijgen we een ruimte kunnen we precies hetzelfde te doen voor de navigatiebalk en ik gebruikte een die wordt aangeroepen Photo gaan double check-up hier.

141
00:12:16,980 --> 00:12:22,780
U kunt een zoekopdracht op deze pagina voor foto beeld te doen.

142
00:12:22,890 --> 00:12:24,080
Daar is het.

143
00:12:24,260 --> 00:12:26,890
Het kan gaan als het beeld kan dash.

144
00:12:27,730 --> 00:12:32,890
Dus we gaan naar de nav bar merk hier en we plakken in die periode weer.

145
00:12:33,120 --> 00:12:41,420
En dan in de overspanning van de klasse moet worden klik op de foto en we zullen een ruimte is er toe te voegen ook.

146
00:12:41,460 --> 00:12:45,880
We gaan terug naar onze site zijn fris en we hebben nu een kleine afbeelding daar.

147
00:12:46,360 --> 00:12:47,930
En we hebben ook de camera.

148
00:12:48,150 --> 00:12:54,740
Volgende laten we het aanpakken van de navigatiebalk en we zullen beginnen met het maken van deze bevestigd aan de top, zodat je nu kunt zien.

149
00:12:54,790 --> 00:12:56,470
Dat dutje onze rollen weg.

150
00:12:56,950 --> 00:12:59,210
Maar aan de oplossing het blijft daar.

151
00:12:59,640 --> 00:13:04,460
En om dat te doen is het een enkele klasse die we hebben om toe te voegen aan onze NAV bar.

152
00:13:04,480 --> 00:13:11,800
Dus hier naar boven willen we nav bar dash vaste dash top en op te slaan.

153
00:13:12,120 --> 00:13:16,570
En als we verse zul je zien dat het bevestigd aan de top.

154
00:13:16,570 --> 00:13:25,800
Er is een klein probleem en dat is dat onze content is nu achter het een beetje en we willen dat dat de normale afstand boven de Jumbotron hebben.

155
00:13:25,810 --> 00:13:32,770
Wat we moeten doen is het toevoegen van een beetje padding om ons lichaam en het gebeurt te zijn 70 pixels.

156
00:13:32,770 --> 00:13:39,320
De bootstrap docs zal je vertellen dat als je ooit vergeten 70 pixels van de vulling is wat we willen is dat de breedte van de inmiddels vier.

157
00:13:39,490 --> 00:14:01,850
Dus we zullen hier te gaan en we zullen een stylesheet nu te maken en ik noem het galerie Dotsie SS en vervolgens binnen selecteer lichaam padding top 70 pixels en dan moeten we aan toevoegen dat in verband met die stijl plaat die Gallery CS S.

158
00:14:01,920 --> 00:14:03,760
Laten we ervoor zorgen dat het werkt.

159
00:14:03,790 --> 00:14:04,330
Daar gaan we.