이 수업으로 돌아와서 지금까지 부트 스트랩에 대해 배운 것을 사용하여 작은 프로젝트를 만들 것입니다.
점보 트론과 그리드 시스템을 차단하는 등 우리가 지금까지 해왔 던 많은 구성 요소가 포함될 것입니다.
나는 또한 여기에 아이콘을 포함하여 하나 또는 두 개의 새로운 것을 던졌다.
우리는 아직 그 작업을 수행하는 방법을 보지 못했습니다.
또한이 스크롤 막대가 스크롤 할 때 스크롤 막대가 맨 위에 고정되어 있으므로 스크롤 막대에 고정 된 탐색 막대가 표시되어 스크롤되지 않습니다.
마지막으로 우리는 기본 부트 스트래핑 된 구성 요소의 일부 색상을 변경합니다.
그래서 이것은 실제로 회색의 약간 다른 그늘입니다.
이것은 파란색의 그늘이며 nav bar는 색이 다릅니다.
따라서 코드를 작성하기 전에 모든 작업을 수행하는 방법을 보여 드리겠습니다.
잠시 시간을내어 이들 이미지가 대부분 웹 사이트에서 스플래시라는 훌륭한 리소스라는 사실을 지적하고 싶습니다.
그래서 스플래시는 원하는대로 할 수있는 아름다운 고화질 사진을 제공합니다.
여기서 라이센스를 읽을 수는 있지만 원하는 것은 무엇이든 할 수 있습니다.
그것은 창조적 인 공유지 면허입니다. 나는 정말로 그것에 대해 신경 쓰지 않지만 사진은 정말 멋지고 나는이 8 가지를 많이 사용하고 있습니다.
사실 우리 갤러리에.
그리고 그 사진 하나가 바로 여기있는이 사진입니다. 실제로 사진 수업을 들었습니다. 그리고 이것이 제가 반 촬영 한 첫 번째 사진입니다.
나는 그렇게 뜨겁지 않게 보이지 않는이 것들과 비교되어 생각한다.
어쨌든 중요하지 않은이 똑같은 이미지를 사용하고 싶다면.
이것은 모든 이미지와 함께 작동합니다.
그러나 만약 당신이 똑같은 것을 원한다면 나는이 비디오와 함께 업로드 된이 파일 갤러리 M.D의 모든 링크를 포함 시켰으며 우리는 진한 파란색과 밝은 회색을 사용할 두 가지 색도 포함 시켰습니다.
승인.
그래서 그 모든 일로 이제는 프로젝트를 시작하겠습니다.
그래서 빈 파일 갤러리가 있습니다.
H m l.
여기서 h skeleton을 추가 할 것이고 우리는이 이미지 갤러리를 호출 할 것이고 우리가해야 할 일은 부트 스트랩을 포함하는 것입니다.
이전 프로젝트의 CD 끝 부분을 복사하려고합니다. 지금 당장 그렇게하겠습니다.
여기에 우리가 간다.
부트 스트랩 CDN에 연결 중입니다.
그리고 내가 여기있는 동안 나는 또한 CSSA와 Jay queery 도시의 부트 스트랩을 잡을 것이고, 우리가 nav bar 레슨에서했던 것과 그 밑바닥에있는 것을 우리가 nav bar를 추가 할 때 우리는 사냥을 할 필요가 없다 이러한 파일 또는 스크립트 태그 용.
그래서 저장과 우리가 할 수있는 첫 번째 일은 점보트론을 추가하는 것입니다.
멋지고 쉽습니다.
그래서 우리는 div를 가질 것이고 그것은 클래스가 Jumbotron과 같을 것입니다.
그리고 나서 Jumbotron 내부는 이미지 갤러리를 말하는 H1으로 시작합니다.
우리가 가면 우리는 구원을 얻고 이것이 효과가 있는지 확인합시다.
그래서이 파일을 열 것입니다.
그래서 우리는 보섹을 포함 시켰습니다.
우리는 글꼴 변경을보고 있습니다.
우리는 점보트론 (Jumbotron)에서이 회색을 볼 수 있습니다.
이제 그것이 화면 전체에 걸쳐있는 곳의 컨테이너가 아닌 컨테이너 내부에 있는지 확인하십시오.
그래서 우리는 div 클래스가 컨테이너와 같을 것입니다.
저기 우리가 가서 제대로하고 새로 고침하자 우리가 돌아갈거야.
좋아, 그래서 우리는 점보트론을 가지고 있지만이 단락을 추가한다.
이제 우리는 돌아와서 아이콘을 만들지 만, 그것은 H-1 아래 단락 태그입니다.
원하는 텍스트를 자유롭게 입력하면 Jumbotron을 사용할 수 있습니다.
이제 돌아가서 탐색 표시 줄을 실행 해 보겠습니다. 두 가지 이유로 처음부터 충분한 막대를 입력하지 않을 것입니다.
하나는 꽤 코드입니다.
그것은 오랜 시간이 걸릴 것입니다.
그리고이 비디오.
그러나 두 가지 사실은 내가 처음부터 Ackbar에 입력하지 않는다는 것입니다.
내가 NASCAR 비디오에서 언급 한 것처럼 대부분의 경우 내 워크 플로는 부트 스트랩 사이트 나 NAV 바를 사용하여 만든 이전 사이트로 이동하여 복사합니다.
그리고 나는 그것을 점검하고 내가 원하지 않는 조각들을 제거합니다.
나는 새로운 조각들을 추가한다.
여기 그것이 제가 여기서 할 일입니다.
나는 이미 각 HTML 애플리케이션에서 탐색 막대에있는 부분을 충분히 가지고있다.
바로 여기에 있습니다. 그걸 복사하려고합니다. 그런 다음 조금씩 조정 해 보겠습니다.
그래서 그것을 복사하고 다시 돌아가서 우리는 그냥 파일의 맨 위에 놓을 것입니다.
그리고 우리가 얻는 것이 신선한 지 보자. 그리고 우리는 nav bar를 가지고있다.
가깝습니다.
우리는 여기서 브랜드를 바꾸고 싶습니다.
또한 색상을 최종적으로 변경하고 싶습니다. 색상이 상단에 고정되어 있는지 확인하고 싶지만 현재는 그렇지 않습니다.
돌아가서 브랜드를 바꾸자.
그래서 커피 대신에 제 이미지를 불렀습니다. 당신이 원하는대로이 이미지를 호출 할 수 있습니다.
물론 그것이 잘 작동하는지 확인하십시오.
다음으로 설명 할 것은 낮잠이나 기본값 대신 나타나는 색상을 변경하기위한 빠른 변경입니다.
구절에 막대가 있다면 지금 할 수 있습니다. 그러면 그 모습을 보여 드리겠습니다.
우리는 지금 당장 어두워 지거나 텍스트가 밝은 곳에서 색상이 반전되어 어두운 배경을 얻습니다.
내가 아직 여기있는 푸른 색은 아니야.
그리고 글꼴은 흰색이 아니지만 우리는 되돌아 와서 그것을 고칠 것입니다.
지금은 충분히 가깝습니다.
이제 우리는 그 아래 그리드의 실제 이미지 갤러리에 집중할 수 있습니다.
그리고 솔루션에서 어떻게 작동하는지 살펴 보겠습니다.
그래서 세 개의 이미지가 시작되고 나서 크기를 조정하면 두 개로 내려간 다음 두 개로 내려 가고 마침내 작은 크기로 보시면 여기에서 볼 수있는 것처럼 하나가됩니다.
그리고 우리는 하나의 이미지를 가지고 있습니다.
우리가 세 가지를 가지고있는이 큰 크기의 그리드를 설정하는 것으로 시작하겠습니다.
우리는 총 12 단위를 가지고 있다는 것을 기억하십시오.
그래서 우리가 세 번 간다면 우리는 각각을 4 단위로 지정할 것입니다.
그래서 우리의 점보트론 아래에 그것을 설정합시다.
여전히 컨테이너 내부에 있지만 div 클래스는 행과 같고 행의 div 클래스는 같을 것이고 우리는 div 클래스가 네 개의 단위가되기를 원할 것입니다.
그래서 우리는 큰 대시 4 열을 입력하고 엔터를 치면 우리는 여기에 텍스트를 몇 개 넣고 시작할 수 있습니다. 그런 다음 그 중 3 개를 원하기 때문에 복사 할 것입니다.
그리고 나는 압흔 고정에 대해 아직 걱정하지 않을 것입니다. 왜냐하면 우리는 잠시 더 큰 변화를 만들 것이기 ​​때문입니다.
그러나 새로 고침을하고 그 세 개의 기둥을 가로 지르게합니다.
그래서 우리가하고 싶은 다음 작업은 일부 이미지를 만들고 모든 작업을 시작하는 것입니다. 다만 골든 게이트 브리지 사진을 찍기 만하면 텍스트가 아닌 이미지 태그를 추가 할 것입니다.
따라서 이미지 소스는 당신이 골든 게이트 브릿지와 같아서 나는 그 세 번 붙여 넣기 만하면됩니다.
그리고 우리가 돌아 가면 우리는 그 세 개의 기둥이 있더라도 이미지가 거대하다는 문제가 있습니다.
우리의 이미지는 축소되지 않고 있습니다.
이 문제를 해결하기 위해 우리가해야 할 일은 약간 더 많은 부트 스트랩을 추가하는 것입니다.
나는 아직 그 주위에이 멋진 작은 경계선을 만들지를 보여주지 않았으며, 섬네일이라고 불립니다.
우리가해야 할 일은 썸네일과 같은 클래스로 div를 쓴 다음 그 내부에 넣는 이미지가 열에 맞게 축소됩니다.
그리고 그것은 또한이 작은 경계를 여기에서 얻습니다. 나는 꽤 멋지다고 생각합니다.
그래서 저는 실제로 하나의 이미지로 돌아가서 div 클래스에 미리보기 이미지를 추가하고 올바르게 처리하는 사람들과 함께 가지고있는 것들을 제거하려고합니다.
그리고 우리는 이미지 주위를 감싸고 저장합니다.
우리가 새로 고침하면.
그리드 안의 적절한 공간을 차지하는 단일 이미지를 얻는 지 알 수 있습니다.
이것은 기둥이고 주변에는 약간의 경계가 있고 이미지는 거대하지 않습니다.
그럼 우리가 이것을 복제하면 작동하는지 확인합시다.
그래서 이것은 하나의 이미지로 3 번 복제하고 새로 고침이 일어나는 것을 봅니다.
그리고 거기에 우리가 간다.
우리는 세 가지 이미지를 가지고 있습니다.
나는 앞으로 나아가 여섯 개를 추가 할 것이다.
우리가 여기에서하는 것처럼 총 9 개가 있습니다.
실제로 별도의 행을 추가 할 필요가 없습니다.
모두 같은 줄에 넣을 수 있습니다.
그러므로 우리가 지금까지 가지고있는 세 가지를 모두 복사해서 구하십시오.
그것은 우리에게 9 개의 이미지를 줄 것입니다.
그리고 새로 고침하면 자동으로 다음 줄로 넘어갑니다.
그래서 우리는 하나의 행을 가지고 의학적으로 알고있는 열을 추가하면됩니다.
각 이미지가 4 단위를 차지하기를 원하면 행당 3 개를 의미하고 이미지 세 행이 필요합니다.
나는 돌아가서 비디오의 끝에서 엘프들을 모두 바꿀 것이다.
나는 네가 그걸 보게하고 싶지 않아.
복사 및 붙여 넣기가 매우 재미 있지만이 그리드의 나머지 부분에 집중하겠습니다.
이제 히트 매체가 하나의 이미지로 넘어가 자마자 우리가 찾고자하는 것은 중간 브레이크 포인트를 가로 지르는 두 개의 이미지입니다.
그리고 거기에있는 중간 브레이크 포인트 이후에 우리는 작게 쳤고 우리는 여전히 그것이 2에 머물길 원합니다.
그래서 우리의 것을 고치기 위해서 또는 커다란 중단 점이나 중간 중단 점에서 바로 이동 한 다음 작고 약간 작은 상태를 1로 유지합니다.
우리는 여기로 돌아갈 수 있습니다. 당신이 알고있는 모든 것들을 변경하고 커맨드 d를 클릭하면 커맨드를 모두 선택합니다. 그런 다음 왼쪽 또는 오른쪽 화살표를 눌러 커서를 움직입니다.
이제는 한꺼번에 편집 할 수 있습니다.
그리고 제가하고 싶은 일은 우리가 페로에게 원하기 때문에 열 매체 6을 더할 수 있습니다.
그리고 내가 돌아가서 새로 고침하면 행당 3에 머무르는 것을 볼 수 있습니다. 그런 다음 평균 중단 점을 맞았고 2로 이동합니다.
그렇지만 작고 가볍게 치면 솔루션은 작게 유지되고 솔루션은 2로 유지됩니다.
따라서 열 매체 6을 수행하는 것보다는 열 6을 작게 할 수 있고이 버전을 다시 새로 고침 할 수 있습니다.
우리는 매체에 부딪쳤다.
우리는 둘로 간다.
우리는 작게 쳤다.
우리는 2시에 머무른 다음 여분의 작은 공간으로갑니다. 그리고 우리는 1 행당 1 개의 이미지에 있습니다.
완전한.
그리드를 위해해야 ​​할 일은 여기에있는 대부분의 기능으로 끝났습니다.
아주 빨리 실행하고 실행하십시오.
우리가 지금 집중하고 싶은 것은 색상과 아이콘 중 일부입니다.
부트 스트랩을 사용하여 아이콘을 추가하는 방법을 보여줌으로써 시작하겠습니다.
그래서 부트 스트랩 (bootstrap)을 얻으려면 컴포넌트에 가면 위의 그림 아이콘이 있고 거기에서 선택할 수있는 것들이 있습니다.
그리고 우리는 우리가 사용하고 싶고 내가 사용하고있는 것을 찾을 것입니다.
나는 카메라라고 생각하는 검색을 할 것입니다.
여기에이 카메라가 있는데 그 카메라를 사용하지 않습니다.
약간 다릅니다.
제가 사용하고있는 카메라는 좀 더 복고적 인 카메라이며이를 추가하는 방법을 보여 드리겠습니다.
실제로는 부트 스트랩의 일부가 아닙니다.하지만 부트 스트랩과 함께 제공되는 일반 카메라로 시작합시다.
그래서 우리는 클리포드 칸 (Clifford Kahn)을 쓰고 conn 대시 카메라로갑니다.
그리고 더 아래로 스크롤하면 클래스를 사용하여 Con과 동일한 스팬을 만든 다음 글리프 아이콘의 이름을 대시 할 수있는 스팬을 만드는 방법을 설명하는 위치를 볼 수 있습니다.
그래서이 스팬을 복사 해 봅시다. H-1 내부에서 작업을 시작하겠습니다. H-1 시작 부분에 놓기 만하면 A-Kon 대시 카메라가 필요하고 저장하고 새로 고침을 할 것입니다.
그리고 그 것처럼 카메라를 얻을 수 있습니다.
그리고 우리가 공간을 원한다면 우리는 패딩을 통해 그것을 할 수도 있고 아니면 바로 공간을 추가 할 수도 있습니다.
그리고 우리는 nav bar에 대해 똑같은 일을 할 수있는 공간을 얻었고, 사진이라고 불리는 것을 사용했습니다. Photo는 여기서 두 번 확인합니다.
이 페이지에서 사진 사진을 검색 할 수 있습니다.
거기는.
사진을 대시 할 수 있으면 갈 수 있습니다.
그래서 여기에 nav bar 브랜드로 올라가서 다시 스팬에 붙여 넣습니다.
그리고 나서 스팬 내에 클래스가 그림을 클릭해야하며 거기에 공간을 추가합니다.
우리는 우리의 사이트로 돌아가 신선하고 우리는 이제 약간의 그림을 가지고 있습니다.
그리고 우리도 카메라를 가지고 있습니다.
다음으로 탐색 바에 착수 해 봅시다. 지금 당장 볼 수 있도록 상단에 고정 시켜서 시작하겠습니다.
우리의 두루마리를 낮잠 거리십시오.
하지만 솔루션에는 그대로 남아 있습니다.
그리고 그것을하기 위해 NAV 바에 추가해야하는 단일 클래스입니다.
그래서 바로 여기에서 우리는 nav bar 대시를 대시 상단에 고정시키고 저장하기를 원합니다.
그리고 우리가 신선하다면 꼭대기에 고정 된 것을 볼 수 있습니다.
우리의 콘텐츠가 조금 뒤쳐져 있으며 Jumbotron 위에 정상적인 간격을두고 싶습니다.
우리가해야 할 일은 우리 몸에 약간의 패딩을 덧붙이면 70 픽셀이됩니다.
붓 스트랩 워드 프로세서는 70 픽셀의 패딩을 잊어 버렸다면 우리가 원하는 패딩 크기가 4 패 였음을 알려줍니다.
그래서 우리는 여기에 스타일 시트를 만들고 갤러리 Dotsie SS라고 부르면 서 선택 바디 패딩이 70 픽셀에이를 것이고 그 다음에는 갤러리 CS와 연결된 스타일 시트에 추가해야합니다. 에스.
이제 작동하는지 확인합시다.
우리는 거기에 갈.