jQuery를 모바일 레이아웃 격자
jQuery를 모바일 CSS 기반의 열 레이아웃 세트를 제공합니다. 그러나 열 레이아웃은 일반적으로 인해 모바일의 화면 폭에, 모바일 장치에서 사용하지 않는 것이 좋습니다.
그러나 당신이 나란히이 테이블에 것처럼, 버튼이나 탐색 탭과 같은 작은 요소를 배치 할 시간이있다. 그런 다음, 열은 완벽하다.
그리드의 열없이 함께 동일한 폭 (총 넓은 100 %)로있는 border, background, margin 이나 padding .
사용할 수있는 다섯 가지 레이아웃 격자가 있습니다 :
| 그리드 클래스 | 열 | 열 너비 | 에 해당 | 예 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | Try it |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
열 컨테이너 내에 자식 요소는 클래스 수 ui-block-a|b|c|d|e 컬럼의 수에 따라. 열은 나란히 뜬다.
예 1 : UI-그리드 클래스 (두 열 레이아웃 인)의 경우, 두 자식 요소를 지정해야합니다 ui-block-a 와 ui-block-b .
예 2 : 들어 ui-grid-b (세 개의 열 레이아웃)의 세 가지 하위 요소 추가 ui-block-a, ui-block-b 및 ui-block-c .
그리드 사용자 지정
당신은 CSS를 사용하여 열 블록을 사용자 정의 할 수 있습니다 :
예
<style>
.ui-block-a, .ui-block-b, .ui-block-c {
background-color: lightgray;
border: 1px solid black;
height:
100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
»그것을 자신을 시도 또한 인라인 스타일을 사용하여 블록을 사용자 정의 할 수 있습니다 :
<div class="ui-block-a" style="border:1px solid
black;"><span>Text..</span></div>
여러 행
당신의 열이 내부에 여러 행을 가질 수있다.
참고 : ui-block-a-class 항상 새로운 라인을 생성합니다 :
예
<div class="ui-grid-b">
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-c"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
<div class="ui-block-b"><span>Some
Text</span></div>
<div class="ui-block-a"><span>Some
Text</span></div>
</div>
»그것을 자신을 시도 응답 그리드
작은 화면에, 하나의 행에 텍스트 나란히 너무 많은 버튼을 가지고하지 않는 것이 좋습니다 - 텍스트가 짧아 얻을 수있다.
응답 그리드의 경우, 용기에 UI 응답 클래스를 추가 :