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.
En we krijgen witte tekst, net als dat.
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.
Wanneer we hebben een komma kiest hij gewoon verschillende groepen.
Dus alle tweelingen alle leeftijdsgroepen drieën en het ziet er precies hetzelfde.
Maar we kunnen nog vereenvoudigen dit meer en gewoon toewijzen alles in het lichaam kleur wit zijn.
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.
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.
Het was gewoon genegeerd.
Dus als we geïnspecteerde laten we zeggen op deze knop en we een kijkje nemen.
Toen we selecteren en je ziet dat de kleur is ingesteld op deze kleur is 3 3 3 door de klasse Button standaard.
Maar als we blijven naar beneden scrollen zie je dat het lichaam hier ingesteld op wit en het gebeurt gewoon worden doorgestreept.
Okee.
Dus nogmaals gezegd dat het beiden te wit zijn.
Laten we nu werken aan de lettergrootte.
Dus zijn H-1.
We willen dat het wordt gevouwen, die het op dit moment niet.
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 .
Je kunt zien dat het vet.
Laten we nu maken het ook veel groter, zodat lettergrootte 5 E-M.
Ga nu terug en daar gaan we.
Dus dat is op zoek dichterbij.
Nu deze verhouding tussen H1 en H-3 ziet er precies hetzelfde.
We hoeven niet te doen om de H-3 te doen moet nu de afbeelding om de manier waarop we willen dat het gedragen.
En om dat te doen ik ga je iets dat we niet eerder hebben gezien om te laten zien.
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.
Dus over hier.
Dat is het einde van het tijdperk aan mijn document.
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.
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.
Man hoogte van 100 procent en we zullen teruggaan.
Laten we het volledige scherm af en vernieuwen.
En ons imago werkt de manier waarop we verwachten dat het en ik krimpen.
En dat ziet er goed uit voor mij ook.
Nu hebben we twee belangrijke dingen vertrokken om zich te concentreren op.
De eerste is de H.R ..
Het is veel te groot voor ons dan ook een stuk kleiner zijn.
En dan wil ik ook richten op het lettertype hier.
Wel beginnen met het plukken van het kunstwerk en alles wat we willen doen is het eens met 400 pixels.
Dus in onze C Ss We h te selecteren doen aan de onderkant met 400 pixels.
Daar gaan we.
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.
Een pixel vaste stof.
Dan hebben ze hier een kleur die is f 8 8 8.
En vervolgens een rand onderkant ook dat één pixel stevig en zal een transparante kleur.
Nul nul nul nul punt twee.
Dit zal dus niet geven het effect van een schaduw.
Dus let.
Het is echt moeilijk om te zien.
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.
OK.
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.
aandacht Laten we vervolgens op de icoontjes die ik gebruikte plezier geweldig voor.
Dus ik heb hem open.
Pret.
Geweldig.
Ik weet.
En we zullen gewoon de cd in het hier ook.
Als u klikt op get begonnen er een CDN dat je er gewoon kon kopiëren.
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.
En de eerste die we weten dat we gebruiken is een PA.
En om het te doen alles wat we nodig hebben is high class ECO F A F Een streepje PA.
Dus heb ik dat in de knop.
Dus als we naar de knop vlak voordat ik aan de slag Ik voegde eraan toe dat in.
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.
En die twee Ik herinner me wat ze zijn.
Ik ben gewoon gaan doen die hier naast aan te melden nadat we opschrijven weet dat je wilt toevoegen in een ander icoon.
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.
Dus een streepje gebruiker en we hebben deze twee iconen.
Er is een ander ding dat ik dat je misschien niet hebben gemerkt dat is de tekst schaduw.
Dus er is een schaduw rond de tekst hier en zie het daar kan het hier zien.
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.
En er is een soort van een heleboel stukken aan.
Dus u kunt hier zien we de offset X de offset Y zitten.
Dus hoe ver weg van de woorden moet de schaduw te gaan.
Dan zijn we ook het instellen van de straal van die vervaagt Dus eigenlijk hoe dik moet zijn.
En dan de kleur en de schaduw die ik gebruik is een beetje ingewikkeld.
Er is een heleboel stukken, dus ik ga om te gaan en typ het een stuk op een moment in de CSSA bestand.
Dus de binnenkant van de inhoud div zal toevoegen tekst streepje schaduw en dan zal de eerste te doen.
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.
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.
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.
En dan de oranje dat is een beetje verder weg.
En dan de gele, dat is een stuk meer vervagen en veel breder.
Dus we willen die kleuren veranderen.
We willen niet te werken met dat.
Zodat de kleuren zijn een beetje minder spannend.
De eerste.
Nul nul nul nul 0,4.
Volgende vergelijkbaar in plaats van 0,4 0,1.
En dan nog een, dat is ook 0.1.
Dus met behulp van R.G. B-A we gewoon het instellen van verschillende tinten grijs.
En daar gaan we.
Zo veel minder spannend, maar hopelijk kun je hier nog zien.
Het is een stuk subtieler, maar het voegt gewoon een beetje van diepte aan de pagina.
Grote.
Dus dat is alles wat we moeten doen.
Laat me teruggaan en gewoon wikkel een paar dingen op.
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.
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.
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.
Maar ik denk dat we iets dat relatief respectabele met slechts een paar regels code ziet er gemaakt.
En laten we eerlijk zijn de helft van alle vet deze tekst Shadowline zijn daar.
Geweldig.
Dus hebben we de site ziet er relatief goed.
We zijn klaar met bootstrap voor nu.
We vervolgens over te gaan tot Javascript in de volgende eenheid die is echt spannend.
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.
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.
Dus dat is binnenkort hopelijk genoten bootstrap genoten van dit toestel.
En zoals altijd Ik stel voor dat u de code downloaden als u vragen hebt.
Het is in de beschrijving van deze video.