twitter-bootstrap
그리드 시스템

소개

비고

미디어 쿼리

부트 스트랩의 미디어 쿼리를 사용하면 뷰포트 크기에 따라 내용을 이동, 표시 및 숨길 수 있습니다. 다음 미디어 쿼리는 LESS 파일에서 부트 스트랩 그리드 시스템에 키 중단 점을 생성하는 데 사용됩니다.

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

경우에 따라 CSS를 더 좁은 장치 세트로 제한하기 위해 최대 너비가 포함되도록 확장됩니다.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

부트 스트랩 그리드 계층 (중단 점)

부트 스트랩에는 열 단위 개념 외에도 계층으로 알려진 여러 가지 중단 점 이나 격자 크기가 있습니다. 부트 스트랩 3 그리드는 서로 다른 화면 (또는 뷰포트) 너비를 수용 할 수 있도록 네 개의 티어가 있습니다. Bootstrap 3 단계는 xs , sm , md 및 lg 입니다. 부트 스트랩의 그리드 열은 다른 col-{breakpoint}-{units} CSS 클래스로 식별됩니다.

각 그리드 계층 에는 데스크톱, 랩톱, 태블릿 및 스마트 폰과 같은 일반적인 장치 화면 너비에 가장 잘 맞도록 설계된 범위 가 포함 됩니다.

부트 스트랩은 CSS 미디어 쿼리를 사용하여 각 그리드 크기에 대한 경계를 설정하는 응답 중단 점을 만듭니다. 이러한 그리드 크기를 사용하면 다양한 화면 너비 및 장치와 가장 잘 일치하도록 열 레이아웃을 변경할 수 있습니다.

• col-xs-* - 스마트 폰과 같이 화면 너비가 가장 작은 경우 <768 픽셀
• col-sm-* - 스마트 폰 및 태블릿과 같은 작은 화면 너비의 경우> = 768 픽셀
• col-md-* - 태블릿 및 노트북과 같은 중간 화면 너비의 경우> = 992 픽셀
• col-lg-* - 데스크톱과 같은 큰 화면 너비의 경우> = 1200 픽셀

참조 : 그리드 시스템

각 장치에 대해 동일한 열 너비

모든 장치에서 항상 뷰포트 너비의 50 % 인 열을 만들려면 모든 계층에 대해 col-*-6 을 설정할 수 있습니다.

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

때문에,이 불필요한 여분의 마크 업이며, col-xs-6 6 개 단위에 의미 xs 최대를. 설정 한 가장 작은 계층 (xs, sm 또는 md)은 화면 폭이 더 큰 경우에도 크기를 정의합니다. 모든 계층의 동일한 크기 열에 대해서는 가장 작은 뷰포트의 너비 만 설정하면됩니다.

짧은 코드 :

<div class="col-xs-6">..</div>

각 장치의 다른 열 너비 (반응 형 디자인)

col-*-* 클래스를 결합 하여 서로 다른 격자 크기의 열 너비를 제어 할 수 있습니다.

예를 들어 sm 계층에서 50 % 너비 열을 만들고 md 계층에서 25 % 너비 열을 만듭니다.

<div class="col-md-3 col-sm-6">..</div>

sm , md 및 lg 그리드는 768 픽셀보다 작은 뷰포트 너비에서 수직으로 "스택"합니다. xs 그리드가 들어갈 곳입니다. col-xs- * 클래스를 사용하는 열은 수직으로 스택되지 않고 가장 작은 화면에서 계속 축소됩니다.

부트 스트랩 행 및 열

부트 스트랩의 그리드 시스템에는 뷰포트에서 가로로 내용을 배치하는 데 사용할 수있는 12 개의 단위 열 이 있습니다.

12 단위 격자 (10, 16 대신 ... 대신)의 이유는 12가 6 (반), 4 (1/4) 및 3 (3/5)으로 균등하게 나뉘기 때문입니다. 따라서 다양한 레이아웃을 훨씬 쉽게 적용 할 수 있습니다. 부트 스트랩의 그리드 열은 다른 col-{breakpoint}-{units} CSS 클래스로 식별됩니다. 뷰포트 너비 및 중단 점 (AKA Tier)에 대해 자세히 알아보십시오.

예를 들어, col-md-3 은 중간 ( md ) 너비 뷰포트에서 12 단위 (또는 25 %) 중 3 단위를 차지하는 열을 나타냅니다. 레이아웃에서 열 너비를 사용하려면 HTML 마크 업에서 적절한 col-{breakpoint}-{units} 클래스를 사용하기 만하면됩니다.

<div class="col-{breakpoint}-{units}">

열 너비는 유동적 (고정 너비가 아님)이므로 열은 해당 컨테이너의 비율 을 소비합니다.

부트 스트랩 3의 열 단위

• col-*-1 : 1 of 12 (폭 8.33333333 %)
• col-*-2 : 12 of 2 (너비 16.66666667 %)
• col-*-3 : 12 of 12 (너비 25 %)
• col-*-4 : 12 of 12 (33.3333333 % 너비)
• col-*-5 : 12 of 5 (너비 41.66666667 %)
• col-*-6 : 6 of 12 (너비 50 %)
• col-*-7 : 12 of 12 (58.33333333 너비의 너비)
• col-*-8 : 12 of 12 (66,66666667 % 너비)
• col-*-9 : 9 of 12 (너비 75 %)
• col-*-10 : 10 of 10 (83.33333333 % 너비)
• col-*-11 : 11 of 11 (너비 91.66666667 %)
• col-*-12 : col-*-12 (너비 100 %)

데모 - 부트 스트랩의 12 열 단위

부트 스트랩 행

부트 스트랩 .row 클래스는 열을 포함하는 데 사용됩니다. 열은 항상 행에 배치해야하며 행은 항상 컨테이너 ( container 또는 container-fluid ) 안에 배치해야합니다. 행은 열의 내용과 브라우저 가장자리 사이의 적절한 간격을 확보하기 위해 음수 여백 (-15 픽셀)을 사용합니다. 행은 열을 가로로 그룹화하는 데 사용됩니다.

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

열은 왼쪽에서 오른쪽으로 .row 를 채우고 12 열 단위마다 줄 바꿈 됩니다. 따라서 .row 를 사용하여 가로 나누기 를 만들거나 단일 .row 요소에 12 개 이상의 열 단위를 추가하여 뷰포트를 수직 방향으로 줄 바꿈 (또는 스택) 하는 열 을 만들 수 있습니다.

열 감싸기 ( .row 에서 12 단위 이상)를 사용하는 경우 고르지 않은 열 내용을 포장하기 위해 반응 형 재설정 (또는 clearfixes) 을 사용해야 합니다. 이것은 기둥의 내용물의 높이가 다를 때 필수적입니다.

부트 스트랩 그리드 열 및 행에 대한 추가 정보

부트 스트랩 3 유체 그리드 레이아웃 문제?

부트 스트랩 3 - 중첩 된 행을 열을 최대 12 개까지 더할 수 있습니까?

부트 스트랩 행 및 열 설명

부트 스트랩 그리드 작동 방식 (보통)

컨테이너

부트 스트랩은 사이트 내용을 감싸고 그리드 시스템을 수용하기 위해 포함 요소가 필요합니다. 프로젝트에서 사용할 두 개의 컨테이너 중 하나를 선택할 수 있습니다.

반응적인 고정 폭 컨테이너에는 .container 클래스를 사용하십시오.

<div class="container">
  ...
</div>

뷰포트의 전체 너비에 걸쳐 전체 너비 컨테이너에 .container-fluid 클래스를 사용합니다.

<div class="container-fluid">
  ...
</div>

참고 : padding 등으로 인해 컨테이너를 중첩 할 수 없습니다 (컨테이너를 다른 컨테이너에 넣을 수 없음).

오프셋 열

이러한 클래스는 열의 왼쪽 여백을 * 열만큼 늘립니다. 예를 들어, .col-md-offset-4는 4 열 위로 .col-md-4를 이동합니다.

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

푸시 앤 풀을 이용한 열 순서 조작

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

이렇게하면 기본 제공 그리드 열의 순서가 변경됩니다.

구문 : .col-md-push- * 및 .col-md-pull- *.

더:
트위터 부트 스트랩 3에서 col-lg-push와 col-lg-pull을 이용한 열 순서 조작
부트 스트랩 3 : 작은 화면 크기에서만 열을 밀거나 당깁니다.
부트 스트랩 3의 열 순서 및 스택