Bootstrap 3.3.7 | 그리드 시스템 | 폭 조정을 하는 클래스
그리드 시스템 최대의 포인트는 row 내에 배치하는 내용으로 설정하는 “클래스"이다.
이 클래스는 col-종류-숫자
형태로 작성한다. “종류"는 디바이스의 종류, 이는 디바이스의 가로폭에 따라 4가지 종류가 준비되어 있다. 아래와 정리할 수 있다.
종류 | 크기 | 주로 해당되는 디바이스 |
---|---|---|
lg | 1200px 이상 | PC, 태블릿 |
md | 992 ~ 1200px | 태블릿 |
sm | 768 ~ 992px | 태블릿 |
xs | 768px 미만 | 스마트 폰 |
PC의 큰 화면이라면 lg, 스마트 폰에서 세로로 표시된다면 xs 클래스가 적용된다고 생각하면 된다. 태블릿의 경우는 해상도에 따라 lg ~ sm 중 하나가 사용되게 될 것이다.
이후에 “숫자"는 그 내용이 row에 차지하는 비중이다. row는 폭 전체를 “12"의 블록으로 나누어 관리한다. 이 마지막 숫자는 “그 콘텐츠가 블록 비줄이 얼마인지"를 보여줍니다.
예를 들어, 2개의 콘텐츠를 가로한다면, “6"과 “6"으로하면 그냥 반씩이 된다. “4"와 “8"으로 하면 1 : 2의 비율로 나타날 수 있다. “합계가 12 이상이 되면?“라고 생각한 사람이 있을 수 있다. 이런 경우는 12 이후에 컨텐츠는 다음 행으로 줄 바꿈되어 표시된다.
예로써 “768 ~ 992px 크기에서 4 : 8로 표시"되는 경우의 태그를 아래에 올려 두었다. 이는 두 개의 콘텐츠가 4 : 8 (1 : 2)로 표시된다. 또한, 보기 쉽도록 style 속성에서 배경색을 지정하고 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<h1>그리드 시스템</h1>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4"
style="border:1px solid white; background-color:#eee;">
<p>MENU</p></div>
<div class="col-sm-8"
style="border:1px solid white; background-color:#eee;">
<p>Content.</p><p>Content.</p><p>Content.</p></div>
</div>
</div>
</div>
</body>
</html>