최고의 이온 그리드 (그리드) 튜토리얼 2024년, 이 튜토리얼에서는 그리드에 세로 스냅,응답 그리드,를 배울 수 있습니다.
이온 그리드 (그리드) 및 대부분의 다른 프레임 워크는 탄성 박스 모델 (유연한 박스 모델)을 사용, 다르다. 그리고 휴대 단말기에 기본적으로 휴대폰이 지원됩니다. 행 스타일 지정된 행, COL 스타일 지정된 열.
당신은 COL을 포함하면 스타일로 스타일의 요소가있는 행에서, COL은 같은 크기로 설정됩니다.
다음 예제 행 스타일 5 COL 스타일, 20 %의 각 COL 폭이 포함되어 있습니다.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
당신은 행의 각 열에 대한 샘플 크기를 설정할 수 있습니다. 기본적으로, 열은 동일한 크기로 분할한다. 그러나 또한 열 (행동 12 메쉬)의 폭의 비율로 설정 될 수있다.
<div class="row"> <div class="col col-50">.col.col-50</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-75">.col.col-75</div> <div class="col">.col</div> </div> <div class="row"> <div class="col">.col</div> <div class="col col-75">.col.col-75</div> </div> <div class="row"> <div class="col">.col</div> <div class="col">.col</div> </div>
주 : 각 스타일의 예는 자동으로 테두리와 회색 배경을 내지 컬럼에 추가됩니다.
아래의 지정된 열 폭 비율 스타일 이름 중 일부입니다 :
.COL-10 | 10 % |
.COL-20 | 20 % |
.COL-25 | 25 % |
.COL-33 | 33.3333 % |
.COL-50 | 50 % |
.COL-67 | 66.6666 % |
.COL-75 | 75 % |
.COL-80 | 80 % |
.COL-90 | 90 % |
당신은 왼쪽 열은 다음과 같은 예는 오프셋을 설정할 수 있습니다 :
<div class="row"> <div class="col col-33 col-offset-33">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-33">.col</div> <div class="col col-33 col-offset-33">.col</div> </div> <div class="row"> <div class="col col-33 col-offset-67">.col</div> </div>
여기에 몇 가지 비율은 스타일 이름을 오프셋 :
.COL 오프셋-10 | 10 % |
.COL 오프셋-20 | 20 % |
.COL 오프셋-25 | 25 % |
.COL 오프셋-33 | 33.3333 % |
.COL 오프셋-50 | 50 % |
.COL 오프셋-67 | 66.6666 % |
.COL 오프셋-75 | 75 % |
.COL 오프셋-80 | 80 % |
.COL 오프셋-90 | 90 % |
쉽게 열을 설정할 수 있습니다 유연한 박스 모델은 세로 방향으로 정렬됩니다. 종렬 상부를 포함 하부의 중간 부분, 그것은 열의 각 행 또는 지정된 컬럼에 적용 할 수있다.
예를 들어, 마지막 하나는 더 나은 길이 방향 정렬 그리드 데모 컨텐츠를 설정합니다.
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row"> <div class="col col-top">.col</div> <div class="col col-center">.col</div> <div class="col col-bottom">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-top"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-center"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-bottom"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div>
그래서 예를 들어 당신이 전환 핸드 헬드 화면, 가로 화면, 세로 화면. 우리는 적응 형 크기의 폭에 따라 구현 될 수있는 각각의 행에 대해 격자를 설정할 필요가있다.
다른 장치 클래스의 응답 스타일은 다음과 같습니다 :
응답 클래스 | 기술 |
.responsive-SM | 크로스 스크린 휴대 전화보다 작은 |
.responsive-MD | 평면 수직 화면 미만 |
.responsive - LG 전자 | 평면 가로 화면 미만 |
<div class="row responsive-sm"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>