Welkom terug in deze les gaan we bootstrap gebruiken om een ​​landing page voor een fictieve opstarten.
Onze startup heet perfecte match.
Heel grappig.
Ik weet dat het een mens katachtige dating app en ik laat het aan u om te interpreteren wat de mens katachtige dating is het misschien relatief onschuldig het kon gewoon matching Sheldrick katten met eenzame mensen iets anders zou kunnen zijn.
Ik weet het niet.
Laten we beginnen door het doen van een snelle rondleiding van de site en haar schrijven.
Ik bedoel gewoon te wijzen op een aantal kenmerken.
Er is niet veel hier.
We hebben niet echt dit vastgehaakt dat heeft nog niets.
Dus het is eigenlijk gewoon HD mounseers s, maar dat is alles wat we tot nu toe hebben besproken.
Dus we hebben genoeg onze perfecte match home over inContact lengtes.
Ze eigenlijk niet overal naartoe te gaan aanmelden en log in aan de rechterkant twee kleine pictogrammen daar krijgen we haar hamburger.
Ik kan klikken.
Al deze banden zijn nu in die hamburger.
Dan hebben we een grote achtergrondafbeelding die gecentreerd blijft en bestrijkt het gehele achtergrond.
Dus in het midden hebben we de naam van onze start-up perfecte match met de onze en dan hebben we onze titel De enige menselijke voeding over dating app.
En dan hebben we een beetje H R hier horizontale lijn en vervolgens een knop aan de slag met een pictogram.
En zoals ik krimpen dit alles blijft in het midden en het beweegt ook een beetje, zodat we niet een soort van onhandige lay-out op uw mobiele apparaat, waar de tekst begint halverwege de pagina hebben.
Dus gaan we er een beetje en het blijft gecentreerd.
Deze lay-outs echt makkelijk te doen en bootstrap maar het is relatief doeltreffend voor de landing page.
Alles wat we hebben is een enkele kolom die beslaat de gehele breedte.
Dus deze column gaat 12 eenheden over.
We zijn niet te delen tot in alle secties slechts één kolom 12 eenheden over en vervolgens centreren we alles binnen van die kolom.
Dus laten we beginnen.
Het eerste wat we moeten doen is het maken van een bestand.
Ik heb een zogenaamde index DML.
Ik zal dit toe te voegen in mijn gewone standaardtekst perfecte match en dan beginnen met het toevoegen van Bootstrap en ik zal een CDN Bitstrips CDN te gebruiken.
Laten we de SS en Javascript doen hier.
We zullen dat javascript voor de taakbalk nodig.
Dus moeten we tag te koppelen.
Dan krijgen we de javascript.
Kopieer dat.
Zet deze neer op de bodem die een script-tag en dan zetten we de bron gelijk aan die je bent.
Nu, als we dit openstellen OK openstellen van de console hebben we een klein probleem en dat is dat we Jay-query ook in het oog voor de bootstrap javascript nodig.
Vergeet niet terug uit de nav bar les die we nodig hebben om te eisen J.
Querrey.
Dus we een CDN te krijgen voor dat.
We zullen de gewijzigde versie te doen.
Kopieer die URL.
En tot slot gaan we hier terug en we moeten het doen voor de gekoppeld aan bootstrappen aan de javascript.
Anders zal het nog steeds niet weten over uw vraag, zodat het nodig heeft om de query eerst te laden.
Laten we nu opnieuw proberen.
Fire refresh.
OK we zien niet iets dat is een goed teken, want we hebben geen fouten te zien.
Laten we beginnen met de tekst in het midden.
Al deze inhoud.
Dus moeten we een container te maken en vervolgens in de container moeten we een rij om div class ECO container en vervolgens de binnenkant van daar hebben we een ander div we die rij altijd nodig.
Anytime we gebruiken het net en dan is onze div dat gaat naar de klas gelijk aan kolom dash grote 12 zijn.
En dat zal de hele weg over die container overspannen.
En dan binnen als ze gaan om een ​​H1 dat gewoon zeggen perfecte match en op te slaan.
En laten we het bij laten vernieuwen.
En het is niet echt wat we willen nog en dat is omdat er een paar dingen die we moeten doen.
De eerste is dat we nodig hebben om alles in die kolom te centreren.
Dus als we controleren wat we hier te maken met je kon zien dat de H1 gaat helemaal over en we hoeven alleen maar om het centrum binnen van dat.
En de tweede is dat we nodig hebben om te duwen een beetje.
We moeten een aantal padding of marge toe te voegen, zodat niet recht naar de top van onze pagina.
Laten we beginnen met het toevoegen in de rest van de inhoud.
Zo hebben we ook de enige mens katachtige dating app en dat zal alleen maar een H 3 en we konden echt spelen met dat elk element dat we willen kunnen zijn, maar ik zal het een H-3 de enige mens dash katachtige dating app te maken.
En dan kunnen we u in deze horizontale lijn die niet uitzien als veel, maar we zullen het stylen na de feiten en dan zullen we ook op een knop toe te voegen in de klas op die knop.
We nemen een kijkje.
Dit is een bootstrap knop standaard en het is een grote knop.
Laten we terug gaan.
Dus we moeten PTEN en vervolgens de kleur standaard en vervolgens de grootte tussen LG voor grote en hier zullen we voeg gewoon de tekst, die de slag te gaan en op te slaan laten we zien wat we eindigen met.
Okee.
Dus hebben we onze content nu naast, maar Center binnenkant van het rooster.
En dan zullen we ons richten op de vulling en het verplaatsen van het naar beneden.
Maar om te beginnen met het centrum binnen dit raster en te maken dat gemakkelijker ik ga groep het allemaal binnenkant van een div, zodat we niet hoeven te iedere zaak afzonderlijk te centreren.
We moeten naar het centrum van de H-1 en vervolgens de drie en vervolgens op de knop in plaats kunnen we groep in een div en net Center dat afd met één lijn.
Laten we een div en ik geef het een ID van Cantet en dan zullen we alles te zetten binnen van daar.
Dus de H-1 de leeftijd 3 de H.R. en de knop zal behoorlijk streepje, en op te slaan.
Dus niets moet er anders uitzien als ik de pagina vernieuwen voordat we dat laten we aan onze style sheet.
Dus voegde ik een link tag en ik zal mijn style sheet app noemen.
SS Het bestaat nog niet.
Dus ik nodig om het op te slaan.
Ik zie SS in dezelfde directory.
En laten we beginnen met iets simpels als alle h degenen zijn paars.
Gewoon om ervoor te zorgen dat het werkt OK.
Laten we terug gaan vernieuwen.
Andrew krijgt een paarse H-1.
Grote.
Dus laten we nu eens te selecteren dat Dave we toegevoegd idee van de inhoud en centreren.
Dus ontdoen van dat en we moeten een ID-inhoud en het weglaten van te doen is de tekst af te stemmen Center.
Laten we terug gaan.
Daar gaan we.
Dus dingen zijn Center in lijn nu.
Volgende zullen we deze druk een beetje van 25 procent op de pagina exact met padding die gelijk is aan 25 procent te zijn.
Dus hier zullen we padding top doen 25 procent.
En in plaats van het geven van een harde aantal pixels als we blijven het als een percentage is het een beetje meer responsief.
Dus dat is midden in het centrum.
En dan 25 procent verandert als we de grootte van het scherm.
Grote.
Laten we nu eens voeg het beeld op de achtergrond in.
Dus het beeld dat ik gebruik is schattig kat en menselijke interactie hier aan de hand is vanuit dit op Splash website die ik in de laatste video, waar hebben we de bootstrap afbeelding net geïntroduceerd.
En ze hebben allerlei echt geweldige beelden van hoge kwaliteit die u kunt gebruiken zonder enig probleem.
En degene die ik gebruik is hier zoek ik naar kat schakels in die beschrijving ook.
Hier is het je Aro van dit beeld Enkel rechts klikken kopieert u de afbeelding die u bent l.
Laten we nu teruggaan en ik ga het naar het lichaam toe te voegen als een achtergrond afbeelding.
Zo achtergrond en geef het een URL en dat is dat gigantische U bent daar.
En als we het daarbij laten het formulier op dit niveau of vernieuwt krijgen we het een gigantische achtergrond en alles wat we kunnen zeggen is dat dit een soort van startup voor vingernagels.
Dus moeten we het verkleinen en te doen die we gebruiken achtergrond omvang en verandering die opnieuw moeten worden gedekt.
Opnieuw krijgen we dichterbij.
De afbeelding wordt zo klein mogelijk is, nog over de gehele breedte en hoogte van het scherm.
Dus het zal niet veranderen van de aspect ratio zal de afbeelding niet scheef op geen enkele manier, maar het zal zich uitstrekken in beide richtingen zo veel als het moet.
Maar het minimum bedrag dat het nodig heeft om te passen op ons scherm en het is nog steeds niet perfect.
En wat we willen doen is de grootte van het niet veranderen, maar verandert de functie.
We gaan het centrum achtergrond positie centrum, maar behalve dat we dichterbij.
Maar het is nog steeds niet een perfecte match voor zover de afbeelding gaat.
En die veranderingen zullen later komen.
Voor nu wil ik richten op het toevoegen in de navigatiebalk en om dat te doen wanneer je naar de Boucek docs en ga naar componenten en ik heb dit al eerder gezegd.
Ik doe dit altijd als ik toe te voegen in een bootstrap nav bar.
Het is gewoon te veel spullen om iets anders te herinneren.
En ik dit recht hier te kopiëren gewoon.
Zal de hele nav om te beginnen terug te keren naar onze app hier en zet ze gewoon recht op de top.
Dit is zeker niet het NAF dat we willen, maar het bevat de stukken die we willen vernieuwen.
Het is dicht genoeg.
Dus er is een paar veranderingen die we willen maken.
De eerste en eenvoudigste is dat onze content op de oplossing in een container, zodat het niet helemaal hoeft te gaan naar de randen alsof het hier doet.
Dus kunnen we terug en inzet gaan of zijn we gewoon veranderen dit div class container en als we terug gaan nu kun je zien dat, omdat we in de verpakking worden toegevoegd, we hebben nu een aantal afstand net als wij hier op de oplossing.
Laten we nu aan de slag met de concrete inhoud van de Nev ..
Dus de makkelijkste is om het merk dat nu net zegt Brand terug hier binnen deze lijn klasse gelijk Neth bar merk en we zullen het veranderen naar vaste per match en op te slaan veranderen.
Probeer het.
OK goed.
Laten we nu te ontdoen van dit formulier.
We doen dit niet helemaal nodig.
Dus ons formulier begint allemaal hier.
Weg met dat hele ding refresh.
Laten we ook ontdoen van de dropdown te krijgen.
Je hoeft niet nodig.
Dus dat begint hier.
Deze leugen die eindigt er weer fris.
Nu hebben we een enkele link.
Dus we beginnen met deze twee banden die geacht worden aanmelden en meld het.
Dat is deze link hier, zodat we die men kan veranderen om aanmelden en dupliceren het dan.
Gewoon een bondgenoot met een anker tag binnenkant van het.
En deze zal u ingelogd zijn.
Laten we het bekijken.
Grote.
Zodat de icoontjes zal komen aan het eind.
We hebben de twee links.
Nu moeten we drie links hier.
We hebben al twee van hen en we zullen ontdoen van die dropdown.
Dus we moeten home over in contact.
Dus een lokaliseren dat dropdown wat recht is hier.
Klasse evenaart dropdown.
Laten we te ontdoen van het en zijn nu Akbar's vereenvoudigd veel.
Nu hebben we twee verschillende lengtes.
We eigenlijk te ontdoen van hen beiden en doe het vanuit het niets.
Dus we zullen voegen in een bondgenoot met een anker-tag en dan zullen we dat doen drie keer.
Deze eerste moet men thuis zeggen.
De volgende gaat over.
En de laatste is contact.
Laten we het bekijken.
Er zijn drie lengtes we gaan.
Een klein ding.
Home is verondersteld actief is en een bootstrap dat is echt gemakkelijk.
Alles wat we moeten doen is toe te voegen klasse gelijk actief aan de bondgenoot niet het anker-tag, maar de ouder bondgenoot en nu komen we uit op thuis zijnde de actieve link.
Grote.
OK dus dat is onze nav bar en als we het formaat van je zult zien dat we al deze hamburger werkt prima.
Wij doen een probleem en dat is dat het imago van onze achtergrond is messed up te hebben.
We zullen dekken dat in slechts een klein beetje, maar we hebben de hamberger werk boete.
Alles ziet er goed uit.
Laten we nu eens aan te pakken het lettertype, zodat het lettertype dat ik gebruikte hier is Ledo L.A ..
Het is van Google fonts dus ik ga naar Google fonts en kijk voor Ledo.
LA T-O elke gaan collectie.
Laten we het als het normaal en vet te krijgen.
Ook willen we onze H-1 te vet zijn.
Oke.
En dan zullen we deze link toe te voegen recht in haar applicatie.
Up top hier besparen nu voeren apps Het beoordelen we gaan dat lettertype toepassen op alles.
Dus ik ga in het lichaam lettertype familie te selecteren wordt Ledo en laten we ervoor zorgen dat het correct is geladen.
Zie wat we hebben te vernieuwen.
En onze voorkant verandert het is moeilijk te zien, omdat de tekst is donker, maar veranderde je kunt het ook zien op de NFR hier.
Het is veranderd.
Het komt overeen met wat we hebben in deze oplossing.