Witamy z powrotem w tej lekcji mamy zamiar użyć bootstrap aby utworzyć stronę docelową dla fikcyjnej starcie.
Nasz uruchamiania nazywany jest idealne dopasowanie.
Bardzo śmieszne.
Wiem, że to ludzka randki kotów app i zostawiam to do ciebie, aby zinterpretować to, co ludzkie randki kotów jest to może być stosunkowo nieszkodliwe może to być po prostu dopasowanie koty Sheldrick z samotnych ludzi może być coś innego.
Nie wiem
Zaczynajmy wykonując szybki objazd terenu i napisać do niej.
I tak naprawdę znaczy, wskazując kilka funkcji.
Nie ma wiele tutaj.
My nie mamy tego podłączyć nie robi nic jeszcze.
Więc jest to naprawdę tylko HD mounseers s, ale to wszystko, co omówiliśmy do tej pory.
Więc mamy wystarczająco nasz doskonały mecz o incontact długościach.
Nie właściwie nigdzie się zarejestrować i zalogować się na prawej stronie dwie małe ikony tam dostać jej hamburgera.
mogę kliknąć na nim.
Wszystkie te linki są teraz wewnątrz tego hamburgera.
Następnie mamy duży obraz tła, które pozostaje skoncentrowany i obejmuje całe tło.
Tak więc w środku mamy nazwę naszej rozruchu idealne dopasowanie do naszego, a następnie mamy nasz podpis Jedyny kanał człowieka na celownik aplikacji.
A potem mamy trochę H R tutaj linia pozioma, a następnie przycisk, aby zacząć korzystać z ikoną.
I jak kurczą się to, że wszystkie pobyty w środku i przenosi się też trochę tak, że nie mamy jakiś układ niezręcznej na urządzeniu mobilnym, gdzie tekst rozpoczyna się w połowie drogi w dół strony.
Więc przenieść go trochę i pozostaje wyśrodkowany.
Ten układy naprawdę łatwe do zrobienia i bootstrap ale jest stosunkowo skuteczne na stronie docelowej.
Wszystko, co mamy, to pojedyncza kolumna, która zajmuje całą szerokość.
Więc ta kolumna jedzie 12 jednostek w poprzek.
My nie dzieląc go na żadnej części tylko jednej kolumnie 12 jednostek poprzek a potem centrum wszystkiego wewnątrz tej kolumny.
Więc zacznijmy.
Pierwszą rzeczą, jaką musimy zrobić, to plik.
Mam jeden zwany indeks na DML.
dodam to w moim regularnym boilerplate idealnego dopasowania, a następnie uruchomić poprzez dodanie w Bootstrap i będę używać CDN Bitstrips CDN.
Zróbmy SS i Javascript tutaj.
Musimy ten skrypt na pasku zadań.
Dlatego musimy połączyć tag.
Następnie otrzymujemy JavaScript.
Skopiuj to.
Umieścić to na dole, która jest tag skryptu, a następnie ustawiamy źródło równą jesteś.
Teraz, jeśli otworzymy się to OK otworzyć konsolę mamy mały problem, który jest, że musimy Jay zapytanie, jak również w celu bootstrap javascript.
Pamiętaj powrotem z baru lekcji nav musimy wymagać J.
Querrey.
Więc dostaniemy CDN za to.
Zrobimy wersję zmodyfikowaną.
Skopiuj ten adres URL.
I wreszcie wracamy tutaj i musimy zrobić zanim związana bootstrap do javascript.
W przeciwnym razie będzie on nadal nie wie o zapytaniu więc musi załadować zapytanie pierwszy.
Teraz spróbujmy jeszcze raz.
odświeżania przeciwpożarowe.
OK, nie widzimy nic, że to dobry znak, ponieważ nie widzimy żadnych błędów.
Zacznijmy od tekstu w środku.
Cała ta treść tutaj.
Więc musimy utworzyć kontener, a następnie wewnątrz pojemnika musimy wiersz do div class eCos pojemniku, a następnie wewnątrz nie mamy innego div zawsze potrzebujemy tego wiersza.
W każdej chwili używamy systemu sieci, a następnie nasz div, który będzie równy klasy kolumny kreską dużej 12.
I że obejmie całą drogę w poprzek pojemnika.
A potem w środku, jeśli zamierzamy mieć H1, który będzie po prostu powiedzieć, idealne dopasowanie i oszczędzać.
I zostawmy go w tym odświeżaniu.
I to nie jest tak naprawdę to, czego jeszcze chcesz, a to dlatego, że istnieje kilka rzeczy, które trzeba zrobić.
Po pierwsze, musimy centrum wszystkiego w tej kolumnie.
Jeśli więc sprawdzić, co mamy do czynienia tutaj widać, że H1 przechodzi przez całą drogę w poprzek i po prostu trzeba wyśrodkować go wewnątrz tego.
A drugie jest to, że musimy przesunąć nieco w dół.
Musimy dodać dopełnienie lub margines tak, że nie idzie w prawo do góry naszej strony.
Zacznijmy poprzez dodanie pozostałej części zawartości.
Więc mamy też tylko człowiekiem randkowy kotów aplikację i że będzie po prostu być H 3 i mogliśmy grać naprawdę z tym może być dowolny element, który chcemy ale będę sprawiają, że H-3 jedynym człowiekiem kreska randki kotów app.
I wtedy możemy dodać w tej linii poziomej, która nie będzie wyglądać dobrze, ale będziemy projektować je po fakcie, a potem będziemy również dodać przycisk w klasie na tym przycisku.
Przyjrzymy.
Jest to domyślny przycisk bootstrap i jest to duży przycisk.
Wracajmy.
Więc musimy PTEN a następnie domyślny kolor i to rozmiar między LG dla dużych i tutaj musimy po prostu dodać tekst, który jest zacząć i zapisać zobaczmy, co skończy się.
W porządku.
Mamy więc teraz nasza treść kolejnego ale Center wewnątrz sieci.
A potem skupimy się na obicia i przesuwając go w dół.
Ale zacząć centrum wewnątrz tej siatki i sprawi że łatwiej Idę do grupy to wszystko wewnątrz div tak, że nie mamy do centrum każdą rzecz z osobna.
Mamy do centrowania H-1, a potem trzy, a następnie przycisk, a możemy zgrupować w div i po prostu Center, który dział się w jednej linii.
Zróbmy div i dam mu identyfikator Canteta a wtedy umieścić wszystko wewnątrz tam.
Więc H-1 w wieku 3 H.R. i przycisk będzie prawidłowo tiret i oszczędzać.
Więc nic nie powinno wyglądać inaczej, gdybym odśwież stronę, zanim my dodajmy, że w naszym arkuszu stylów.
Więc dodałem znacznik łącza i zadzwonię do mojej aplikacji arkusza stylów.
SS on jeszcze nie istnieje.
Więc muszę zrobić to zapisać.
Widzę SS w tym samym katalogu.
I zacznijmy od czegoś prostego, jak wszystkie te godziny są fioletowe.
Wystarczy, aby upewnić się, że działa OK.
Wróćmy odświeżenia.
Andrew uzyskać fioletowy H-1.
Wspaniały.
Więc teraz niech zaznaczyć, że Dave dodaliśmy z ideą treści i wyśrodkować go.
Więc pozbyć się tego i musimy zawartość identyfikatora i pomijając zrobić to tekst wyrównać Center.
Wracajmy.
No to jedziemy.
Więc rzeczy są Centrum wyrównany do tej pory.
Dalej będziemy tego popchnąć nieco o 25 procent w dół strony, aby być dokładne z wyściółką równej 25 proc.
Więc tutaj zrobimy wyściółka górę 25 procent.
I zamiast nadając mu ciężko liczbę pikseli jeśli będziemy go w procentach jest to nieco bardziej elastyczne.
Więc to jest w samym centrum miasta.
A potem 25 procent zmiany podczas zmiany rozmiaru ekranu.
Wspaniały.
Teraz dodajmy na obraz tła.
Tak więc obraz, który używam jest urocza kotka i interakcja człowieka dzieje się z tym na stronie internetowej Splash którą wprowadzono w poprzednim filmie, gdzie stworzył bootstrap siatki obrazu.
I oni mają wszystkie rodzaje naprawdę wielkich obrazów wysokiej jakości, których można używać bez problemu.
A ten, który używam jest tutaj mogę szukać linków Kot w tym opisie, jak również.
Oto ci Aro tego obrazu po prostu kliknij prawym przyciskiem myszy skopiować obraz jesteś l.
Teraz wróćmy i mam zamiar dodać go do organizmu jako obraz tła.
Więc tła, a następnie nadać mu adres URL, który jest, że gigant Jesteś tam.
A jeśli zostawimy ją na to, że postać na tym poziomie lub odświeżyć mamy gigantyczny obraz tła, a wszystko, co możemy powiedzieć, że jest to jakiś rodzaj uruchamiania za paznokciami.
Więc musimy zmienić jego rozmiar, a do zrobienia, że ​​używamy rozmiaru tła i zmiany, które mają być objęte nowo.
Znowu jesteśmy coraz bliżej.
Spowoduje to, że obraz tak małe, jak to możliwe, a jednocześnie obejmujące całą szerokość i wysokość ekranu.
Więc to nie zmieni proporcje nie będą pochylać obraz w żaden sposób, ale będzie rozciągać się w obu kierunkach, jak to musi.
Ale minimalna kwota, która musi zmieścić się na naszym ekranie, a wciąż nie jest doskonały.
A to, co chcemy zrobić, to nie zmienia rozmiar niego, ale zmienić pozycję.
Jedziemy do centrum informatyczne tła pozycji środkowej, ale z zastrzeżeniem, że jesteśmy bliżej.
Ale wciąż nie jest idealne dopasowanie miarę obraz idzie.
A te zmiany przyjdzie później.
Na razie chcę skupić się na dodanie w pasku nawigacyjnym, a aby to zrobić, gdy idziesz do docs Boucek i przejść do części, a ja wspomniałem o tym wcześniej.
Zawsze to zrobić, jeśli Dodaję w bootstrap pasku nawigacyjnym.
To jest po prostu zbyt wiele rzeczy do zapamiętania inaczej.
A ja po prostu skopiować To właśnie tutaj.
Weźmie całą nav zacząć wracać do naszej aplikacji tutaj i po prostu umieścić go na samym szczycie.
To zdecydowanie nie jest NAF, że chcemy, ale zawiera elementy, które chcemy, aby odświeżyć.
Jest to na tyle blisko.
Więc jest kilka zmian, które chcemy wykonać.
Pierwszym i najprostszym z nich jest, że nasze treści w roztworze jest w pojemniku, tak aby nie przejść całą drogę do krawędzi tak jak to robi się tutaj.
Tak więc możemy wrócić i wstawka lub są po prostu zmienić to być kontener div class i jeśli wrócimy teraz można zobaczyć, że dlatego, że dodaje się w tym pojemniku mamy teraz pewne odstępy tak jak my tutaj na rozwiązanie.
Teraz przejdźmy do pracy na rzeczywistej zawartości Nev ..
Dlatego najłatwiej jest zmienić markę, która w tej chwili po prostu mówi Brand powrotem tutaj klasa ta linia równa Neth bar markę, a my go zmienić na stałym meczu i oszczędzać.
Wypróbuj to.
Ok dobrze.
Teraz pozbyć się tego formularza.
Nie potrzebujemy tego.
Więc nasz formularz wszystko zaczyna się właśnie tutaj.
Pozbądź się tej całej rzeczy odświeżaniu.
Załóżmy również pozbyć się menu.
Nie potrzebuję tego.
Tak, że zaczyna się tutaj.
To kłamstwo, że kończy się tam są świeże ponownie.
Teraz mamy jeden odnośnik.
Więc zaczniemy od tych dwóch linków, które mają się zarejestrować i zalogować się.
To ten link tu więc możemy zmienić, że jeden się zarejestrować, a następnie powielić go.
Wystarczy sojusznikiem ze znacznikiem zakotwiczenia w jej wnętrzu.
A ten zostanie zalogowany.
Sprawdźmy to.
Wspaniały.
Więc ikony przyjdzie na końcu.
Mamy dwa linki.
Teraz musimy trzy linki tutaj.
Mamy już dwa z nich, a my się pozbyć tej listy rozwijanej.
Więc musimy domu o kontakt.
Więc zlokalizować listę rozwijaną, która jest tutaj.
Klasa równa rozwijanej.
Chodźmy się go pozbyć, a teraz w znacznym stopniu uproszczone Akbara.
Teraz mamy dwóch różnych długościach.
Będziemy rzeczywiście pozbyć się oboje i zrobić to od podstaw.
Więc dodamy jednego sojusznika ze znacznikiem zakotwiczenia i wtedy zrobię to trzykrotnie.
Ten pierwszy powinien powiedzieć domu.
Kolejny chodzi.
A ostatni z nich jest kontakt.
Sprawdźmy to.
Nie idziemy na trzy odcinki.
Jedna drobna rzecz.
Strona główna ma być aktywny i bootstrap to naprawdę proste.
Wszystko, co musimy zrobić, to dodać klasę równa aktywnych do nie sojusznika tagu kotwicy ale sojusznikiem macierzystej, a teraz w końcu z domu będąc aktywny link.
Wspaniały.
OK, więc to nasz bar nav i jeśli rozmiar zobaczysz, że mamy już tego hamburgera działa dobrze.
Mamy problem, który jest, że nasz obraz w tle jest pomieszane.
Zajmiemy się, że tylko trochę, ale mamy grzywnę roboczą Hamberger.
Wszystko wygląda dobrze.
Teraz zająć czcionkę więc czcionka, że ​​użyłem tu jest Ledo L.A. ..
To od czcionek Google więc pójdę do czcionek Google i poszukać Ledo.
LA T-O każdym iść do kolekcji.
Użyjmy go, jeśli będzie się normalne i pogrubione.
Ponadto chcemy, aby nasza H-1 będzie pogrubiony.
W porządku.
A potem dodamy link prawo do jej stosowania.
Up górze tutaj zapisać się wprowadzić aplikacje oceny będziemy stosować tę czcionkę do wszystkiego.
Więc mam zamiar wybrać się wewnątrz rodziny fontów ciało Ledo i niech to upewnij się, że jest ładowanie poprawnie.
Zobacz co mamy odświeżyć.
A nasz przodu zmienia to trudno zobaczyć, ponieważ tekst jest ciemny, ale zmienił można również zobaczyć na NFR tutaj.
To się zmieniło.
To pasuje do tego, co mamy w tym roztworze.