Witamy z powrotem w tej lekcji mam zamiar pokazać wam jeden z najważniejszych i powszechnie używanych składników w całej Bootstrap, którym jest NFR, dzięki czemu można zobaczyć, faktycznie na get Boucek Dotcom.
Wykorzystują one wystarczająco składnik bar tutaj.
Mamy też zamiar skorzystać z jednej aplikacji na naszym obozie Yelp i jak zmiana rozmiaru paska nawigacyjnego.
Zauważ, jak czułe jest to, a potem również zauważyć, jak tylko uderzyć TAB jaki rozmiar i wielkość mobile otrzymujemy ten miły hamburgera.
Więc będziemy pracować na rzecz wszystkich, że w tej lekcji.
Ale mamy zamiar rozpocząć prostsze.
Pierwszą rzeczą, jaką musimy zrobić, to udać się do komponentów i przejść do pasku nawigacyjnym i przed idziemy znacznie dalej Stworzyłem nowy plik tylko dlatego będziemy pisać sporo kodu.
Stary jeden był już przepełniony.
Dzwonię to tandetne Bar H Tm L.
Wewnątrz wszystkie mają odnośnikiem nie bootstrap zmienić tytuł tutaj.
Ja po prostu nazwać to bootstrap Nav bary.
Właśnie tak.
Teraz chodźmy do docs i spojrzeć na domyślnym pasku nawigacyjnym.
Więc ten przykład tutaj prezentuje wszystkie ważne funkcje, gdzie możemy mieć związek marki.
Możemy mieć inne linki możemy spadły w menu.
Możemy mieć formę nav bar oraz przycisk możemy mieć rzeczy, które są po prawej stronie rzeczy, które są po lewej stronie.
To naprawdę prezentuje wszystko.
To zlewozmywak z bootstrap tandetne barów iw konsekwencji znaczników jest trochę długi.
Będziemy pracować z tymi wszystkimi sztuk do końca tego filmu.
Ale chcę, aby rozpocząć prostsze i zacznę pokazując najprostszy sposób, aby numer.
Więc musimy sprawić, aby element NAV i NAV ten element musi mieć dwie klasy chcemy nav nav bar oraz bar i możemy zacząć domyślny Dasch uratuje.
A teraz chodźmy zajrzeć do pliku w przeglądarce i odświeżyć.
Widać mam nadzieję, że napotka i screencast starczy baru bardzo słaby pasek dzieje na górze, więc to, że to w jaki sposób właściwie zainicjowana poprzeczkę NF.
Teraz wypełnić go z niektórych treści.
Pierwszą rzeczą, którą będziemy spojrzeć na to, jak możemy dodać w tej marce tutaj.
Zasadniczo nazwa firmy.
W większości przypadków.
I to przy użyciu nagłówka pasku nawigacyjnym, a następnie wewnątrz NFR nagłówka używamy marki pasku nawigacyjnym.
Więc zacznijmy dodając, że div class równa NAV nagłówek bar kreska a następnie wewnątrz nie zamierzamy dodać paska nawigacji marki, która jest znacznik kotwicy.
Zazwyczaj po kliknięciu na tą nazwą firmy trwa powrót do strony głównej.
Więc zrobimy to tutaj znacznik zakotwiczenia i zaczniemy z ruchu równego do Thorpes więc nie zabierze nas wszędzie.
Klasa będzie równa nav bar marki kreska, a my po prostu uzupełnić nazwę firmy.
Zobaczymy, czy mam filiżankę kawy wokół mnie, więc chodźmy z kawą.
Ale faktycznie sprawiają, że prawdziwe starcie musimy zmienić pisownię trochę.
OK Alex.
wystarczająco dobre dla mnie.
Kawa z K.
Chodźmy spojrzeć.
Odświeżyć i teraz mamy naszą NAV bar markę, która znajduje się link.
I kliknij na nią.
Nie bierze mnie wszędzie teraz, ale w końcu nasze aplikacje będą musiały się tak, że po kliknięciu na nazwę firmy trwa powrót do strony głównej następnego.
Zobaczmy, czy możemy dodać w niektórych innych linków jak o kontakt.
Zapisz się do rejestru.
Wszystkie te wspólne łącza w barze.
Zacznijmy dodając link do strony na temat tutaj.
Więc wracamy a następnie poza pasku nagłówka nav mamy zamiar dokonać innego div w tym div zbierze całą zawartość co najmniej po lewej stronie naszego baru NAV.
Mamy więc nagłówek i wtedy będziemy mieć jakąś treść, a następnie, jeśli chcemy coś po prawej stronie będziemy mieli inny div, który ma inną klasę.
Więc klasa tutaj.
Właściwie dwa chcemy NAV i nav bar kreska NAV.
Nie pytaj mnie o nazywania ich nav bar rozdzielczej NAV.
To jedna z wielkich krytykę bootstrap jest to, że jest trochę brzydki i nie jest bardzo sensowne czasem.
I rzeczywiście ramy CSSA, który został stworzony w odpowiedzi na semantycznej bezsensu bootstrap jeśli będzie nazywany semantycznej UI.
I to jest jeden, który bardzo lubię, jak również.
I dyskutowane nauczania.
Ale w końcu, że to po prostu nie tak szeroko stosowane nie są jeszcze tak wielkie tutoriale.
Wracając do naszego diff tutaj.
Klasa nav pasku nawigacyjnym, a klasa nav oba z nich.
A następnie dla każdego elementu, który chcemy na tej NFR musimy dodać sojusznika, a następnie wewnątrz Y, jeśli chcemy połączyć my właśnie mieliśmy znacznik zakotwiczenia.
Więc ten będzie po prostu iść nigdzie.
Po raz kolejny, a będzie to na stronie O mnie.
A jeśli wrócę i odświeżyć mamy odnośnik do około dodajmy jeszcze do kontaktu z zastrzeżeniem wrócić.
Teraz mamy dwa linki teraz chodźmy naprzód i dodać coś do prawej strony.
Dodajmy dwa linki jeden dla rejestru lub zarejestrować i zalogować do innego po prawej stronie paska, aby to zrobić.
Musimy pojemnik nother tutaj i faktycznie zamiast używania DIV jest to bardziej konwencjonalne Aby użyć będzie to będzie działać w ten sam sposób, ale chcesz mieć sojuszników zamiast dobrze chociaż będą działać dobrze z div broni trochę więcej sensu być zamiast ul.
Więc mamy zamiar dodać kolejne UL i ten będzie Nav. Pasek nawigacji nav kreska a następnie nav bar kreska.
Dobrze.
I musimy upewnić się, że poprawnie pisze inaczej, że klasa nie przyniosą efektu.
Więc co to będzie zrobić, to nam nową grupę treści na prawej stronie tego paska nawigacyjnego.
A teraz po prostu trzeba go wypełnić.
Więc dodam dwa linki zarówno w sztorc.
Pierwszy z nich pójdzie nigdzie i powie zarejestrować się i wtedy będziemy mieć jeszcze jeden, który po prostu mówi się zalogować.
Spójrzmy.
Odśwież stronę i widać mamy zawartość po prawej stronie.
Jednak jest to aż do krawędzi oraz ustalenie, że możemy dodać w pojemniku na tyle baru tak jak używamy pojemnik wcześniej dodać trochę rozstawienie do głównej zawartości.
Moglibyśmy dodać jeden zamiast pasku nawigacyjnym.
Włożyłem więc wszystko w barze Neph zamiast pojemnika.
Więc klasy wynosi pojemnik.
Wystarczy przesunąć to w dół.
Upewnij się, że wszystko jest wcięte prawidłowo.
No to jedziemy.
Sprawdźmy to.
Miły.
Więc teraz wszystko jest skupione ładne i poprawnie.
Pokażę wam, gdybym to zrobił dodać pojemnik poza NAV i włożyli całą pasku nawigacyjnym w środku.
Dobrze zobaczyć, co się dzieje.
Teraz gdybym miał wystarczająco świeże bary faktycznie odcięte i jeździ tylko część drogi po drugiej stronie ulicy.
Więc pojemnik zrobi, że aby cokolwiek umieścić wewnątrz niego.
I w tym przypadku chcemy pojemnik wewnątrz paska nawigacyjnym tak, że nie jest zwężający się rzeczywistą Naff część siebie, ale nie ogranicza się zawartość jej wnętrzu.
OK.
Tak Pojemnik mamy Hetter mamy rzeczy na lewo i mamy pewne treści po prawej stronie, dzięki czemu można zobaczyć tutaj.
Teraz to, co krok to trochę i idź i weź to podstawowe pasku nawigacyjnym lub domyślnego paska nawigacyjnego, że mają w docs i niech skopiować całą tę rzecz, a ja po prostu umieścić go tuż poniżej są obecnie znacznie zrobić trochę miejsca.
Wiele uwag do uczynienia go bardziej zrozumiałym.
Domyślnie nav bar.
I rzućmy okiem na jej odświeżenie.
Więc to jest ta nav bar tu i tam kilka rzeczy, które chciałbym podkreślić.
Jednym z nich jest, że spadły na menu, ale w rzeczywistości nie działa.
A także, jak możemy zmienić rozmiar okna tu dostaliśmy menu hamburger.
Te linki odejść.
Formularz odchodzi i ujawnić je musimy kliknąć tutaj.
Ale to nie działa.
Warto więc zacząć od uzyskania go do pracy, a potem porozmawiamy o tych wszystkich różnych elementów i co robią, aby to działało.
Musimy iść i obejmują bootstrap pliku JavaScript.
Więc jeśli wrócimy do docs bootstrap Będziemy kliknij pobrania.
Jest tam również plik JavaScript że musimy co jest tutaj.
Będę korzystać z wersji CDN ale również wyposażony w folderze, który jest pobierany.
To właśnie nazywa się bootstrapped.
Tak.
Albo wersja zminimalizowane bootstrapped się Mencjusza.
A dodajmy, że i zrobimy to na dole naszego ciała i oszczędzać.
I wiem, że nie rozmawialiśmy o javascript.
Nie wiem, co skrypt jest i co tu źródło to nie ma znaczenia.
Jesteśmy po prostu zamiar podłączyć go do startowej.
A teraz nasz odświeżania.
Możemy rozwiązać jeden mały problem, który pokażę wam tutaj mówi nam, że bootstraps javascript wymaga zapytania.
Nie martw się o to, co to jest i jak to ma się do tej wiadomości.
Ale ja po prostu chcę pokazać ci to tak, że widać rzeczywistą wiadomość mamy.
Musimy wymagać zapytanie J które również nie rozmawialiśmy.
Ale to jest dość łatwe, aby przejść i dostać.
Nie trzeba pisać żadnego JavaScript.
Nie trzeba znać żadnego języka JavaScript.
Musimy po prostu umieścić go.
Więc wszystko co musimy zrobić, to znaleźć Jay zapytań CDN, który jest kodem, który Jay dot com i tu będzie trzeba wybrać najnowszą wersję i skopiuj ten adres URL.
Jest to plik Querrey, a potem wrócę tu.
Mamy zamiar dodać jeszcze jeden z tych tagów skryptu.
Zasadniczo kopiowania dokładnie ten kod.
W rzeczywistości Zrobię to, aby ułatwić powielać dokładnie tę linię i zmienić ten adres URL będzie zapytanie JEY jesteś.
Jeśli wszystko inne zawiedzie możesz po prostu wpisać ten.
To nie jest takie złe, jeśli jesteś l, ale mam to wyszukując Jay queery CDN i pozwoli zaoszczędzić i to musi przyjść przed siłach pliku JavaScript, ponieważ opiera się na kwerendzie.
Więc jeszcze raz nie martw się zbytnio, co to jest, jak to działa, co Jay zapytanie jest.
To wszystko, co zbliża się kilka minut od teraz.
Jednak, aby uzyskać jak najwięcej z bootstrap aw szczególności barów nav i menu.
Po prostu trzeba mieć tych dwóch linii w każdej chwili używamy go więc wracamy teraz i odświeżyć.
Przede wszystkim są odrzucane w menu działają teraz jak widać mamy obecnie rozwijanych menu.
Nie będziemy o tym rozmawiać w tym filmie, ale jak zmiana rozmiaru i dostaję ten hamburger.
Hamburger działa teraz po kliknięciu na nim.
To przełącza ten ukryty materiał.
Więc sposób, że działa tu jest ta mała przerwania tu gdzie wszyscy z tej zawartości skór i wszystko, co widzimy, jest nagłówek i button.
A potem, kiedy klikamy na przycisk wszystko, co wcześniej ukryte treści pojawia Chodźmy, że do pracy.
Teraz dla nas.
Ale mamy zamiar zrobić dużo mniej skomplikowaną wersję, gdzie chcemy tylko ukryć te cztery linki tak, że gdy rozmiar te cztery linki są ukryte, a następnie bardzo szybko zostaną one wyświetlone.
Aby to zrobić zamiar zacząć od przyjrzenia się, jak to jest w tym realizuje domyślnej wersji tego gigantycznego potwora na pasku nawigacyjnym.
A ja po prostu zwrócić uwagę na ważną linię tutaj.
Pasek nawigacyjny div class załamanie załamanie cokolwiek umieścić wewnątrz tego div zostaną zwinięte gdy trafiliśmy Telefony wielkości więc nie uczyni przycisk dla nas.
Nie zrobi przełączanie się ponowne pojawiające się w ukryciu, ale to co ukrywać treść stawiamy wewnątrz niej, kiedy trafiliśmy ten tablet i wielkości telefonu komórkowego.
Więc mamy zamiar skopiować to i po prostu trzeba owinąć go wokół treści, które chcemy ukryć i chcemy, aby ukryć to tutaj.
Te dwa Juelz Więc cztery linki chcemy ukryć, kiedy trafiliśmy że mniejszy rozmiar ekranu.
Więc dodać tagiem zamykającym i zapisać i tam jest linia tutaj i to jest ważne, a ja się do niego za chwilę.
To nie wpłynie na nas właśnie jeszcze ale jeśli odświeżyć.
Zobaczysz.
Teraz po zmianie rozmiaru istnieje punkt właśnie tutaj, gdzie wszystko, zawartość wewnątrz div upadku odchodzi.
Teraz to nie pojawi się ponownie.
Nie mamy tego hamburgera.
Nie mamy kliknięcie na cokolwiek, ale upadł to zniknął.
A to dlatego, że dodaje się w tej linii tutaj pasku nawigacyjnym div class upadku upadku.
Następną rzeczą, którą musisz zrobić to dodać na hamburgera i to jest trochę kodu.
Niestety to wciąż o wiele lepiej, niż gdybyśmy musieli zrobić sami.
Ale hamburger jest rzeczywiście to wszystko tutaj.
Więc mam zamiar skopiować to i wkleić go na wewnątrz od drzemki lub Hetter przed naszym kawy incontact.
I będziemy zapisywać Wrócę do tego, co robi.
Miejmy tylko odświeżyć.
A teraz, jeśli rozmiar dostaję hamburgera.
No to jedziemy.
Teraz pozwól mi wyjaśnić trochę o tym, jak to działa.
Więc nie jest to przycisk, a następnie wewnątrz tego przycisku nie ma trzech przęseł, a każdy z nich jest odpowiedzialny za jeden z tych barów.
Więc nie jest to obraz, który widzimy tutaj to faktycznie każdy zespół, który jest co ten mały spand które są stylem do tych wąskich pasków, aby ten hamburger.
A potem, jeśli chodzi o Wyświetlanie i ukrywanie zawartości, kiedy kliknij na nią, co jest naprawdę ważne jest to, że mamy tego atrybutu target danych i cokolwiek jest ustawiony w naszym przypadku B-S np.
Obecnie dla naszego upadek jednego bootstrap przykład sieci dla naszego klubu tak i niech po prostu zmienić go tak.
Nav. demo tak po prostu.
Następnie musimy zmienić identyfikator treści, które chcemy rzeczywiście zawali, że chcemy pokazać i ukryć.
Więc mogę ją zmienić, aby dopasować vs demo NAV.
Zauważ jedną istotną różnicę.
Nie dodajemy w arktycznym Thor Więc to tak jak CSI a kiedy wybrać coś z C mówi, musimy użyć, że Octa Thorpe kierować identyfikator więc zostawić identyfikator jak tylko tekst nazwa.
Teraz, jeśli demo tu dodać, że do Thorpe będzie to zaoszczędzić odświeżania.
Teraz gdybym rozmiaru dostać hamburgera i kliknij na nim i działa, aby włączyć tę Wyświetlanie i ukrywanie.
Wspaniały.
Ostatnią rzeczą, która pokaże wam jest, jeśli poruszamy się coś poza tym, że upadek.
Więc weźmy te linki tutaj.
Konto lub oi kontaktowy, a my po prostu przenieść te tu poza div upadku i odświeżyć można zobaczyć, że w rzeczywistości nie zawali się tam zatrzymać, a następnie klikam na to i pozostałe dwa, które są zamiast upadku są przełączane.
Teraz nie mówię, że to wygląda dobrze, ale ilustruje znaczenie tego upadku dz ..
Więc co się stało stronę upadku lub co mamy w naszym przypadku dla różnych linki do znajdujących się na prawo do lub z lewej strony.
Będą wszystkie zwinąć gdy trafiliśmy, że mniejszy rozmiar mobilnej.
A potem, aby je pokazać znowu kliknij na ten przycisk, tutaj i że przycisk ma atrybutu target danych i cokolwiek ID odpowiada to będzie ukryte i widoczne, gdy klikniemy na ten temat.
I tak się składa, że ​​ten pomysł tutaj.
OK tak mili maratonu.
Wiele rzeczy, które idzie do dokonywania bootstrap pasku nawigacyjnym.
Ale znowu aż dotarliśmy tam było po prostu prosto do naszego skopiowanie tego pliku i krajanie jego fragmentów.
I tak właśnie robimy tyle są prawie za każdym razem, po prostu przyjąć, że przykładowy kod i dowiedzieć się, jakie elementy musimy i go stamtąd.