Main menu

Bootstrap 3 강좌 | Grid system > 레이아웃 예제

Bootstrap의 Grid system을 이용하면 HTML 요소에 적절한 클래스 값만 추가하여 레이아웃을 만들 수 있습니다.

기본 원칙은 다음과 같습니다.

  • .container 또는 .container-fluid 바로 아래에 .row를 넣는다.
  • .row 바로 아래에 .col-*-*를 넣는다.
  • .container를 사용하면서 좌우로 꽉 찬 배경을 넣으려면, .container를 감싸는 새로운 요소를 만든다.

Bootstrap 홈페이지에 다양한 예제가 있는데, 처음 볼 때는 분석이 어려울 수 있습니다. 아래에 있는 단순한 형태의 레이아웃을 이해하면 예제 분석이 훨씬 쉬워질 것입니다.

예제 1

고정폭(.container)을 이용한 간단한 형태의 레이아웃입니다. .jb-cell은 위치와 크기를 잘 나타내기 위해 추가한 것으로, 실제로는 불필요한 클래스입니다.

HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <!--[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-sm-12">
          <div class="jb-cell">
            <h1>Lorem</h1>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8">
          <div class="jb-cell">
            <h2>Ipsum</h2>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="jb-cell">
            <h2>Dolor</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="jb-cell">
            <h3>Lorem</h2>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="jb-cell">
            <h3>Ipsum</h2>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="jb-cell">
            <h3>Dolor</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="jb-cell">
            <h4>Lorem</h4>
          </div>
        </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>

CSS

body {
  text-align: center;
}
h1, h2, h3, h4 {
  margin: 30px 0px;
}
.jb-cell {
  margin: 15px 0px;
  border: 1px solid #cccccc;
}

예제 2

행 별로 좌우로 꽉 찬 배경을 넣는 예제입니다. 행 별로 .container를 사용하고, .containerdiv로 감싼 후 적당한 클래스 값을 부여해서 배경색을 정합니다.

HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <!--[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="jb-bg-1">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="jb-cell">
              <h1>Lorem</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jb-bg-2">
      <div class="container">
        <div class="row">
          <div class="col-sm-8">
            <div class="jb-cell">
              <h2>Ipsum</h2>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="jb-cell">
              <h2>Dolor</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jb-bg-3">
      <div class="container">
        <div class="row">
          <div class="col-sm-4">
            <div class="jb-cell">
              <h3>Lorem</h2>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="jb-cell">
              <h3>Ipsum</h2>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="jb-cell">
              <h3>Dolor</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jb-bg-4">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="jb-cell">
              <h4>Lorem</h4>
            </div>
          </div>
        </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>

CSS

body {
  text-align: center;
}
h1, h2, h3, h4 {
  margin: 30px 0px;
}
.jb-cell {
  margin: 15px 0px;
  border: 1px solid #cccccc;
}
.jb-bg-1 {
  background-color: #90caf9;
}
.jb-bg-2 {
  background-color: #e3f2fd;
}
.jb-bg-3 {
  background-color: #bbdefb;
}
.jb-bg-4 {
  background-color: #90caf9;
}

Created on 2015-10-15 | Updated on 2015-10-15

이 글을 공유하기

Kakao