1
00:00:00,390 --> 00:00:07,420
Welkom terug in het apparaat ga ik je laten zien een paar andere componenten, waaronder jumbotron en bootstrap formulieren en ingangen.

2
00:00:07,530 --> 00:00:14,520
Maar voordat ik dat doe wil ik een moment nemen om iets dat echt heel belangrijk wanneer we het leren van nieuwe tools zoals deze trant bootstrap aan te pakken.

3
00:00:14,760 --> 00:00:31,200
En in mijn ervaring van het onderwijs mensen om webontwikkelaars word ik heb gemerkt een bootstrap is een van de eerste plaatsen waar een aantal van de studenten beginnen ongemakkelijk ongemakkelijk te voelen en ze het gevoel dat ze niet weten of ze doen en dan, omdat we opeens met inbegrip van een bos van code iemand anders schreef in onze applicatie.

4
00:00:31,200 --> 00:00:43,550
Maar als je een kijkje nemen op de documentatie hier zijn ze echt lang zijn ze uitgebreid wat geweldig is, maar er is veel hier en ik wil dat je dit frame niet als een handleiding die je moet lezen om alles te begrijpen.

5
00:00:43,560 --> 00:00:47,980
Dit is niet zoals een hoe te begeleiden die je moet voltooien voordat we bootstrap gebruiken.

6
00:00:48,300 --> 00:00:53,820
Het is een verwijzing waar als u besluit dat u een formulier dat u kijkt naar de vorm sectie nodig hebt als je een tafel nodig.

7
00:00:53,850 --> 00:00:56,780
U vindt de tabel sectie raken als u een navigatiebalk nodig.

8
00:00:56,850 --> 00:01:12,810
Je kijkt naar de sectie NFR maar het is belangrijk dat u de documenten behandelen als dat je gaat gebruiken ze non-stop terug te komen om hier te verwijzen naar de individuele stukjes code kopiëren van hun code segmenten controleren van een aantal demonstraties lezen van voorbeelden die ik heb gebruikt bootstrap voor jaar op dit punt.

9
00:01:12,930 --> 00:01:14,630
En ik voel me vrij goed over de meeste van.

10
00:01:14,760 --> 00:01:18,220
Maar ik laat de docs open toen ik ben bezig met alles wat met bootstrap.

11
00:01:18,330 --> 00:01:26,900
Ik ben voortdurend verwijzen naar de voorbeelden in een van de heel vroeg video's in deze cursus heb ik gesproken over hoe je een web ontwikkelaar te worden.

12
00:01:27,060 --> 00:01:32,490
Je bent niet steeds een deskundige in memoriseren en in de wetenschap dat ieder stukje informatie.

13
00:01:32,730 --> 00:01:33,960
Ja, je moet dingen weten.

14
00:01:33,960 --> 00:01:39,210
Ja, je moet begrijpen en onthouden wat dingen, maar je bent niet steeds een deskundige of memoriseren.

15
00:01:39,210 --> 00:01:41,990
Je wordt een expert bij de toegang tot informatie.

16
00:01:42,120 --> 00:01:52,410
En sommige van die informatie die u hebt opgeslagen en een heleboel het gaat online documentatie of voorbeelden video's boeken allerlei middelen te zijn.

17
00:01:52,410 --> 00:01:54,350
Oké dus te vatten het hele peptalk.

18
00:01:54,450 --> 00:02:01,430
In principe wil ik gewoon dat je in gedachten houden dat ja, er is veel te bootstrappen houden en je gaat 20 30 procent van het te zien en er is nog veel meer die er zijn.

19
00:02:01,440 --> 00:02:03,210
Maar laat je niet intimideren door dat.

20
00:02:03,240 --> 00:02:07,800
U moet zich comfortabel voelen met de toegang tot documenten als je nodig hebt om iets dat ik u niet te laten zien hoe om te doen.

21
00:02:07,860 --> 00:02:09,480
Open de docs en zoeken.

22
00:02:09,600 --> 00:02:13,760
En er is altijd grote voorbeelden en uitleg over krijgen bootstrap dotcom.

23
00:02:14,120 --> 00:02:22,110
OK dus zonder meer laten we verder gaan om te praten over een aantal van deze belangrijke componenten en ik ga om te beginnen door te laten zien Jumbotron.

24
00:02:22,500 --> 00:02:31,680
Dus een Jumbotron volgens de officiële documenten is een lichtgewicht flexibel onderdeel dat eventueel het hele viewport kan zich uitstrekken tot de presentatie van de belangrijkste inhoud van uw site.

25
00:02:31,680 --> 00:02:37,670
U kunt een voorbeeld van één recht hier te zien en als we willen een Jumbotron gebruiken het is echt heel eenvoudig.

26
00:02:37,680 --> 00:02:44,750
Alles wat we moeten doen is te schrijven div class jumbotron en dan wat we de binnenkant van die zet zal deel uitmaken van de Jumbotron zijn.

27
00:02:44,970 --> 00:02:46,680
Dus laten we proberen dat.

28
00:02:47,190 --> 00:03:17,300
Just do it hieronder knoppen een div met klasse Jumbotron jumbo tron ​​en dan binnen, indien er laten we een H1 of H-1 zal zeggen dat dit een jumbotron en voeg dan een knop in er net zoals ze hier hebben en we zullen voeg een paragraaf ook in onze paragraaf zal gewoon jibberish.

29
00:03:17,790 --> 00:03:19,420
Goed genoeg voor nu.

30
00:03:20,310 --> 00:03:28,460
En een knop en onze knop zal gewoon zeggen hi there.

31
00:03:28,800 --> 00:03:29,250
OK.

32
00:03:29,250 --> 00:03:31,830
En dan een knop hebben we een paar keuzes.

33
00:03:31,980 --> 00:03:39,680
We zullen een knop succes te doen en ik zal het groot te maken en op te slaan.

34
00:03:39,940 --> 00:03:41,620
Laten we eens een kijkje nemen op wat we krijgen.

35
00:03:41,790 --> 00:03:48,740
En er is een Jumbotron je kunt zien dat het duurt tot de gehele breedte van onze browservenster en dat is meestal niet wat we willen.

36
00:03:49,050 --> 00:03:55,510
En wat is er gebeurt is dat de JumboTron is ingesteld om het nemen van 100 procent van welke container het is de binnenkant van.

37
00:03:55,640 --> 00:03:57,740
In dit geval is het niet buiten iets.

38
00:03:57,900 --> 00:04:07,640
Maar binnenkort zal ik laten zien u het net en bootstrap waar we precies kunnen bepalen hoeveel u wilt dat deze tot het nemen van het scherm als u het wilt worden gecentreerd en nemen een derde van het scherm.

39
00:04:07,650 --> 00:04:14,150
Tweederde van het scherm een ​​kwart van het scherm hebben we al deze verschillende keuzes die we kunnen maken door gebruik te maken bootstraps grid-systeem.

40
00:04:14,310 --> 00:04:25,140
Want nu ga ik je laten zien een ander element kunnen we niet in wat een div met klasse gelijk is aan container en wat container zal doen.

41
00:04:25,140 --> 00:04:32,950
Als we gewoon spul binnen van div class container geeft het enige afstand een aantal padding rond het en het geeft voor dingen.

42
00:04:33,360 --> 00:04:46,750
Dus de container vinden inspecteren duurt al deze ruimte hier kun je zien, maar het heeft wel een beetje van de marge op.

43
00:04:46,750 --> 00:04:55,990
Dus als we willen gewoon een snelle verbetering zonder dat het net die we niet over gesproken hebben we div class container kan toevoegen gebruiken en nu krijgen we dit leuk uitziende Jumbotron.

44
00:04:55,990 --> 00:05:03,230
En als we verhuizen deze code die we al naar beneden hebben in de containers goed, maar we zullen niet zet het in de Jumbotron.

45
00:05:03,310 --> 00:05:07,890
Je zult zien dat het nog steeds wordt beïnvloed door die container.

46
00:05:08,020 --> 00:05:18,120
Dus buiten de Jumbotron maar binnen de container op te slaan en te vernieuwen je kunt zien is het ook in die container en het weerspiegelt die visueel.

47
00:05:18,400 --> 00:05:22,320
OK laten we het hoofd terug naar componenten en het volgende ding dat ik zal je laten zien.

48
00:05:22,330 --> 00:05:23,950
We gaan naar de top.

49
00:05:24,280 --> 00:05:28,760
We moeten dan gaan om te zien beoordelen en ik zal je de vormen en hoe die te tonen.

50
00:05:28,990 --> 00:05:33,030
dus klik op formulieren en er is nogal wat verschillende soorten en verschillende voorbeelden.

51
00:05:33,070 --> 00:05:35,710
En ik zal gewoon bladeren door hen eerst voordat we iets typen.

52
00:05:35,980 --> 00:05:39,910
Dus hier is een eenvoudig voorbeeld van een bootstrap vorm.

53
00:05:39,910 --> 00:05:42,540
U kunt de markt die het creëert zien.

54
00:05:42,760 --> 00:05:55,320
Dan hebben we wat bekend staat als een inline-vorm en we hebben een ander type inline vorm en nog een andere met verschillende ingangen en een ander type van de vorm.

55
00:05:55,480 --> 00:06:00,420
Nu deze vertelt over de verschillende soorten formulierbesturing de verschillende ingangen die worden ondersteund.

56
00:06:00,430 --> 00:06:03,280
Dus al deze kleur je bent.

57
00:06:03,310 --> 00:06:24,940
E-nummer week tijd en ga zo maar door tekst gebieden verschillende vakjes met een handicap vakjes uitgeschakeld radio knoppen inline checkboxes inline radio knoppen dropdown menu's selecteert door te gaan naar beneden.

58
00:06:24,970 --> 00:06:26,780
We hebben andere forum Staten.

59
00:06:26,780 --> 00:06:28,370
We hebben een focus staat.

60
00:06:28,470 --> 00:06:30,910
U kunt deze markering rond die blauw zien.

61
00:06:31,060 --> 00:06:34,420
Dat is de standaard bootstrap nadruk styling.

62
00:06:34,420 --> 00:06:54,610
We kunnen ook ingangen uitschakelen door het toevoegen in een handicap en we hebben ook nog een paar andere dingen die we kunnen doen, maar ik ga om terug te gaan en echt richten op de fundamentele exampled start en ik zal beginnen door gewoon het kopiëren van dit hele formulier dan en dan zullen we het ontleden beetje bij beetje.

63
00:06:54,610 --> 00:06:59,200
Dus laten we gaan hier terug en we zullen gewoon dit formulier toevoegen nadat al het andere.

64
00:06:59,200 --> 00:07:01,420
Maar ik zal het doen in de container.

65
00:07:01,420 --> 00:07:03,290
Laat me dit het volledige scherm voor een moment.

66
00:07:03,340 --> 00:07:08,580
We hebben ons formulier en binnen die vorm hebben we nogal wat van de inhoud.

67
00:07:08,590 --> 00:07:11,900
Laten we teruggaan naar de browser en een kijkje nemen op hoe het eruit ziet.

68
00:07:12,460 --> 00:07:17,170
En het eerste wat je zal waarschijnlijk merken is dat onze vorm gaat helemaal over deze container.

69
00:07:17,230 --> 00:07:21,060
Het duurt tot 100 procent van die met en dat is iets wat we in staat zijn te controleren.

70
00:07:21,100 --> 00:07:28,470
Zodra we praten over de bootstrap grid-systeem en zal gemakkelijk in staat te zeggen dat dit zou moeten gaan 50 procent van de weg over.

71
00:07:28,480 --> 00:07:34,090
Dus dat is iets wat we in staat zijn om gemakkelijk te veranderen als we praten over de bootstrap grid-systeem, of we zijn er nog niet gewoon.

72
00:07:34,120 --> 00:07:35,510
Dus we gaan gewoon te gaan met haar.

73
00:07:35,530 --> 00:07:37,080
Het neemt 100 procent voor nu.

74
00:07:37,120 --> 00:07:39,670
Het is een gigantisch vreemd uitziende forum, maar dat is prima.

75
00:07:39,820 --> 00:07:41,320
We vinden het geweldig hoe het is.

76
00:07:41,470 --> 00:07:45,290
Dus we terug naar subliem te gaan en laten we ontleden dit een stuk op een moment.

77
00:07:45,550 --> 00:07:48,730
Dus hebben we een forum tag binnenkant van dat forum tag.

78
00:07:48,910 --> 00:08:04,010
Er is een div class vorm groep en als je meer wilt weten over wat het doet als je terug naar de bootstrap docs te gaan en doe een zoektocht naar vorm groep en je kunt de rap labels en controles in de vorm groep te zien voor een optimale afstand te leren kennen.

79
00:08:04,300 --> 00:08:13,800
Dus als we te ontdoen van die vorm groepsles rond deze eerste en we zullen het doen rond de eerste en tweede u zult zien wat we eindigen met.

80
00:08:13,870 --> 00:08:21,520
Ik zal slaan en te vernieuwen je ziet hoe de afstand verandert hier tussen de ingangen.

81
00:08:22,150 --> 00:08:30,640
Dus we kunnen teruggaan en voeg die vorm groep en dit is echt hoe je het gebruikt waar je een ingang en het label en je wilt dat ze worden gegroepeerd wordt gevormd.

82
00:08:30,940 --> 00:08:35,320
Dus let hier maar een klein beetje ruimte is daar toegevoegd.

83
00:08:35,320 --> 00:08:43,660
Het voegt gewoon een beetje ruimte hier die effectief groepen die twee bij elkaar visueel en vervolgens Grip is deze bij elkaar zowel visueel als deze hier beneden.

84
00:08:43,660 --> 00:08:45,390
Dus dat is vorm groep.

85
00:08:46,000 --> 00:08:47,860
En dan de labels zijn gewoon normaal.

86
00:08:47,860 --> 00:08:54,960
We hoeven niet niets bijzonders te labelen geen Boucek klasse toe te voegen, maar de ingang is er een klasse vorm controle.

87
00:08:55,300 --> 00:08:57,470
Dus laten we eens kijken wat er gebeurt als ik te ontdoen van het.

88
00:08:57,700 --> 00:09:03,670
Dus ik doe het gewoon op de eerste en zet de e-ingang en terug te gaan en te vernieuwen.

89
00:09:03,670 --> 00:09:08,590
Merk op dat deze volledig verandert terug naar een normale standaard browser-ingang.

90
00:09:08,590 --> 00:09:10,050
U hoeft dus niet de afgeronde hoeken te krijgen.

91
00:09:10,060 --> 00:09:12,800
We hebben niet dezelfde vulling en afstand van dingen.

92
00:09:13,000 --> 00:09:19,010
En we hebben ook niet dezelfde focus effect als ik klik we krijgen een blauw overzicht krijgen, maar het is anders dan deze.

93
00:09:19,180 --> 00:09:33,430
De bootstrap outline is een beetje subtieler en dat zijn nog maar het meteen duidelijk visuele veranderingen tussen de twee, maar er is eigenlijk nog meer belangrijke verschillen die je zult zien zodra we het werken met de grid-systeem en de manier waarop ze zich gedragen en interactie met andere elementen.

94
00:09:33,620 --> 00:09:36,170
Zal teruggaan en voeg vorm controle weer.

95
00:09:36,400 --> 00:09:45,880
Dus echt als we wilden dit alles destilleren hier komt neer op formulier Group en de vorm controle.

96
00:09:46,150 --> 00:09:49,840
Deze twee klassen zijn echt verantwoordelijk voor het maken van dingen zien er goed uit.

97
00:09:49,840 --> 00:09:55,680
Nu is er deze paragraaf klasse hulp blok en kunnen we kijken wat we krijgen van die rekening.

98
00:09:55,690 --> 00:10:16,080
Het is deze tekst hier beneden die net geeft een kleine hint van een pointer over een deel van uw formulier en dat spul met de klas hulp blok en dan hebben we onze button hier beneden dat is gewoon een regelmatige Pucelle knop of we hebben tussen A en B hebben de neiging om vallen en we konden het groter of kleiner extra kleine verandering van de kleur net als elke andere knop te maken.

99
00:10:16,090 --> 00:10:23,270
Dus al kun je zien hoe dit is een beetje zoals Lego, waar we een knop Lego die we kunnen toevoegen aan een jumbotron.

100
00:10:23,320 --> 00:10:27,360
We kunnen ook gewoon toegevoegd op zijn eigen, of we kunnen het in plaats toevoegen van een formulier.

101
00:10:27,430 --> 00:10:32,470
Het is gewoon een kleine plug-and-play component die we in kunnen toevoegen aan verschillende onderdelen van onze applicatie.

102
00:10:32,500 --> 00:10:36,990
Dus laten we terug gaan en een kijkje nemen op een ander type van de vorm, die het inline vorm.

103
00:10:37,450 --> 00:10:39,120
Dus dit ziet er iets anders uit.

104
00:10:39,340 --> 00:10:53,860
Als we alleen deze code over kopiëren en we een kijkje nemen met de verschillen, zodat ik die eerste vorm te verlaten en laten we voeg een commentaar in lijn vorm en laten we streepje zaken goed.

105
00:10:54,880 --> 00:10:56,200
Ziet er goed uit.

106
00:10:56,200 --> 00:10:58,360
Merk op dat alles is identiek.

107
00:10:58,360 --> 00:11:04,290
We hebben nog steeds een vorm controle op de ingangen hebben we vorm groep, maar er is één groot verschil.

108
00:11:04,360 --> 00:11:09,070
Alles is binnenkant van een formulier met klasse vorm in lijn zodat één lijn.

109
00:11:09,490 --> 00:11:11,550
Laten we gewoon je laten zien hoe het eruit ziet om te beginnen.

110
00:11:11,640 --> 00:11:15,450
Ik ga terug geeft ons deze mooie in line formulier hier.

111
00:11:15,850 --> 00:11:24,870
En zodra ik ontdoen van die te krijgen en sla het gaat nu terug naar een normale vorm zoals wij hier hebben.

112
00:11:25,210 --> 00:11:29,330
Dus gewoon een klasse bevat alle stijlen die zal controleren of.

113
00:11:29,470 --> 00:11:31,340
Dus we houden als Vorm in de rij.

114
00:11:31,540 --> 00:11:34,270
En opnieuw de afstand is niet ideaal moment.

115
00:11:34,270 --> 00:11:37,130
Dat zal worden opgelost wanneer we het hebben over het net.

116
00:11:37,150 --> 00:11:40,090
Er is nog veel meer dat we konden praten over rond bootstrap vormen.

117
00:11:40,090 --> 00:11:53,750
We kunnen waarschijnlijk doen 30 45 minuten lezing over alleen het bouwen van complexe vormen Bootstrap het leren van de ins en outs van al deze verschillende stukjes en andere dingen die we validaties custom sizing allerlei verschillende stijlen we kunnen werken met u te doen.

118
00:11:53,830 --> 00:11:55,120
Maar ik ben niet van plan om dat te doen.

119
00:11:55,210 --> 00:11:56,880
We hebben de belangrijkste basics bedekt.

120
00:11:56,940 --> 00:12:09,730
Er zijn twee soorten vormen zijn een soort van het brood en boter van Boucek vormen waar we de basis reguliere vorm en vervolgens een inline vorm en er zullen een aantal andere functies in verschillende aspecten van bootstrap dat we gebruiken om de formulieren.

121
00:12:09,910 --> 00:12:20,310
Maar in plaats van te besteden tijd nu en veen je naar beneden over alle ins en outs en de kleine details van Prichep vormen Ik kom net gooien in die kleine stukjes als we ze nodig hebben als we daadwerkelijk gebruikt bootstrap.

122
00:12:20,530 --> 00:12:33,480
Zodat de twee afhaalrestaurants hier over formulieren zou zijn twee klassen die echt belangrijk zijn vorm controle en vorm groepsvorm controle maakt de ingangen Bootstrap verfijnde vorm groep voeg enkele mooie afstand.

123
00:12:33,550 --> 00:12:40,910
Dus wat je in, aldus een vorm groep krijgt een aantal leuke regelafstand en vervolgens enkele klasse vorm dash in de rij.

124
00:12:40,960 --> 00:12:44,160
Als u een formulier verpakken in dat de gehele vorm gaat in de rij.

125
00:12:44,520 --> 00:12:46,570
En dan hebben we ook gesproken over Jumbotron.

126
00:12:46,900 --> 00:12:50,020
Zeer eenvoudige klasse gelijk Jumbotron.

127
00:12:50,110 --> 00:12:51,650
Zo kunt u een peer te zien.

128
00:12:51,970 --> 00:12:54,230
En dan zetten we alles binnen van een container.

129
00:12:54,460 --> 00:12:59,140
En als we te ontdoen van die container om te laten zien wat er gebeurt.

130
00:12:59,880 --> 00:13:04,950
Refresh al die afstand zo leuk marge verdwijnt.

131
00:13:05,200 --> 00:13:11,820
Dus containers leuke manier alleen maar om snel een beetje afstand op uw app maken dingen zien er vrij aardig.

132
00:13:12,140 --> 00:13:33,160
OK dus voordat ik uiteindelijk deze video zal ik 10 seconden besteden toont u een site die we gaan om een ​​applicatie die een volledige back-end database te bouwen aangesloten via knooppunt en te uiten en Mongo en mangoest en een bos van technologieën en we gebruiken bootstrap om de interface prototype te maken het relatief goed uitzien vrij snel en je kunt zien hebben we een Jumbotron hier.

133
00:13:33,160 --> 00:13:37,820
We zijn met behulp van enkele van de knoppen die we gebruiken het net voor dat ik later zal uitleggen.

134
00:13:37,960 --> 00:13:40,950
En dan als ik ga om in te loggen kunt zien hebben we een formulier.

135
00:13:41,260 --> 00:13:47,610
Dus dit zijn vorm controles die ik heb gestyled met behulp van het net, zodat het niet nemen van de gehele breedte van het scherm.

136
00:13:47,680 --> 00:13:50,070
Eerder duurt slechts tot deze kleine middelste gedeelte.

137
00:13:50,170 --> 00:13:52,700
Dus we zullen zien dat als we praten over de grid-systeem.