- 다른 뜻에 대해서는 부트스트랩4 그리드 체계 문서를 참조하십시오.
1 개요[ | ]
- Bootstrap Grid System
- 부트스트랩 그리드 시스템
- 한행을 12개 컬럼 기준으로 크기를 지정
- "row" 클래스 div(행) 내부에 "col-종류-크기" div(컬럼) 사용
- col 종류는 4가지
종류 | 너비 | 비고 |
---|---|---|
xs | 768px 미만 | 스마트폰 |
sm | 768px 이상 | 태블릿 |
md | 992px 이상 | 데스크톱 |
lg | 1200px 이상 | 큰 데스크탑 |
2 예시[ | ]
html
Copy
<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 같이 보기[ | ]
- 부트스트랩 그리드 col 테두리선
- 부트스트랩 그리드 480px 분기
- Bootstrap 튜토리얼
- 부트스트랩 2단 분할
- 부트스트랩 3단 분할
- 부트스트랩 nav
- 부트스트랩 jumbotron
- 부트스트랩 .container
- 부트스트랩4 그리드 체계
- CSS flex 속성
- HTML table 태그
4 참고[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.