Ten film zamierzamy kontynuować stylizacji obóz.
Mamy zamiar dodać pasek nav z każdej strony i że pasek nawigacyjny będzie całkiem pusty teraz.
Ale w końcu będzie miał przyciski jak się zalogować i wylogować się zarejestrować cała ta funkcjonalność.
Ale do tego czasu musimy po prostu umieścić jakiś tekst zastępczy tam i wtedy my też będziemy projektować nową formę campingu bo teraz to w dość fatalnym stanie.
Więc zacznijmy od serwera do góry i po prostu spojrzeć na to, co mamy.
Więc tutaj jest nasza strona docelowa.
Oto nasz zobacz wszystkie obóz zmienić listę kempingów.
To wygląda całkiem dobrze.
Chcemy pasku nawigacyjnym tutaj.
To samo na dodać nowe pole kempingowe.
Jedziemy do centrum formularz, a my zamierzamy układać te dwa wejścia na szczycie siebie zamiast je mieć obok siebie.
Ale mamy zamiar zacząć pasku nawigacyjnym i niech to po prostu działa to na szablonie campingu.
Więc wracamy tutaj i otwórz camping szablon, aby zacząć.
Zamierzam otworzyć okno bootstrapped i mam zamiar przejść do części i następnie nav barze i znajdę się na tym odcinku cały czas, ponieważ mimo bootstrap sprawia, że ​​naprawdę łatwo dodać paska nawigacji można jeszcze zobaczyć to sporo znaczników i nasz nie będzie tak długo, na pewno przynajmniej nie rozpocznie się, gdy nie mamy wszystkich przycisków na upadki upuszczania.
Mamy zamiar rozpocząć ładne i proste, ale nawet wtedy to jeszcze wiele klas, które trzeba pamiętać.
Więc na pewno nie wstyd podciągania bootstrap darcs jak nic innego w tej klasie nie powinno się wstydzić o poszukiwaniu rzeczy.
Ale w szczególności bootstrap czasami może być po prostu bałagan z tych klas i elementów i nie ma sposobu, aby to zrobić, nie patrząc na docs.
OK, więc musimy wrócić i zrobię trochę miejsca w górnej części mojego szablonu campingów i zamierzamy rozpocząć od zdefiniowania Nav. co znowu podobnie jak nagłówek.
Moglibyśmy zrobić div lecz Nav. jest trochę bardziej znaczące.
To jest bardziej semantyczny.
Więc mam zamiar zrobić z nav pasku nawigacyjnym, a następnie klasy domyślnie rozdzielczej nav bar.
Istnieją różne rodzaje i różne kolory lub możemy mieć odwrócony pasku nawigacyjnym, ale jesteśmy po prostu pójdzie z domyślnego.
A następnie wewnątrz zamiar dodać div z klasą równej pojemnika płynu i że będzie po prostu sprawiają, że jesteśmy ładne dopełnienie i trochę miejsca tam i wtedy mamy zamiar dodać w innym div z klasą równej pasku nawigacyjnym nagłówka, a następnie wewnątrz klasa równa że nasz nagłówek mamy zamiar dodać znacznik zakotwiczenia z klasą równej pasku nawigacyjnym kreską na końcu takiego.
A potem możemy ustawić ten link, aby po prostu być slash i wtedy będziemy blisko, że i dodać yelper obozie tak po prostu.
I zobaczmy, co mamy z tego prostego znaczników.
Więc mamy NAV z pojemnikiem wewnątrz pasku nawigacyjnym nagłówka i pasku nagłówka nav ma tylko jeden element, który jest marką bar Neph.
Chodźmy odświeżyć.
OK, więc mamy pasku nawigacyjnym, a następnie mamy naszą markę tutaj i to jest link, że gdy klikniemy zajmie nam powrót do ohydnej strony docelowej.
OK, więc dodajmy w ciągu kilku zastępcze tutaj do logowania i rejestracji.
Nie będą działać lub nie będzie niczego, ale co możemy wyglądać dobrze, więc zróbmy to teraz przejść do naszego obozu robić.
EJ jako wzornik wewnątrz paska nawigacyjnego i pojemnika, lecz nie wewnątrz N.F. bar Hetter.
Mamy zamiar dodać w innym div i ten dział będzie miał klasę upadku, który zobaczy, co to robi.
I tak przez chwilę, a potem Neph bar Dasch upadek tak po prostu.
A potem w środku mamy zamiar dodać UL UL i ten będzie miał klasę kreskowych nav nav myślnik i wówczas również nav bar tuż kreska, która przeniesie go do prawej strony, a następnie wewnątrz, że będziemy trzy linki do teraz, a każdy z nich będzie sprzymierzeńcem.
A następnie wewnątrz tego Ally będą miały znacznik zakotwiczenia i da pierwsza Zaloguj.
A teraz sędzia H będzie po prostu ustawiona na naszej drodze trasy, ponieważ nie mamy żadnego dziennika Jeszcze a my zrobimy to samo dla rejestru.
Zróbmy Zarejestruj się, a następnie także zalogować się tak po prostu.
OK.
Zobaczmy więc, jak to wygląda.
Zanim zaczniemy mówić o tym, co robi, gdy załamanie się odświeżyć i to nie wygląda dobrze, brakowało nam jeden drobny klasę tu na ul.
Wygląda na to, że nie dodać teraz tak po prostu dodany nav bar.
Teraz już nigdy, ale to dobrze, ale nie dodać nav się więc będziemy zapisać się odświeży i skończyć z wszystkich trzech linków po prawej stronie NAV, a także kiedy tu zmienić rozmiar.
Zauważ, że tu właśnie tam, że upadł.
I w końcu, co musimy to mała ikonka hamburger.
Wygląda to tak po prostu gdzie należy kliknąć i to menu.
Na razie po prostu ukryć je, gdy mamy do tego rozmiaru.
OK.
Więc to wszystko, co musimy zrobić na pasku nawigacyjnym z wyjątkiem faktu, że to tylko na tej jednej stronie.
Więc teraz dodawać go do wszystkich stron.
Warto więc skopiować go lub wyciąć go i mamy zamiar przenieść go na cel.
Więc przejść do głowy lub częściowe.
Ja po prostu otworzyć to.
Korzystanie z linii poleceń poglądy C9 slash nagłówek slash Parshall za Ijaw Tak.
A potem po prostu na samym wierzchu ciała dodamy, że w.
Załóżmy, wcięcie to prawidłowo.
OK, nie idziemy.
I mamy nav bar na nagłówku tak, że każdy plik, który zamieszczamy w nagłówek częściowe będą miały teraz pasek nav ale ponownie uruchomić serwer.
Więc to jeszcze tutaj, jeśli dodamy nową campingu możemy również uzyskać tę poprzeczkę.
A jeśli pójdziemy do strony głównej mamy także wystarczająco poprzeczkę.
Wspaniały.
Teraz przejdźmy do uczynienia ta forma wygląda trochę lepiej.
Tak jak wspomniałem wcześniej istnieją dwie wielkie rzeczy, które chcę zrobić do tej formy.
Pierwszy z nich polega na wycentrowanie w środku strony, a drugi jest stos postać pionowo zamiast trzech wejść albo dwa wejścia i przycisk ustawione poziomo w linii na ekranie.
Chcesz je wziąć i ułożone je jeden na drugim.
Zacznijmy otwierając odpowiedni plik, który jest nowy punkt.
Tak.
Więc zrobimy poglądy C9 ukośnik wiedział, że Ejay nas i wtedy oto nasz formularz, który mamy do tej pory.
Zacznijmy łatwe i dodać w niektórych klasach bootstrap do form lub do wejść i to forma sterowania kreska.
I chcemy, że na obu wejściach i na przycisku.
Dodajmy w klasie Bootstrap PTEN ETN dużym ot tak.
I my też zrobić między błędu i zobaczmy, co to wygląda.
Więc po węzła J.
Tak odświeżyć.
OK, tak więc jesteśmy coraz kontroli bootstrap tu i przycisk bootstrap choć to na pewno ogromny i nie chcemy tego.
Tak więc, aby rozwiązać ten problem istnieje kilka rzeczy, które możemy zrobić.
Pierwszym jest to, że będziemy umieścić wszystko wewnątrz pojemnika.
Więc poszliśmy w div class równa pojemnik, a ja po prostu przenieść to do dołu.
Nie możemy iść i niech wcięcie to prawidłowo.
Zapisz się bardzo drobne zmiany.
Mamy trochę odstępu teraz, ale to wciąż ogromna postać.
Więc następną rzeczą, że zrobię to korzystać z systemu siatki.
Więc dodamy w innym div, a ten będzie miał klasę równą wiosłować tak po prostu.
Weźmy to i skopiować go do rzędu.
Więc cała forma idzie w rzędzie teraz.
I tak się stało, to również.
OK zapisz nie odświeżyć jeszcze duże różnice.
A co mamy zamiar zrobić, to użyć CSSA i rzeczywiście napisać nasze własne style na szczycie bootstrap centrum to poprzez nadanie mu margines.
Auto to wszystko tu po lewej i prawej stronie.
A my tylko chcieliśmy wziąć górę o 30 procent tego kontenera, że ​​w.
Tak zrobiliśmy, że zanim wrócimy i mam zamiar złamać jedną z zasad więc mówiłem na początku powiedział: Nie rób style inline.
I to na pewno dobry pomysł, aby tego nie robić.
Ale na razie, aż dojdziemy do nowej wersji, gdzie możemy tworzyć własne arkusze stylów mam zamiar zrobić to w wierszu.
Więc mam zamiar zrobić nowy div, który kładziemy formę wewnątrz.
Właśnie tak.
A potem mam zamiar dać, że div style i mam zamiar zacząć od stwierdzenia, ze jest o 30 procent.
I po prostu zostawić go w tym i nie widzieliśmy otrzymujemy mniejszą formę.
Teraz chcemy wyśrodkować to.
Więc wracamy tutaj.
Say margines zero na górze i na dole, a Otto po lewej i prawej stronie.
Teraz mamy formularz wyśrodkowany.
Następną rzeczą, którą zrobimy to zrobić przycisk zajmują całą szerokość, która jest jeszcze dość długo.
Ale co zrobimy, to dać mu blok DTN który jest wbudowany w Bootstrap sposobu dokonywania to element bloku.
A teraz zajmuje całą linię.
Następny dajmy pewne odstępy między wszystkie te elementy, aby to zrobić.
Użyjemy siłach zbudowany w klasie grupy formą.
Więc musimy div class eCos grupę formą kreska, a my będziemy potrzebować, że dla każdego wejścia.
Więc każde wejście przechodzi w jednym z tych, tak po prostu, a potem ja po prostu powielić tego i będziemy mieli jeszcze jeden tu i to będzie wejść do środka tego.
A potem mamy jeszcze jeden dla przycisku.
Mamy więc klasyczne Grupa formularz trzy razy i musimy również zamknięciu div tagi.
Nie idziemy oh jest jedna i musimy drugi zamykający znacznik div tutaj.
OK.
Tak, że grupa formą prostu GRP rzeczy razem.
Ale również daje nam trochę miejsca.
Teraz mamy tutaj ten przycisk.
Następną rzeczą, że możemy skupić się na środku jest tekst i zrobić, że chociaż mamy zrobić, to dać mu centrum wyrównać tekst.
I znowu mam zamiar zrobić w kolejce.
Nie jest to dobry pomysł, w dłuższej perspektywie, ale przynajmniej jest to bardzo przydatne ponieważ tylko szybko coś zrobić.
Więc styl i zrobimy centrum wyrównać tekst.
Zapisz się teraz, że w środku boiska.
Następną rzeczą, którą powinniśmy zrobić, to zmienić kolor tego przycisku.
Biały nie patrzy bardzo dobre.
Zróbmy to podstawowy przycisk podstawowym, który pozwoli zaoszczędzić niebieskie odświeżenia.
Tak to wygląda o wiele lepiej.
Załóżmy również przenieść ten Link Wróć odwołują się do środka, jak również.
Więc po prostu skopiować to i jedyne co musimy zrobić, to umieścić go wewnątrz tego marginesu.
Auto div tak, że ten dział tu po prostu postaci takiego i oszczędzać.
No to jedziemy.
Mamy wrócić i ostatnią rzeczą, którą należy zrobić, to naprawdę dodać trochę wyściółki lub marginesu, tak że nie jest aż przeciwko tej H-1 to zrobić.
Będziemy po prostu wrócić i już mamy ten div, który wybraliśmy.
Więc zamiast depozytu zabezpieczającego zera możemy po prostu dać mu pewien margines 20 pikseli, aby rozpocząć.
Zobaczmy, jak to wygląda.
Ok, że wygląda trochę lepiej.
Zróbmy coś więcej jak 50 lat.
I to może być trochę za dużo.
Zdecydowanie własnych preferencji.
Wróćmy i zrobić 25.
W porządku.
To wystarczy na razie.
Zagraj z tego tyle, ile chcesz i można zrobić z tej formy wejścia szerszy jeśli je lub węższy podoba, ale widać, że reaguje ona zamierza pozostać w środku i skurczy się trochę.
Ostatnią rzeczą, pozbądźmy tego znaku towarowego.
Na pewno nie trzeba już tego.
W dolnej części naszej stopce tak pójdziemy do pliku stopki i będę oszukiwać.
Po prostu zrób to teraz, a my po prostu pozbyć się, że uratować.
Teraz mamy nasza postać nie wygląda tak źle może wrócić otrzymujemy listę kempingów mamy dość paska możemy dodać.
Możemy też wrócić i zobaczyć stronę docelową, która nie została jeszcze wykonana.
Że jeden ma chyba najwięcej pracy i to będzie całkiem inna niż pozostałych stron będzie wyglądać o wiele ładniejszy i dużo więcej niestandardowych stylów.
Więc dlatego ja zapisując go na później.
A potem mamy także nasz numer tutaj z naszych fikcyjnych przycisków, które nie robią nic.