Latest web development tutorials

그리드 재단 - 중간 장비

마지막 장에서 우리는 우리가 사용하는 작은 장치를 도입 .small-* 클래스는 25 % / 75 %의 격자 비율을 설정합니다 :

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

우리는 50 % / 50 %의 비율을 권장 중형 단말기.

팁 : 화면 크기는 중간 크기의 장비에 정의되어 40.0625em 하는 64.0624em 사이.

중간 크기의 장비 .medium-* 카테고리.

이제 우리는 미드 레인지 디바이스에 두 개의 추가 :

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

? 인스턴스에서 비율이 25 %, 75 %로, 두 개의 열을 설정 (재단은 모바일 최초의 : 지정되지 않은 경우, 큰 장비가 .small 클래스 코드를 상속합니다)

소형 장치 % 75분의 25 % (비율 .small-3.small-9 ). 그러나, 사용되는 중형 기기의 비율 % 50분의 50 %이었다 ( .medium-6.medium-6 ).

<사업부 클래스 = "행">
<사업부 클래스 = "작은-3 중형 6 열"스타일 = "배경 색 : 노란색;">
<P>이 튜토리얼 </ P>
</ DIV>
<사업부 클래스 = "작은-9 매체-6 열"스타일 = "배경 색 : 핑크;">
<P>이 튜토리얼 </ P>
</ DIV>
</ DIV>

»시도
주의 참고 : 열 수는 12 개까지 추가 할 수 있도록하기 위해!

중간 크기에서 사용하기 위해 꽉 장치

다음 예, 우리가 지정 .medium-6 클래스 (안 .small-* ). 이것은 나타내는 50 % / 50 %의 중간 또는 대형 설비 비율있다. 그러나 소형 기기에 가로 (폭 100 %) 누적 :

<사업부 클래스 = "행">
<사업부 클래스 = "중간 6 열"스타일 = "배경 색 : 노란색;">
<P>이 튜토리얼 </ P>
</ DIV>
<사업부 클래스 = "중간 6 열"스타일 = "배경 색 : 핑크;">
<P>이 튜토리얼 </ P>
</ DIV>
</ DIV>

»시도