1
00:00:00,150 --> 00:00:20,160
Laten we nu eens verander de tekstkleur van de H-1 en de leeftijd van 3 op dit moment is dat donkere standaard bootstrap kleur hier zal gaan en we konden H-1 kleur wit en H-3 kleur wit te doen en te vernieuwen.

2
00:00:20,550 --> 00:00:22,790
En we krijgen witte tekst, net als dat.

3
00:00:22,950 --> 00:00:31,660
Maar we kunnen ook doen is echter een combinatie van deze twee omdat ze identiek en doen H-1 komma H-3 en dat zal deze beide wit te maken.

4
00:00:32,010 --> 00:00:34,750
Wanneer we hebben een komma kiest hij gewoon verschillende groepen.

5
00:00:34,770 --> 00:00:40,820
Dus alle tweelingen alle leeftijdsgroepen drieën en het ziet er precies hetzelfde.

6
00:00:41,400 --> 00:00:50,340
Maar we kunnen nog vereenvoudigen dit meer en gewoon toewijzen alles in het lichaam kleur wit zijn.

7
00:00:50,340 --> 00:00:56,790
En je zou denken dat er een probleem zou kunnen veranderen of de knop kan veranderen of nav bar, maar vergeet niet dat deze zijn specifieker.

8
00:00:56,790 --> 00:01:14,780
We hebben lessen van Bootstrap die doen dat ten opzichte van deze zijn gewoon H-1 en H-3 zij geen klassen of id's te hebben en ze makkelijker te overschrijven met hun eigen stijl door het instellen van het lichaam in wit de H1 en de leeftijd van drie geërfd die kleur en alles deed ook.

9
00:01:14,850 --> 00:01:16,030
Het was gewoon genegeerd.

10
00:01:16,050 --> 00:01:21,730
Dus als we geïnspecteerde laten we zeggen op deze knop en we een kijkje nemen.

11
00:01:22,650 --> 00:01:30,860
Toen we selecteren en je ziet dat de kleur is ingesteld op deze kleur is 3 3 3 door de klasse Button standaard.

12
00:01:30,990 --> 00:01:40,520
Maar als we blijven naar beneden scrollen zie je dat het lichaam hier ingesteld op wit en het gebeurt gewoon worden doorgestreept.

13
00:01:40,650 --> 00:01:41,390
Okee.

14
00:01:41,970 --> 00:01:44,900
Dus nogmaals gezegd dat het beiden te wit zijn.

15
00:01:44,910 --> 00:01:46,980
Laten we nu werken aan de lettergrootte.

16
00:01:47,160 --> 00:01:48,870
Dus zijn H-1.

17
00:01:48,930 --> 00:01:51,490
We willen dat het wordt gevouwen, die het op dit moment niet.

18
00:01:51,690 --> 00:02:11,570
Dus dat moet vet zijn en ik wil dat het 5 cm die vijf keer groter onthouden dan het bovenliggende element, zodat we een ieder zullen kiezen en we geven het een lettertype gewicht van 700 die is hoe we gebruik maken van de gedurfde refresh zijn .

19
00:02:11,970 --> 00:02:12,860
Je kunt zien dat het vet.

20
00:02:12,890 --> 00:02:21,100
Laten we nu maken het ook veel groter, zodat lettergrootte 5 E-M.

21
00:02:21,270 --> 00:02:24,480
Ga nu terug en daar gaan we.

22
00:02:24,680 --> 00:02:25,880
Dus dat is op zoek dichterbij.

23
00:02:25,880 --> 00:02:32,230
Nu deze verhouding tussen H1 en H-3 ziet er precies hetzelfde.

24
00:02:32,250 --> 00:02:37,590
We hoeven niet te doen om de H-3 te doen moet nu de afbeelding om de manier waarop we willen dat het gedragen.

25
00:02:37,980 --> 00:02:41,460
En om dat te doen ik ga je iets dat we niet eerder hebben gezien om te laten zien.

26
00:02:41,730 --> 00:02:52,190
Ik ga naar de donkere te verplaatsen naar de rechterkant en als ik inspecteer de hem uit in de leeftijd element of het lichaam zullen ze zien dat beiden stoppen voor het einde van de pagina.

27
00:02:52,200 --> 00:02:53,280
Dus over hier.

28
00:02:53,430 --> 00:02:55,500
Dat is het einde van het tijdperk aan mijn document.

29
00:02:55,500 --> 00:03:09,860
Dus toen ik mijn afbeelding vertellen om het lichaam te bedekken en ik zei dat het achtergrond grootte te dekken en de achtergrond positie centrum het rekening houdt met de grootte van het lichaam en wanneer het lichaam eindigt hier gedraagt ​​het zich anders te zijn.

30
00:03:10,080 --> 00:03:22,420
Wat zullen we doen om dit op te lossen is te geven de HTL element een hoogte van 100 procent, wat betekent het nemen van 100 procent van de houder, die is gewoon het hele document venster.

31
00:03:23,150 --> 00:03:30,450
Man hoogte van 100 procent en we zullen teruggaan.

32
00:03:30,840 --> 00:03:33,580
Laten we het volledige scherm af en vernieuwen.

33
00:03:33,950 --> 00:03:37,630
En ons imago werkt de manier waarop we verwachten dat het en ik krimpen.

34
00:03:37,860 --> 00:03:40,260
En dat ziet er goed uit voor mij ook.

35
00:03:40,260 --> 00:03:43,300
Nu hebben we twee belangrijke dingen vertrokken om zich te concentreren op.

36
00:03:43,430 --> 00:03:45,470
De eerste is de H.R ..

37
00:03:45,540 --> 00:03:50,540
Het is veel te groot voor ons dan ook een stuk kleiner zijn.

38
00:03:51,180 --> 00:03:54,010
En dan wil ik ook richten op het lettertype hier.

39
00:03:54,570 --> 00:04:01,170
Wel beginnen met het plukken van het kunstwerk en alles wat we willen doen is het eens met 400 pixels.

40
00:04:01,170 --> 00:04:12,410
Dus in onze C Ss We h te selecteren doen aan de onderkant met 400 pixels.

41
00:04:12,450 --> 00:04:13,550
Daar gaan we.

42
00:04:13,560 --> 00:04:23,460
Een ander ding dat ik dat zal doen is een beetje sneaky die je misschien niet zijn opgevallen als ik ga hier in te gaan en geef het een Forder bovenop.

43
00:04:23,460 --> 00:04:26,150
Een pixel vaste stof.

44
00:04:26,250 --> 00:04:31,620
Dan hebben ze hier een kleur die is f 8 8 8.

45
00:04:32,220 --> 00:04:41,920
En vervolgens een rand onderkant ook dat één pixel stevig en zal een transparante kleur.

46
00:04:41,960 --> 00:04:46,610
Nul nul nul nul punt twee.

47
00:04:46,830 --> 00:04:49,530
Dit zal dus niet geven het effect van een schaduw.

48
00:04:49,990 --> 00:04:50,800
Dus let.

49
00:04:50,820 --> 00:04:52,720
Het is echt moeilijk om te zien.

50
00:04:52,830 --> 00:05:08,490
Ik weet niet eens of ik zal ingaan op het scherm cast, maar wat we hebben is een grens en dan rechts onder de grens van een licht grijze lijn, dat maakt het kijken alsof er een lichte schaduw toont het een beetje beter over de lichtere kleuren.

51
00:05:08,900 --> 00:05:09,140
OK.

52
00:05:09,150 --> 00:05:15,050
Dus dat kan je niet genoeg zien of geloof me of u kunt zich te ontdoen van de achtergrondafbeelding te krijgen en het zal makkelijker om daar te zien ook.

53
00:05:16,050 --> 00:05:20,690
aandacht Laten we vervolgens op de icoontjes die ik gebruikte plezier geweldig voor.

54
00:05:20,690 --> 00:05:21,510
Dus ik heb hem open.

55
00:05:21,500 --> 00:05:21,780
Pret.

56
00:05:21,780 --> 00:05:22,320
Geweldig.

57
00:05:22,350 --> 00:05:23,180
Ik weet.

58
00:05:23,570 --> 00:05:25,980
En we zullen gewoon de cd in het hier ook.

59
00:05:26,370 --> 00:05:30,970
Als u klikt op get begonnen er een CDN dat je er gewoon kon kopiëren.

60
00:05:30,990 --> 00:05:40,370
Zet dat in onze applicatie en ook dat te doen op de top op te slaan en dan zullen we een blik op de actuele iconen nemen.

61
00:05:40,980 --> 00:05:45,030
En de eerste die we weten dat we gebruiken is een PA.

62
00:05:45,930 --> 00:05:51,310
En om het te doen alles wat we nodig hebben is high class ECO F A F Een streepje PA.

63
00:05:51,660 --> 00:05:53,630
Dus heb ik dat in de knop.

64
00:05:54,030 --> 00:05:59,350
Dus als we naar de knop vlak voordat ik aan de slag Ik voegde eraan toe dat in.

65
00:05:59,430 --> 00:06:08,820
Nu als we terug te gaan en te vernieuwen kunt u zien of we een kleine knop daar en we hebben een palmdruk komende we hebben twee iconen hier voor aanmelden en log in.

66
00:06:09,500 --> 00:06:11,760
En die twee Ik herinner me wat ze zijn.

67
00:06:11,790 --> 00:06:19,750
Ik ben gewoon gaan doen die hier naast aan te melden nadat we opschrijven weet dat je wilt toevoegen in een ander icoon.

68
00:06:19,860 --> 00:06:34,880
Behalve deze keer klasse niet F-8 PA maar F.A. dash gebruiker dash Plus, die ons dat pictogram met het plusteken geeft en log in is hetzelfde zonder de plus.

69
00:06:34,920 --> 00:06:40,160
Dus een streepje gebruiker en we hebben deze twee iconen.

70
00:06:40,250 --> 00:06:44,840
Er is een ander ding dat ik dat je misschien niet hebben gemerkt dat is de tekst schaduw.

71
00:06:45,030 --> 00:06:52,650
Dus er is een schaduw rond de tekst hier en zie het daar kan het hier zien.

72
00:06:52,640 --> 00:07:01,630
Het is rond de H-1 en de H-3 en tech schaduw is iets wat we kunnen stellen met de SS tekst streepje schaduw.

73
00:07:02,060 --> 00:07:04,010
En er is een soort van een heleboel stukken aan.

74
00:07:04,130 --> 00:07:08,040
Dus u kunt hier zien we de offset X de offset Y zitten.

75
00:07:08,120 --> 00:07:11,680
Dus hoe ver weg van de woorden moet de schaduw te gaan.

76
00:07:11,810 --> 00:07:16,240
Dan zijn we ook het instellen van de straal van die vervaagt Dus eigenlijk hoe dik moet zijn.

77
00:07:16,500 --> 00:07:21,430
En dan de kleur en de schaduw die ik gebruik is een beetje ingewikkeld.

78
00:07:21,480 --> 00:07:26,930
Er is een heleboel stukken, dus ik ga om te gaan en typ het een stuk op een moment in de CSSA bestand.

79
00:07:26,970 --> 00:07:34,620
Dus de binnenkant van de inhoud div zal toevoegen tekst streepje schaduw en dan zal de eerste te doen.

80
00:07:34,620 --> 00:07:48,210
Zero pixels 4 pixels 3 pixels en ik zal het echt voor de hand om te beginnen waardoor het rood en als ik verfrissen er de schaduw die we voor het eerst toevoegt.

81
00:07:48,260 --> 00:08:06,460
Ga nu en voeg de tweede met een komma en inspringen een beetje en dan willen we 0 pixels 8 pixels 13 pixels en vervolgens de oranje hier en neem een ​​kijkje op die ene.

82
00:08:07,350 --> 00:08:35,490
U kunt zien hebben we dit meer wazig één eronder is fel oranje en dan is er een derde schaduw die 0 pixels die onthoud dit eerste nummer is de X offset en vervolgens compensatie van de y 18 pixels en 23 pixels is de radius en we zullen maken dit een gele en we kunnen zien hebben we de felrode titer schaduw.

83
00:08:35,490 --> 00:08:37,730
En dan de oranje dat is een beetje verder weg.

84
00:08:37,830 --> 00:08:41,670
En dan de gele, dat is een stuk meer vervagen en veel breder.

85
00:08:41,700 --> 00:08:43,650
Dus we willen die kleuren veranderen.

86
00:08:43,640 --> 00:08:45,370
We willen niet te werken met dat.

87
00:08:45,450 --> 00:08:48,160
Zodat de kleuren zijn een beetje minder spannend.

88
00:08:48,210 --> 00:08:49,900
De eerste.

89
00:08:50,160 --> 00:08:54,740
Nul nul nul nul 0,4.

90
00:08:54,770 --> 00:09:01,550
Volgende vergelijkbaar in plaats van 0,4 0,1.

91
00:09:01,910 --> 00:09:06,210
En dan nog een, dat is ook 0.1.

92
00:09:06,210 --> 00:09:10,870
Dus met behulp van R.G. B-A we gewoon het instellen van verschillende tinten grijs.

93
00:09:11,970 --> 00:09:12,560
En daar gaan we.

94
00:09:12,600 --> 00:09:16,510
Zo veel minder spannend, maar hopelijk kun je hier nog zien.

95
00:09:16,560 --> 00:09:21,010
Het is een stuk subtieler, maar het voegt gewoon een beetje van diepte aan de pagina.

96
00:09:21,060 --> 00:09:21,330
Grote.

97
00:09:21,330 --> 00:09:22,830
Dus dat is alles wat we moeten doen.

98
00:09:23,250 --> 00:09:26,040
Laat me teruggaan en gewoon wikkel een paar dingen op.

99
00:09:26,040 --> 00:09:32,300
Het grote punt dat ik hier wil maken is dat we bootstrap kunnen gebruiken en vertrouwen op het, maar we zijn niet te vertrouwen op al haar modellen.

100
00:09:32,340 --> 00:09:40,760
Dus ja, we hielden de navigatiebalk hetzelfde, hoewel in de laatste video heb ik laten zien hoe je de navigatiebalk kleur zou veranderen, maar we veranderden de fonts we achtergrondafbeeldingen toegevoegd.

101
00:09:40,770 --> 00:09:47,730
Zodat we echt gebruik gewoon bootstrap als onderliggende fundering en dan voegen we in alle stijlen op de top en het duurde niet veel voor nodig.

102
00:09:47,850 --> 00:09:52,540
Maar ik denk dat we iets dat relatief respectabele met slechts een paar regels code ziet er gemaakt.

103
00:09:52,640 --> 00:09:56,580
En laten we eerlijk zijn de helft van alle vet deze tekst Shadowline zijn daar.

104
00:09:56,750 --> 00:09:57,310
Geweldig.

105
00:09:57,440 --> 00:10:00,230
Dus hebben we de site ziet er relatief goed.

106
00:10:00,270 --> 00:10:01,900
We zijn klaar met bootstrap voor nu.

107
00:10:01,980 --> 00:10:05,460
We vervolgens over te gaan tot Javascript in de volgende eenheid die is echt spannend.

108
00:10:05,690 --> 00:10:12,670
We zullen uit de buurt van het ontwerpen van websites en dingen die zien er leuk uit voor een klein beetje te bewegen gewoon zo dat we uitsluitend kunnen richten op Javascript.

109
00:10:12,810 --> 00:10:18,560
Maar dan zullen we alles weer bij elkaar te brengen en een aantal mooie bezienswaardigheden die eigenlijk dingen die niet gewoon zien er leuk uit te doen.

110
00:10:18,570 --> 00:10:22,160
Dus dat is binnenkort hopelijk genoten bootstrap genoten van dit toestel.

111
00:10:22,350 --> 00:10:25,900
En zoals altijd Ik stel voor dat u de code downloaden als u vragen hebt.

112
00:10:25,890 --> 00:10:27,950
Het is in de beschrijving van deze video.