그리드 재단 - 소형 기기
우리는 작은 장치, 25 %의 두 폭 비율이 75 %에 간단한 그리드 레이아웃이 있다고 가정 해 봅시다.
팁 : 작은 장치 화면 정의는보다 작은 40.0625em .
우리는 작은 장치를 사용 .small-* 카테고리를.
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
다음 예는 비율이 25 %, 75 %로, 두 개의 열을 설정 (재단은 모바일 최초의 : 지정되지 않은 경우, 큰 장비가 .small 클래스 코드 상속) : .small . 그들 그와 사용을 "
예
<사업부 클래스 = "행">
<사업부 클래스 = "작은 3 열"스타일 = "배경 색 : 노란색;">
<P>?이 튜토리얼 </ P>
</ DIV>
<사업부 클래스 = "작은-9 열"스타일 = "배경 색 : 핑크;">
<P>?이 튜토리얼 </ P>
</ DIV>
</ DIV>
<사업부 클래스 = "작은 3 열"스타일 = "배경 색 : 노란색;">
<P>?이 튜토리얼 </ P>
</ DIV>
<사업부 클래스 = "작은-9 열"스타일 = "배경 색 : 핑크;">
<P>?이 튜토리얼 </ P>
</ DIV>
</ DIV>
»시도
 | 참고 : 열 수는 12 개까지 추가 할 수 있도록하기 위해! |
|---|
당신이 33.3 % / 66.6 %의 비율을 설정해야하는 경우 사용할 수 있습니다 .small-4 및 .small-8 :
예
<사업부 클래스 = "행">
<사업부 클래스 = "작은 4 열"스타일 = "배경 색 : 노란색;">
<P>?이 튜토리얼 </ P>
</ DIV>
<사업부 클래스 = "작은-8 열"스타일 = "배경 색 : 핑크;">
<P>?이 튜토리얼 </ P>
</ DIV>
</ DIV>
<사업부 클래스 = "작은 4 열"스타일 = "배경 색 : 노란색;">
<P>?이 튜토리얼 </ P>
</ DIV>
<사업부 클래스 = "작은-8 열"스타일 = "배경 색 : 핑크;">
<P>?이 튜토리얼 </ P>
</ DIV>
</ DIV>
»시도