부트 스트랩 프레임 워크의 그리드 시스템은 컨테이너를 12 조각으로 나눕니다. 이를 사용할 때는 실제 상황에 따라 Less/Sass 소스 코드를 다시 컴파일하여 값을 수정할 수 있습니다. Mesh 시스템은 Bootstrap 프레임 워크에서 어떻게 작동합니까?
1. 데이터 행 (.ROWS)은 적절한 정렬 및 패딩을 제공 할 수 있도록 컨테이너에 포함되어야합니다.
<div> <div> </div> </div>
2. 열 (.Column)을 행 (.ROW)로 추가 할 수 있지만 열의 합은 이중화 된 총 열의 수를 초과 할 수 없습니다 (예 : 12).
<div> <div> <div> </div> <div> </div> </div>
3. 특정 컨텐츠는 열 컨테이너 (.Column)에 배치해야하며 열 (.Column) 만 행 컨테이너 (.ROW)의 직접 자식 요소로 사용할 수 있습니다.
4. 내부 거리 (패딩)를 설정하여 열 사이의 간격을 만듭니다. 그런 다음 첫 번째 열 및 마지막 스택에 대한 음수 값을 설정하여 패딩의 영향을 상쇄합니다.
부트 스트랩 그리드 시스템에는 네 가지 유형의 브라우저 (초소 화면, 작은 화면, 중간 화면 및 대형 화면)가있는 부트 스트랩 그리드 시스템에는 응답 효과가 있으며,이 중단 점은 768px, 992px, 1220px입니다.
다른 브라우저 해상도의 경우 컨테이너 (.Container)는 너비가 다릅니다 : 자동, 760px, 970px, 1170px;
.Container {Padding-Right : 15px; Padding-Left : 15px; 마진-오른쪽 : 자동; 마진-왼쪽 : auto; @media (min-width : 768px) {.Container {width : 750px;}@media (min-width : 992px) {width : 970px : 97px : 97px : 1200px) {.Container {너비 : 1170px;}행 컨테이너 (.ROW)는 컨테이너 행을 12 개의 동일한 부분, 즉 열으로 나눕니다. 각 열은 왼쪽 패딩 왼쪽을 가지고 있습니다 : 15px 및 Padding-Right; 이로 인해 첫 번째 열에서 왼쪽을 왼쪽으로 왼쪽으로하고 마지막 열에서 패딩 오른쪽이 중간 너비의 30px를 차지하게됩니다.
.col-xs-1, .col-md-1, .col-lg-1, .col-xs-2, .col-md-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-md-3, .col-md-3, .col-ld-3, .col-xs-4,. .col-md-4, .col-lg-4, .col-xs-5, .col-md-5, .col-md-5, .col-lg-5, .col-xs-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-6, .col-xs-7, .col-md-7,. .col-xs-8, .col-md-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-md-9, .col-lg-9, .col-xs-10, .col-md-10, .col-md-10, .col-md-10, .col-md-10,. .col-xs-11, .col-md-11, .col-md-11, .col-md-11, .col-lg-11, .col-xs-12, .col-md-12, .col-md-12, .col-lg-12 {위치 : 상대; 최소-하이트 : 1px; 패딩-reight : 15px;].행 컨테이너 (.row)는 -15px의 마진 왼쪽 및 마진 오른쪽 값을 정의하며, 첫 번째 열의 왼쪽 내부 거리와 마지막 열의 오른쪽 내부 거리를 상쇄하는 데 사용되므로 첫 번째 열과 마지막 열 사이에 간격이 없도록합니다.
.ROW {마진 -오른쪽 : -15px; 마진 -왼쪽 : -15px;}기본 사용
부트 스트랩 프레임 워크는 다양한 화면 크기에 대해 다른 그리드 스타일을 사용하므로 미드 스크린 (970px)을 예로 들어 봅시다.
1. 열 조합
열 조합은 숫자를 병합하여 열을 변경하는 것입니다 (총 열의 총 수는 12를 초과 할 수 없음). 이는 테이블의 Colspan 속성과 다소 유사합니다. 열 조합 방법에는 두 가지 특성 만 포함됩니다 : 너비 비율이 부동
<div> <div> <div> col-MD-4 </div> <div> col-md-8 </div> </div> <div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> <di v> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> <div> col-md-3 </div> <div> col-md-6 </div> <div> col-md-3 </div> </div>
효과는 다음과 같습니다.
모든 열이 떠난지 확인하십시오
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {왼쪽;};각 열 조합의 너비를 정의하십시오
.col-md-12 {너비 : 100%;}. col-md-11 {너비 : 91.666666667%;}. col-md-10 {너비 : 83.33333333333%;}. col-md-9 {너비 : 75%;}. col-md-8 { 66.6666667%;}. Col-MD-7 {너비 : 58.333333333%;}. col-md-6 {너비 : 50%;}. col-md-5 {너비 : 41.666666667%;}. col-md-4 {33.33333333%; {너비 : 25%;}. col-md-2 {너비 : 16.666666667%;}. col-md-1 {너비 : 8.333333333%;}열 오프셋
때로는 인접한 두 개의 열이 서로 가까이있는 것을 원하지 않지만 마진이나 다른 기술적 수단을 사용하고 싶지 않습니다. 열 오프셋을 사용하여 달성 할 수 있습니다. 열 오프셋을 사용하여 열 요소에 클래스 이름을 추가하십시오. 이 클래스 이름을 가진 열은 다음과 같이 오프셋됩니다. 열 요소에 .col-md-offset-4를 추가하여 열이 오른쪽으로 오프셋되어 너비의 4 열만큼 오프셋되어 있음을 나타냅니다.
<div> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> 열 오프셋 </div> <div> col-md-2 </div> <div> col-md-2 </div> </div> </div> </div>
효과는 다음과 같습니다.
구현 원칙 :
오프셋이있는 것만 큼 많은 마진 왼쪽 왼쪽 왼쪽을 사용하면 왼쪽을 많이 얻을 수 있습니다.
.col-md-offset-12 {margin-left: 100%;}.col-md-offset-11 {margin-left: 91.66666667%;}.col-md-offset-10 {margin-left: 83.333333333%;}.col-md-offset-9 {margin-left: 75%;}.col-md-offset-8 {margin-left: 66.6666667%;}. Col-MD-OffeSet-7 {마진-왼쪽 : 58.33333333%;}. col-md-offset-6 {margin-left : 50%;}. col-md- 오프셋 -5 {margin-left : 41.66666667%; 33.33333333%;}. Col-MD-OfferSet-3 {마진-왼쪽 : 25%;}. col-md-offesset-2 {마진-왼쪽 : 16.66666667%;}. col-md- 오프셋 -1 {margin-let : 8.33333333%;}. col-md-offset-}.Coll-MD-Offset-*를 사용하여 열을 오프 오프셋하기 위해 Coll-MD-Offset-*를 사용하면 총 열과 오프셋 열이 12를 초과하지 않도록해야합니다. 그렇지 않으면 열이 오프 로우로 표시됩니다.
열 정렬
열 정렬은 열의 방향을 변경하고 부동 거리를 설정하는 것입니다. 부트 스트랩 그리드 시스템에서 클래스 이름을 추가하는 것입니다. col-md-push-* 및 col-md-pull-*
<div> <div> <div> col-md-4 </div> <div> col-md-8 </div> </div> </div>
효과는 다음과 같습니다.
Col-MD-4는 왼쪽에 있고 COL-MD-8이 오른쪽에 있습니다. 위치를 교환하려면 COL-MD-4를 8 열로 오른쪽으로 이동해야합니다. 즉, 클래스 이름을 추가하십시오 .Col-MD-Push-8; 동시에 COL-MD-8을 4 열로 왼쪽으로 이동해야합니다. 즉, 클래스 이름을 추가하십시오 .Col-MD-Pull-4.
Bootstrap은 왼쪽과 오른쪽을 설정 하여만 포지셔닝 효과를 달성합니다.
.col-md-pull-12 {오른쪽 : 100%;}. col-md-pull-11 {오른쪽 : 91.66666667%;}. col-md-pull-10 {오른쪽 : 83.3333333333%;}. col-md-pull-9 {오른쪽 : 75%;}. col-md-pull-8 {오른쪽 : : 66.66666667%;}. col-md-pull-7 {오른쪽 : 58.33333333%;}. col-md-pull-6 {오른쪽 : 50%;}. 오른쪽 : 41.6666666667%;}. col-md-pull-4 {오른쪽 : : 33.33333333%;}. col-md-pull-3 {오른쪽 : 25%;}. col-md-pull-2 {오른쪽 : 16.6666666667%;}. col-md-pull-1 {오른쪽 : 8.333333333%;} col-md-pull-0 {coll;}.}. 100%;}. col-md-push-11 {왼쪽 : 91.666666667%;}. col-md-push-10 {왼쪽 : 83.3333333333%;}. col-md-push-9 {왼쪽 : 75%;}. col-md-push-8 {left : 66666666666666666666666666666666666666666666666666666666666666666666666666666666666666%; 58.33333333%;}. col-md-push-6 {왼쪽 : 50%;}. col-md-push-5 {왼쪽 : 41.666666667%;}. col-md-push-4 {왼쪽 : 33.33333333%;}. col-md-push-3 {col-md-2}. 16.666666667%;}. col-md-push-1 {왼쪽 : 8.333333333%;}. col-md-push-0 {왼쪽 : 0;}둥지
열 중첩은 하나를 추가하거나 열 컨테이너를 열에 만들 수있는 다음이 행 컨테이너에 열을 삽입 할 수 있습니다. 열 컨테이너의 행 컨테이너 (행)의 너비가 100%인 경우 현재 외부 열의 너비입니다.
<div> <div> <div>
나는 내부의 그리드를 중첩했습니다
<div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> col-md-4 </div> <div>
나는 내부의 그리드를 중첩했습니다
<div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
위의 내용은 편집기가 소개 한 부트 스트랩 그리드 시스템입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!