http://getbootstrap.com/examples/grid/
.row
.container 또는 .container-fluid 안에 .row로 행을 만듭니다..col-*-*
.row 안에 .col-*-*로 열을 만듭니다. 첫번째 *에는 xs, sm, md, lg 중의 하나가, 두번째 *에는 1부터 12까지의 수 중의 하나가 들어갑니다.- xs : 항상 적용됩니다.
- sm : 가로 해상도 768px 이상에서 적용됩니다.
- md : 가로 해상도 992px 이상에서 적용됩니다.
- lg : 가로 해상도 1200px 이상에서 적용됩니다.
- 1 - 12 : 행을 12등분하여 그 중 몇 개를 사용할 지 정합니다.
.col-xs-*
예를 들어.col-xs-6은 항상 행의 6/12을 가로 크기로 한다는 뜻이고, .col-xs-3은 항상 행의 3/12을 가로 크기로 한다는 뜻입니다.행을 12등분했으므로, 숫자의 합이 12면
.container(.container-fluid)를 꽉 채웁니다. 숫자의 합이 12보다 작으면 오른쪽에 공간이 남으며, 12보다 크면 다음 줄로 넘어갑니다.예제 1
<!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 | Grid System</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.container { background-color: #eeeeee; }
.row { margin-top: 20px; margin-bottom: 20px; }
div[ class|="col" ] { border: 1px solid #cccccc; }
p { margin: 20px 0px; }
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>.col-xs-6</p>
</div>
<div class="col-xs-4">
<p>.col-xs-4</p>
</div>
<div class="col-xs-2">
<p>.col-xs-2</p>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<p>.col-xs-5</p>
</div>
<div class="col-xs-5">
<p>.col-xs-5</p>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<p>.col-xs-5</p>
</div>
<div class="col-xs-5">
<p>.col-xs-5</p>
</div>
<div class="col-xs-4">
<p>.col-xs-4</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
첫번째 행에서 숫자의 합은 6+4+2=12이므로, 행을 꽉 채웁니다.
두번째 행에서 숫자의 합은 5+5=10이므로 오른쪽에 남는 부분이 생깁니다.
세번째 행에서 숫자의 합은 5+5+4=14이므로, 12를 넘게 만드는 마지막 열이 다음 줄로 넘어갑니다.
.col-sm-*
.col-sm-*은 가로 해상도 768px 이상에서 적용됩니다.예를 들어
.col-sm-6은 가로 해상도 768px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다. 만약 가로 해상도가 768px 미만이라면 행 전체를 가로 크기로 합니다.예제 2
<!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 | Grid System</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.container { background-color: #eeeeee; }
.row { margin-top: 20px; margin-bottom: 20px; }
div[ class|="col" ] { border: 1px solid #cccccc; }
p { margin: 20px 0px; }
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8">
<p>.col-xs-8</p>
</div>
<div class="col-xs-4">
<p>.col-xs-4</p>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<p>.col-sm-8</p>
</div>
<div class="col-sm-4">
<p>.col-sm-4</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
.col-xs-*로 열을 만들었으므로, 가로 해상도에 상관없이 행을 8:4로 나눕니다.하지만, 두번째 행은
.col-sm-*로 열을 만들었으므로, 가로 해상도 768px 이상에서는 행을 8:4로 나누지만, 768px 미만에서는 각각 한 줄을 다 차지합니다..col-md-*, .col-lg-*
.col-md-*은 가로 해상도 992px 이상에서 적용됩니다.예를 들어
.col-md-6은 가로 해상도 992px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다. 만약 가로 해상도가 992px 미만이라면 행 전체를 가로 크기로 합니다..col-lg-*은 가로 해상도 1200px 이상에서 적용됩니다.예를 들어
.col-lg-6은 가로 해상도 1200px 이상에서 행의 6/12을 가로 크기로 하겠다는 뜻입니다. 만약 가로 해상도가 1200px 미만이라면 행 전체를 가로 크기로 합니다.예제 3
<!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 | Grid System</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.container {
background-color: #eeeeee;
}
.row {
margin-top: 20px; margin-bottom: 20px;
}
div[ class|="col" ] {
border: 1px solid #cccccc;
}
p {
margin: 20px 0px;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8">
<p>.col-xs-8</p>
</div>
<div class="col-xs-4">
<p>.col-xs-4</p>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<p>.col-sm-8</p>
</div>
<div class="col-sm-4">
<p>.col-sm-4</p>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p>.col-md-8</p>
</div>
<div class="col-md-4">
<p>.col-md-4</p>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<p>.col-lg-8</p>
</div>
<div class="col-lg-4">
<p>.col-lg-4</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
댓글