이 수업에 다시 오신 것을 환영합니다. 앞으로도 계속 캠프에서 일하게 될 것입니다.
이미 초기 설정을 완료했습니다.
헤더와 푸터 Parshall에 부트 스트랩을 추가하고 새로운 캠프장을 만드는 기능을 추가했습니다.
이제 부트 스트랩을 사용하여 캠프 그라운드 페이지를 방문하겠습니다.
시작하겠습니다.
제일 먼저 할 일은 내 서버가 실행 중인지 확인하는 것입니다.
그리고 지금 우리가 가진 것을 살펴보십시오.
확실히 조금 실망.
그래서 두 가지 주요 목표가 있습니다.
첫 번째는 제목에서 더 좋은 헤더가 필요하기 때문에 여기가 더 멋지게 보일 것입니다.
우리는 부트 스트랩 (Bootstrap)에서 점보트론 (jumbotron)이라고 불리는 것을 사용하고 캠프장은 캠프장 목록을 수직으로 표시해서는 안됩니다.
대신 우리는 더 작은 이미지의 그리드를 만들고 그 그리드는 반응 적이어야합니다.
우선이 제목 텍스트가 약간 더 멋지게 보이도록하는 첫 번째 텍스트부터 시작해 보겠습니다.
그래서 캠프장을 열어서 여기서 일하게 될 것입니다.
그래서 우리는 약간의 크기를 재조정 할 것입니다. 왜냐하면 우리는 꽤 많은 HD 우편물을 작성하게 될 것이고 우리는 단말기로는 아무 것도하지 않을 것입니다.
헤더에서 작업하기 전에 이전에는 보지 못했던 헤더 태그를 사용합니다.
기능적으로 div와 같은 방식으로 작동합니다.
유일한 차이점은 이것에 약간 의미 론적 의미가 있다는 것입니다.
그냥 임의의 div보다 헤더를 사용하지만 실제로는 별 문제가되지 않습니다. 단지 컨테이너 일뿐입니다.
그리고 우리는 그것을 jumbotron의 클래스에 넣을 것입니다. 그리고 그 안에 우리는이 H-1을 실제로 복사 해 넣을 것입니다. 그리고 우리는 그것을 실제로 남겨두고 Frigo를 저장하고 페이지를 새로 고칩니다.
우리는 지금 점보트론 (Jumbotron)이라고 불리는 것을 가지고 있습니다.
그것은 여전히 ​​좋지 않습니다.
다음으로해야 할 일은 부트 스트랩 컨테이너 안의 모든 것을 만드는 것입니다.
그래서 우리가 여기있는 모든 것을 들여 쓰기로 할 것이고 클래스와 같은 div를 추가 할 것입니다.
그리고 나서 우리는 그 안의 모든 것을 고집 할 것이고 이것은 우리쪽에 약간의 speccing을 부가 할 것입니다.
새롭게 하다.
우리는 더 이상 여기 왼쪽 편에있는 것을 볼 수 없습니다.
우리는 약간의 공간이 있고 JumboTron은 조금 더 가까이서 보입니다. 결국에는 멍청한 막대가 나타납니다.
그래서 이것은 조금 더 멋지게 보일 것입니다.
지금 우리는 점보트론을 가지고 있습니다.
이제 텍스트 자체를 변경해 보겠습니다.
따라서 캠프장 ​​페이지가 아닌 캠프에 오신 것을 환영합니다.
원하는 콘텐츠를 자유롭게 넣고 단락에 단락을 추가하겠습니다. 약간의 태그 라인을 추가하겠습니다. 저는 우리 손을보고 전 세계의 캠프장을 선택하겠습니다.
그와 같은 것이 정말로 중요하지 않습니다.
새로 고침을 저장합니다.
좋아, 이제 우리는 작은 태그 라인을 가지고 우리가하고 싶은 마지막 일은이 링크를 돌보는 것이다.
새로운 캠프장 링크를 추가하십시오.
그래서 저는 이것을 복사해서 점보 트론 안에 넣을 것입니다.
그러나 나는 그것을 단추로 만들 예정이다.
부트 스트랩 버튼 중 하나는 그렇게하거나 단락을 먼저 추가 한 다음 그 안에 앵커 태그를 넣는 것입니다.
그리고 저는 그저 간격을두고 있습니다.
당신은 자신의 라인이되기를 원합니다. 그리고 저는 버튼 클래스에 PTEN ETN의 여러 클래스들을 색상과 대시 (dash) 사이의 큰 클래스로주고 저장할 것입니다.
이제 우리는 새로운 캠프장 버튼을 가지고 있습니다.
클릭하면 완전히 스타일이 지정된 양식으로 이동합니다.
하나의 사소한 일은 내가이 창 크기를 조정하면됩니다.
우리 텍스트가 Jumbotron의 가장자리에 대해 어떻게 올라 갔는지 주목하십시오.
우리는 여기에 몇 가지 간격을두고 여기에 간격을두기를 원합니다. Jumbotron 내부에 다른 컨테이너를 추가하여 div 클래스가 컨테이너와 같으면 여기에서 Jumbotron 내부에서 닫는 div의 끝에서부터 들여 쓰기 만하면됩니다. 모두.
그리고 우리가 새로 고침하면.
그녀는 똑같이 보였습니다. 그러나 우리가 그것을 축소 할 때 우리는 이제 약간의 공간을 가지고 있습니다.
좋아요, 헤더 부분입니다.
이제 우리는 그 이미지 그리드에서 작업하고 싶습니다. 그리고 저는 여러분과 함께 할 것입니다.
그것은 확실히 조금 더 많은 일입니다.
좋아요. 그리드에서 시작해 봅시다. 그러면 div 클래스가 행과 같아 지도록 행을 만들어서 시작하겠습니다. 여기서는 작은 메시지로 시작하겠습니다.
그래서 우리는 div 클래스를 추가 할 것입니다. 그리고 저는 이것을 전체 너비를 차지하게 만들 것입니다. 우리는 여기서 가장 인기있는 사이트가 여러분이 알고있는 캠프 그라운드라고 말하는 H-3을 가지고 있습니다. 많이 보이지 않을거야.
이제 다시 돌아가서 div 클래스 행에 추가하여 시작해 보겠습니다. 우리는 초등학교에서 모든 것을 필요로합니다.
div 클래스는 행과 같습니다.
그리고 지금 우리는 각 루프에 대해 이것에 대해 이야기해야합니다. 우리가 실제로하고 싶은 것은 각 캠프장의 행 내부에 그리드 대신 칼럼 클래스가있는 div와 부트 스트랩 그리드를 사용하는 열을 만들기 위해서입니다.
그래서 이제부터는 각 루프에 대해이 코드를 모두 넣을 것입니다. 그렇게하면 들여 쓰기가됩니다.
그리고 나서 여기에 닫는 div 태그가 필요합니다.
이것은 고전적인 행을위한 것이며 이것은 컨테이너를위한 것입니다.
승인.
따라서 현명한 클래스 행이 아니라이 콘텐츠를 div로 남기고 여기에 이미지가있는 H를 사용하면 이미지가 생깁니다. 그러나이 div를 변경하여 열 중간에 3 열의 클래스가 있음을 알 수 있습니다. 6 그리고 그것은 단지 반응 형으로 만들어서 화면 크기가 커지면 더 큰 이미지를 얻을 수 있습니다.
그런 다음 축소하면 줄당 2 개의 이미지로 이동 한 다음 줄 당 하나의 이미지로 더 축소됩니다.
그래서 우리는 실제로 다른 div에 추가 할 것이고이 div는 섬네일의 클래스를 가지게 될 것입니다. 이것은 우리가 작은 카드를 만드는 데 도움이 될 부트 스트랩 클래스입니다. 이미지는 그처럼 시작됩니다.
우리는 캠프장 RL과 동등한 이미지 서비스를 제공합니다.
그리고 우리는 지금 이것을 없애고 그냥 저장하고 우리가 신선하면 우리가 얻는 것을 보도록하겠습니다.
괜찮아.
그래서 우리는 지금 이미지 격자를 가지고 있습니다.
단지 세 가지가 있지만 우리는이 격자를 얻고 있습니다.
그리고 나는 그것을 반응 적으로 만들어서 의미를 보여 드리겠습니다.
이렇게 축소하면 화면에서 두 개의 사각형 또는 두 개의 항목으로 변경됩니다.
12 유닛이 있다는 것을 기억하십시오.
그래서 우리가 먼저 가지고있는 것은 4 개의 덩어리로 나누어 각각 3 개의 유닛을 꺼내고 그리드가 더 작아지면 각각 6 개의 유닛을 차지하고 더 작아지면 자동으로 하나가됩니다.
그리고 우리는 여분의 작은 기본값이 12 단위를 사용하기 때문에 이것을 쓰지 않아도되었습니다.
그래서 우리는 그것을 지정할 필요가 없었습니다.
이제 캠프장 이름에서 제목을 다시 가져오고 nother 부트 스트랩 클래스를 수행하는 나이가 아니라 div 클래스가 캡션과 같습니다.
그리고 그 안에는 캠프 그라운드 이름으로 H가 붙을 것입니다.
좋아요. 어떻게 생겼는지 보도록하겠습니다.
우리는 거기에 갈.
우리는이 멋진 작은 카드들을 얻는다.
이것은 우리를 위해 만드는 축소판 클래스입니다.
이미지가 있습니다.
우리가 일련의 아이템들을 가지고 있다면 이미지가 어떻게 보이는지 보도록하겠습니다.
그래서 당신은 이것을 할 필요는 없지만 이것을 여기에 붙여 넣을 것입니다.
그냥 좀 더 많은 데이터를주세요.
중복 된 데이터가되지만 괜찮습니다.
그리고 올바른 쉼표를 추가하고 쉼표를 추가하고 거기에 와야합니다.
이제 우리가 새로 고침하면 서버를 다시 시작해야합니다.
그리고 매번 우리는 앱을 어지럽 힙니다.
예.
그리고 우리가 새롭게하면 그는 우리에게 작은 문제가 있음을 알게 될 것입니다.
우리 그리드는 좀 엉망이됩니다.
그리고 우리는 서로 다른 높이의 이미지를 가지고 있습니다.
그래서이 연어 크릭 하나는 이것들과 다릅니다.
이 경우 너비가 동일하더라도.
그리고 그것은 그리드에서 벗어나고 있지만 약간의 불안감이 있지만 쉽게 수정할 수 있습니다.
그리고 우리 캠프장 대신에 어떻게하는지 보여 드리겠습니다.
예.
클래스 행의 날에 나는 스타일 속성을 추가 할 것이고, 저는 이것을 일시적으로 할 것입니다.
이 코드를 외부 스타일 시트로 옮기 겠지만 좀 더 쉽게 볼 수 있도록 줄을서야합니다.
그래서 우리는 디스플레이 플렉스와 플렉스 랩으로 스타일을 설정합니다.
그리고 그것들은 그리드를 도울 두 가지 속성입니다.
그래서 신선하다면 더 유연한 그리드로 끝납니다.
그리드가 적용되기 때문에 우리는 다른 높이를 가지고 있어도 상관 없습니다. 그래서이 둘 사이에는 더 많은 공간이 있습니다. 여기에 있습니다.
기본적으로 모든 공간을 완벽하게 정렬 할 수있는 공간을 최소한으로 확보 할 수 있습니다.
그리고 우리가 할 수있는 또 하나의 변화가있었습니다. 텍스트 센터에 텍스트를 추가하는 것은 우리를위한 부트 스트랩입니다.
그리고 나는 그것이 조금 더 좋아 보인다라고 생각한다.
또한 개인 취향의 문제와 당분간 캠프장 페이지로 끝났습니다.
바라기는 부트 스트랩이 실제로 우리를 도울 수있는 방법을 보여줍니다.
그리고 우리가 가진 우리의 훌륭한 반응 그리드를 보여 드리겠습니다.
그래서 이것은 모바일에 있습니다.
우리는이 멋진 레이아웃을 최대 네 개의 이미지까지 줄곧 얻습니다.
좋아, 나는 이것이 어떻게 보이는지에 대해 꽤 행복하다.