부트 스트랩 그리드 시스템
이 섹션에서는 부트 스트랩 그리드 시스템 (그리드 시스템)를 설명합니다.
부트 스트랩은 스크린이나 표시 영역 (표시 영역)의 크기가 증가하는 응답하여, 모바일 바람직한 유동 그리드 시스템을 제공하고, 시스템은 자동으로 최대 12로 분할된다.
그리드 (그리드) 란 무엇입니까?
위키 백과에서 :
그래픽 디자인, 그리드 (보통 이차원)로 이루어진 교차 (세로, 가로) 구조에 의해 콘텐츠를 구성하는 데 사용되는 일련의 직선이다. 널리 디자인 인쇄 디자인 레이아웃 및 콘텐츠의 구조에서 사용된다. 웹 디자인에서, 그것은 신속 HTML 및 CSS 방식을 사용 일관되고 효과적인 레이아웃을 생성하는 데 사용된다.
단순히 위치가 이동하고, 클라이언트의 부하를 경감하기 쉽다 있도록 콘텐츠를 주관 웹 디자인 눈금을 넣어.
부트 스트랩 그리드 시스템 (그리드 시스템) 란 무엇입니까?
그리드 시스템 설명에 공식 문서를 부트 스트랩 :
우리가 어떻게 위의 문장을 이해하자. 3 스트랩이 점에서 (예를 들면 휴대 전화, 타블렛과 같은) 작은 스크린 장치를위한 부트 스트랩 코드는 다음 컴포넌트와 그리드 (랩탑, 데스크탑 컴퓨터 등의) 대형 스크린 장치로 확장 모바일 장치 우선 순위이다.
모바일 우선 전략
- 함유량
- 가장 중요한 것이 무엇인지를 결정합니다.
- 레이아웃
- 우선 작은 폭을 설계했습니다.
- CSS 기반의 모바일 디바이스는 미디어 쿼리가 태블릿 컴퓨터, 데스크톱 컴퓨터에 관한, 우선 순위입니다.
- 점진적 개선
- 스크린 크기의 증가와 요소를 추가한다.
증가 또는 화면 표시 영역 (표시 영역) 크기 응답 그리드 시스템에서, 시스템은 자동적으로 최대 12로 분할된다.
| (1) | (1) | (1) | (1) | (1) | (1) | (1) | (1) | (1) | (1) | (1) | (1) |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| (12) | |||||||||||
부트 스트랩 그리드 시스템 (그리드 시스템) 작품
콘텐츠의 행과 열을 일련의 그리드 시스템은 페이지 레이아웃을 생성한다. 그것이 작동하는 방법 다음 목록 부트 스트랩 그리드 시스템입니다 :
- 행은 적절한 정렬 (얼라인먼트) 및 패딩 (패딩)을 얻기위해서는, .container 클래스에 배치되어야한다.
- 컬럼의 수평 세트를 만들 줄을 사용합니다.
- 콘텐츠가 열에 배치되어야하고, 칼럼은 단지 직접 자식 행 할 수있다.
- 미리 정의 된 그리드 클래스, 예컨대셀에만 그리고 .COL-XS-4 신속그리드 레이아웃을 생성하는데 사용될 수있다. LESS 혼합 클래스보다 의미 레이아웃을 사용할 수있다.
- 열 패딩 (패딩)에 의한 열의 내용 사이의 간격을 만들 수 있습니다. 외부는 (마진) 부정을 뚫고.rows, 마지막 행, 첫 번째 열은 오프셋을 나타냅니다에서 패딩입니다.
- 그리드 시스템은 십자가를 만들 열두 열을 지정하여 사용할 수 있습니다. 예를 들어, 세 개의 동일한 열을 만드는 세 가지.COL-XS-4를 사용합니다.
미디어 쿼리
미디어 쿼리는 매우 세련된 "조건부 CSS 규칙"입니다. 그것은 일부 소정의 기준 CSS에 따라 일부에 적용됩니다. 이러한 조건이 충족되는 경우, 해당 스타일을 적용합니다.
미디어 부트 스트랩 쿼리는 뷰포트, 표시 및 숨기기 콘텐츠의 크기에 따라 이동할 수 있습니다. 부트 스트랩 그리드 시스템 중요한 경계 지점 임계 값을 만드는 데 사용 LESS 파일을 사용하여 다음 미디어 쿼리.
/ * 초소형 기기 (휴대폰, 이하 768px) * /
/ * 기본적으로 부트 스트랩없이 미디어 쿼리 * /
/ * 소형 기기 (태블릿, 이후 768px) * /
@media (최소 폭 : 화면-SM-분 @) {...}
/ * 중간 장치 (이후 바탕 화면, 992px) * /
@media (최소 폭 : @ 화면-MD-분) {...}
/ * 대형 장비 (대형 데스크탑 컴퓨터, 이후 1200 픽셀) * /
@media (최소 폭 : 화면-LG-분 @) {...}
우리는 때때로 화면 크기의 작은 범위 내에 국한 CSS에 영향을 미칠 것입니다 코드의최대 폭 미디어 쿼리가 포함되어 있습니다.
@media (최대 폭 : @ 화면 XS-최대) {...}
@media (최소 폭 : 화면-SM-분 @)와 {...} (최대 폭 화면-SM-최대 @)
@media (최소 폭 : @ 화면-MD-분) (최대 폭 : @ 화면-MD-최대) {...}
@media (최소 폭 : 화면-LG-분 @) {...}
미디어 쿼리는 두 부분으로, 먼저 장치 사양, 다음 크기 규칙이 있습니다. 위의 경우, 다음과 같은 규칙을 설정
이제이 코드 줄을 보자 :
@media (최소 폭 : 화면-SM-분 @)와 {...} (최대 폭 화면-SM-최대 @)
A 최소 폭모든:화면의 폭이@ 화면-SM-최대보다작 으면화면-SM-분기기@,그것은 몇 가지 처리를 할 것입니다.
그리드 옵션
다음 표는 여러 장치에서 부트 스트랩 그리드 시스템이 작동하는 방법 요약
| 超小设备手机（<768px） | 小型设备平板电脑（≥768px） | 中型设备台式电脑（≥992px） | 大型设备台式电脑（≥1200px） | |
|---|---|---|---|---|
| 网格行为 | 一直是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 | 以折叠开始，断点以上是水平的 |
| 最大容器宽度 | None (auto) | 750px | 970px | 1170px |
| Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列?数量和 | 12 | 12 | 12 | 12 |
| 最大列宽 | Auto | 60px | 78px | 95px |
| 间隙宽度 | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） | 30px （一个列的每边分别 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
그리드의 기본 구조
다음은 부트 스트랩 격자의 기본 구조는 다음과 같다 :
<사업부 클래스 = "컨테이너">
<사업부 클래스 = "행">
<사업부 클래스 = "COL - * - *"> </ DIV>
<사업부 클래스 = "COL - * - *"> </ DIV>
</ DIV>
<사업부 클래스 = "행"> ... </ DIV>
</ DIV>
<사업부 클래스 = "컨테이너"> ...
우리는 그리드를 보면 몇 가지 간단한 예제를 보자 :
응답 열은 다시
다음 예는 네 개의 그리드를 포함하지만, 우리는 격자의 위치가 작은 장치 탐색에 표시됩니다 확인할 수 없습니다.
이 문제를 해결하기 위해서는.clearfix 클래스 사용 사용할 수 응답 유틸리티를 아래 예와 같이 해결하려면
예
»시도
브라우저는 변경 사항을 확인하거나 휴대 전화의 효과를 볼 수있는 창 크기를 조정합니다.
오프셋 열
더 전문적인 레이아웃을위한 유용한 기능은 오프셋. 이들은 열을위한 공간을 더 만들기 위해 사용될 수있다.예를 들어, .COL-XS의 = *이 클래스는 오프셋을 지원하지 않지만, 이들은 효과를 얻기 위해 비어있는 셀을 사용하여 간단하게 할 수있다.
ㄱ 대형 스크린 디스플레이에 사용 상쇄하기 위해,.COL-MD-오프셋, * 종류를 사용한다.* 범위는1-11어디에서 이러한 클래스 외부에서 왼쪽은 (마진)에서 열이*열을증가합니다.
다음 예에서, 우리가 <DIV 클래스 = "COL-MD를 -6"> .. </ DIV> 우리는이 사업부를 중앙에.COL-MD는 오프셋-3 클래스를 사용합니다.
예
»시도
결과는 다음과 같다 :
중첩 된 열
콘텐츠의 중첩 격자의 기본은, 새로운셀에만 추가하고, 기존의 열 .COL-MD-내 *그룹.COL-MD-*열을 추가합니다. 중첩 행 이상 12 수없는 열 번호를 설정 컬럼 세트를 포함한다 (실제로, 12 기입해야한다는 요구 사항이 없다).
다음 예에서, 레이아웃은 두 개의 열을 가지며, 두 번째 열은 네 개의 박스의 두 행으로 분할된다.
예
»시도
결과는 다음과 같다 :
열 정렬
다른 완벽한 기능에 부트 스트랩 그리드 시스템은 쉽게 다음 순서가 다른 열에 표시됩니다, 순서대로 열을 쓸 수 있다는 것입니다.
* 범위는 1-11어디에서 당신은 쉽게,.COL-MD-푸시내장 그리드 열*및.COL-MD-풀다운 *클래스 순서를 변경할 수있습니다.
다음 예에서, 우리는 2 열 배치를 갖고, 좌측 열은 사이드로 매우 좁다. 우리는* 및 .COL-MD-풀다운의 * 클래스-MD-푸시.COL 두 열의 순서를 교환하는 데 사용됩니다.
예
»시도
결과는 다음과 같다 :
