이 강의로 돌아와 부트 스트랩 그리드 시스템을 시연 할 것이며, 그리드 시스템은 아마도 사람들이 낮잠 시간 동안 부트 스트랩을 사용하는 가장 큰 이유 일 것입니다.
버튼은 부트 스트랩으로 만들 수있는 멋진 문체 변경이지만 부트 스트랩 그리드 시스템은 전체 응용 프로그램의 골격 역할을합니다.
구조를 추가하고 응용 프로그램에 배치하는 것은 정말 쉬운 방법입니다.
그리드 시스템으로 할 수있는 일의 몇 가지 예를 보여 드리겠습니다.
Bootstrap ex-beau에서 몇 개의 사이트를 열었습니다. 첫 번째 것은 물 주전자를위한 제품 페이지이며 스크롤 다운입니다.
여기 누워보세요.
우리는 세 가지 항목을 나란히 놓은 다음 그들이 크기를 변경함에 따라 알기도합니다. 그리고 크기가 줄어들면 크기가 줄어들어 서로의 위에 쌓입니다.
그래서 바로 여기에있는 부트 스트랩 그리드 시스템이 다른 유사한 효과를 가지고 있습니다.
그들은 크기를 조정 한 다음 태블릿 및 모바일 크기로 쌓습니다.
다른 예가 있습니다.
아이슬란드 음악가이자 Olafur Arnolds입니다.이 사이트로 이동합니다.
비슷한 레이아웃을 볼 수있는 그리드 시스템으로 구축 된 일부 컨텐츠가 있지만 그리드 시스템으로 구축 된 것은 아닙니다.
여기에이 내용이 있습니다.
이 투어 날짜는 여기에 있습니다.
기본적으로 그리드 시스템을 사용하여 일부 콘텐츠가 화면의 100 %를 차지하고 싶다고 말할 수 있으며,이를 사용하여 각각의 콘텐츠가 화면 폭의 25 %를 차지할 때까지 사용할 수 있습니다 모바일 쪽 또는 태블릿 크기가 각각 50을 차지한 다음 모바일에 도달 할 때마다 각각 100 %를 차지합니다.
똑같은 일이 여기서 끝났어.
그것은 우리가 화면으로 그것을 조각으로 나눌 수있게 해주고 우리가 원하는 조각을 몇 개 골라 낼 수있게합니다.
이륙 할 우리 자신의 요소 각각은 우리가 이미 본 마지막 것입니다.
크리 에이 티브 팀 사막이라는 비슷한 내용의 스크롤입니다.
여기 그리드 시스템과 여기에 있습니다.
그리드 시스템으로 모든 작업이 완료됩니다.
이 모든 것은 매우 흥미로운 매우 중요한 것들입니다.
부트 스트랩없이해야 할 일들에 비해 쉽게 레이아웃 할 수 있습니다.
그래서 우리는 부트 스트랩 그리드 시스템을 사용할 것이고 거의 모든 부트 스트랩을 사용하는 모든 응용 프로그램을 사용할 것입니다.
그리고 그들 중 하나를 보여 드리죠.
이것은 우리의 요 캠프 응용 프로그램이며 우리는 가로 질러 캠프장을 그리드가 있음을 알 수 있습니다.
화면 크기를 조정하면 크기가 조정되었음을 알게되고, 그 다음에 2 단계로 이동 한 다음 다시 모바일로 이동합니다.
우리는 가로 질러가는 곳으로 가면 모바일 레이아웃을 사용하기가 정말 쉽습니다.
그리드 시스템을 사용할 장소는 여기에 있습니다.
이제 그리드 시스템을 사용하여 코드를 작성하고이 화면을 전체 화면으로 시작한 다음 평가 된 탭 아래에있는 부트 스트랩 된 닷컴을 다시 시작하십시오.
그리드 시스템을 클릭 할 수 있습니다.
그리드 시스템에는 약간의 차이점이 있습니다.하지만 여기서는 하나의 번호 만 지적하면됩니다.
이것은 그리드 시스템이 작동하는 데 정말로 중요합니다.
따라서 모든 컨테이너와 부트 스트랩을 12 개의 다른 열로 나눌 수 있습니다. 그런 다음 그리드 시스템을 사용하여 각 요소가 차지하는 12 개의 단위 중 몇 개를 선택할 수 있습니다.
그래서이 경우에는 12 단위 중 약 10을 차지하는 것처럼 보입니다.
그리고 12 개 유닛 중 2 개 유닛이 9 개 또는 3 개일 수 있지만, 왼쪽에 12 개가 있고 오른쪽에 12 개 중 작은 부분이있는 비율이 있습니다.
그래서 우리가 여기 캠프로 돌아 간다면 이것은 바로 우리의 컨테이너입니다.
그리고 이들 각각 12 유닛 중 하나는 3 유닛을 차지합니다.
그래서 우리는 4 개의 동등한 기둥으로 끝나고 여기에서 바로 아래로 축소합니다.
이제 그들은 각각 12 명 중 6 명을 차지합니다.
그래서 다시 12 번 번호가 매우 중요합니다.
이제 오른쪽으로 가자.
첫 번째 그리드.
그래서 파일을 그리드로 만들었습니다. SS 파일의 부트 스트랩을 제외하고는 비어 있습니다. 그리고 컨테이너를 정의해야합니다.
Boucek 그리드를 사용할 때마다 컨테이너 내부에 있어야합니다.
따라서 클래스는 컨테이너와 같습니다.
그리고 우리가해야 할 첫 번째 일은 각 행 대신에 행과 동일한 클래스를 가진 다른 div를 찾는 것입니다.
우리는 12 유닛을 골라야합니다.
그래서 우리가 할 일은 50 50 분할을하는 것입니다. 우리는 12 div에서 6을 차지하고 다른 div는 12에서 6을 차지합니다.
자 이제하자.
div를 추가 한 다음 두 번째 division을 추가하고 바로 지금 두 개의 장치가 비어 있습니다.
너는 일하지 않을거야.
하지만 제가 할 일은 첫 번째 수업에 수업을 추가하는 것입니다. 그러면 조금 더 이상한 칼럼이 보일 것입니다. 큰 여섯 개는 여기서 똑같이 할 것입니다.
클래스는 큰 열 6과 같습니다.
그런 다음 여기에 몇 가지 콘텐츠를 추가하겠습니다.
그들은 단지 큰 열 여섯을 말할 것입니다.
여기 같은거야.
그리고 제가 그렇게하면 저장하겠습니다. 그리드 자체가 보이지 않는 것을 실제로 보지 않을 것입니다.
그렇게 명확하게하기 위해 스타일 태그 대신 여기에 클래스를 정의 할 것입니다.
제가 할 일은 클래스를 정의하는 것입니다.
나는 그것을 핑크색이라고 부를 것이고, 우리는 그들을 볼 수 있도록이 클래스를 두 div에 적용 할 것입니다.
그래서 지금 그들은 단지 백인입니다.
국경 없어요.
약간의 텍스트.
하지만 우리가 이것을 추가하면.
그래서 분홍색.
그런 다음 배경이 분홍색으로 바뀌고 자주색 테두리가 한 픽셀 짙은 보라색으로 표시되면이 두 div에 분홍색 클래스를 적용합니다.
각자 6 단위를 차지합니다.
이제 우리는 돌아가서 새로 고침합니다.
우리는 거기에 갈.
컨테이너의 절반을 차지하는 두 개의 div가 있음을 알 수 있습니다.
컨테이너가 여기서 시작됩니다.
우리는 둘로 나뉘어져 있습니다.
이제 다시 돌아가서 좀 더 놀고 세 번째 열에 추가해 볼까요?
그리고 이번에는 가운데 열을 8 개 단위로 만들면 왼쪽과 오른쪽이 2가됩니다.
결국이 번호를 여기에서 바꿀 것입니다.
우리는 거기에 갈.
우리는 중간에 멋진 중심의 컬럼을 만들고, 사이드 바 (bar) 등을 위해 사용할 수있는 두 개의 작은 컬럼을 왼쪽과 오른쪽으로 만들 것입니다.
이것이 모든 부트 스트랩 그리드 시스템의 기본 개념입니다.
우리는 내부에서 작업하고있는 컨테이너가 무엇이든간에 12 유닛을 가지고 있으며 원하는대로 12 유닛을 지정할 수 있습니다.
그래서 우리는 각각의 열 하나가 큰 열 12 개별 열을 할 수 있고 우리는 이것을 12 번 할 수 있습니다.
내가 잃을 수 있는지 확인하십시오.
우리는 거기에 갈.
그리고 나서 우리는 지금이 두 가지를 제거 할 것입니다.
그리고 제가 신선하다면 한 행에 12 개의 균등 한 크기의 기둥이 나타납니다.
각각은 하나의 단위를 취한 다음 다른 행을 추가 할 수 있음을 보여줄 것입니다.
이제는 div 클래스가 행과 같아 지도록하겠습니다. 그러면 첫 번째 행 아래로 이동하게됩니다.
그래서이 중 하나가 div를 해보 죠.
클래스는 Dasch의 큰 열과 같고 4 개의 행을합니다.
그래서 우리는 그것을 균등하게 세 개의 단위로 나눌 것입니다.
그래서 그녀를위한 칼럼 아지기는 그렇게합니다.
그리고 이제 살펴 보겠습니다. 분홍색 클래스를 적용하지 않았 음을 알 수 있습니다. 그러나 크기가 균일 한 12 개의 열 아래에있는 3 개의 균등 크기 열이 만들어졌습니다.
따라서 우리는 핑크 클래스를 추가하여 어떤 일이 일어나는지 쉽게 볼 수 있습니다.
그리고 거기에 우리가 간다.
그래서 이것은 단지 간단한 예일뿐입니다.
실제로이 분홍색 상자는 우리 사이트에있을 가능성이 거의 없습니다.
그러나 여기에서 볼 수 있듯이 행이 있고 각 행에는 네 개의 열이있는 격자가 있습니다.
이 광고 소재 팀 사이트의 각 광고 단위는 3 단위 넓이입니다.
우리는 하나씩 네 개의 너비가있는 세 개의 열이 있습니다.
여기 같은거야.
여기에 세 개의 열이 있습니다.
우리는 4 개의 기둥을 가지고 있습니다.
각각 3 개의 너비가 있습니다.
이것이 바로 다음 비디오에서 그리드의 기초입니다.
그리드를 반응 적으로 만들고 크기가 다른 레이아웃을 만드는 방법에 대해 이야기하겠습니다.
지금 우리는 큰 열 하나로 작업 해 왔습니다.
나는 큰 의미로 설명했고 세 가지 다른 크기가 있으며 다음 비디오에서 그 크기를 볼 것이며 중첩 된 격자를 작성하여이 열의 내부에 다른 행을 추가 할 수있는 방법을 볼 것입니다. 추가 12 조각으로.