1
00:00:00,180 --> 00:00:04,680
Welkom terug in deze les zal ik laten zien hoe je bootstrap installeren in uw eigen toepassingen.

2
00:00:04,740 --> 00:00:08,370
En dan als je eenmaal hebt gedaan dat ik zal je laten zien een aantal van de belangrijkste basisprincipes van het gebruik van toonhoogte.

3
00:00:08,850 --> 00:00:14,180
Dus ik ben op zich te bootstrap dot com alleen op de homepage en er is een link here download bootstrap.

4
00:00:14,850 --> 00:00:20,100
En het is niet echt een directe download link, want we hebben twee belangrijke keuzes voor hoe bootstrap gebruiken.

5
00:00:20,430 --> 00:00:24,340
We kunnen ofwel downloaden van de bestanden en ik doe dat om te beginnen.

6
00:00:24,530 --> 00:00:29,360
Dan kunnen we die bestanden te nemen en voeg ze toe in onze applicatie voordat we verder gaan.

7
00:00:29,430 --> 00:00:35,230
Ik heb een eenvoudige zoekopdracht team Ik zal indienen dat ik bel basic stuff h DML m l.

8
00:00:35,790 --> 00:00:40,770
En ik voeg gewoon een titel en we zullen gewoon toe te voegen in een paar verschillende elementen van de bootstrap.

9
00:00:40,800 --> 00:00:47,960
Als we eenmaal geïnstalleerd dus we zullen niets uitgebreide maken we gewoon gebruiken als een speeltuin voor enkele van de fundamentele bootstrap componenten.

10
00:00:48,510 --> 00:00:58,460
OK dus laten we beginnen met het toevoegen van slechts een eenvoudige H-1 bootstrap basics en op te slaan.

11
00:00:58,700 --> 00:01:01,790
En dan laten we dit openen in de browser.

12
00:01:03,240 --> 00:01:05,280
Gewoon houden dat er voor nu.

13
00:01:05,280 --> 00:01:06,690
Nu naar bootstrap installeren.

14
00:01:06,780 --> 00:01:08,190
Ik deed downloaden.

15
00:01:08,250 --> 00:01:13,720
Dus als ik het openstellen van dat bestand dat u kon zien binnenkant van hier is er een paar verschillende componenten.

16
00:01:13,830 --> 00:01:23,890
Er is een C S S directory en in de CCS directory zijn er nogal een paar bestanden, maar er is eigenlijk maar één belangrijk bestand dat wordt bootstrap up CSSA.

17
00:01:24,630 --> 00:01:27,710
En dit is eigenlijk hetzelfde bestand hier bootstrap-verbaal.

18
00:01:27,740 --> 00:01:32,290
SS behalve het is al minuten strijd zijn gekrompen naar beneden te nemen minder ruimte in beslag.

19
00:01:32,460 --> 00:01:36,280
Dus deze twee zijn de belangrijke bestanden daadwerkelijk te gebruiken bootstrap.

20
00:01:36,600 --> 00:01:43,370
En dit is een bootstrap thema alle drie van deze worden gebruikt om te helpen voeg een aangepast thema te bootstrappen zodat maakt niet zo veel.

21
00:01:43,380 --> 00:01:45,680
Alles wat we nodig hebben is bootstrappen Dotsie beoordelen.

22
00:01:45,780 --> 00:01:49,430
En we beginnen door gewoon te openen zodat u kunt zien wat we werken met.

23
00:01:49,470 --> 00:01:52,200
Dit is de belangrijkste bootstraps opnieuw geëvalueerd bestand.

24
00:01:52,770 --> 00:01:54,280
Het is gewoon een heleboel lessen.

25
00:01:54,300 --> 00:02:00,510
Als je kijkt naar elke regel van CSSA bijna is een klasse verklaring dot gewoon.

26
00:02:00,690 --> 00:02:05,340
En dan wat we kunnen doen is gebruik maken van deze klassen in plaats van onze applicaties.

27
00:02:05,340 --> 00:02:12,720
Dus als we willen een knop met witte tekst en een rode achtergrond gaan we dot knop gevaar toe te passen.

28
00:02:12,900 --> 00:02:14,510
En dat is wat het hier doet.

29
00:02:14,730 --> 00:02:19,590
Maar het gevaar heeft witte tekst een rode achtergrond en een rode grens.

30
00:02:19,650 --> 00:02:24,410
Dus laten we doorgaan en omvatten dit in onze applicatie, net als elk ander CSSA bestand.

31
00:02:24,750 --> 00:02:37,020
Dus wat ik doe is gewoon slepen het hier in dezelfde directory waar ik mijn fundamentele studie team en ik zou ook kunnen doen bootstrap-verbaal herwaarderen in plaats van deze.

32
00:02:37,020 --> 00:02:38,520
Het maakt eigenlijk niet uit.

33
00:02:38,550 --> 00:02:47,570
Technisch gezien deze laadt een beetje sneller, want als ik het open te stellen kun je zien dat het als een gigantische lijn al de witruimte is verwijderd.

34
00:02:47,850 --> 00:02:55,450
Dus het is makkelijker te laden, maar ik ga deze langere versie gebruik gewoon, zodat je precies kunt zien waar we mee werken.

35
00:02:55,470 --> 00:03:03,120
Nu gaan we in onze huidige bestand te gaan hier zal ik deze sluiten en we gaan bootstrap up CSX bevatten.

36
00:03:03,220 --> 00:03:16,310
Dus net als elke andere stylesheet moeten we een gekoppelde tag en de Tref is bootstrap dot C Ss en als we besparen en we zijn fris onze pagina hier vindt u een klein verschil merken.

37
00:03:16,320 --> 00:03:18,140
Kijk naar de doopvont op deze H-1.

38
00:03:18,420 --> 00:03:19,590
Het verandert.

39
00:03:19,620 --> 00:03:25,500
We hebben nu bootstrap hebben geïnstalleerd of op zijn minst de C Ss dat gaat samen met bootstrap en dat is alles wat we nodig hebben voor nu.

40
00:03:25,650 --> 00:03:35,310
We zullen niet werken met de javascript gewoon nog is er geen andere optie voor het installeren van bootstrap dat ze eigenlijk geven aan u op de Get bootstrap website hier.

41
00:03:35,400 --> 00:03:40,750
Bootstrap CDN kunnen we deze link hier te nemen en die toevoegen aan onze code.

42
00:03:41,010 --> 00:03:44,870
En het is een link naar een gehoste versie van diezelfde bestanden.

43
00:03:45,120 --> 00:03:56,900
Dus als we openen dat in de browser en plak deze in je kunt zien heeft de inhoud van de geminimaliseerde bestand en het wordt gehost op dit u r l dus we hebben een link naar dat u L R, dus ik kan vervangen dat.

44
00:03:56,970 --> 00:03:57,540
Een andere link.

45
00:03:57,540 --> 00:04:01,530
Tag en plakken dat je Ellen en ik zal dit één commentaar.

46
00:04:01,530 --> 00:04:04,230
Voor nu en terug te gaan en te vernieuwen.

47
00:04:04,380 --> 00:04:06,020
En niets verandert.

48
00:04:06,030 --> 00:04:16,650
Het enige verschil is dat in het eerste geval het bestand gedownload op onze computer die werden linken naar en in het tweede geval zijn we koppelen aan een extern bestand dat wordt gehost op de lijn hadden we.

49
00:04:16,650 --> 00:04:20,750
Laten we nu eens naar de bootstrap docs en beginnen met spelen of een deel van deze componenten.

50
00:04:21,240 --> 00:04:29,150
Dus ga terug bootstrap te krijgen en laten we klik op C Ss en ik ga gewoon wijzen op een aantal van de belangrijkste stukken die we zullen gebruiken.

51
00:04:29,400 --> 00:04:31,940
Dus laten we beginnen eenvoudig met knoppen.

52
00:04:32,460 --> 00:04:49,220
Willen we een knop alles wat we moeten doen is gebruik maken van een geslagen klasse, gevolgd door een soort knop die tussen de standaard die ons een witte knop zal geven gebruiken, maar dat is ook VTAM primaire toegang BATNA info.

53
00:04:49,260 --> 00:04:54,080
Waarschuwing gevaar en verbinding en ze zijn allemaal een beetje anders vormgegeven.

54
00:04:54,240 --> 00:05:02,500
En natuurlijk kunnen we deze kleuren op onze eigen te veranderen, maar we gaan gewoon gebruik maken van de ingebouwde in een keer om te beginnen en is hij ook te zien hier.

55
00:05:02,700 --> 00:05:08,600
We hoeven niet alleen gebruik maken van een knop element kunnen we een anker tag een knop of een ingang te gebruiken.

56
00:05:08,820 --> 00:05:10,720
Dus laten we proberen dat uit.

57
00:05:11,730 --> 00:05:13,030
Hello deze H-1.

58
00:05:13,230 --> 00:05:25,860
Laten we gewoon toe te voegen in een knop tag en deze knop labels gewoon zeggen click me en net Vernieuw de pagina op dit moment en een kijkje nemen op dat.

59
00:05:25,950 --> 00:05:27,310
Dat is vrij lelijk knop.

60
00:05:27,690 --> 00:05:39,200
Maar als we gaan en voeg die klasse PTEN en vervolgens tussen laten we het doen succes en besparen we nu krijgen deze geweldige groene knop.

61
00:05:39,330 --> 00:05:41,870
Dus vrij gemakkelijk te krijgen een aantal fundamentele stijlen gaan.

62
00:05:42,190 --> 00:05:50,110
En laten we teruggaan en ik geef je een paar andere dingen over knoppen die verschillende maten die we net zo goed kunt gebruiken zijn te laten zien en het is echt gemakkelijk.

63
00:05:50,130 --> 00:06:00,500
We hoeven alleen maar toe te voegen in één van beide knoppen grote en kleine knop of een extra klein, zodat het heeft geprobeerd na knop succes en het hoeft niet te gaan na het.

64
00:06:00,510 --> 00:06:09,740
Maakt niet uit de volgorde van de klassen, maar ik doe het na hier DTN en laten we het doen extra kleine en vernieuw uw pagina.

65
00:06:09,750 --> 00:06:11,170
Daar gaan we.

66
00:06:11,170 --> 00:06:30,480
Ik zal dit bewegen over nu en laten we toe te voegen in een paar knoppen, maar deze zal een anker tag en dit zal in een tag of we moeten HF evenaart aan DP colon slash slash dat elke dag te lezen krijgen bootstrap dot com en vervolgens de tekst zal gewoon zeggen bootstrap docs.

67
00:06:30,550 --> 00:06:47,330
Dus maken dit een beetje groter en dan zal toevoegen in de klas in de klas moet evenaren PTEN en laten we het doen tussen Desch info en zal het grote PTEN dash Elgie te maken en te vernieuwen.

68
00:06:47,340 --> 00:06:48,690
We hebben nu twee knoppen.

69
00:06:48,750 --> 00:06:50,620
Een daarvan is een echte knop element.

70
00:06:50,620 --> 00:06:55,210
Een ander heeft een anker tag en als ik hierop klikt kun je het zien als een anker-tag.

71
00:06:56,340 --> 00:07:01,200
Dus al in de eerste minuut van het gebruik van bootstrap we in staat geweest om fatsoenlijk kijken knoppen te krijgen zijn.

72
00:07:01,370 --> 00:07:05,330
Het zou 10 tot 15 lijnen van CSSA hebben gemaakt op onze eigen te repliceren.

73
00:07:05,760 --> 00:07:06,960
Laten we nu teruggaan.

74
00:07:06,990 --> 00:07:10,980
Maak deze fullscreen weer en ik geef je een paar andere dingen over knoppen weer te geven.

75
00:07:11,220 --> 00:07:12,720
Dus hebben we maten.

76
00:07:12,750 --> 00:07:21,080
We hebben ook verschillende staten waar we kunnen maken op een knop lijkt alsof het actief en te doen dat we voeg gewoon de actieve klasse.

77
00:07:21,390 --> 00:07:43,590
Dus als we proberen dat nu laten we voeg een enkele knop, dus ik ga naar onze kleine miniatuur Klik op mij knop dupliceren drie keer en op het laatste nummer op de middelste van de klas actieve en verfrissen en je kunt hopelijk zien dat verschijnt goed genoeg op het scherm geworpen dat dit één actieve verschijnt.

78
00:07:43,620 --> 00:07:49,290
Laten we terug gaan en we kunnen ook een knop uit te schakelen door het toevoegen in dit kenmerk.

79
00:07:49,290 --> 00:07:51,850
Gehandicapte gelijk uitgeschakeld.

80
00:07:52,440 --> 00:07:57,950
Laten we terug gaan en laten we de laatste refresh uit te schakelen.

81
00:07:58,180 --> 00:08:00,020
En nu deze knop is uitgeschakeld.

82
00:08:00,120 --> 00:08:01,940
We krijgen die leuke icoon.

83
00:08:02,070 --> 00:08:05,110
Het duurt niet een hover effect waar het van kleur verandert niet meer te hebben.

84
00:08:05,220 --> 00:08:07,460
Het is duidelijk een knop uitgeschakeld.

85
00:08:07,560 --> 00:08:18,630
Great laatste wat ik zal je laten zien, zodat we kunnen de kleuren weer te veranderen, zodat de knop gevaar nacht geeft ons dat oranjerood en je kunt alle kleuren hier te zien.

86
00:08:18,870 --> 00:08:25,850
En natuurlijk kan je die door het overschrijven van de stijlen te wijzigen, zodat je zoiets als dit zou kunnen doen in plaats van een andere style sheet.

87
00:08:25,860 --> 00:08:27,270
Ik doe het gewoon hier voor nu.

88
00:08:27,330 --> 00:08:32,330
Dus we gaan gewoon om één lijn te doen en ook als schoonheid en gevaar.

89
00:08:32,460 --> 00:08:51,550
We kunnen de kleur oranje te zijn en nu zou kunnen zijn om de Texas orange in gevaar brengen en als ik wilde de achtergrond ik kon doen eigenlijk verandert de achtergrond is oranje en dat is hoe je in kunt gaan en overschrijven de stijlen, zodat je niet hoeft te gebruiken wat bootstrap geeft je out of the box.

90
00:08:52,200 --> 00:08:53,580
En de meeste plaatsen niet.

91
00:08:54,030 --> 00:08:56,940
OK dus dat is knopen en dat is alles wat ik ga doen in deze video.

92
00:08:56,940 --> 00:09:00,300
Ik wilde alleen maar om u een erg snel voorproefje van hoe bootstrap werkt geven.

93
00:09:00,300 --> 00:09:13,540
Dit patroon van het toevoegen van klassen om bestaande elementen en die zijn gedefinieerd in die bootstrap dat CSSA bestand in de volgende video ga ik een aantal van de andere belangrijke stukken die komen met bootstrap inclusief formulieren en ingangen markeren.