이온 그리드 (그리드)

이온 그리드 (그리드) 및 대부분의 다른 프레임 워크는 탄성 박스 모델 (유연한 박스 모델)을 사용, 다르다. 그리고 휴대 단말기에 기본적으로 휴대폰이 지원됩니다. 행 스타일 지정된 행, 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>

»시도

주 : 각 스타일의 예는 자동으로 테두리와 회색 배경을 내지 컬럼에 추가됩니다.

아래의 지정된 열 폭 비율 스타일 이름 중 일부입니다 :

격자가 오프셋 (offset)

당신은 왼쪽 열은 다음과 같은 예는 오프셋을 설정할 수 있습니다 :

<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>

»시도

여기에 몇 가지 비율은 스타일 이름을 오프셋 :

그리드에 세로 스냅

쉽게 열을 설정할 수 있습니다 유연한 박스 모델은 세로 방향으로 정렬됩니다. 종렬 상부를 포함 하부의 중간 부분, 그것은 열의 각 행 또는 지정된 컬럼에 적용 할 수있다.

예를 들어, 마지막 하나는 더 나은 길이 방향 정렬 그리드 데모 컨텐츠를 설정합니다.

<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>

»시도

응답 그리드

그래서 예를 들어 당신이 전환 핸드 헬드 화면, 가로 화면, 세로 화면. 우리는 적응 형 크기의 폭에 따라 구현 될 수있는 각각의 행에 대해 격자를 설정할 필요가있다.

다른 장치 클래스의 응답 스타일은 다음과 같습니다 :

<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>

»시도