이 비디오는 캠프 스타일을 계속 유지할 것입니다.
우리는 모든 단일 페이지에 탐색 막대를 추가 할 예정이며 탐색 막대는 지금은 꽤 비어 있습니다.
그러나 결국에는 로그인과 같은 버튼이있을 것이며 모든 기능을 등록 할 수 있습니다.
그러나 그때까지는 자리 표시 자 텍스트를 넣을 것입니다. 그리고 나서 지금은 꽤 거친 모양이기 때문에 새로운 캠프장 양식을 스타일링 할 것입니다.
이제 서버를 시작하고 우리가 가진 것을 살펴 봅시다.
여기 방문 페이지가 있습니다.
모든 캠프가 캠프장 목록을 변경한다는 우리의 견해가 있습니다.
꽤 괜찮아 보인다.
여기에 탐색 바가 필요해.
새로운 캠프장을 추가 할 때도 마찬가지입니다.
양식을 가운데에 배치하고 두 입력을 나란히 놓는 대신 서로 쌓을 것입니다.
그러나 우리는 nav 막대기로 시작해서 캠프장 ​​템플릿에서 작업 해 보겠습니다.
그래서 우리는 여기서 다시 돌아와 캠프장 템플릿을 열어 시작할 것입니다.
bootstrapped 상자를 열어서 구성 요소로 이동 한 다음 nav 막대를 탐색하면이 섹션에 항상 표시됩니다. 부트 스트랩을 사용하면 nav 막대를 추가하는 것이 정말 쉽지만 여전히 볼 수 있습니다. 꽤 많은 마크 업이고 우리는 드롭 다운의 모든 버튼을 가지고 있지 않을 때 최소한 오랫동안 시작하지 않을 것입니다.
우리는 멋지고 간단하게 시작할 것입니다. 그렇더라도 여전히 기억해야 할 수업이 많이 있습니다.
그래서이 클래스의 다른 것들처럼 부트 스트랩 Darcs를 끌어 당기는 데는 부끄러움이 없습니다. 물건을 찾는 것에 대해 부끄러워하지 않아야합니다.
그러나 특정 부트 스트랩에서 때때로 이러한 클래스와 요소가 엉망 일 수 있으며 문서를 보지 않고도이를 수행 할 수있는 방법은 없습니다.
OK로 돌아가서 캠프장 ​​템플릿 상단에 약간의 공간을 만들고 Nav를 정의하여 시작하겠습니다. 다시 헤더와 같습니다.
div하지만 탐색은 할 수 있습니다. 조금 더 의미가 있습니다.
그것은 의미 론적입니다.
그래서 클래스 탐색 바를 사용하여 nav를 수행 한 다음 nav bar bar dash default를 탐색 할 것입니다.
다른 유형과 색상이 다르거 나 거꾸로 된 탐색 모음을 사용할 수 있지만 기본값으로 이동합니다.
그리고 나서 내부는 컨테이너 유체와 같은 클래스로 div를 추가 할 것입니다. 그리고 그것은 우리에게 멋진 패딩과 공간을 만들 것입니다. 그리고 나서 우리는 nav bar header와 같은 클래스를 가진 다른 div를 추가 할 것입니다. 클래스가 우리 헤더와 같으면 클래스 끝에 nav bar dash와 같은 앵커 태그를 추가 할 것입니다.
그리고 나서 우리는 단지 슬래시로 링크를 설정할 수 있습니다. 그러면 우리는 그것을 닫고 yelper 캠프에 추가 할 것입니다.
이 간단한 마크 업으로 무엇을 얻을 수 있는지 알아 보겠습니다.
따라서 우리는 네비게이션 바 헤더가있는 컨테이너와 함께 네비게이션을 가지며 네비게이션 바 헤더는 네 바아 브랜드 인 항목 하나만 가지고 있습니다.
새로 고쳐 보자.
확인을 클릭하면 탐색 바가 생기며 여기에 브랜드가 있습니다.이 링크를 클릭하면 끔찍한 방문 페이지로 돌아갑니다.
좋아, 여기에 로그인하고 가입하기 위해 여기 몇 자리 표시자를 추가합시다.
그들은 일하지 않거나 아무 것도하지 않을 것입니다. 그러나 우리는 좋아 보이기 때문에 이제는 우리 캠프로갑니다.
E.J. N.F.가 아닌 네비게이션 바 및 컨테이너 내부의 템플릿으로 사용할 수 있습니다. Hetter 바.
우리는 다른 div에 추가 할 것이고이 div는 그것이하는 것을 볼 수있는 붕괴 클래스를 가질 것입니다.
그리고 잠시 후 Neph bar Dasch가 그렇게 붕괴됩니다.
그리고 나서 우리는 UL을 추가 할 것입니다. 그리고이 UL은 nav bar 대쉬 nav 클래스를 가질 것이고, nav bar bar 대시가 오른쪽으로 이동하게 될 것입니다. 현재 3 개의 링크가 있고 각 링크는 동맹국입니다.
그리고 그 안쪽에 맹방은 앵커 태그를 가지며 첫 번째 로그인을줍니다.
그리고 지금은 H ref가 우리 경로 경로로 설정 될 것입니다. 아직 로그인하지 않았기 때문에 우리는 등록을 위해 동일한 작업을 수행 할 것입니다.
Sign-Up을하고 마찬가지로 로그 아웃하십시오.
승인.
그럼 어떻게 생겼는지 보자.
우리가 새로 고침을하면 붕괴가 어떻게되는지에 관해 이야기하기 전에 그것이 좋아 보이지 않는다.
우리가 지금 추가하지 않았던 것처럼 보입니다. 그래서 우리는 방금 nav bar를 추가했습니다.
이제는 제대로 해본 적이 없지만 nav 자체에 추가하지 않았으므로 이제 저장하겠습니다. 새로 고침을하고 NAV의 오른쪽에있는 세 개의 링크로 끝나고 여기에서 크기를 변경할 때도 있습니다.
여기 바로 여기 그것이 무너 졌음을 주목하십시오.
그리고 결국 우리가 가지고있는 것은 작은 햄버거 아이콘입니다.
클릭 한 곳과 메뉴 인 것처럼 보입니다.
지금은 우리가 그 크기에 도달하면 그냥 숨길 수 있습니다.
승인.
따라서이 페이지에있는 것만 제외하면 탐색 모음에 필요한 모든 작업이 수행됩니다.
이제 모든 페이지에 추가해 보겠습니다.
복사하거나 잘라내어 헤더로 옮깁니다.
머리 또는 부분으로 이동하십시오.
내가 열어 볼게.
커맨드 라인 사용 C9은 Parshall의 슬래시 헤더 인 Ijaw Yes를 슬래시합니다.
그리고 몸 바로 맨 꼭대기에 추가 할 것입니다.
이걸 제대로 들여 씁시다.
그래, 우리가 간다.
그리고 우리는 머리말에 우리의 탐색 바를 가지고있어서 헤더 부분을 포함하는 파일은 이제 탐색 바를 갖지만 서버를 다시 시작합니다.
그래서 우리가 새로운 캠프장을 추가하면 우리는 또한 그 바를 얻습니다.
그리고 우리가 홈 페이지에 간다면 우리는 또한 충분한 바를가집니다.
큰.
자 이제이 폼을 조금 더 돋보이게 만들자.
앞서 언급했듯이이 양식에 두 가지 큰 일을하고 싶습니다.
첫 번째는 페이지 중앙에 가운데 놓고 두 번째는 3 개의 입력 또는 두 개의 입력과 버튼을 화면에 가로로 정렬하지 않고 세로로 양식을 쌓는 것입니다.
당신은 그 (것)들을 가지고 가고 그 (것)들을 다른 사람의 위에 1 개 겹쳐 쌓고 싶다.
새로운 점인 올바른 파일을 열어 보겠습니다.
예.
그래서 우리는 C9 플레이를 할 것입니다. 슬래시는 Ejay와 우리가 지금까지 가지고있는 우리의 형태라는 것을 알았습니다.
쉽게 시작하고 폼이나 입력에 부트 스트랩 클래스 중 일부를 추가하면 폼 대쉬 컨트롤이됩니다.
그리고 우리는 그것을 입력과 버튼 모두에서 원합니다.
Bootstrap 클래스에 PTEN ETN을 추가하자.
그리고 우리는 또한 실수들 사이에서 무엇이 생겼는지 보자.
그래서 J. 후 노드.
예 새로 고침.
좋습니다. 부트 스트랩 컨트롤과 부트 스트랩 버튼은 분명히 커지지 만 우리는 그것을 원하지 않습니다.
그래서이를 해결하기 위해 할 수있는 일이 몇 가지 있습니다.
첫 번째는 모든 것을 컨테이너 안에 넣을 것입니다.
그래서 우리는 div 클래스와 같은 컨테이너에 들어가서 이것을 그냥 바닥으로 옮길 것입니다.
우리가 가서 제대로 들여 보내 보자.
아주 사소한 변경 사항을 저장하십시오.
우리는 지금 약간의 간격을 얻습니다. 그러나 그것은 여전히 ​​거대한 형태입니다.
그래서 제가해야 할 일은 그리드 시스템을 사용하는 것입니다.
그래서 우리는 다른 div에 추가 할 것이고이 클래스는 행과 같은 클래스를 가질 것입니다.
이것을 가지고 행에 복사 해 봅시다.
그래서 전체 양식이 이제 한 행에 들어갑니다.
그리고 그것도 이것으로 끝납니다.
확인 저장은 아직 큰 차이가 없습니다.
그리고 우리가 할 일은 CSSA를 사용하고 실제적으로 여백을 주면서 부트 스트랩 위에 자신 만의 스타일을 작성하는 것입니다.
이 모든 것을 자동으로 왼쪽 및 오른쪽에 표시합니다.
그리고 우리는 단지 그것이 들어있는이 컨테이너의 약 30 퍼센트를 차지하고 싶었습니다.
우리가 돌아 가기 전에 우리는 그렇게했습니다. 규칙 중 하나를 위반하여 인라인 스타일을 사용하지 말라고 일찍 말했을 것입니다.
그리고 그렇게하지 않는 것이 좋은 생각입니다.
그러나 지금은 우리가 새로운 스타일 시트를 만드는 새 버전을 얻을 때까지 줄을 서서 할 것입니다.
그래서 우리는 내부에 양식을 넣는 새로운 div를 만들 것입니다.
그냥 그렇게.
그리고 나서 저는 그 div 스타일을 주겠다. 그리고 나는 with와 함께 말하는 것으로 시작하겠다.
그리고 그것을 그냥두고 우리가 더 작은 형태를 가지는지보십시오.
이제 우리는 중심에두고 싶습니다.
그래서 우리는 여기로 돌아 간다.
위쪽과 아래쪽에는 여백 0을, 왼쪽과 오른쪽에는 Otto라고 말하십시오.
이제 우리는 중심에있는 양식을 가지고 있습니다.
다음으로해야 할 일은 버튼이 여전히 꽤 긴 전체 너비를 차지하도록 만드는 것입니다.
하지만 우리가 할 일은 블록 요소로 만드는 부트 스트랩 방식의 DTN 블록을 제공하는 것입니다.
그리고 이제 전체 라인을 차지합니다.
다음으로 이러한 모든 요소들 사이에 간격을 두어 그 작업을 수행해 보겠습니다.
우리는 폼 그룹 클래스로 빌드 된 부트 스트랩을 사용할 것입니다.
따라서 우리는 div 클래스 ECO가 대시 그룹을 형성해야하며 각 입력에 대해이를 필요로 할 것입니다.
그래서 모든 입력은 그 중 하나와 마찬가지로 그 중 하나를 누른 다음 나는 단지 이것을 복제하고 우리는 바로 여기 또 다른 하나를 가지고 이것은 내부에 갈 것입니다.
그리고 나서 버튼을 하나 더 갖습니다.
그래서 우리는 클래식 양식 그룹을 세 번 가지며 닫는 div 태그도 필요합니다.
거기에 우리는 하나가 있고 우리는 다른 닫는 div 태그가 필요합니다.
승인.
그래서 폼 그룹은 사물을 함께 털어 놓습니다.
그러나 그것은 또한 우리에게 약간의 공간을줍니다.
이제 여기에이 버튼이 있습니다.
우리가 할 수있는 다음 작업은 텍스트를 가운데 맞추는 것입니다. 텍스트를 가운데 맞춤으로 지정해야합니다.
그리고 저는 다시 그것을 할 것입니다.
적어도 장기간에 좋은 생각은 아니지만, 이것은 빠르게 뭔가를하는 데 큰 도움이됩니다.
그래서 스타일과 우리는 텍스트 정렬 센터 할거야.
중간에 가운데에 저장하십시오.
다음으로해야 할 일은이 버튼의 색상을 변경하는 것입니다.
화이트는별로 좋아 보이지 않습니다.
기본 버튼을 기본으로 설정하여 파란색으로 새로 고침을 저장하도록하겠습니다.
네, 훨씬 나아졌습니다.
이 링크를 뒤로 이동 링크를 중간으로 이동합시다.
그래서 우리는 이것을 단지 복사 할 것이고 우리가해야 할 일은이 마진 안에 넣는 것뿐입니다.
자동 div 그래서이 div 여기 양식 후 그냥 저장합니다.
우리는 거기에 갈.
우리는 뒤로 물러나서 마지막으로해야 할 일은 패딩이나 마진을 약간 더해서 H-1이 그렇게하지 못하게하는 것입니다.
우리는 단지 돌아갈 것이며 우리는 이미 우리가 선택한이 div를 가지고 있습니다.
그래서 여백이 0 인 것보다는 시작하는 데 20 픽셀의 여유를 줄 수 있습니다.
어떻게 보이는지 보자.
좋아, 조금 나아 졌어.
50 세 이상을 해보 죠.
그리고 그것은 조금 너무 많을 수도 있습니다.
확실히 자신의 취향.
25 번으로 돌아 가자.
괜찮아.
지금은 충분히 좋습니다.
원하는만큼 이걸 가지고 놀아라. 당신이 좋아하거나 더 좁 으면 입력 양식을 더 넓게 만들 수있다.하지만 반응이 빠르다는 것을 알면 중간에 머물러있게 될 것이고 조금 줄어들 것이다.
마지막으로이 상표를 없애자.
너는 그걸 필요가 없어.
바닥 글의 하단에 그래서 우리는 바닥 글 파일에 가서 나는 속일거야.
지금 당장이 작업을 수행하면 저장을 제거합니다.
지금 우리는 우리 모양을 가지고있다. 너무 나쁘게 보이지 않는다. 되돌아 갈 수있다. 우리는 우리가 우리가 1를 더할 수있는 충분한 막대가있는 캠프장의 목록을 얻는다.
Google은 아직 방문 페이지를 보지 않고 방문 페이지를 볼 수도 있습니다.
그 중 하나는 아마 대부분의 작품을 가지고 있으며 그것은 훨씬 더 멋지게 보이고 더 많은 사용자 정의 스타일을 가지고 다른 페이지보다 꽤 다를거야.
그래서 그것이 내가 나중에 저장하기 때문입니다.
그리고 우리는 아무 것도하지 않는 더미 버튼을 사용하여 여기에 번호를 표시합니다.