Witamy z powrotem w tej lekcji mamy zamiar zbudować mały projekt za pomocą czego nauczyliśmy się do tej pory o bootstrap.
Będzie ona zawierać wiele elementów Rozmawialiśmy o tym teraz zagrodzić jumbotron i sieci energetycznej.
Wrzuciłem też w jednym lub dwóch nowych rzeczy, w tym tu ikony.
Nie widzieliśmy jak to zrobić ci jeszcze.
A także fakt, że ten pasek przewijania nav jak to będzie widać, że pozostaje stała do góry tak, aby nie przejść drogę mamy stałą pasku nawigacyjnym, który również nie widziałem jeszcze.
A potem wreszcie mamy zmianę niektórych kolorów domyślnych bootstrapped komponentów.
Więc to jest rzeczywiście nieco inny odcień szarości.
Jest to odcień niebieskiego i pasek nawigacyjny ma kilka różnych kolorów.
Więc będę pokazano, jak to wszystko zrobić, że zanim zaczniemy pisania kodu.
Po prostu chce poświęcić chwilę, by zwrócić uwagę na fakt, że obrazy te w przeważającej części pochodzą ze strony internetowej wielki zasób o nazwie Splash.
Więc powitalny zapewnia kilka pięknych zdjęć wysokiej rez że możesz robić, co chcesz z.
Możesz przeczytać licencję tutaj, ale to jest dość dużo, co chcesz.
Jest to Creative Commons License bla bla bla Jestem pewien, że nie troszczą się o to, ale zdjęcia są naprawdę niesamowite i używam wiele z tych ośmiu z nich.
W rzeczywistości w naszej galerii.
A to pozostawia jedno zdjęcie, które jest ten tu, że rzeczywiście miała się nad podjęte klasę fotografii i jest to pierwsza rzecz, którą podjęliśmy, który wygląda pół przyzwoity.
Myślę, że choć w porównaniu do tych co nie wygląda tak gorąco.
W każdym razie, jeśli chcesz używać dokładnie te same obrazy, które nie są ważne.
Będzie to działać z wszelkimi obrazami w ogóle.
Ale jeśli chcesz te same te podaję wszystkie linki w tej galerii plików m.d które przesłanych wraz z tym filmem, a także zawarte dwa kolory, które mamy zamiar użyć ciemnoniebieski i jasnoszary.
OK.
Więc z tym wszystkim z drogi niech teraz zacząć od projektu.
Więc mam pustą galerię pliku.
H m l.
dodam w moim h d M L szkieletu tutaj, a my po prostu zadzwoń galerię i pierwszą rzeczą, jaką musimy zrobić to m.in. startowej.
A ja po prostu się skopiować na płytę CD kończy ze starego projektu, więc zrobię to teraz.
No to ruszamy.
Jestem linkami do bootstrap CDN.
I choć jestem tu będę również chwycić CSSA siłach i Jay queery miasto, które zrobiliśmy w lekcji pasku nawigacyjnym i umieścić te na dole tutaj tak, że gdy dodamy pasku nawigacyjnym w nie musimy iść polowanie tych plików lub znaczniki skryptów.
Więc zapisać i pierwszą rzeczą, którą możemy zrobić, to dodać w naszej Jumbotron.
To miłe i łatwe.
Więc mamy div i to będzie klasa równa Jumbotron.
A potem wewnątrz Jumbotron rozpocznie z H1, że po prostu mówi do galerii zdjęć.
Nie pójdziemy i będziemy zapisywać i zróbmy pewien, że to działa.
Tak będzie otworzyć ten plik.
Mamy więc Boucek włączone.
Obserwujemy zmianę czcionki.
Widzimy ten szary z Jumbotron.
Załóżmy teraz upewnić się, że jest w środku pojemnika jak to jest tutaj, a nie to, co mamy, gdzie po prostu przechodzi przez całą drogę w poprzek ekranu.
Więc zrobimy to div class równa pojemnik.
Nie możemy iść i zróbmy to poprawnie i odświeżyć i wrócimy.
Dobrze więc mamy Jumbotron jednak dodać w niniejszym ustępie.
Teraz możemy wrócić i zrobić ikonę, ale to tylko znacznik akapitu pod H-1 będziemy oszczędzać.
Śmiało umieścić dowolny inny tekst chcesz tam i skończymy z Jumbotron teraz.
Więc wróćmy i niech teraz zrobić pasku nawigacyjnym, a ja nie zamierzam wpisywać tyle pasek od podstaw z dwóch powodów.
Jednym z nich jest to, że jest trochę kodu.
To zajmie dużo czasu.
I ten film.
Ale dwa jest fakt, że prawie nigdy nie wpisywać Ackbara od podstaw.
Jak już wspomniałem w filmie NASCAR większość czasu mój workflow jest to, że należy przejść do witryny bootstrap lub do poprzedniej strony, że zrobiłem z paska NAV i kopią.
I właśnie sprawdziłem go i pozbyć się części, które nie chcą.
Dodam kilka nowych kawałków w.
Więc to gdzie mam zamiar zrobić.
Mam już wystarczająco dużo części, które zrobiłem w pasku nawigacyjnym powiedział każdej aplikacji HTML.
To właśnie tutaj, a ja po prostu się skopiować, a następnie, że będziemy go podkręcić trochę.
Więc skopiuj go i wrócę, a my po prostu umieścić to na samym początku pliku tak po prostu.
I zobaczmy, co mamy są świeże i mamy pasku nawigacyjnym.
To jest blisko.
Chcemy zmienić markę tutaj.
Chcemy także, aby zmienić kolor w końcu i chcemy, aby upewnić się, że jest on przymocowany do górnej, która nie jest już teraz, ale będziemy się tam dostać.
Wróćmy i po prostu zmienić markę.
Więc zamiast kawy Zadzwoniłem kopalnianych obrazów można nazwać to, co chcesz.
Oczywiście upewnij się, że to działa w porządku.
Następną rzeczą, pokażę ci to szybka zmiana możemy zmienić kolor, gdzie pojawiają się zamiast drzemkę lub domyślnie.
Możemy to zrobić teraz, jeśli pasek wierszem a pokażę ci, co to wygląda.
Dostajemy ciemno teraz lub kolory zostały odwrócone, gdzie tekst jest jasny, a my się na ciemnym tle.
To nie jest jeszcze niebieski kolor, który Idę tutaj.
A czcionka nie jest białe, ale będziemy wrócić i naprawić.
Jest to na tyle blisko do teraz.
Teraz możemy skupić się na rzeczywistej galerii zdjęć na tej siatce tutaj.
I zacznijmy patrząc na to, jak zachowuje się w roztworze.
Tak zaczyna się trzy obrazy idzie w poprzek, a następnie jak zmiana rozmiaru idzie w dół do dwóch, a potem idzie w dół do dwóch i wreszcie na mały rozmiar to idzie do jednego, jak można zobaczyć tutaj.
I mamy jeden obraz idzie w poprzek.
Zacznijmy od utworzenia siatki dla tej dużej wielkości, gdzie mamy trzy idzie w poprzek.
Pamiętaj, mamy w sumie 12 jednostek.
Więc jeśli chcemy trzy dzieje po drugiej stronie mamy zamiar wyznaczyć każdy z nich czterech jednostek.
Warto więc ustawić, że się tuż pod naszym Jumbotron.
Wciąż wewnątrz pojemnika choć musimy po prostu zrobić div class równa wiersz, a następnie wewnątrz, że będziemy mieć div class równa i chcemy go mieć cztery jednostki.
Więc zrobimy kolumny dużą kreskę 4 i nacisnąć enter i możemy zacząć od tylko wprowadzenie jakiś tekst, a potem będę powielać, bo chcemy, trzy z nich.
I nie martw się o ustalenie wcięcia jeszcze, bo mamy zamiar zrobić większe zmiany w chwilę.
Ale bądźmy odświeżyć i mamy te trzy kolumny idzie w poprzek.
Więc następną rzeczą, że chcemy zrobić, to niektóre obrazy dzieje i wszyscy zaczynają, ale po prostu biorąc L mojego Golden Gate Bridge zdjęcie i mamy zamiar dodać tag obrazu, a nie tekst.
Więc źródło obrazu odpowiada, że ​​Golden Gate Bridge jesteś chory, a ja po prostu wklej to trzy razy i oszczędzać.
A jeśli wrócimy mamy problem, który jest, że obraz jest ogromna, mimo że mamy te trzy kolumny.
Nasz obraz nie przebywa wewnątrz naszej kolumny to nie kurczy się.
Można zobaczyć, co zrobimy, aby rozwiązać ten problem, to dodać dodając trochę więcej bootstrap.
Nie pokazałem jeszcze utworzyć tę miłą obramowanie wokół niego i to się nazywa miniatur.
Wszystko, co musimy zrobić, to napisać div z klasą równej miniaturę obrazu, a następnie co kładziemy wewnątrz zostanie zmniejszony aby mógł zmieścić się wewnątrz kolumny.
I to także dostaje ten mały granicę tutaj, które myślę, że wygląda całkiem ładnie.
Więc to zrobić, że jestem naprawdę dzieje się pozbyć tego, co mamy z tymi, po prostu wrócić do jednego obrazu i dodać w div class równa miniaturę i zrobione, że prawidłowo.
A my zawinąć, że wokół obrazu i oszczędzać.
Jeśli teraz odświeżyć.
Zobaczysz, jeśli mamy pojedynczy obraz, który zajmuje się odpowiednią ilość miejsca wewnątrz tej sieci.
Jest to kolumna i ma trochę obramowanie wokół niego, a obraz nie jest gigantyczna, który jest świetny.
Warto więc upewnić się, że działa, jeśli mamy powielać tego.
Więc to jest jeden obraz niech powielić go trzy razy i zobaczyć co się dzieje odświeżenia.
I tam idziemy.
Mamy trzy obrazy.
Pójdę do przodu i dodać sześć bardziej.
Mamy więc w sumie dziewięć, jak my tutaj.
I tak naprawdę nie trzeba dodawać osobne wiersze.
Możemy po prostu umieścić je wszystkie w tym samym wierszu.
Więc skopiować wszystkie trzy, które mamy do tej pory do czasów i oszczędzać.
To da nam dziewięć obrazów.
A gdybym odświeżyć zobaczysz, że automatycznie zawijany do następnego wiersza.
Więc mamy tylko mieć jeden wiersz i dodać w tych kolumn, które znają medycznie nos.
Jeżeli chcemy, aby każdy obraz, aby trwać cztery jednostki to znaczy, trzy w każdym wierszu, a następnie musimy trzy rzędy obrazów.
Wrócę i zmienić wszystkie te zdjęcie, które elfy pod koniec filmu.
Nie chcę, aby oglądać tego.
Bardzo ciekawy prostu skopiowanie i wklejenie, ale skupmy się na reszcie tej siatki.
Więc teraz, gdy tylko jako medium przeboju idzie do jednego obrazu, po której nie jest to, co chcemy, czego szukasz dwa obrazy w tej całej średnim przerwania.
A potem po średnim punktu krytycznego, który jest tam trafiliśmy małe i nadal chcemy go zatrzymać w 2.
Więc to naprawić w naszym lub idzie do jednego razu na dużym punkt przerwania lub średnim przerwania, a następnie małych i dodatkowych małych pobytów w 1.
Możemy wrócić tutaj i będziemy zmieniać wszystko to wiesz wybrać i nacisnąć polecenie d zaznaczyć wszystkie przypadki nazywamy je duża, a potem będę hit strzałek w lewo lub w prawo, aby przesunąć kursor.
Teraz mogę edytować je wszystkie naraz.
A to, co chcę zrobić, mogę dodać w kolumnie średnich sześciu ponieważ chcemy Perrow i że będzie działać.
A jeśli wrócę i odświeżyć zobaczysz że pobyt w 3 na rzędzie, a potem uderzył w środkową przerwania i idą do 2.
Ale potem uderzył mała i skacze do jednego i do naszego, kiedy trafiliśmy małe rozwiązanie pozostaje w 2.
Tak, aby naprawić tę kolumnę, zamiast robić kolumny pożywkę sześć możemy zrobić mały 6 i wrócić ponownie odśwież tę wersję.
Trafiliśmy nośnika.
Idziemy do dwóch.
Trafiliśmy małe.
Zatrzymujemy się w 2, a następnie udajemy się dodatkowa mała i jesteśmy na 1 1 zdjęcie na rzędzie.
Idealny.
Więc to wszystko, co mamy do zrobienia dla siatki i skończymy z większością funkcji tutaj.
Bardzo szybkie, aby ta uruchomiony.
Co chcemy skupić się na teraz to tylko niektóre z kolorów, a także ikonami.
Zacznę, pokazując, w jaki sposób możemy dodać ikony za pomocą startowej.
Więc on się bootstrap jeśli pójdziesz do komponentów są te ikony glifów up górze i tam kilka z nich do wyboru.
I znajdziemy taki, który chcemy wykorzystać, a ten, który używam.
Ja po prostu nie szukaj myślę, że to aparat.
Więc jest to kamera tutaj i nie używam tego aparatu.
To nieco inna.
Ten, który używam jest bardziej retro aparatu i pokażę ci, jak dodać, że w.
To nie jest właściwie częścią bootstrap Ale zacznijmy od zwykłego aparatu, że pochodzi z bootstrap.
Więc piszemy Clifford Kahn, a następnie przejść z conn kamery rozdzielczej.
A jeśli przewijać dalej w dół można zobaczyć, gdzie wyjaśniają, jak używać go do tworzenia rozpiętość gdzie klasa jest równa z Con a następnie glif to może pędzić nazwę ikony glifów.
Więc skopiuj ten zakres i zaczniemy wykonując go wewnątrz H-1 wystarczy umieścić go na samym początku H-1 i chcemy się szybko A-Kon kreska aparat i będziemy zapisywać i odświeżać.
I tak po prostu można dostać aparat tam.
A jeśli chcemy przestrzeni możemy albo zrobić poprzez dopełnienie lub możemy po prostu dodać spację tam.
I otrzymujemy przestrzeń możemy zrobić dokładnie to samo na pasku nawigacyjnym i ja jeden, który jest wywoływana Photo przejść dwukrotnie sprawdzić tutaj.
Można to zrobić szukaj na tej stronie w obrazie fotograficznym.
Tu jest.
Jest to możliwe, jeżeli może pędzić obraz.
Więc pójdziemy do baru marki nav tu i wklej w tym przedziale ponownie.
A potem w środku rozpiętości klasa należy kliknąć na zdjęcie, a my dodamy spację również tam.
Wracamy do naszej stronie są świeże i teraz mamy tam trochę obraz.
I mamy też aparat.
Następny Zajmijmy paska nawigacyjnego i zaczniemy poprzez uczynienie go przymocować do góry, dzięki czemu można zobaczyć już teraz.
To nap nasze zwoje dalej.
Ale w roztworze pozostaje tam.
A do tego jest to, że jedna klasa musimy dodać do naszego baru NAV.
Więc aż tu chcemy nav bar kreska kreska stała top i oszczędzać.
A jeśli są świeże zobaczysz to przymocowane do góry.
Jest jeden mały problem, który jest, że nasz materiał jest już za nim trochę i chcemy go mieć to normalne odstępy nad Jumbotron.
Co musimy zrobić, to dodać trochę wyściółki dla naszego organizmu, a zdarza się 70 pikseli.
Docs bootstrap powie, że jeśli zapomnisz 70 pikseli wypełnienia jest to, co chcemy to szerokość teraz cztery.
Więc pójdziemy tutaj i będziemy tworzyć arkusz stylów i teraz będę go nazywać Galeria Dotsie SS, a następnie wybierz wewnątrz ciała dopełnienia szczycie 70 pikseli, a następnie musimy dodać, że w tym związany z arkusza stylów, który jest Galeria CS S.
Teraz upewnij się, że działa.
No to jedziemy.