이번 레슨에서 우리는 부트 스트랩 그리드 작업을 계속할 것입니다. 특별히 강조하고 싶은 두 가지 주요 기능이 있습니다.
첫 번째는 간단히 언급 한 네 가지 크기를 다루고 싶다는 것입니다.
우리는 Elgie 칼럼을 가지고 일해 왔으며 그 의미에 대해 이야기하지 않았으며 이것도 사용할 수있는 다른 세 가지 크기가 있습니다.
또한 다른 그리드 내부에 그리드를 중첩하여 12 개의 단위를 더 작은 조각으로 더 나눌 수있는 방법을 보여줍니다.
그러나 네 가지 크기에 대해 이야기하면서 시작하겠습니다. 먼저 브라우저로 돌아가서 마지막 강의에서 작성한 데모를 살펴보십시오.
그래서 우리는 12 개의 컬럼을 가진 2 개의 컬럼을 가지고 있습니다. 하나는 3 개의 컬럼을 가지며, 윈도우의 크기를 조정하면 어떻게 될지를 볼 수 있습니다. 그리고 나서 모든 컬럼에서 모든 것이 바뀌는 중단 점을 찾습니다.
이제 전체 12 단위를 차지하고 서로 겹쳐서 크기를 유지하면서 변경 사항을 실제로 알 수 없습니다.
그들은 모두 12 대를 차지하고 서로 쌓아 올리고 있습니다.
그러나 실제로 네 가지 크기가 있으므로 지정할 수 있습니다. 그래서 네 가지 레이아웃을 가질 수 있습니다.
지금 이것은 여분의 작은 액세스 인 모바일 레이아웃입니다.
그런 다음 우리는 너무 작아서 태블릿과 비슷한 모양으로되어 있고 여기에있는 매체가 있습니다.
이것은 노트북이나 작은 브라우저 창에있을 것이고 그 다음 우리는 여기에 있습니다.
그래서 우리가 더 커질 때를 제외하고는 여기에 차이점이 많이있는 것 같지 않습니다.
그러나 네 가지 크기가 있으며 각 크기에 대한 비율과 비율을 지정할 수 있습니다.
그리드 옵션 아래의 부트 스트랩 부두에서 그리드 시스템을 보면 테이블이 있다는 것을 볼 수 있으며 네 가지 크기를 보여줍니다.
따라서 태블릿 매체 장치 데스크톱 인 대형 장치 또는 12 백 픽셀보다 큰 대형 데스크톱 인 소형 장치보다 전화기와 같은 소형 장치가 있으며 각 열에는 접두어가있어 열 액세스가 실제로 작습니다.
S.M. 작고 M.D.는 중간 크기이고 LG는 우리가 사용해온 크기가 큽니다.
그래서 큰 브레이크 포인트에서 레이아웃을 똑같이 유지하길 원한다고 가정 해 봅시다.
그리고 매체를 여기 오른쪽으로 전환하면 각각이 하나의 단위를 차지하는이 12 개의 컬럼이 필요합니다.
나는 그들 각각이 2 개의 유닛을 대신 사용하기를 바란다.
그래서 우리는 여섯 명으로 끝날 것입니다.
그리고 나서 아래 6 개를 추가로 입력하십시오.
그래서 그것에 집중하고 사물을 단순화합시다.
나는 실제로 우리 두 번째 줄을 제거 할 것이다.
우리가 갖고있는 모든 것이 바로 여기 있습니다.
그래서 우리가이 중간 중단 점을 맞았을 때 나는 이것이 일어나기를 원하지 않습니다.
대신 나는 그것을하기 위해 가로 질러가는 6 개의 기둥이 필요하다.
다른 수업을 추가하기 만하면됩니다.
그래서 나는 그것을 각자에게 할 것이고 그것은 열 매체가 될 것입니다.
그래서이 그리드를 중간 크기로 설정하면 각각 2 단위를 취하고 저장하게됩니다.
이제 가자.
그것을 전체 크기로 만드십시오.
우리는 큰 크기 때문에 아무것도 바뀌지 않습니다.
하지만 이제 내가 여기서 매체로 전환 할 때.
그들 각자가 지금 두 대를 차지하고 있으며 우리는 여섯 대를 보게됩니다.
그리고 계속 축소하면 작은 브레이크 포인트가 발생하고 각 열이 이제 전체 12 단위로 이동하여 서로 겹쳐집니다.
다시 돌아가서 우리의 숭고한 모습으로 돌아가 보자.
그래서 우리는 실제로이 12 개의 다른 구성 요소를 가로 지르는 것이 일반적이지 않기 때문에이 것을 제거 할 것입니다.
일반적으로 3 ~ 4 개로 작업하는 경우가 있지만 6 개이지만 12 개의 개별 열은 매우 드뭅니다.
이제 다시이 자리로 돌아가서 우리가 할 일은 올라프 아놀드의 투어 일정에서 그리드 플레이를 시도하고 재현하는 것입니다.
그래서 4시에 시작합니다.
그런 다음 축소합니다.
중간 휴식 지점이 있고 우리는 여전히 4시에 있습니다. 그리고 나서 작은 휴식 지점에 도달하고 우리는 두 곳으로갑니다.
그리고 모바일 x 또는 작은 하나입니다.
그래서 우리가 시도하고 구조만으로 콘텐츠를 재창조하지 않습니다.
그래서 우리는 여기서 돌아갈거야.
그리고 우리는 네 가지로 시작하고 싶습니다.
즉, 한 명당 3 단위를 취한 다음 여기에서 본문을 변경할 수 있습니다.
그리고 그냥 말하거나 데이트하자.
그래서 우리가 신선하다면 우리는 네 개의 기둥을 가로 질러 가야합니다. 우리가하는 것은 정확히 네 명이 시작하는 것입니다.
그리고 유일한 차이는 실제로 실제 내용입니다.
따라서 각 열 대신에 단락 3 개의 단락을 추가하고 약간의 H.R이 필요한 다른 모든 내용을 추가하면 우리는 여전히 같은 간격을 갖게됩니다.
괜찮아.
그래서 다음 중점은 우리가 매체에 도달 할 때입니다.
그것은 4시에 머물러 있습니다.
따라서 우리가해야 할 일은 중형 브레이크 포인트를 지정하는 것입니다. 그래서 우리가이 작업을 수행 할 때마다 각각 3 개의 유닛을 사용해야합니다.
우리는 다시 숭고하게 돌아가서 그것을 추가하고 다시 3을 중간이라고 부르면 3 개의 유닛으로 시작하여 3 개의 유닛에 머문 다음 3 개의 유닛에 머물러 있습니다. 그리고 나서 우리는 작아지고 이제는 12 개의 유닛이됩니다.
그리고 우리가 이것을 따르기 위해 원하는 것은 우리가 작은 크기에 도달했을 때 각각 6 개의 유닛을 차지하므로 여기에 들어가 작은 6 열에 추가 할 수 있다는 것입니다.
따라서 이들 각각의 큰 크기는 중간 크기에서 12 개 중 25 개를 차지합니다.
같은 것.
그들은 25 퍼센트를 차지하고 작은 사이즈는 태블릿을위한 것이며 각각 50 퍼센트를 차지합니다.
그러니 각각을 3 분간 새로 고침 한 다음 3 단위를 새로 고치고 작게 칠하십시오.
그리고 이제 그들은 각각 6 개 단위를 취한 다음 여분의 작은 단위를 가졌습니다.
그러면 그들은 자동으로 우리가 원하는 12 개의 유닛을 모두 사용합니다.
우리가 작을 때 우리는 그들이 한 유닛을 가로 질러 가기를 원한다는 것을 알 수 있습니다.
괜찮아.
그래서 우리는 우리가 숭고하게 돌아 간다면 우리가 할 수있는 작은 변화가 있다는 것을 알았습니다.
대형 및 중형에 대해이 세 가지 단위를 두 번 지정하고 있음을 알 수 있습니다.
우리는 실제로 큰 열 3 개를 없애고 매체를 넣을 수 있습니다. 부트 스트랩은 매체를 3으로 설정하고 크기를 명시 적으로 설정하지 않으므로 매체에 설정 한 내용을 적용하고 적용합니다 그것은 큰 것입니다.
그래서 그것은 같은 방식으로 작동합니다.
아무것도 바뀌지 않았습니다.
나는 이미 중간 크기의 브레이크 포인트가 그대로 남아 있고 우리의 작은 작품들과 똑같이 생겼다.
그래서 우리는 그것을 두 번 지정할 필요가 없습니다.
그러니 그냥 N.Z. 우리는 그걸 없애고 똑같은 방식으로 작동합니다.
사실 우리가 살펴 본다면 우리는 웹 사이트에 간다.
나는 우리가이 각각을 검사한다면 우리가 거기에 갈 수 있음을 알게 될 것입니다.
열 작은 여섯 열 매체 세.
지금까지 우리가 가지고 있었던 것과 정확히 4 가지 다른 크기를 다루었습니다.
바라건대 당신은 그리드 시스템이 얼마나 다양하고 유용 할 수 있는지 볼 수 있습니다.
다시 가자.
이제는 중첩 그리드를 다룰 것입니다.
이 첫 번째 열 대신 여기에서 반으로 나누고 그 왼쪽에 뭔가가 있고 오른쪽에 뭔가가 있다고 가정 해 봅시다.
나는 실제로 거기에 또 다른 행을 추가 할 수 있습니다.
따라서 클래스는 행과 같습니다.
그리고 그 행의 내부에서 저는 열과 같은 클래스로 div에 추가 할 수 있습니다. 모든 열은 큰 열 여섯 열, 다른 열은 큰 열 여섯 개입니다. 그러면 여기에 반 텍스트와 나머지 열을 입력 할 것입니다.
전반전과 나머지 절반으로 변경하자. 그러면 저장하고 고전적인 분홍색을 보자.
이제 우리가 한 일은 세 개를 가로 질러 가거나 네 개를 가로 지르게 할 것입니다.
1 2 3 4 그리고 첫 번째에는 다른 행을 추가하여 12 단위로 나눕니다. 첫 번째 6을 사용하여 말하고 2 번째 6을 사용하여 다른 것을 저장하거나 새로 고칩니다. .
거기서 가서 더 분명하게 만듭니다.
다른 수업 듣게 해줘.
오렌지라고 부르 자.
아직 존재하지 않습니다.
그리고 이것이 오렌지색으로 나타나면 배경색이 오렌지색으로 바뀌며, 우리는 하나의 픽셀을 적색으로 채우고 실제로 dasht를 OK로 추가 할 것입니다.
새로 고침을하면이 네 가지가 계속 진행되고 있음을 알 수 있습니다.
각각은 3 개의 유닛을 차지하지만 첫 번째 유닛을 6 개의 유닛과 6 개의 유닛으로 나누어 그 행을 추가하면 행을 추가해야합니다.
열 대신에 열이있는 곳에서이 작업을 시작할 수 없습니다.
행이 있어야합니다.
그리고 한 번 더 해보 죠.
이 마지막 것을 여기서 여섯 개의 작은 조각으로 집어 넣자.
따라서 div 클래스의 내부에 행을 추가해야합니다.
다른 div가 필요하고 여기에 여섯 개의 열이 있습니다. 여기서 열 두 개는 각각 12 개의 단위 중에서 두 개를 차지합니다.
그리고 우리는 6을 원합니다. 그리고 나서 우리는 각각 하나씩 나아가고, 우리가 그들을 볼 수 있도록 그 오렌지 클래스를 추가합시다.
승인.
그래서 우리는 4 개의 큰 기둥이 우리가 절반으로 갈라진 첫 번째 기둥을 가로 질러갑니다.
마지막으로 여섯 개로 나눠서 실제로 볼 수는 없으므로 텍스트를 입력하지 않았습니다.
그러니 가자.
또는 오히려 실제로는 클래스 오렌지에 높이 또는 높이를 부여하는 것입니다.
각각 50 픽셀을 만들어 보겠습니다.
그리고 새로 고침하면 오렌지색이 오렌지색 인 모든 것이 높이가 50 픽셀입니다.
그래서 우리는 균등하게 분할 된 두 개의 열과이 네 개의 균등하게 분할 된 최상위 열의 내부에있는 여섯 개의 균등 분할 된 열을가집니다.
이것이 모두 그리드 시스템의 중요한 부분입니다.
요컨대 우리는 모든 줄에 12 개의 유닛을 가지고 있습니다.
네가 원하는대로자를거야.
4 가지 크기의 대형 중형 소형 초소형이 있으며 4 가지 다른 크기의 4 가지 브레이크 포인트 중 하나에서 12 가지 단위를 재 할당 할 수 있습니다.
이것이 멋진 반응 형 레이아웃으로 끝나는 방식이며 일반적으로 모바일 사이트에서 볼 수있는 패턴입니다.
따라서 여분의 작은 크기에서 대부분의 사이트는 콘텐츠를 다른 콘텐츠 위에 쌓아 두었습니다.이 콘텐츠를 축소하면 여기에있는 것처럼됩니다.
동일한 행에 여러 개의 콘텐츠가없는 휴대 기기의 일반적인 레이아웃입니다.
승인.
숭고한 것으로 돌아 가자.
세 가지 주요 목표에 대해 이야기했는지 확인하십시오.
그래서 우리는 그리드 시스템의 요점이 우리가 사물을 배치하는 데 도움이되는 목적에 대해 이야기했습니다.
그것은 굉장.
네 가지 크기를 이해하십시오.
그 중형 작은 여분의 작은 다음 오른쪽 중첩 된 격자입니다.
그리고 우리가 여기서하는 일은 열 대신에 행을 추가 한 다음 그 다음 행의 열을 다음 비디오에서 채울 수 있습니다.