발판

부트스트랩은 반응형 12열 그리드를 기반으로 합니다. 또한 해당 시스템을 기반으로 하는 고정 너비 레이아웃과 유동 너비 레이아웃을 포함했습니다.

Bootstrap의 일부로 제공되는 기본 그리드 시스템은 너비가 940픽셀이고 열이 12개인 그리드 입니다.

또한 전화기, 태블릿 세로, 테이블 가로 및 소형 데스크탑, 대형 와이드스크린 데스크탑 등 다양한 장치 및 해상도에 대한 4가지 반응형 변형이 있습니다.

<div 클래스 = "행" > 
  <div 클래스 = "span4" > ... </div> 
  <div 클래스 = "span8" > ... </div> 
</div>

여기에 표시된 것처럼 기본 레이아웃은 그리드 시스템의 일부로 정의한 12개의 기본 열에 걸쳐 있는 두 개의 "열"로 만들 수 있습니다.

열 오프셋

4 오프셋 4

3 오프셋 3

8 오프셋 4

<div 클래스 = "행" > 
  <div 클래스 = "span4" > ... </div> 
  <div 클래스 = "span4 offset4" > ... </div> 
</div>

중첩 열

Bootstrap의 정적(비유동) 그리드 시스템을 사용하면 중첩이 쉽습니다. 콘텐츠를 중첩하려면 기존 열 내에 새로운 열 .row집합을 추가하기만 하면 됩니다..span*.span*

예시

중첩된 행에는 부모의 열 수만큼 추가되는 열 집합이 포함되어야 합니다. 예를 들어 두 개의 중첩 .span3열은 .span6.

열의 수준 1

레벨 2

<div 클래스 = "행" > 
  <div 클래스 = "span12" > 
    열의 수준 1
    <div 클래스 = "행" > 
      <div 클래스 = "span6" > 레벨 2 </div> 
      <div 클래스 = "span6" > 레벨 2 </div> 
    </div>
  </div>
</div>

유체 컬럼

픽셀이 아닌 퍼센트

유동 격자 시스템은 고정 픽셀 대신 열 너비에 백분율을 사용합니다. 또한 고정 그리드 시스템과 동일한 응답 변형을 가지므로 주요 화면 해상도와 장치에 적절한 비율을 보장합니다.

유체 행

.row로 변경 하여 임의의 행 유체를 만들 수 .row-fluid있습니다. 열은 정확히 동일하게 유지되므로 고정 레이아웃과 유동 레이아웃 사이를 매우 간단하게 전환할 수 있습니다.

마크업

<div 클래스 = "행 유동" > 
  <div 클래스 = "span4" > ... </div> 
  <div 클래스 = "span8" > ... </div> 
</div>

유체 중첩

유동 격자를 사용한 중첩은 약간 다릅니다. 중첩 열의 수가 부모와 일치할 필요가 없습니다. 대신 각 행이 상위 열의 100%를 차지하기 때문에 열이 각 수준에서 재설정됩니다.

유체 12

유체 6

<div 클래스 = "행 유동" > 
  <div 클래스 = "span12" > 
    열의 수준 1
    <div 클래스 = "행 유동" > 
      <div 클래스 = "span6" > 레벨 2 </div> 
      <div 클래스 = "span6" > 레벨 2 </div> 
    </div>
  </div>
</div>

변하기 쉬운	기본값	설명
`@gridColumns`	12	열 수
`@gridColumnWidth`	60픽셀	각 열의 너비
`@gridGutterWidth`	20픽셀	열 사이의 음수 공간
`@siteWidth`	모든 열 및 거터의 계산된 합계	`.container-fixed()`믹스 인의 너비를 설정하기 위해 열과 여백의 수를 계산합니다.

LESS의 변수

부트스트랩에 내장된 변수는 위에 설명된 기본 940px 그리드 시스템을 사용자 정의하기 위한 몇 가지 변수입니다. 그리드의 모든 변수는 variables.less에 저장됩니다.

사용자 정의 방법

그리드를 수정한다는 것은 3개의 @grid*변수를 변경하고 부트스트랩을 다시 컴파일하는 것을 의미합니다. variables.less에서 그리드 변수를 변경하고 문서화된 네 가지 방법 중 하나를 사용하여 재컴파일 하십시오. 더 많은 열을 추가하는 경우 grid.less에 해당 열에 대한 CSS를 추가해야 합니다.

응답성 유지

그리드 사용자 정의는 기본 수준인 940px 그리드에서만 작동합니다. Bootstrap의 반응형 측면을 유지하려면 responsive.less에서 그리드를 사용자 지정해야 합니다.

고정 레이아웃

기본 940px 너비의 단순한 중앙 레이아웃은 단일 <div class="container">.

<본체>
  <div 클래스 = "컨테이너" > 
    ...
  </div>
</바디>

유체 레이아웃

<div class="container-fluid">유연한 페이지 구조, 최소 및 최대 너비, 왼쪽 사이드바를 제공합니다. 앱과 문서에 적합합니다.

<div 클래스 = "컨테이너 유체" > 
  <div 클래스 = "행 유동" > 
    <div 클래스 = "스팬2" > 
      <!--사이드바 내용-->
    </div>
    <div 클래스 = "span10" > 
      <!--본문 내용-->
    </div>
  </div>
</div>

지원 기기

부트스트랩은 단일 파일에서 소수의 미디어 쿼리를 지원하여 다양한 장치와 화면 해상도에서 프로젝트를 보다 적절하게 만들 수 있습니다. 포함된 내용은 다음과 같습니다.

상표	레이아웃 너비	열 너비	거터 폭
스마트폰	480px 이하	유동 기둥, 고정 너비 없음
세로 태블릿	480px ~ 768px	유동 기둥, 고정 너비 없음
조경 정제	768px ~ 979px	42픽셀	20픽셀
기본	980px 이상	60픽셀	20픽셀
대형 디스플레이	1210px 이상	70픽셀	30픽셀

메타 태그 필요

장치가 반응형 페이지를 제대로 표시하도록 하려면 표시 영역 메타 태그를 포함합니다.

<메타 이름 = "뷰포트" 콘텐츠 = "너비=장치 너비, 초기 크기=1.0" >

그들이 무엇을 할

미디어 쿼리는 비율, 너비, 표시 유형 등 다양한 조건을 기반으로 맞춤 CSS를 허용하지만 일반적으로 min-width및 에 초점을 맞춥니다 max-width.

그리드의 열 너비 수정
필요할 때마다 float 대신 요소를 쌓습니다.
장치에 더 적합하도록 제목 및 텍스트 크기 조정

미디어 쿼리 사용

부트스트랩은 이러한 미디어 쿼리를 자동으로 포함하지 않지만 이러한 미디어 쿼리를 이해하고 추가하는 것은 매우 쉽고 최소한의 설정만 필요합니다. Bootstrap의 반응형 기능을 포함하는 몇 가지 옵션이 있습니다.

컴파일된 반응형 버전인 bootstrap-responsive.css를 사용합니다.
@import "responsive.less"를 추가하고 부트스트랩을 다시 컴파일합니다.
Response.less를 별도의 파일로 수정 및 재컴파일

그냥 포함하지 않는 이유는 무엇입니까? 사실, 모든 것이 반응할 필요는 없습니다. 개발자에게 이 기능을 제거하도록 권장하는 대신 활성화하는 것이 가장 좋습니다.

  // 가로 폰 및 다운
  @ 미디어 ( 최대 너비 : 480px ) { ... }     
 
  // 가로 폰에서 세로 태블릿으로
  @미디어 ( 최대 너비 : 768 픽셀 ) { ... }     
 
  // 세로 태블릿을 가로 및 데스크톱으로
  @media ( 최소 너비 : 768px ) 및 ( 최대 너비 : 980px ) { ... } _ _        
 
  // 큰 데스크탑
  @ 미디어 ( 최소 너비 : 1200px ) { .. }

발판

반응형 트위스트가 있는 기본 그리드 시스템 12개 열