부트스트랩3 그리드 체계

Jmnote (토론 | 기여)님의 2019년 3월 3일 (일) 16:40 판 (Jmnote님이 부트스트랩3 그리드 row, col 문서를 부트스트랩3 그리드 체계 문서로 이동했습니다)
  다른 뜻에 대해서는 부트스트랩4 그리드 체계 문서를 참조하십시오.

1 개요

Bootstrap Grid System
부트스트랩 그리드 시스템
  • 한행을 12개 컬럼 기준으로 크기를 지정
"row" 클래스 div(행) 내부에 "col-종류-크기" div(컬럼) 사용
  • col 종류는 4가지
종류 너비 비고
xs 768px 미만 스마트폰
sm 768px 이상 태블릿
md 992px 이상 데스크톱
lg 1200px 이상 큰 데스크탑

2 예시

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>

<style>
.row>div { text-align: center; border: 1px solid gray; }
.row>div:nth-child(odd) { background: orange; }
.row>div:nth-child(even) { background: yellow; }
</style>

<div class='row'>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
  <div class='col-sm-1'>너비1</div>
</div>

<div class='row'>
  <div class='col-sm-2'>너비2</div>
  <div class='col-sm-2'>너비2</div>
  <div class='col-sm-2'>너비2</div>
  <div class='col-sm-2'>너비2</div>
  <div class='col-sm-2'>너비2</div>
  <div class='col-sm-2'>너비2</div>
</div>

<div class='row'>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-4'>너비4</div>
  <div class='col-sm-4'>너비4</div>
</div>

<div class='row'>
  <div class='col-sm-6'>너비6</div>
  <div class='col-sm-6'>너비6</div>
</div>

<div class='row'>
  <div class='col-sm-12'>너비12</div>
</div>

3 같이 보기

4 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}