1. 소스 코드 파일
_grid.scss : 그리드 시스템 클래스 파일
Mixins/_grid.scss : Grid Systems에서 구현 한 Mixin 컬렉션을 지원합니다
Mixins/_grid-framework.scss : 그리드 시스템에 의해 구현 된 Core Mixin
2. 지원 기능
1. 레이아웃을 백분율로 실현하십시오
2. 그리드의 위치를 실현하십시오
3. 그리드의 중첩을 구현하십시오
4. 그리드 시스템 만 사용하는 경우 Bootstrap-grid.scss 파일 만 인코딩 할 수 있습니다.
구현 원리
1. 레이아웃 백분율에 따라 주요 문제는 다른 장치의 너비를 균등하게 분포하는 방법입니다. Bootstrap은 간단한 백분율 만 사용하며 모든 크기 장치에서 동일한 백분율이 사용됩니다.
2. 그리드의 위치 : 그리드가 왼쪽, 오른쪽으로 이동하고 그리드로 오른쪽으로 오른쪽으로 이동하는 기능을 해결합니다.
3. 그리드의 중첩 : 그리드 컨텐츠 중첩 후 그리드 레이아웃 시스템을 구현하십시오.
4. 소스 코드 분석
1. _grid.scss : 그리드 시스템에서 생성 된 메인 클래스, mixins/_grid.scss, mixins/_grid-framework.scss, variables.scs의 변수 및 관련 메소드를 참조합니다.
첫째 : 두 컨테이너 클래스를 정의하십시오
a) 컨테이너 : 다른 장치에 따라 다른 너비를 정의하고 전체 화면을 채우지 않는 그리드 컨테이너;
b) Continaer-Fluid : 격자 용기, 모든 지지대가있는 전체 화면
컨테이너 및 컨테이너 유체는 모두 Make-Container (Mixins/_grid.scss)를 사용합니다. Make-Container는 센터링, 왼쪽 및 오른쪽 여백, 수유 등과 같은 제어만을 구현합니다. 컨테이너는 다른 장치에 따라 컨테이너 폭을 정의합니다.
그런 다음 : 행 (행) 정의 :
Make-Row (Mixins/_grids.scss)는 떠 다니고 왼쪽 및 오른쪽 여백을 청소하는 정의를 달성하기 위해 호출됩니다. 4.0에서 Flex 레이아웃에 대한 지원이 활성화되면 컨테이너 디스플레이가 Flex 및 Flex-Grap으로 설정되어 랩으로 설정됩니다.
다음 : 셀 설정을 달성하려면 Make-Grid-Columns (Mixins/_grid-Framework.scss)를 직접 호출하십시오
a) 그리드 컬럼 제작 : 셀 생성의 진입 방법, 총 그리드 수, 마진 너비 및 여러 지원 크기 전달
b) Make-Grid-Colums는 Mixins/_grid.scss의 많은 방법을 참조합니다.
a) Map-Key 함수를 사용하여 맵 키 컬렉션을 가로 지르십시오.
@extend 함수는 상속에 사용되어 모든 콜의 왼쪽 부동을 구현하고 모든 콜의 상대 위치를 구현합니다.
@for $ i from 1 ~ $ 열 {.col-#{$ breakpoint}-#{$ i} {@extend %grid-column; // extend는 상속입니다. 이것을 스타일 컬렉션으로 병합하십시오. // col-xs-1, col-xs-2 {positiona : regaintative; ....}}}a) Col 너비 계산을 구현하기위한 콜 스팬 기능을 만들기
b) MITE-COL-MODIFIER 방법을 Mixins/_grid.scss에서 호출하여 푸시, 풀 및 오프셋 스타일의 생성을 실현하십시오.
나. 푸시 : 왼쪽을 사용하여 몇 개의 그리드를 오른쪽으로 밀어 넣습니다.
II. 당기기 : 오른쪽을 사용하여 몇 개의 그리드를 왼쪽으로 밀어 넣습니다.
III. 오프셋 : 마진 왼쪽 구현을 사용하여 오른쪽으로 백분율로 밀어 넣습니다.
@Mixin MAKE-COLL-OFFSET ($ size, $ columns : $ grid-colums) {margin-left : 백분율 ($ size / $ columns);}@mickin make-col-push ($ size, $ columns : $ grid-columns) {left : if ($ size> 0, 백분율 ($ size / $ columns), auto); right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-pull($size, $columns: $grid-columns) { right: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-modifier($type, $size, $columns) { // Work around the lack of dynamic mixin @include support @if $type == push {@include make-col-push ($ size, $ columns); } @else if $ type == pull {@include make-col-pull ($ size, $ columns); } @ELSE IF $ type == OFFSET {@Include Make-Col-OffeSet ($ size, $ columns); }}위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.