<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert title here</title>
<!-- Bootstrap 링크 -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!-- 부트스트랩 영역을 확실히 보여주기위해 따로 스타일을 적용시켜줌 -->
<style type="text/css">
.col-md-1, .col-md-4, .col-md-5, .col-md-6, .col-md-8 {
border: 1px solid red;
padding: 20px;
text-align: center;
}
.row {
margin-bottom: 4px;
margin-top: 4px;
}
</style>
</head>
<body>
<div class="container">
<!-- 1:1:1:1:1:1:1:1:1:1:1:1비율 -->
<div class="row"><!-- 행을 나타내는 클래스 -->
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<!-- 8:4비율 -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<!-- 4:4:4비율 -->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<!-- 6:6비율 -->
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>
</html>