Latest web development tutorials

재단 격자 - 대형 장비

마지막 장에서는 우리는 중간 크기의 장비와 작은 장비 그리드 레이아웃의 25 % / 75 % (.small-3 및 .small-9)를위한 소형 장비의 비율,하지만 중소 장비의 비율에 대한 소개 50 % / 50 % (.medium-6 .medium-6) :

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

대규모 설비에서, 우리는 33 % / 66 %의 비율을 추천한다.

팁 : 화면 사이즈가 큰 장비 64.0625em 정의보다 크다.

대형 장비의 사용은 .large-* 카테고리를.

이제 우리는 대규모 설비에 2 추가

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

결심

  • %의 두 열 75분의 25 % 작은 장치의 비율 ( .small-3.small-9 )
  • %의 두 열 50분의 50 %와 중간 크기의 장치의 비율 ( .medium-6.medium-6 )
  • %의 두 열 66분의 33 %와 큰 장비의 비율 ( .large-4.large-8 )

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

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

대형 장비에 꽉 사용

다음 예, 우리는 지정 .large-6 클래스를 (그리고 * .medium-하지 .small-* ). 이는 장비의 큰 비율이 50 % / 50 %임을 나타낸다. 그러나 중간 크기 또는 작은 기기에서 수평 (100 % 폭) 누적 :

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

»시도