이 강의로 돌아와서 우리는 쇼 페이지의 스타일링에 집중할 것입니다.
그래서 지금 우리의 쇼 페이지는 이렇게 보입니다.
우리는 아무것도하지 않는 버튼으로 여기에 약간의 멍청한 막대를 가지고 있습니다.
캠프장이라는 이름의 H-1이 있습니다.
그리고 우리는 이미지와 설명을 가지고 있으며 새로운 코멘트를 추가하는 버튼을 가지고 있으며 모든 코멘트가 표시됩니다.
각 하나의 작은 단락.
그래서 우리의 목표는 이것을 좀 더 비슷하게 보이게하는 것입니다.
그래서 여기에 사이드 바가 있습니다.
우리는지도를 아직 만들지 않을 것이지만 우리는지도를위한 공간을 마련 할 것이고 우리는 그 주 내용에 설명을 넣을 것입니다.
일부 텍스트는 등급을 아직 정하지 않겠지 만 다음과 같은 리뷰 목록도 제공합니다.
아래에 자신의 작은 컨테이너 몇 가지 레버를 약간의 버튼을해야합니다.
일반적으로 조금 더 스타일이 있습니다.
우리는 이것을 추가 할 수 있으며, 얼마나 많은 리뷰가 남았는지 알려줍니다.
이것이 우리가 지향하는 목표입니다.
그리고 시작하기 위해 부트 스트랩 그리드에 집중할 것입니다.
부트 스트랩 그리드는 12 단위입니다.
이 작은 사이드 바에 12 개 중 3 개를 지정하고 주 컨텐츠를 위해 9 개를 추가 할 것입니다.
우리가 실제로 무엇인가를 바꾸기 시작하기 전에 저는 지금 v 5에서 일하고 있음을 지적하고자합니다.
그래서 당신이이 모든 변화를 따라 가길 원한다면 V 5가 될 것입니다.
그리고 제가 그렇게하는 이유는 우리가 사용자 정의 스타일 시트를 만들어야하기 때문입니다.
우리는 공개 디렉토리와 상당한 변화가있는 몇 가지 다른 것들을 제공해야 할 것입니다.
그래서 별도의 버전을 만들고 싶었습니다.
그러나 우리가하기 전에 먼저이 모든 부트 스트랩 컨테이너 주위에 컨테이너를 추가하십시오.
그래서 E.J. 클래스와 함께 div를 추가 할 것입니다. 우리는 그 안에 모든 것을 넣을 것입니다.
그리고 사이드 바를 추가하여 시작하겠습니다. 여기에있는 것처럼 더미 데이터로 채울 것입니다.
그래서 DIVX와 이것은 클래스가 프로와 같을 필요가 있습니다. 그리고 그 행에서 우리는 또 다른 div를 갖게 될 것입니다.
그리고 여기에서 우리는 단락을 추가 할 것이고 요아킴을 말하는이 텍스트를 얻을 것입니다.
그래서 그것은 수업이 진행되는 단락입니다. 그리고 나서 우리는 여러분을 캠프에 올려 놓을 것입니다. 이제 우리는 이것을 결국 바꿀 것입니다.
그렇지만 캠프를하고 그 작은 목록 항목을 추가하려면 클래스와 함께 div를 작성하고 목록 대시 그룹을 작성한 다음 여기에 각 동맹군에 일련의 동맹군을 추가하여 목록 그룹 항목 클래스를 추가하십시오.
그리고 내부에서 더미 데이터를 추가하고 정보 1이라고 부르고 정보 3에이 정보를 복제합니다.
그리고 지금 그것이 어떻게 생겼는지 보자.
페이지 새로 고침을 위해 여기에 사이드 바가 있으며이 항목 중 하나를 선택하여 시작할 것입니다.
그리고 우리가해야 할 일은 적극적인 권리를 추가하는 것뿐입니다.
우리가 신선하다면 이제 그들 중 하나가 활발하다는 것을 알 수 있습니다.
그리고 이것은 실제로 뭔가를 가지고있는 자리 표시 자이므로 공백이 많지는 않지만 다시 실제 데이터와 맵을 추가 할 것입니다.
그리고 그것을 지적하기 위해지도는 결국이 중간 세 개의 칼럼 내부로 바로 갈 것입니다.
좋아, 사이드 바야.
이제 주 콘텐츠를 추가 할 것입니다.
그래서 우리는 또 다른 칼럼이 필요하고 이것은 칼럼 칼럼 매체 9입니다.
그리고 그 대신에 우리는 이미지를 가질 필요가있는 H-1을 가질 필요가 있습니다. 그러나 그 전에는 실제로 우리가 홈페이지에있는 것처럼 축소판 중 하나에 모두 있음을 알게 될 것입니다.
이들 각각은 미리보기 이미지입니다.
우리는 제목과 코멘트, 그리고 그 모든 것의 이미지 전체에서 똑같은 일을 할 것입니다.
이제는 div를 추가하고 해당 div는 클래스가 썸네일과 동일하게됩니다.
그리고 그 안에 우리는 이미지를 추가 할 것이고 나는 여전히 우리가 이미 작성한 이미지를 가지고 거기에 바로 놓을 것입니다.
그래서 그것은 우리 캠프장 이미지가 될 것입니다.
그리고 나서 부트 스트래핑 (bootstrapped)이 우리에게 이미지 Dasch 반응 형인 클래스를 추가하기를 원합니다.
우리는 거기에 갈.
저장하십시오.
우리가 지금 가지고있는 것을보고 활력을주는다면 적어도 적절한 장소에 이미지와 내용을 갖게됩니다.
우리는 이것이 우리가 원한다고 생각할 때 문제가되지 않는다.
나는 그것이 모든 길을 가로 질러 가기를 원한다. 그리고 우리는 끝내서 약간의 custom C Ss로 그것을 처리해야 할 것이다.
그리고 이제 우리는 돌아가서 여기에 캠프 그라운드의 이름이 있고 그 다음 우리가 데이터베이스에 실제로 가지고 있지 않은 밤당 가격을 넣습니다.
그래서 우리는 단지 하드 코딩 할 것입니다.
자 이제하자.
그리고 그것은 다른 div이고 이것은 캡션 대시가 가득한 클래스를 가지고 있습니다.
그런 다음 내부에 H를 추가 할 것입니다.
그리고 우리는 이것을 오른쪽으로 끌어 올릴 것입니다. 우리는 클래스가 똑같은 대시를 당길 때 우리가 여기에 넣는 것은 가격이 될 것입니다.
그리고 나는 밤 9시에 데이터베이스에서 다시 시작될 것입니다.
우리가 신선하다면 지금 우리는 오른쪽에 밤 9 달러를 얻습니다. 그리고 나서 우리는 왼쪽에있는 여기 복사 할 캠프장의 이름을 얻고 싶습니다.
그래서 우리는 바로 아래에 놓을 것이고 만약 우리가 오른쪽으로 당기지 않는다면 자동으로 왼쪽으로 갈 것입니다. 그러나 그것은 제가 생각한 것보다 더 크고 더 작은 H로 바꿀 것입니다. 거기에 앵커 태그를 추가하고 앵커 태그 안에 캠프 그라운드 이름을 넣으십시오.
그 뒤에있는 생각은 결국 제가 돌아 간다는 것입니다.
이것은 실제 캠프장이나 공원 서비스 페이지에 링크되어야합니다. 여기서 우리는 무언가를 예약 할 수 있습니다.
지금은 아무데도 연결되어 있지 않습니다.
승인.
그래서 우리는 그것을 가지고 있습니다.
우리에게는 가격이 있습니다.
이제 설명을 다시 추가하겠습니다.
그래서 그것은 단락 태그 일 것입니다 그리고 우리는 거기에 캠프장 설명 인 우리의 설명에 추가 할 것입니다.
그리고 지금은 큰 구독료가 없기 때문에 다소 부담 스럽습니다. Lorem Ipsum을 가지고 데이터베이스를보고 그냥 훔칠 것입니다. 그리고 저는 이것을 복사 할 것입니다. 그 파일을 시드 파일로 되돌립니다.
그리고 나서 우리 종자의 파일 대신에 세 가지 모두에 대한 설명을 바꿀 것입니다.
그냥 똑같이 만드십시오.
우리는 이제 더 긴 Lorem Ipsum을 가지고 있으며 우리는 구할 것입니다.
그리고 이것이 효과를 발휘하게하려면 서버를 다시 시작해야합니다. 왜냐하면 데이터베이스를받을 것이기 때문입니다.
그리고 돌아가서 캠프장 ​​페이지로 돌아가 봅시다.
우리는 3 개의 야영장을 가지고 있습니다.
그러나 그들은 이제 좀 더 합법적 인 설명을 텍스트로 가지고 있습니다.
좋아.
이제 우리가해야 할 일을 살펴 보겠습니다.
사소한 일이 몇 가지 있습니다.
지금은 별표를 검토 수에 남겨두고 코멘트로 이동합니다.
E.J.의 공연으로 돌아 가자. 우리가 종자에서 종결 할 수있는 예 파일은 우리가 여기에서 같은 열에 있기를 원하기 때문에 칼럼 매체 9 안에 잘 클래스를 추가하는 것입니다.
동일한 공간을 차지합니다.
그렇게하기 위해 미리보기 이미지 바로 다음에 바로 가야합니다. 바로 여기 캡션이 미리보기 이미지입니다.
그래서 그들은 div 클래스를 추가 할 것입니다.
잘 같아.
그리고 그 안을 열어서 주석을 추가하기 위해 루프를 반복합니다.
그러나 버튼의 레버를 버튼에 추가하여 시작하겠습니다. 그러면 간단한 div를 만들고이 div에는 텍스트 대시 클래스가 있습니다.
그리고 그 안에 안쪽 태그를 추가하여 이미 새로운 코멘트를 만들어야합니다.
여기에 넣으십시오.
긴 하나이지만, 버튼 버튼의 성공 클래스가 녹색 인 앵커 태그임을 기억하십시오.
그러나 심판은 정말로 긴 부분입니다.
campgrounds 슬래시 캠프장 슬래시 의견을 슬래시 새지만 저장하고 새로 고침거야.
승인.
그래서 우리는 지금 우리가 국경에서 좋은 회색 배경을주는 우물을 볼 수 있습니다.
여기가 우리가 코멘트에 추가 할 곳입니다.
그래서 우리는 다음에해야 할 일은 코멘트를 반복하는 것입니다. 이미 완료했습니다.
그러나 각 단락에 단락을 만드는 것보다 실제로 별도의 행을 만들 것입니다.
그래서 이것을 복사하거나자를 때 어떻게 생겼는지 보여 드리겠습니다.
그리고 우리는이 여분의 단락을 삭제할 수 있습니다. 그리고 텍스트 오른쪽에 바로 붙일 것입니다.
그리고 이것을 올바르게 해봅시다.
그래서 우리는 우리의 루프를 가지고 있습니다. 그리고 나서 각 주석을 반복 할 것입니다. 그리고 우리는 여기에 div 클래스와 동일한 div 클래스 행을 추가 할 것입니다.
그런 다음 각각의 내부에 다른 div 클래스를 추가하여 열 매체 12와 같게 만듭니다.
그리고 우리가 여기서 무엇을 가지고 있는지 살펴 본다면 우리는 저자라고 부르는 사용자 이름 이메일 슬래시 사용자 이름으로 끝납니다.
그리고 오른쪽에 10 일 전에는 지금 하드 코딩을하고 실제로 댓글을 달았습니다.
그 작업을하기 위해 텍스트를 작성한 다음 오른쪽 텍스트를 오른쪽 텍스트로 가져와 실제로 주석을 추가해야합니다.
그러니 그걸 시도하고 여기에 들어가 봅시다.
우리는 컬럼 매체를 가지고 있습니다.
그리고 그 안에 우리는 주석 작성자를 추가하는 것에서 시작할 것입니다.
여기에 바로 추가하겠습니다.
그리고 그 아래에서 우리는 범위에 추가 할 것이고 이것은 오른쪽에있을 것입니다.
그래서 고전적인 견해를 추가 할 것입니다.
그리고 나서 여기에서 우리는 지금 10 일 전에 추가 할 것입니다.
그럼 그냥 하드 코드.
그런 다음 마지막으로 주석 텍스트를 표시합니다.
그래서 저는이 주석 텍스트를 여기에서 얻으려고합니다. 우리는 저자와 10 일 간 것처럼 여기에 우리가 그것을 칼럼 내부로 옮길 것을 제외하고는 우리가 이미 가지고있는 단락 안에 넣을 것입니다 .
우리는 그들이 같은 칼럼에 있고 지금은 있지만 저장하고 돌아 가기를 바랍니다.
우리가 얻는 것을보십시오.
괜찮아.
그래서 우리는 하나의 코멘트가 있습니다.
그게 전부 야.
그러나 우리는 새로운 코멘트를 추가하는 버튼이 있음을 알 수 있습니다.
작동하는지 확인하십시오.
그리고 코멘트가 여기에 표시됩니다.
등급이 누락되었습니다.
그래서 약간 이상하게 보입니다.하지만 지금은 괜찮습니다.
우리가 원하는 것은 하나 또는 두 개의 덧글을 추가하는 것입니다.
그래서 여기로 돌아가서 좀 더 lorem ipsum을 사용합시다.
그래서이 부분을 복사하여 주석으로 추가 할 것입니다.
그냥 그 중 일부를 사용하고 여기서 작성자는 캠핑을합니다.
할아버지.
제출하십시오.
승인.
이제 우리는 여기서 우리의 의견을 듣고 있습니다.
그게 효과가 있어요.
내가 추가하고 싶은 공간이 있습니다.
우리가 여기서 무엇을 가지고 있는지 살펴 본다면 정말 희미한 선이 있습니다. 화면 캐스트에 나타나는지 모르겠습니다.
약간의 간격을 두는 아주 희미한 선이 있습니다. 우리가 그 작업을하기 위해해야 ​​할 일은 h r을 추가하는 것입니다.
그래서이 텍스트 오른쪽 바로 뒤에있는 버튼입니다. 수평 규칙에 추가하면됩니다. 새로 고침하면 이제는 약간의 공간이 생깁니다.
당신은 단추가 있고 우리는 모든 우리의 코멘트를 단기간에 표시하고있다.
왜 우리는 사용자 이름을 만들지 않습니까?
그래서 우리는 여기로 돌아갈 것이고 우리는 이미 이것을 가지고 그것을 없애 버렸습니다.하지만 우리는 돌아가서 저자와 함께 강력한 태그를 다시 추가 할 것이고, 그들은 그것을보기가 좀 더 쉬울 것입니다.
우리는 거기에 갈.
아직 크지는 않지만 지금은 충분합니다.
이것이 실제로 우리가해야 할 모든 부트 스트랩입니다.
그러나 우리는 아직 끝나지 않았습니다.
돌아가서 완성 된 버전을 살펴보면 이미지가 전체 축소판을 차지하는 것을 볼 수있을뿐입니다.
내가 똑같은 이미지를 사용한다는 점을 분명히 했음에도 불구하고 실제 이미지 자체가 아닙니다.
문제는 우리 스타일에 따른다.
그리고 우리가하고 싶은 것은 들어가서이 이미지에 컨테이너를 100 % 사용하는 것입니다.
그래서 우리는 단지 그것을 검사 할 수 있다는 것을 보여줄 것입니다. 그리고 이것은 여기의 검사원에게 큰 도움이됩니다.
여기에서 선택할 수 있으며 여기에서 100 % 스타일로 추가 할 수 있습니다.
그리고 거기에 우리가 간다.
이것이 우리가하고 싶은 일 중 하나입니다.
여전히 약간의 차이점이 있습니다. 바로 여기에 약간의 공간이 있습니다.
그리고 우리가하고 싶은 모든 작업이 실제 미리보기 이미지로 들어가서 여기에있는 미리보기 이미지를 선택하면 그 패딩을 0으로 만들 것입니다.
그리고 지금 우리가 한 번 훑어 보면, 우리가 보길 원하거나 거의 언제 보일지를 바라 보는 방식으로 보입니다.
여기서 간격을 추가 할 것입니다.
여기서 몇 가지 간격이 있음을 알 수 있으며 지금 당장 수정할 수 있습니다.
또한 그것을 검사하고 우리가 실제로 그것을 고치지 않고 있다는 것을 기억함으로써 브라우저에서 테스트하고 나서 우리는 되돌아 가서 실제로 우리의 스타일 시트에서 이러한 변경을 할 것입니다.
그래서 우리가하고 싶은 것은 여기에있는이 캡션 인 캡션 새끼에 조금 더 덧붙이면됩니다.
그리고 우리가 원하는 Padam은 오른쪽 상단과 하단에 있으며 9 또는 10 픽셀이 될 것입니다.
그래서 우리는 9 x 패딩 만 할 것입니다.
그리고 거기에 우리가 간다.
우리는 거기서 멋진 간격을 갖습니다.