07_반응형 웹(6) : grid

• Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다고 생각하면 쉽다.

• 이를 테이블의 형식대로 row 클래스와 각종 col-* 클래스들로 자유롭게 구성이 가능하며 반응형으로 동작한다.

• Bootstrap에서는 아래의 규칙대로 이러한 그리드 시스템을 구축하라고 권고하고 있다.

 

• Bootstrap의 그리드 시스템에서 사용하고 있는 칼럼의 클래스 종류는 기본적으로 4가지가 있으며, 각각의 종류 뒤에는 12칼럼 중 몇개의 칼럼을 사용할지 명시하여 사용하면 된다.

.col-xs-*	항상 가로로 배치
.col-sm-*	768px 이하에서 세로로 표시 시작
.col-md-*	992px 이하에서 세로로 표시 시작
.col-lg-*	1200px 이하에서 세로로 표시 시작

---

 

 

 

    <style>
        .row>div {
            border: 1px solid red;
        }
    </style>

    <div class="row">
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
    </div>

    <div class="row">
        <div class="col-md-2">md-2</div>
        <div class="col-md-2">md-2</div>
        <div class="col-md-2">md-2</div>
        <div class="col-md-2">md-2</div>
        <div class="col-md-2">md-2</div>
        <div class="col-md-2">md-2</div>
    </div>

    <div class="row">
        <div class="col-md-3">md-3</div>
        <div class="col-md-3">md-3</div>
        <div class="col-md-3">md-3</div>
        <div class="col-md-3">md-3</div>
    </div>

    <div class="row">
        <div class="col-md-4">md-4</div>
        <div class="col-md-4">md-4</div>
        <div class="col-md-4">md-4</div>
    </div>

    <div class="row">
        <div class="col-md-4">md-4</div>
        <div class="col-md-8">md-8</div>
    </div>

    <div class="row">
        <div class="col-md-6">md-6</div>
        <div class="col-md-4">md-4</div>
        <div class="col-md-1">md-1</div>
        <div class="col-md-1">md-1</div>
    </div>
    <br><br><br>

    <div class="row">
        <div class="col-sm-4">sm-4</div>
        <div class="col-sm-8">sm-8</div>
    </div>

    <div class="row">
        <div class="col-md-4">md-4</div>
        <div class="col-md-8">md-8</div>
    </div>

    <div class="row">
        <div class="col-lg-4">lg-4</div>
        <div class="col-lg-8">lg-8</div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-6">lg-4 md-6</div>
        <div class="col-lg-8 col-md-6">lg-8 md-6</div>
    </div>

---