1
00:00:00,270 --> 00:00:08,110
Welkom terug in het apparaat Ik ga een nieuwe tool genaamd Bootstrap introduceren en ik ben op de bootstrap homepage krijgen bootstrap dotcom.

2
00:00:08,330 --> 00:00:13,180
En ik wil gewoon een paar minuten duren in deze intro video uit te leggen wat bootstrap is en waarom we gebruiken het.

3
00:00:13,230 --> 00:00:17,100
En dan ook nog aan te tonen u een paar voorbeelden van sites die bootstrap gebruiken.

4
00:00:17,100 --> 00:00:20,350
Dus laten we beginnen gewoon door het lezen van de officiële bootstrap blurb.

5
00:00:20,610 --> 00:00:28,310
Bootstrap is de populairste TMLC SS in javascript kader voor de ontwikkeling van responsieve mobiele eerste projecten op het web.

6
00:00:28,710 --> 00:00:30,460
Laten we breken die naar beneden een beetje.

7
00:00:30,480 --> 00:00:32,540
Bootstrap is zeer populair.

8
00:00:32,580 --> 00:00:47,550
In feite is het de meest speelde en gevorkte repository krijgen hub die in feite betekent dat het de meeste mensen gebruiken de meeste mensen gunst te voegen krijgen hulp en alles wat bootstrap is eigenlijk een enkel bestand van succes en een enkel bestand van javascript .

9
00:00:47,550 --> 00:00:54,180
Nu is er een heleboel C S S en veel javascript in die bestanden, maar ze zijn gewoon twee bestanden en kunnen we ze op te nemen in onze eigen applicatie.

10
00:00:54,180 --> 00:01:05,950
In principe nemen we de code van iemand anders en naar Bootstrap we toegevoegd aan onze eigen applicatie en het helpt ons goed uitziende sites die responsief zijn en het helpt ons hen snel te maken zonder dat u een ton van onze eigen code te schrijven.

11
00:01:05,970 --> 00:01:08,760
Er zijn twee belangrijke redenen dat ik het heb laten zien om u in deze cursus.

12
00:01:08,760 --> 00:01:10,890
De eerste is dat het erg populair.

13
00:01:10,890 --> 00:01:11,850
Veel plaatsen gebruiken.

14
00:01:11,850 --> 00:01:15,560
Veel bedrijven veel ontwikkelaars gebruiken en het is gewoon de moeite waard te weten.

15
00:01:15,690 --> 00:01:20,640
Maar de tweede is dat het gaat om ons te helpen goed uitziende websites vrij snel in deze cursus.

16
00:01:20,640 --> 00:01:40,020
Dus als we leren rug en spullen als we focussen op Node en uiten en Mongo en mangoest en knie diep en al van dit complex terug en logica kunnen we nog steeds iets dat ziet er goed uit te maken, zonder dat om een ​​uur of twee uur te wijden video om iets te stylen kunnen we bootstrap inpluggen en we kunnen dingen naar binnen 10 15 minuten en we zullen er goed uitzien.

17
00:01:40,020 --> 00:01:50,840
Het volgende wat ik zal doen is geven u een korte rondleiding van de haven, maar bootstrap heeft beroemde goede documentatie tal van goede voorbeelden en ze gebruiken eigenlijk bootstrap op deze website wat logisch is.

18
00:01:51,060 --> 00:02:00,250
Dus laten we beginnen door te klikken op C Ss en dat is het vermeld bootstrap is slechts een enkele CSSA bestand één JavaScript-bestand binnen die CSSA bestand.

19
00:02:00,300 --> 00:02:02,560
Er is een heleboel dingen die we gratis te krijgen.

20
00:02:02,610 --> 00:02:05,420
Dus laten we een kijkje nemen op Knoppen.

21
00:02:05,460 --> 00:02:16,680
Dus als we willen om een ​​knop te maken en we hebben bootstrap opgenomen in onze applicatie kunnen we deze klasse toe te voegen aan de klas is eigenlijk Beati en PTEN standaard en we krijgen deze knoppen.

22
00:02:17,010 --> 00:02:18,840
Wij kunnen verschillende kleuren te doen.

23
00:02:19,470 --> 00:02:21,260
Laten we eens een kijkje nemen op formulieren.

24
00:02:21,360 --> 00:02:22,870
We krijgen leuke ingangen hier.

25
00:02:23,310 --> 00:02:31,890
En het is ook erg belangrijk op te merken alles reageert op de site zodat u kunt zien we de dingen die inspelen op de breedte van het scherm te krijgen.

26
00:02:32,250 --> 00:02:34,060
We hebben ook verschillende vormen.

27
00:02:34,080 --> 00:02:35,680
U kunt de verschillende onderdelen te combineren.

28
00:02:35,700 --> 00:02:38,330
Dus hier zijn ze met behulp van een knop met een formulier.

29
00:02:38,400 --> 00:02:46,660
Dus het is net als Lego stukken bootstrap en een heleboel manieren het is gewoon van Lego stukken zijn geweest dat je bij elkaar kunt zetten en toe te voegen aan uw site als het je past.

30
00:02:46,740 --> 00:02:48,690
We zullen gaan over de meeste van deze componenten.

31
00:02:48,720 --> 00:02:53,800
De meeste van deze grote stukken als we eenmaal beginnen te werken met het en het schrijven van bootstrap code onszelf.

32
00:02:54,270 --> 00:03:05,750
Dus voor nu zullen we verder gaan en wanneer u het volgende tabblad die componenten componenten bevatten enkele van de grotere stukken van bootstrap die we kunnen gebruiken en dat omvat zaken als nav bars laten zien.

33
00:03:05,940 --> 00:03:13,680
En dit is waarschijnlijk een van de meest populaire aspecten van bootstrap die veel en veel sites gebruiken zoals je kunt zien met een beetje van de code.

34
00:03:13,710 --> 00:03:19,680
Het ziet er als een hoop, maar ik verzeker je dat het een stuk minder dan het zou zijn als we een NAV bar van de grond af aan het schrijven waren.

35
00:03:19,680 --> 00:03:30,660
En dit komt met drop downs vorm en er zijn meerdere soorten bars verschillende kleuren een aantal die zijn bevestigd aan de bovenkant van de pagina een aantal dat zal scrollen.

36
00:03:30,690 --> 00:03:38,390
Er zijn andere componenten, zoals de Jumbotron dat is een manier van presentatie van een aantal content op uw website vooruitgang bars.

37
00:03:38,670 --> 00:03:40,330
En deze zijn allemaal voorzien van bootstrap.

38
00:03:40,680 --> 00:03:48,970
Dus je zou nu afvragen of bootstrap gaat om al deze stukken en ze zijn al vooraf gestileerd wat elke site die bootstrap gebruikt zag er hetzelfde.

39
00:03:49,320 --> 00:03:50,760
En het antwoord is ja en nee.

40
00:03:50,760 --> 00:03:53,240
Het hangt af van hoe de site maakt gebruik van bootstrap.

41
00:03:53,760 --> 00:04:04,490
Ik zou zeggen dat een bedrijf of een project dat gebruik maakt van bootstrap goed maakt het moeilijk om te vertellen dat ze daadwerkelijk gebruik maakt van bootstrap, omdat ze gebruik maken van de belangrijkste componenten en dan kun je gaan en schrijf uw eigen stijl op de top.

42
00:04:04,500 --> 00:04:07,860
Verander de kleuren van de doopvonten te veranderen een aantal van de hover-effecten.

43
00:04:07,920 --> 00:04:17,670
Je hoeft niet exact dezelfde kleuren en alles die met bootstrap gebruiken, maar dat betekent niet dat er iets inherent slecht in het gebruik van de ingebouwde Bootstrap stijlen van beide.

44
00:04:17,670 --> 00:04:19,080
En we zullen zeker beide doen.

45
00:04:19,200 --> 00:04:25,290
Dus als we het maken van een site en een focus is niet echt op de front-end we willen gewoon iets dat snel toonbaar uitziet te maken.

46
00:04:25,290 --> 00:04:30,310
In principe prototype front-end zal bootstrap gebruiken en we zullen niet echt aan te passen veel stukken.

47
00:04:30,780 --> 00:04:42,580
Maar als we werken aan iets een beetje groter iets dat we niet willen kijken als we gebruiken bootstrap zonder iets te veranderen helemaal dan gaan we in gaan en voeg een aantal van onze eigen stijlen in principe toe een likje verf op de top van bootstrap.

48
00:04:42,600 --> 00:04:50,740
Het volgende wat ik wil doen is te laten zien u enkele van de sites die zijn gebouwd met bootstrap en Buddh reis daadwerkelijk heeft een officiële website, waar ze presenteren een aantal van die sites.

49
00:04:50,970 --> 00:04:54,330
Als u klikt op de Expo Ik heb het al te openen.

50
00:04:54,330 --> 00:05:01,890
Je kunt zien dat ze showcase mooi en inspirerend maakt gebruik van een bootstrap, zodat we kunnen een aantal van deze te openen voor hen en nieuwe tabbladen te openen.

51
00:05:02,270 --> 00:05:03,870
En dit zijn slechts de meest recente.

52
00:05:03,870 --> 00:05:05,390
Er zijn honderden op deze site.

53
00:05:05,420 --> 00:05:14,660
U kunt tonnen en tonnen van hen zien en je kunt blijven scrollen en scrollen en dan kunnen we naar een paar oudere en er er is zo veel verschillende sites die worden gebruikt.

54
00:05:15,000 --> 00:05:17,050
En ze niet echt allemaal hetzelfde uitzien.

55
00:05:17,610 --> 00:05:20,190
Ja misschien veel van hen hebben een navigatiebalk.

56
00:05:20,190 --> 00:05:28,450
Misschien een heleboel van hen hebben deze full screen grote afbeelding lay-out, maar dat is meer een ontwerp trend dan iets dat bootstrap het puur verantwoordelijk voor.

57
00:05:28,980 --> 00:05:30,890
Dus laten we eens een kijkje bij enkele van deze.

58
00:05:30,930 --> 00:05:36,400
Deze is creatief Tim dat is een bedrijf dat website templates maakt eigenlijk.

59
00:05:36,630 --> 00:05:40,330
En je kunt zien hebben we deze mooie raster van afbeeldingen.

60
00:05:40,500 --> 00:05:41,600
Het is zeer responsief.

61
00:05:41,610 --> 00:05:46,710
Als ik dit krimpen krijgen we onze kleine nav bar hier.

62
00:05:46,920 --> 00:05:52,660
Dus dit is een bootstrap component de manier waarop alles in dit rooster wordt gelegd.

63
00:05:52,890 --> 00:05:59,540
Bootstrap is gedeeltelijk verantwoordelijk voor dat, maar je kunt ook zien dat ze niet met behulp van de standaard ingebouwde Bootstrap knoppen.

64
00:05:59,580 --> 00:06:00,710
Ze hebben ze veranderd.

65
00:06:00,780 --> 00:06:01,960
Het ziet er anders uit.

66
00:06:02,190 --> 00:06:06,130
Dus ik denk dat dit is echt een mooi gebruik van bootstrap dat is echt een leuk uitziende website.

67
00:06:06,180 --> 00:06:12,170
Het werkt goed en gebruikt bootstrap maar niet afhankelijk bootstrap 100 procent.

68
00:06:13,080 --> 00:06:15,120
Laten we eens een kijkje nemen op een of twee meer.

69
00:06:15,480 --> 00:06:19,640
Dus deze is Indicus gebeld of indices iets dergelijks.

70
00:06:19,710 --> 00:06:24,200
Blijkbaar zijn ze ontwerpen en bouwen van digitale producten die mensen genieten van het gebruik.

71
00:06:24,240 --> 00:06:25,520
Dus laten we scroll down hier.

72
00:06:25,680 --> 00:06:26,980
Neem een ​​kijkje op wat we hebben.

73
00:06:27,270 --> 00:06:37,500
Dus er is wat content die waarschijnlijk is gebouwd met de bootstrap rooster systeem dat helpt bij het organiseren en leg dingen uit lay-out zoals ik al eerder heb gezegd is notoir moeilijk Pearcey SS.

74
00:06:37,560 --> 00:06:42,910
Het wordt steeds beter, maar bootstrap is echt heel handig om ons te helpen dingen lay-out op onze applicatie.

75
00:06:43,260 --> 00:07:05,930
En we hebben een kleine voettekst bar is er een navigatiebalk hier dus het is echt leuk om te gaan bootstrappen Expo neem de tijd om een ​​aantal van de projecten die vroeger bootstrappen en verken te zien hoe ze het gebruiken en al de verschillende manieren waarop bedrijven wijzigt het toe te voegen in hun eigen fonts hun eigen kleuren en echt erachter te komen wat zijn de belangrijkste componenten die veel en veel van de sites gebruikt en waarom besluiten om bootstrap gebruiken.

76
00:07:06,170 --> 00:07:14,970
En naar mijn mening is echt komt neer op de grid systeem dat we een video van dit toestel zal wijden en de nav bars en het reactievermogen van alles.

77
00:07:15,420 --> 00:07:15,710
OK.

78
00:07:15,720 --> 00:07:20,230
Dus om wrap up ga ik je laten zien een eenvoudige site die we zullen maken.

79
00:07:20,280 --> 00:07:23,110
Dit is onze startup genaamd zware kinderboerderij.

80
00:07:23,190 --> 00:07:28,200
Het helpt u uw perfecte katachtige soulmate te vinden en het gebruik van bootstrap.

81
00:07:28,200 --> 00:07:33,610
U kunt zien hebben we een navigatiebalk hier net als dat we aanmelden Morgan knoppen.

82
00:07:33,630 --> 00:07:39,970
We krijgen deze kleine pictogrammen dan hebben we onze tekst hier en de kleine tag lijn en dan is onze knop.

83
00:07:40,290 --> 00:07:47,060
En vervolgens als ik dingen verkleinen alles reageert u kunt zien de dingen bewegen verschuiven rond.

84
00:07:47,190 --> 00:07:52,660
En het belangrijkste krijgen we dat kleine hamburger en we hebben een mobiele vriendelijke nav bar.