Witamy z powrotem w tej lekcji mamy zamiar kontynuować pracę na obozie.
Mamy już zrobił wstępną konfigurację.
Zrobiliśmy kilka podstawowych rozłożyć dodany nagłówek i stopkę Parshall na dodaliśmy bootstrap i dodaliśmy funkcjonalność tworzenia nowych kempingów.
Teraz mamy zamiar iść w stronę stylu camp za pomocą startowej.
Więc zacznijmy.
Pierwszą rzeczą, zrobię to upewnić się, moje serwery są uruchomione.
A wystarczy spojrzeć na to, co mamy teraz.
Na pewno trochę rozczarowująca.
Mam więc dwa główne cele.
Pierwszym z nich jest to, że chcemy lepszego nagłówek w tytule się tutaj tak to powinno wyglądać ładniej.
Mamy zamiar wykorzystać to, co nazywa się jumbotron w Bootstrap a potem także obóz lista campingów powinien nie tylko wyświetlać pionowo w taki sposób.
Zamiast tego chcemy siatki mniejszych obrazów dzieje w sieci i że powinien być elastyczny.
Zacznijmy od pierwszej, która jest coraz to tytuł tekstu, aby spojrzeć trochę ładniejszy.
Więc mam zamiar otworzyć camping, że tak właśnie jadę do pracy tutaj.
Więc mam zamiar zmienić rozmiar tego trochę, ponieważ mamy zamiar pisać sporo poczty HD, a my nie będziemy robić nic z terminalem w ogóle.
Więc do pracy w nagłówku mamy zamiar użyć tagu nagłówka, który nie widział.
Funkcjonalnie to działa dokładnie tak samo, jak coś podobnego div.
Jedyną różnicą jest to, że ma trochę semantycznego znaczenia do niego.
Korzystanie z głową, a nie tylko arbitralne div, ale to nie ma znaczenia, to tylko kontener.
I mamy zamiar dać mu klasę jumbotron a następnie w jej wnętrzu mamy zamiar dodać również wystarczy skopiować ten H-1 w rzeczywistości, a my po prostu zostawić go na tym i zapisać Frigo i odświeżyć naszą stronę.
Mamy teraz co nazywa się Jumbotron.
To wciąż nie jest wielki.
Następną rzeczą, którą powinniśmy zrobić to wszystko wewnątrz bootstrap pojemniku.
Więc wszystko, co widzimy tutaj to wszystko mam zamiar wciąć i mam zamiar dodać div z klasą równa pojemnik tak po prostu.
A potem będziemy trzymać wszystko w środku, że i to będzie dodać trochę speccing dla nas po bokach.
Odświeżać.
Widać nie mamy już rzeczy aż do lewej strony tutaj.
Mamy trochę miejsca i nasz JumboTron szuka trochę bliżej iw końcu będzie musiała pojawić się tandetne bar.
Tak to będzie wyglądać trochę ładniej, jak również.
Na razie po prostu mieć Jumbotron.
Teraz zmieńmy sam tekst.
Więc zamiast tego jest strona camping postawmy wiadomość powitalną Witamy w obozie.
Zapraszam do umieścić niezależnie od zawartości chcesz i będę również dodać w ustępie akapitu dodam tylko trochę rodzaju mottem i powiem tylko przeglądać naszą rękę i odebrać kempingów z całego świata.
Coś w tym naprawdę nie ma znaczenia.
Będziemy zapisywać odświeżenia.
OK, więc teraz mamy trochę slogan i ostatnią rzeczą, którą chcesz zrobić, to dbać o tym linkiem.
Dodaj nowy odnośnik pole kempingowe.
Więc mam zamiar skopiować to i również umieścić go wewnątrz Jumbotron.
Jednak mam zamiar uczynić go przycisku.
Jeden z przycisków bootstrap, tak aby to zrobić lub dodać akapit pierwszy, a następnie umieścić znacznik zakotwiczenia wewnątrz tego.
I robię to tylko dla odstępów.
Chcesz to być na jego własnej linii, a potem mam zamiar dać klasy Przycisk wiele klas PTEN ETN podstawowej dla koloru pomiędzy kreską tak dużego i uratuje.
Teraz mieliśmy nowy przycisk pole kempingowe.
Klikamy na nią i to przenosi nas do formularza, który jest całkowicie stylu.
Jeden drobny rzeczą jest, że jeśli rozmiar tego okna tutaj.
Zauważ, jak nasz tekst idzie prosto przed krawędzią Jumbotron co nie jest dobre.
Mamy pewne odstępy tutaj i chcą utrzymać ten odstęp, co musimy zrobić, to po prostu dodać kolejny pojemnik wewnątrz Jumbotron więc div class równa pojemnika, a następnie na dół wewnątrz Jumbotron przed końcem na div zamknięcia, a potem po prostu wcięcie wszystko.
A teraz, jeśli odświeżyć.
Wyglądała tak samo, ale kiedy kurczą się ją teraz mamy tam trochę miejsca.
OK, więc to część nagłówka.
Teraz chcemy pracować na tej siatki obrazów i będę się z tobą przodu.
To na pewno trochę więcej pracy.
OK, zaczynajmy na tej siatce i mamy zamiar zacząć od stworzenia wiersz tak div class równa wiersz tak po prostu i mam zamiar zacząć kapeczki wiadomość.
Więc mamy zamiar dodać div class równa i zamierzam zrobić to po prostu zajmują całą szerokość, a my po prostu będziemy mieli tutaj wiadomość i H-3, który mówi nasze najpopularniejsze strony są campingów wiedzieć nie będzie wyglądać dobrze.
Na razie niech wracamy nad i zacznijmy dodając w div class rzędu, które musimy wszystko w naszej szkole podstawowej w rzędzie.
Jest to div class równa wiersz tak po prostu.
A teraz musimy o tym porozmawiać na każdej pętli, ponieważ to, co tak naprawdę chcesz zrobić, to zamiast naszej sieci wewnętrznej wierszu dla każdego campingu Chcemy, aby div, który ma klasę kolumny i kolumny z użyciem bootstrap siatkę.
Więc mam zamiar zrobić to teraz gdzie mam zamiar umieścić cały ten kod dla każdej pętli zamierza wcięte tak po prostu.
A potem musimy tutaj naszą zamykający znacznik div.
Tak jest na klasycznym rzędzie, to jest dla pojemnika.
OK.
Więc daną klasą wiersz i zamiast po prostu pozostawiając tę ​​zawartość jako że div i tu z H na obrazie nadal będziemy mieć obraz, ale mamy zamiar zmienić ten dział tak, że ma klasę kolumny średnich trzy w kolumnie małym 6 i to tylko, aby to reaguje tak, że mamy jakieś większe obrazy, gdy rozmiar ekranu jest większy.
A potem, kiedy kurczą się go będzie zejść do zaledwie dwóch obrazów na rzędzie i to będzie kurczyć się jeszcze dalej w dół do jednego obrazu na wiersz.
Więc w środku, że jesteśmy rzeczywiście zamiar dodać w innym div i DIV będzie miał klasę miniatury, który jest bootstrap klasy, które pomogą nam dokonać trochę kart będzie to miało niewielki element siatki wewnątrz które miniatur doda obraz zacząć właśnie tak.
Mamy usług graficznych równe campingu masz RL A my po prostu zostawić go w tym.
I mamy zamiar pozbyć się tego teraz i po prostu zapisać i zobaczmy, co możemy uzyskać, jeśli są świeże.
W porządku.
Więc mamy siatkę zdjęć teraz.
Jest tylko trzy, ale jesteśmy coraz tę siatkę.
A pokażę ci, co mam rozumieć przez co reaguje.
Tak jak te kurczą się zauważyć, jak zmienia się dwa kwadraty lub dwóch przedmiotów na całym ekranie.
Pamiętaj, że istnieje 12 jednostek.
Więc co mieliśmy pierwsze jesteśmy dzieląc go na cztery kawałki, gdzie każdy z nich wyjął trzy jednostki, a następnie, gdy sieć staje się mniejsza tutaj każdy z nich trwać sześć jednostek, a nawet mniejsze automatycznie przechodzi do jednego.
I nie trzeba pisać, że ponieważ dodatkowa mała domyślnym jest użycie 12 jednostek.
Więc nie trzeba było określić, że.
Teraz przejdźmy tytuł z powrotem w tym imię i campingu, a nie tylko w wieku do jednego zrobić klasę nother bootstrap div class równa podpis tak po prostu.
A potem w środku nie położy H nazwy campingu.
OK Ratujmy zobaczmy jak to wygląda.
No to jedziemy.
Dostajemy te ładne małe karty.
Jest to klasa miniatur czyni to za nas.
Mamy swoje obrazy.
I niech po prostu zobaczyć, jak to wygląda, jeśli mamy kilka obrazów dzieje w kilka elementów.
Więc nie masz to zrobić, ale mam zamiar wkleić tutaj.
Dajcie nam trochę więcej danych.
To będzie duplikatów danych, ale to jest w porządku.
A potem musimy się upewnić, dodamy prawidłowego przecinki i tak przecinek tam i tam przyjść.
Jeśli teraz odświeżyć Oh musimy zrestartować serwer.
I za każdym razem, kiedy bałagan z aplikacji.
Tak.
A teraz, jeśli będzie widział odświeżyć mamy mały problem.
Nasza siatka jest trochę pomieszane.
A co się dzieje, że mamy obrazy o różnych wysokościach.
Więc to Salmon Creek jest inny niż te.
Chociaż szerokość jest taka sama w tym wypadku.
I to zrzucenia siatkę i jest łatwym sposobem, aby to naprawić, choć jest to trochę słaby.
A pokażę ci, jak to zrobić, a nie naszego campingu.
Tak.
W dniu klasy rzędu mam zamiar dodać w atrybucie style i jestem po prostu będzie to zrobić czasowo.
Będziemy się poruszać w tym do zewnętrznego arkusza stylów, ale mam zamiar to zrobić w kolejce, aby ułatwić Ci zobaczyć.
Tak więc styl do wyświetlania Flex i Flex oblewanie się okład ustawiony.
I to są dwie właściwości, które robimy, aby pomóc naszej sieci na zewnątrz.
Więc jeśli były świeże Teraz musimy skończyć z sieci, gdzie jest to bardziej elastyczne.
To nie ma znaczenia, że ​​mamy kilka różnych wysokościach, bo teraz siatka dostosuje Więc nie ma więcej miejsca między nimi i tam to tutaj.
Zasadniczo dane z minimalną ilość miejsca potrzebnego gdzie możemy mieć wszystko, co się na własnej linii ze sobą, gdzie możemy mieć wszystko być idealnie dopasowane.
I jest jeszcze jedna zmiana możemy sprawić, który ma wrócić i dodać Center tekstową, która jest bootstrap dla nas co uczyni nasz tekst koncentruje się właśnie tam.
I myślę, że wygląda trochę lepiej.
Również kwestia osobistych preferencji, a teraz mamy zrobić z strony campingu na razie.
Miejmy nadzieję, że pokazuje, jak bootstrap może naprawdę pomóc nam może dokonać rzeczy dość łatwo zwłaszcza w porównaniu do w ten sposób od początku.
I niech mi tylko pokazać nasz piękny elastycznej siatki, które mamy.
Tak to jest na telefon.
Dostajemy to ładny układ aż do czterech obrazów idzie w poprzek.
OK, więc jestem całkiem zadowolony z tego, jak to wygląda.