• Q&A
  • 회원가입
  • 로그인

[grid] BS3 - Grid Examples (그리드 예제) ★★★★★

BS3 Grid 

  Extra Small Small Medium Large
Class 접두어 .col-xs .col-sm .col-md .col-lg
화면 너비 <768 >=768 >=992px >=1200px

※ .container (또는, .container-fluid)  >  .row  >  .col~ 구조가 되도록 요소 배치.

※ .row (행) 안의 .column (열) 개수 합이 12가 되도록 배치.

※ 분기점 미만 : 수직정렬.

※ 분기점 이상 : 수평정렬.

 

Three Equal Columns (3등분 동일 너비)

 

<div class="row">

  <div class="col-sm-4">...</div>

  <div class="col-sm-4">...</div>

  <div class="col-sm-4">...</div>

</div>

 

 

Three Unequal Columns (3등분 다른 너비)

 

<div class="row">

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

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

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

</div>

 

 

Two Unequal Columns (2등분 다른 너비)

 

<div class="row">

  <div class="col-sm-4">...</div>

  <div class="col-sm-8">...</div>

</div>

 

 

No gutters (Gutter 제거)

 

<div class="row row-no-gutters">

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

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

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

</div>

 

예제보기

PS. GUTTER : 컬럼 사이 간격. 

 

Nested Columns (중첩구조)

 

<div class="row">

    <div class="col-sm-8">...

        <div class="row">

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

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

        </div>

    </div>

    <div class="col-sm-4">...</div>

</div>

 

예제보기 

 

 

Mix and Match (여러 분기점) - xs・md

 

<div class="row">

  <div class="col-xs-9 col-md-7">...</div>

  <div class="col-xs-3 col-md-5">...</div>

</div>


<div class="row">

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

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

</div>


<div class="row">

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

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

</div>

 

예제보기 


Mix and Match (여러분기점) - xs・sm・lg

 

<div class="row">

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

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

</div>


<div class="row">

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

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

</div>

 

예제보기 


BS Grid 예제 - clearfix (줄바꿈) ★★

 

<div class="row">

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

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

  <!-- 필요한 viewport에 대해서만 clearfix 추가 -->

  <div class="clearfix visible-xs"></div>

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

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

</div>

 

예제보기 

 

Offsetting Columns (열 맞춤) ★★

 

<div class="row">

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

    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">...</div>

</div>

 

예제보기 

※ .col-sm-offset-* 클래스 사용해 열 왼쪽 여백을 * 열만큼 증가시켜, 해당 열만큼 우측으로 이동시킴.


Push And Pull - Change Column Ordering (Column 순서 변경)★★★

 

<div class="row">

  <div class="col-sm-4 col-sm-push-8">...</div>
  <div class="col-sm-8 col-sm-pull-4">...</div>
</div>

 

예제보기 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012