Witamy wrócić w tej lekcji mamy zamiar skupić się na stylizacji stronę show.
Więc teraz nasza strona pokaż wygląda następująco.
Mamy trochę tandetne bar tu za pomocą przycisków, które nie robią nic.
Mamy H-1 z nazwą campingu.
I mamy obraz i opis i mamy przycisk, aby dodać nowy komentarz, a następnie wyświetlane są wszystkie komentarze.
Każdy trochę pkt.
Dlatego naszym celem jest, aby wyglądać nieco więcej w ten sposób.
Więc mam pasek boczny tutaj.
Nie będziemy mieć mapę właśnie jeszcze ale musimy zrobić miejsce na mapie, a następnie będziemy musieli głównej zawartości z opisem.
Część tekstu tytuł nie zamierzamy robić jeszcze ocen, ale potem będziemy mieć listę opinii, że będzie wyglądać następująco.
Ich własny mały pojemnik tam będę miał mały przycisk na dźwigni a kilka.
Generalnie jest to nieco więcej stylu.
Możemy dodać to i to mówi, jak wiele opinii pozostało.
Więc to, co chcemy osiągnąć.
I zacząć będziemy po prostu skupić się na starcie bootstrap.
Pamiętaj, że bootstrap siatka jest 12 jednostek w poprzek.
Jedziemy do wyznaczenia trzech spośród tych 12 dla tego małego paska bocznego, a następnie mamy zamiar dodać dziewiątej do głównej zawartości.
Zanim zaczniemy od rzeczywistości zmieniania czegokolwiek chcę podkreślić, że pracuję w V 5 teraz.
Więc jeśli chcesz podążać wszystkie te zmiany będą w V 5.
A powodem robię to znaczy, że będziemy musieli dokonać niestandardowego arkusza stylów.
Idziemy mają służyć do katalogu publicznego i kilka innych rzeczy, które są istotne zmiany.
Więc chciałem zrobić oddzielną wersję.
Ale zanim to zrobimy, że pierwszą rzeczą, którą mamy zamiar zrobić, to włożyć pojemnik wokół wszystkich tego kontenera bootstrap.
Więc pokazują, że EJ ma zamiar dodać div z klasą pojemnik ot tak, a my być wprowadzenie wszystko wewnątrz tego.
I zacznę poprzez dodanie paska bocznego, a my po prostu wypełnić go z niektórych danych manekina jak my tu mamy.
Więc DIVX i to musi być równa klasy pro iw tym rzędzie będziemy mieć inny div, gdy klasa jest kolumna średnio trzy tak po prostu.
A potem wewnątrz tutaj mamy zamiar dodać paragraf, a my będziemy się ten tekst, który mówi Joachim.
Więc to jest paragraf gdzie klasa jest ołów, a potem po prostu zamiar umieścić cię obóz teraz będziemy się zmieniać to ostatecznie.
Ale tak obozu, a następnie dodać te małe Pozycji zrobimy div z klasą jest grupa lista kreska a następnie tutaj mamy zamiar dodać kilka sojuszników w każdym sojusznika ma klasę pozycji grupowej listy.
A w środku będziemy wystarczy dodać jakieś dane fikcyjne, a my po prostu nazwać informacji 1, a potem idę do powielania tych informacji do informacji 3.
A potem zobaczymy, co to wygląda teraz.
Tak na odświeżenie strony mamy pasek boczny tu i zrobię jedną z tych przedmiotów wybranych, aby rozpocząć.
A wszystko, co musimy zrobić, to włożyć aktywną właśnie tam.
Jeśli mamy świeże Widzimy teraz, że jeden z nich jest aktywny.
I to jest naprawdę tylko zastępczy mieć coś tam, więc nie mamy dużo spacji ale znowu będziemy dodawać prawdziwych danych tam i mapa ostatecznie.
I po prostu wskazać go mapa trafi tu wewnątrz tego medium trzeciej kolumnie w końcu, ale nie jeszcze.
OK, więc to jest pasek boczny.
Teraz mamy zamiar dodać w głównej zawartości.
Więc musimy innej kolumny i ten jest medium kolumna klasy 9.
I zamiast nie musimy mieć H-1 musimy mieć obraz, ale przed tym wszystkim można zauważyć, to faktycznie w jednym z tych miniatur jak mamy na stronie głównej.
Każdy z nich jest miniaturka.
Mamy zamiar zrobić to samo po całym obrazie w tytule i komentarzach i to wszystko.
Więc mamy zamiar dodać div i div będzie mieć klasę równa miniaturę.
A potem w środku, że mamy zamiar dodać obraz i będę nadal obraz mamy już napisane i po prostu umieścić go w prawo tam.
Tak, że to będzie nasz kemping obrazu.
A potem chcemy również dodać klasę do tego, że daje nam bootstrapped który jest wizerunek Dasch elastyczne.
No to jedziemy.
Zapisz to.
A jeśli spojrzeć na to, co mamy teraz i odświeżyć się przynajmniej mieć obraz i treść w odpowiednim miejscu.
Mamy problem, gdy nie bierze się jednak z tym, że chcemy.
Chcę, aby przejść całą drogę w poprzek i będziemy musieli sobie z tym poradzić z jakimś zwyczajem C Ss na końcu.
A teraz będziemy wrócić i dodać to tutaj gdzie mamy nazwę ziemi obozu i wtedy cena za noc, co my nie mamy w bazie danych.
Więc po prostu sztywno.
Więc zróbmy to teraz.
I to jest kolejny div i ten posiada klasę podpisu kreską pełnej.
A potem wewnątrz nie zamierzamy dodać H dla.
I mamy zamiar ciągnąć tego na prawo i robimy klasy wynosi prawo ciągnąć myślnik i potem co kładziemy tu będzie cena.
A ja po prostu zacząć od $ 9 nocy znowu ten będzie przychodzić z bazy ostatecznie.
Jeśli mamy świeże Teraz otrzymujemy $ 9 nocy po prawej stronie, a następnie chcemy uzyskać nazwę campingu które ja po prostu skopiować tu na lewym skrzydle.
Będziemy więc umieścić go tuż poniżej, a jeśli nie dodajemy prawo ściągania zostanie automatycznie przejść w lewo mimo, że jest większy niż to, co miałem na myśli i będę kolei, że w mniejszych h dla i zamierzam aby dodać znacznik zakotwiczenia wewnątrz tam tak po prostu i umieścić nazwę campingu wewnątrz znacznika zakotwiczenia.
A idea, że ​​jest to, że w końcu mogę wrócić.
Powinno to być link do rzeczywistej campingu lub na stronie parku serwisowego, gdzie możemy iść zamówić coś.
Na razie to tylko link do nikąd.
OK.
Mamy więc, że w.
Mamy cenę.
Teraz dodajmy opis widok.
Tak, że będzie tylko znacznik akapitu, a następnie dodamy w naszym opisie, który jest opis campingu właśnie tam.
I to będzie trochę rozczarowująca, ponieważ nie mamy dużą subskrypcji teraz więc może chcemy zrobić, to pójść i zobaczyć bazę danych z pewnym Lorem Ipsum, a ja po prostu się do kradzieży to i będę kopiować to i wrócić do pliku nasion.
A potem, zamiast pliku naszego potomstwa, a ja zmienić opis na wszystkich trzech z nich.
Po prostu zrób to samo, a nie bla bla bla.
Mamy teraz trochę dłuższy Lorem Ipsum, a my uratować.
A potem, aby ta wejdzie w życie musimy zrestartować serwer ponieważ otrzyma bazę danych.
A potem wróćmy i skręcić w stronę campingów.
Mamy trzy kempingów.
Jednak mają one teraz bardziej uzasadniony opis jakiś tekst.
Okej świetnie.
Warto więc spojrzeć co teraz musimy pracować.
Istnieje kilka drobnych rzeczy.
Zostawimy gwiazdy w przeglądzie liczyć sami na teraz i będziemy poruszać się w dół do komentarzy.
Wróćmy do pokazu tego EJ Tak Plik możemy zamknąć się z nasion na razie, co mamy zamiar zrobić to dodać w klasie oraz dają również wewnątrz medium kolumnowej dziewiątej, ponieważ chcemy, aby być w tej samej kolumnie tutaj.
Podejmowania tej samej ilości przestrzeni.
Tak więc, aby to zrobić wystarczy przejść tutaj po miniaturce więc ten podpis i tu jest to miniatur.
Tak dobrze, że będziemy dodawać div class.
Równa się dobrze.
A następnie wewnątrz, że zamierza otworzyć go i to, gdzie będzie to zrobić zapętlenie poprzez dodawanie komentarzy.
Ale mam zamiar rozpocząć dodając w przycisku dźwignię z was przycisku, a my po prostu zrobić prosty i to div div będzie mieć klasę kreską tekstu rację.
A potem wewnątrz nie zamierzamy dodać nasz znacznik zakotwiczenia tutaj już mamy, aby utworzyć nowy komentarz.
Wystarczy umieścić tutaj to.
Jest to długa, ale pamiętaj, że jest to tag kotwicy, który ma klasę Przycisk sukcesu, który sprawia, że ​​na zielono.
Ale sędzia jest naprawdę długa część.
To będzie campingów slash slash komentarze campingu ID slash nowa, ale zapisać i odświeżyć.
OK.
Więc widać, mamy studnię, która daje nam piękny szarym tle w granicy.
To gdzie mamy zamiar dodać w komentarzach.
Dlatego musimy zrobić jest pętli komentarzach i mamy już tego zrobić.
Ale zamiast po prostu dokonywania pkt dla każdego z nich mamy rzeczywiście zamiar zrobić osobny wiersz.
Więc pokażę wam, co to wygląda, gdy kopia tego lub wyciąć.
Możemy usunąć ten dodatkowy punkt, a my zamierzamy umieścić tego prawa po prawej stronie tekstu.
I zróbmy to poprawnie.
Więc mamy pętlę, a następnie jedziemy do pętli każdego komentarza i zamierzamy dodać wewnątrz tutaj div class wiersz dla każdej klasy jeden div równa wiersz.
A potem wewnątrz każdego Jedziemy, aby dodać kolejną klasę div równe podłoże kolumny 12 i zapisz to.
A jeśli spojrzeć na to, co mamy tu skończyć z nazwą użytkownika email slash nazwa użytkownika, którą nazywamy autora.
A następnie po prawej stronie nie ma tym razem 10 dni temu, która będzie kod prostu ciężko jakiś rzeczywisty komentarz będzie dalej.
Więc, aby tę pracę musimy zrobić jakiś tekst, a następnie zrobić coś w sprawie prawa właściwego prawo wyciągnąć tekst, a następnie musimy dodać paragraf w dla rzeczywistej samego komentarza.
Więc spróbujmy, że i przejdź tutaj.
Mamy pożywkę kolumnie 12.
A w środku tego mamy zamiar zacząć po prostu dodając komentarz autora.
Więc po prostu dodać, że właśnie tam.
A potem niżej, że mamy zamiar dodać rozpiętości i będzie po prawej stronie.
Więc dodamy klasyczną prawo ciągnąć.
A potem będziemy się tu tylko dodać dziesięć dni temu do teraz.
Dobrze kodu po prostu trudne, że w.
A potem ostatnią rzeczą, jaką chcę zrobić, to faktycznie pokazać tekst komentarza.
Więc mam zamiar uzyskać ten komentarz tekst tutaj, a my umieścić że wewnątrz własnej ustępu, które już mamy tu tak po prostu, z wyjątkiem chcemy przenieść go wewnątrz kolumny tutaj, podobnie jak mamy autora i 10 dni mijają ,
Chcemy, aby być w tej samej kolumnie razem i teraz, ale zapisać i wrócić.
Zobacz, co mamy.
W porządku.
Tak więc mamy jeden komentarz.
to jest to!
Ale widać, że mamy przycisk dodać nowy komentarz.
Upewnij się, że to działa.
I wyświetlane są tutaj komentarze.
Jesteśmy brakuje ocenę.
Tak to wygląda trochę dziwnie, ale to dobrze teraz.
Co może chcemy zrobić, to udać się dodać jeden lub dwa więcej komentarzy.
Więc wróć tu i niech wystarczy użyć trochę więcej lorem ipsum.
Więc jestem po prostu skopiować części tego i dodać je jako komentarze.
Wystarczy korzystać z niektórych, że i autor tutaj będzie kemping.
Dziadek.
Zatwierdź.
OK.
Więc mamy teraz coraz nasze komentarze tutaj dobrze.
To działa.
Mam trochę miejsca, które chcemy dodać.
Jeśli spojrzeć na to, co mamy tutaj, jest bardzo słaba linia nie wiem, czy będziesz pokazać się na obsadzie ekranem.
Jest bardzo słaba linia dodać odstępy i jedyne co musimy zrobić, żeby tej pracy jest dodanie godz r.
Więc zaraz po tym tekście prawa, które jest po prostu dodać przycisk w linii poziomej i jeśli odświeżyć teraz mamy tam trochę miejsca.
Masz przycisk i mamy wszystkie nasze komentarze są wyświetlane w krótkim okresie.
Dlaczego nie możemy zbudować nazwę użytkownika.
Więc wracamy tutaj, a my już to i pozbyli się go, ale wrócimy i dodano kolejny silny tag z autorem, a oni sprawiają, że nieco łatwiej zobaczyć.
No to jedziemy.
Nadal nie wielki, ale wystarczająco dobry na teraz.
Więc tak naprawdę wszystko bootstrap, że musimy to zrobić teraz.
Ale my wciąż nie zrobił.
Jeśli cofniemy się i spojrzeć na gotowej wersji owski zobaczysz, że obraz zajmuje całą miniaturę i są po prostu nie robi.
Choć zrobiłem punkt korzystania z dokładnie tego samego obrazu nie chodzi o samego obrazu rzeczywistego.
Problem sprowadza się do naszej stylizacji.
A to, co chcemy zrobić, to pójść i powiedzieć to zdjęcie do objęcia 100 procent z pojemnikiem.
Więc pokażę wam możemy po prostu sprawdzić to i to jest świetne zastosowanie do inspektora tutaj.
Możemy je zaznaczyć tutaj, a następnie tutaj możemy dodać w stylu ze 100 proc.
I tam idziemy.
Więc to jest jedna rzecz, że my chcemy zrobić.
Jest jeszcze bardzo niewielka różnica, która ma trochę miejsca tam, że nie mamy na ten jeden.
I pozbyć się, że wszyscy chcemy zrobić, to udać się do rzeczywistej miniaturkę i wybierz miniaturę, która jest tu i zamierzamy dać, że wypełnianie zero.
A teraz, jeśli przyjrzymy wygląda to tak, że chcemy go szukać lub prawie wygląda w ten sposób, gdy spojrzeć.
Mamy zamiar dodać kilka odstępów również tutaj.
Można tam zobaczyć jakiś odstęp zrobić tutaj i możemy naprawić teraz.
Ponadto, sprawdzając je i pamiętaj, że nie jesteśmy w rzeczywistości go naprawić jesteśmy po prostu sprawdzając je w przeglądarce, a potem wrócę i faktycznie wprowadzić te zmiany w naszym arkuszu stylów.
Więc to, co chcemy zrobić, to dodać trochę wyściółka na źrebię podpisu, który jest to pole tutaj.
A Padam chcemy jest na lewej prawej u góry iu dołu i to będzie dziewięć lub 10 pikseli.
Więc po prostu zrobić dopełnienie dziewięć x.
I tam idziemy.
Skończymy z ładnym rozstawie tam.