1 00:00:00,330 --> 00:00:05,940 Welkom terug in deze les gaan we bootstrap gebruiken om een ​​landing page voor een fictieve opstarten. 2 00:00:06,070 --> 00:00:08,760 Onze startup heet perfecte match. 3 00:00:08,760 --> 00:00:09,210 Heel grappig. 4 00:00:09,210 --> 00:00:22,430 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. 5 00:00:22,440 --> 00:00:23,260 Ik weet het niet. 6 00:00:23,550 --> 00:00:27,690 Laten we beginnen door het doen van een snelle rondleiding van de site en haar schrijven. 7 00:00:27,690 --> 00:00:29,920 Ik bedoel gewoon te wijzen op een aantal kenmerken. 8 00:00:29,970 --> 00:00:31,250 Er is niet veel hier. 9 00:00:31,290 --> 00:00:33,780 We hebben niet echt dit vastgehaakt dat heeft nog niets. 10 00:00:33,840 --> 00:00:37,770 Dus het is eigenlijk gewoon HD mounseers s, maar dat is alles wat we tot nu toe hebben besproken. 11 00:00:38,100 --> 00:00:42,510 Dus we hebben genoeg onze perfecte match home over inContact lengtes. 12 00:00:42,510 --> 00:00:51,030 Ze eigenlijk niet overal naartoe te gaan aanmelden en log in aan de rechterkant twee kleine pictogrammen daar krijgen we haar hamburger. 13 00:00:51,180 --> 00:00:52,320 Ik kan klikken. 14 00:00:52,380 --> 00:00:55,980 Al deze banden zijn nu in die hamburger. 15 00:00:55,980 --> 00:01:01,650 Dan hebben we een grote achtergrondafbeelding die gecentreerd blijft en bestrijkt het gehele achtergrond. 16 00:01:01,740 --> 00:01:09,750 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. 17 00:01:09,750 --> 00:01:15,420 En dan hebben we een beetje H R hier horizontale lijn en vervolgens een knop aan de slag met een pictogram. 18 00:01:15,810 --> 00:01:26,960 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. 19 00:01:27,060 --> 00:01:29,690 Dus gaan we er een beetje en het blijft gecentreerd. 20 00:01:29,700 --> 00:01:33,900 Deze lay-outs echt makkelijk te doen en bootstrap maar het is relatief doeltreffend voor de landing page. 21 00:01:33,900 --> 00:01:38,180 Alles wat we hebben is een enkele kolom die beslaat de gehele breedte. 22 00:01:38,220 --> 00:01:40,850 Dus deze column gaat 12 eenheden over. 23 00:01:40,860 --> 00:01:48,510 We zijn niet te delen tot in alle secties slechts één kolom 12 eenheden over en vervolgens centreren we alles binnen van die kolom. 24 00:01:48,540 --> 00:01:49,860 Dus laten we beginnen. 25 00:01:49,860 --> 00:01:52,350 Het eerste wat we moeten doen is het maken van een bestand. 26 00:01:52,440 --> 00:01:54,640 Ik heb een zogenaamde index DML. 27 00:01:54,720 --> 00:02:10,410 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. 28 00:02:11,490 --> 00:02:14,350 Laten we de SS en Javascript doen hier. 29 00:02:14,400 --> 00:02:16,860 We zullen dat javascript voor de taakbalk nodig. 30 00:02:17,220 --> 00:02:19,130 Dus moeten we tag te koppelen. 31 00:02:19,710 --> 00:02:22,770 Dan krijgen we de javascript. 32 00:02:22,770 --> 00:02:24,030 Kopieer dat. 33 00:02:24,090 --> 00:02:32,030 Zet deze neer op de bodem die een script-tag en dan zetten we de bron gelijk aan die je bent. 34 00:02:32,520 --> 00:02:43,390 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. 35 00:02:43,450 --> 00:02:46,290 Vergeet niet terug uit de nav bar les die we nodig hebben om te eisen J. 36 00:02:46,290 --> 00:02:46,750 Querrey. 37 00:02:46,860 --> 00:02:52,500 Dus we een CDN te krijgen voor dat. 38 00:02:53,730 --> 00:02:55,290 We zullen de gewijzigde versie te doen. 39 00:02:55,290 --> 00:02:57,500 Kopieer die URL. 40 00:02:57,600 --> 00:03:04,110 En tot slot gaan we hier terug en we moeten het doen voor de gekoppeld aan bootstrappen aan de javascript. 41 00:03:04,440 --> 00:03:09,360 Anders zal het nog steeds niet weten over uw vraag, zodat het nodig heeft om de query eerst te laden. 42 00:03:09,360 --> 00:03:10,650 Laten we nu opnieuw proberen. 43 00:03:10,870 --> 00:03:11,960 Fire refresh. 44 00:03:12,520 --> 00:03:17,490 OK we zien niet iets dat is een goed teken, want we hebben geen fouten te zien. 45 00:03:18,570 --> 00:03:20,850 Laten we beginnen met de tekst in het midden. 46 00:03:20,850 --> 00:03:22,480 Al deze inhoud. 47 00:03:22,620 --> 00:03:35,870 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. 48 00:03:35,930 --> 00:03:47,220 Anytime we gebruiken het net en dan is onze div dat gaat naar de klas gelijk aan kolom dash grote 12 zijn. 49 00:03:48,240 --> 00:03:50,750 En dat zal de hele weg over die container overspannen. 50 00:03:51,210 --> 00:03:59,330 En dan binnen als ze gaan om een ​​H1 dat gewoon zeggen perfecte match en op te slaan. 51 00:03:59,520 --> 00:04:02,280 En laten we het bij laten vernieuwen. 52 00:04:02,580 --> 00:04:06,660 En het is niet echt wat we willen nog en dat is omdat er een paar dingen die we moeten doen. 53 00:04:06,660 --> 00:04:09,010 De eerste is dat we nodig hebben om alles in die kolom te centreren. 54 00:04:09,300 --> 00:04:19,190 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. 55 00:04:19,410 --> 00:04:21,680 En de tweede is dat we nodig hebben om te duwen een beetje. 56 00:04:21,720 --> 00:04:26,250 We moeten een aantal padding of marge toe te voegen, zodat niet recht naar de top van onze pagina. 57 00:04:26,250 --> 00:04:28,480 Laten we beginnen met het toevoegen in de rest van de inhoud. 58 00:04:28,830 --> 00:04:47,730 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. 59 00:04:48,090 --> 00:04:59,180 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. 60 00:04:59,240 --> 00:05:01,680 We nemen een kijkje. 61 00:05:02,100 --> 00:05:06,010 Dit is een bootstrap knop standaard en het is een grote knop. 62 00:05:06,330 --> 00:05:07,830 Laten we terug gaan. 63 00:05:07,830 --> 00:05:29,320 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. 64 00:05:29,340 --> 00:05:30,330 Okee. 65 00:05:30,330 --> 00:05:34,270 Dus hebben we onze content nu naast, maar Center binnenkant van het rooster. 66 00:05:34,470 --> 00:05:36,920 En dan zullen we ons richten op de vulling en het verplaatsen van het naar beneden. 67 00:05:36,930 --> 00:05:44,720 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. 68 00:05:44,760 --> 00:05:51,430 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. 69 00:05:51,750 --> 00:06:01,490 Laten we een div en ik geef het een ID van Cantet en dan zullen we alles te zetten binnen van daar. 70 00:06:01,560 --> 00:06:08,340 Dus de H-1 de leeftijd 3 de H.R. en de knop zal behoorlijk streepje, en op te slaan. 71 00:06:08,580 --> 00:06:14,270 Dus niets moet er anders uitzien als ik de pagina vernieuwen voordat we dat laten we aan onze style sheet. 72 00:06:14,340 --> 00:06:18,840 Dus voegde ik een link tag en ik zal mijn style sheet app noemen. 73 00:06:18,920 --> 00:06:20,920 SS Het bestaat nog niet. 74 00:06:21,120 --> 00:06:24,220 Dus ik nodig om het op te slaan. 75 00:06:24,230 --> 00:06:27,060 Ik zie SS in dezelfde directory. 76 00:06:27,420 --> 00:06:31,550 En laten we beginnen met iets simpels als alle h degenen zijn paars. 77 00:06:31,680 --> 00:06:35,030 Gewoon om ervoor te zorgen dat het werkt OK. 78 00:06:35,400 --> 00:06:37,060 Laten we terug gaan vernieuwen. 79 00:06:37,390 --> 00:06:39,100 Andrew krijgt een paarse H-1. 80 00:06:39,180 --> 00:06:39,670 Grote. 81 00:06:39,870 --> 00:06:44,970 Dus laten we nu eens te selecteren dat Dave we toegevoegd idee van de inhoud en centreren. 82 00:06:45,030 --> 00:06:53,620 Dus ontdoen van dat en we moeten een ID-inhoud en het weglaten van te doen is de tekst af te stemmen Center. 83 00:06:54,210 --> 00:06:56,430 Laten we terug gaan. 84 00:06:56,430 --> 00:06:57,110 Daar gaan we. 85 00:06:57,120 --> 00:06:59,490 Dus dingen zijn Center in lijn nu. 86 00:06:59,490 --> 00:07:07,440 Volgende zullen we deze druk een beetje van 25 procent op de pagina exact met padding die gelijk is aan 25 procent te zijn. 87 00:07:07,470 --> 00:07:15,270 Dus hier zullen we padding top doen 25 procent. 88 00:07:16,270 --> 00:07:22,870 En in plaats van het geven van een harde aantal pixels als we blijven het als een percentage is het een beetje meer responsief. 89 00:07:22,890 --> 00:07:24,790 Dus dat is midden in het centrum. 90 00:07:25,230 --> 00:07:29,940 En dan 25 procent verandert als we de grootte van het scherm. 91 00:07:29,940 --> 00:07:30,540 Grote. 92 00:07:30,540 --> 00:07:32,480 Laten we nu eens voeg het beeld op de achtergrond in. 93 00:07:32,670 --> 00:07:43,280 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. 94 00:07:43,680 --> 00:07:48,300 En ze hebben allerlei echt geweldige beelden van hoge kwaliteit die u kunt gebruiken zonder enig probleem. 95 00:07:48,480 --> 00:07:54,110 En degene die ik gebruik is hier zoek ik naar kat schakels in die beschrijving ook. 96 00:07:54,450 --> 00:08:00,230 Hier is het je Aro van dit beeld Enkel rechts klikken kopieert u de afbeelding die u bent l. 97 00:08:00,360 --> 00:08:06,310 Laten we nu teruggaan en ik ga het naar het lichaam toe te voegen als een achtergrond afbeelding. 98 00:08:06,800 --> 00:08:13,830 Zo achtergrond en geef het een URL en dat is dat gigantische U bent daar. 99 00:08:13,830 --> 00:08:26,010 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. 100 00:08:26,010 --> 00:08:36,060 Dus moeten we het verkleinen en te doen die we gebruiken achtergrond omvang en verandering die opnieuw moeten worden gedekt. 101 00:08:36,060 --> 00:08:39,230 Opnieuw krijgen we dichterbij. 102 00:08:39,270 --> 00:08:44,950 De afbeelding wordt zo klein mogelijk is, nog over de gehele breedte en hoogte van het scherm. 103 00:08:45,240 --> 00:08:52,240 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. 104 00:08:52,350 --> 00:08:57,060 Maar het minimum bedrag dat het nodig heeft om te passen op ons scherm en het is nog steeds niet perfect. 105 00:08:57,210 --> 00:09:01,900 En wat we willen doen is de grootte van het niet veranderen, maar verandert de functie. 106 00:09:02,190 --> 00:09:10,280 We gaan het centrum achtergrond positie centrum, maar behalve dat we dichterbij. 107 00:09:10,290 --> 00:09:13,320 Maar het is nog steeds niet een perfecte match voor zover de afbeelding gaat. 108 00:09:13,800 --> 00:09:15,510 En die veranderingen zullen later komen. 109 00:09:15,510 --> 00:09:24,650 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. 110 00:09:25,080 --> 00:09:27,690 Ik doe dit altijd als ik toe te voegen in een bootstrap nav bar. 111 00:09:27,810 --> 00:09:29,850 Het is gewoon te veel spullen om iets anders te herinneren. 112 00:09:30,230 --> 00:09:32,070 En ik dit recht hier te kopiëren gewoon. 113 00:09:32,370 --> 00:09:39,630 Zal de hele nav om te beginnen terug te keren naar onze app hier en zet ze gewoon recht op de top. 114 00:09:39,630 --> 00:09:46,110 Dit is zeker niet het NAF dat we willen, maar het bevat de stukken die we willen vernieuwen. 115 00:09:46,380 --> 00:09:47,380 Het is dicht genoeg. 116 00:09:47,610 --> 00:09:49,360 Dus er is een paar veranderingen die we willen maken. 117 00:09:49,470 --> 00:09:58,570 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. 118 00:09:59,100 --> 00:10:14,250 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. 119 00:10:14,250 --> 00:10:16,920 Laten we nu aan de slag met de concrete inhoud van de Nev .. 120 00:10:17,070 --> 00:10:33,950 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. 121 00:10:33,940 --> 00:10:34,990 Probeer het. 122 00:10:35,490 --> 00:10:37,500 OK goed. 123 00:10:37,500 --> 00:10:39,050 Laten we nu te ontdoen van dit formulier. 124 00:10:39,060 --> 00:10:41,150 We doen dit niet helemaal nodig. 125 00:10:41,310 --> 00:10:45,030 Dus ons formulier begint allemaal hier. 126 00:10:45,030 --> 00:10:50,490 Weg met dat hele ding refresh. 127 00:10:50,860 --> 00:10:52,560 Laten we ook ontdoen van de dropdown te krijgen. 128 00:10:52,560 --> 00:10:54,570 Je hoeft niet nodig. 129 00:10:54,570 --> 00:10:56,680 Dus dat begint hier. 130 00:10:56,680 --> 00:11:02,810 Deze leugen die eindigt er weer fris. 131 00:11:03,120 --> 00:11:04,540 Nu hebben we een enkele link. 132 00:11:04,710 --> 00:11:10,910 Dus we beginnen met deze twee banden die geacht worden aanmelden en meld het. 133 00:11:11,360 --> 00:11:18,110 Dat is deze link hier, zodat we die men kan veranderen om aanmelden en dupliceren het dan. 134 00:11:18,390 --> 00:11:21,450 Gewoon een bondgenoot met een anker tag binnenkant van het. 135 00:11:21,450 --> 00:11:23,840 En deze zal u ingelogd zijn. 136 00:11:24,750 --> 00:11:26,640 Laten we het bekijken. 137 00:11:26,700 --> 00:11:27,260 Grote. 138 00:11:27,270 --> 00:11:29,100 Zodat de icoontjes zal komen aan het eind. 139 00:11:29,100 --> 00:11:30,380 We hebben de twee links. 140 00:11:30,450 --> 00:11:32,320 Nu moeten we drie links hier. 141 00:11:32,340 --> 00:11:35,500 We hebben al twee van hen en we zullen ontdoen van die dropdown. 142 00:11:35,610 --> 00:11:38,560 Dus we moeten home over in contact. 143 00:11:38,600 --> 00:11:41,490 Dus een lokaliseren dat dropdown wat recht is hier. 144 00:11:41,490 --> 00:11:43,100 Klasse evenaart dropdown. 145 00:11:43,140 --> 00:11:49,070 Laten we te ontdoen van het en zijn nu Akbar's vereenvoudigd veel. 146 00:11:49,080 --> 00:11:50,370 Nu hebben we twee verschillende lengtes. 147 00:11:50,390 --> 00:11:53,760 We eigenlijk te ontdoen van hen beiden en doe het vanuit het niets. 148 00:11:53,760 --> 00:12:00,120 Dus we zullen voegen in een bondgenoot met een anker-tag en dan zullen we dat doen drie keer. 149 00:12:00,120 --> 00:12:02,260 Deze eerste moet men thuis zeggen. 150 00:12:02,550 --> 00:12:04,100 De volgende gaat over. 151 00:12:04,320 --> 00:12:06,530 En de laatste is contact. 152 00:12:07,020 --> 00:12:08,760 Laten we het bekijken. 153 00:12:08,760 --> 00:12:11,050 Er zijn drie lengtes we gaan. 154 00:12:11,070 --> 00:12:11,970 Een klein ding. 155 00:12:11,970 --> 00:12:16,830 Home is verondersteld actief is en een bootstrap dat is echt gemakkelijk. 156 00:12:16,980 --> 00:12:29,390 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. 157 00:12:29,400 --> 00:12:29,960 Grote. 158 00:12:30,200 --> 00:12:37,940 OK dus dat is onze nav bar en als we het formaat van je zult zien dat we al deze hamburger werkt prima. 159 00:12:38,520 --> 00:12:42,420 Wij doen een probleem en dat is dat het imago van onze achtergrond is messed up te hebben. 160 00:12:42,420 --> 00:12:45,750 We zullen dekken dat in slechts een klein beetje, maar we hebben de hamberger werk boete. 161 00:12:45,750 --> 00:12:47,400 Alles ziet er goed uit. 162 00:12:47,430 --> 00:12:53,360 Laten we nu eens aan te pakken het lettertype, zodat het lettertype dat ik gebruikte hier is Ledo L.A .. 163 00:12:53,430 --> 00:12:57,900 Het is van Google fonts dus ik ga naar Google fonts en kijk voor Ledo. 164 00:12:58,010 --> 00:13:02,720 LA T-O elke gaan collectie. 165 00:13:03,180 --> 00:13:06,820 Laten we het als het normaal en vet te krijgen. 166 00:13:06,840 --> 00:13:10,050 Ook willen we onze H-1 te vet zijn. 167 00:13:10,590 --> 00:13:11,040 Oke. 168 00:13:11,070 --> 00:13:16,290 En dan zullen we deze link toe te voegen recht in haar applicatie. 169 00:13:16,290 --> 00:13:24,090 Up top hier besparen nu voeren apps Het beoordelen we gaan dat lettertype toepassen op alles. 170 00:13:24,270 --> 00:13:33,970 Dus ik ga in het lichaam lettertype familie te selecteren wordt Ledo en laten we ervoor zorgen dat het correct is geladen. 171 00:13:34,050 --> 00:13:36,780 Zie wat we hebben te vernieuwen. 172 00:13:37,520 --> 00:13:43,990 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. 173 00:13:44,160 --> 00:13:44,790 Het is veranderd. 174 00:13:44,790 --> 00:13:47,510 Het komt overeen met wat we hebben in deze oplossing.