부트 스트랩-그리드 데모
그리드 란?
그래픽 디자인에서 그리드는 콘텐츠를 구성하는 데 사용되는 일련의 교차 직선 (수직, 수평)으로 구성된 구조 (보통 2 차원)입니다. 인쇄 디자인에서 레이아웃 및 콘텐츠 구조를 디자인하는 데 널리 사용됩니다. 웹 디자인에서 HTML과 CSS를 사용하여 빠르고 효과적으로 일관된 레이아웃을 만드는 매우 효과적인 방법입니다.
부트 스트랩 그리드 시스템의 작동
그리드 시스템은 콘텐츠를 보관하는 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다. 부트 스트랩 그리드 시스템이 작동하는 방법은 다음과 같습니다.
행은 .container 적절한 정렬 및 패딩을위한 클래스.
행을 사용하여 가로 열 그룹을 만듭니다.
콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식이 될 수 있습니다.
다음과 같은 미리 정의 된 그리드 클래스 .row and .col-xs-4그리드 레이아웃을 빠르게 만드는 데 사용할 수 있습니다. LESS 믹스 인은 더 의미있는 레이아웃에도 사용할 수 있습니다.
열은 패딩을 통해 거터 (열 내용 사이의 간격)를 만듭니다. 해당 패딩은 음의 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됩니다..rows.
그리드 열은 확장하려는 사용 가능한 열 수를 12 개 지정하여 생성됩니다. 예를 들어, 세 개의 동일한 열은 세 개의.col-xs-4.
예 | 기술 | 다운로드 링크 |
---|---|---|
그리드 | 이 예는 Bootstrap의 그리드 구조에 대해 나타냅니다. | 다운로드 |