구조

부트스트랩은 반응형 12 컬럼 그리드, 레이아웃 그리고 구성요소를 기반으로 만들어졌습니다.

HTML5 닥타입이 필요합니다

부트스트랩은 HTML5 닥타입을 필요로 하는 HTML 요소와 CSS 속성을 이용합니다. 모든 프로젝트의 시작에 이것을 포함시키세요.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

글자와 링크

부트스트랩은 기본적인 전체 디스플레이, 글자, 그리고 스타일을 설정합니다. 특히:

  • body에서 margin을 제거합니다
  • bodybackground-color: white;를 설정합니다
  • 기본 글자 속성으로 @baseFontFamily, @baseFontSize, @baseLineHeight를 사용합니다
  • 전체 링크 색상을 @linkColor를 통해 설정하고 링크 언더라인은 :hover 만을 적용합니다

이 스타일은 scaffolding.less에서 찾을 수 있습니다.

Normalize를 통한 리셋

부트스트랩 2에서 이전의 리셋 코드를 버리고 Normalize.css를 채용했습니다. 이것은 Nicolas Gallagher의 프로젝트로, HTML5 Boilerplate에서도 사용되고 있습니다. reset.less에 대부분의 Normalize를 사용하지만 부트스트랩만을 위해서 몇 개의 요소는 제거했습니다.

실제 그리드 예제

기본 부트스트랩 그리드 시스템은 12 컬럼을 이용해서, 반응형 기능을 활성화 하지 않으면 940px 폭의 컨테이너를 만듭니다. 반응형 CSS 파일을 추가하면 그리드는 화면 크기에 따라서 724px과 1170px 폭에 맟춥니다. 767px 이하의 화면에서는 컬럼은 유동적으로 되고 세로로 나열됩니다.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

기본 그리드 HTML

단순한 2 컬럼 레이아웃의 경우, .row를 만들고 .span* 컬럼에 적절한 숫자를 추가하세요. 12 컬럼 그리드이므로, 각 .span*은 해당 12 컬럼의 숫자만큼의 폭을 가지며, 각 row에 대해서 항상 12까지 추가돼야합니다(또는 부모의 컬럼 수만큼).

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

위의 예에서, .span4.span8로 총 12 컬럼인 row가 완성됩니다.

오프셋 컬럼

.offset*클래스를 사용해서 컬럼을 오른쪽으로 이동합니다. 각 클래스의 숫자는 컬럼의 좌측 마진을 전체적으로 증가시킵니다. 예를들면, .offset4.span4을 4 컬럼만큼 이동시킵니다.

4
3 offset 2
3 offset 1
3 offset 2
6 offset 3
<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

네스팅 컬럼(Nesting columns)

기본 그리드에 컨텐트를 포함(nest)시키려면, 기존의 .span* 컬럼 안에 새로운 .row.span* 세트를 추가합니다. 포함된 row는 부모의 컬럼 수 만큼 컬럼 세트를 포함해야합니다.

Level 1 of column
Level 2
Level 2
<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

실제 유동 그리드 시스템

유동 그리드 시스템은 컬럼의 폭으로 픽셀이 아닌 퍼센트를 사용합니다. 고정 그리드 시스템과 같은 반응형 기능이 있으며, 주요 화면 해상도와 기기에 대해 적절한 화면 비율을 보장합니다.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

기본 유동 그리드 HTML

모든 row를 .row에서 .row-fluid로 변경하면 유동 그리드로 만듭니다. 컬럼 클래스는 이전과 같으며 고정그리드에서 유동 그리드로 쉽게 전환됩니다.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

유동 오프셋

고정 그리드 시스템의 오프셋과 마찬가지 방법으로 작동합니다: .offset*를 컬럼에 추가하면 해당 숫자만큼 오프셋 됩니다.

4
4 offset 4
3 offset 3
3 offset 3
6 offset 6
<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span4 offset2">...</div>
</div>

유동 네스팅

유동 그리드의 네스팅은 약간 다릅니다. 네스트 되는 컬럼의 수는 부모의 컬럼 수와 일치하면 안됩니다. 대신에 각 네스트 컬럼의 row는 각 row가 부모 컬럼의 100%를 차지하기 때문에 리셋됩니다.

Fluid 12
Fluid 6
Fluid 6
<div class="row-fluid">
  <div class="span12">
    Level 1 of column
    <div class="row-fluid">
      <div class="span6">Level 2</div>
      <div class="span6">Level 2</div>
    </div>
  </div>
</div>

고정 레이아웃

<div class="container">만 있으면 고정 폭(반응형 포함) 레이아웃이 가능합니다.

<body>
  <div class="container">
    ...
  </div>
</body>

유동 레이아웃

Create a fluid, two-column page with <div class="container-fluid">로 유동형 2 컬럼 페이지를 만들 수 있습니다 — 애플리케이션과 문서에 좋습니다.

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

반응형 기능 활성화

<head> 안에 적절한 메타 태그와 추가 스타일시트를 포함하면 당신의 프로젝트에 반응형 CSS를 시작할 수 있습니다. 부트스트랩을 사용자 정의 페이지에서 컴파일했다면 메타 태그만 필요합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

중요! 부트스트랩은 모든 디자인이 반응형이어야 할 필요가 없기 때문에 기본적으로 반응형 기능이 포함되지 않습니다. 개발자들이 이 기능을 제거하도록 하는 대신에 필요할 때 활성화 하는 것이 최선이라고 생각합니다.

반응형 부트스트랩에 관해서

Responsive devices

미디어 쿼리는 여러 상황—비율, 폭, 디스플레이 형태, 등—에 기초한 사용자 정의 CSS를 가능하게 합니다. 하지만 보통의 경우 min-widthmax-width에 중점을 둡니다.

  • 그리드에서 컬럼의 폭을 수정합니다.
  • 필요한 곳에 float하는 대신에 요소를 세로로 정렬합니다.
  • 기기에 더 적합하도록 제목과 글자를 리사이즈합니다.

미디어쿼리를 남용하지 않도록 하고 모바일 방문자에 대해 시작으로만 사용하세요. 보다 큰 프로젝트에서는 여러 레이어의 미디어쿼리가 아닌 특정한 코드 베이스를 고려해 보세요.

지원하는 기기

부트스트랩은 당신의 프로젝트가 다양한 기기와 화면 해상도에 더욱 적절하게 대응할 수 있도록 하나의 파일에 여러개의 미디어쿼리를 지원합니다. 지원하는 것은 다음과 같습니다:

Label 레이아웃 폭 컬럼 폭 거터(컬럼 사이 공간) 폭
큰 화면 1200px 이상 70px 30px
기본 980px 이상 60px 20px
세로형 태블릿 PC 768px 이상 42px 20px
스마트폰, 태블릿 PC 767px 이하 유동 컬럼, 고정폭 아님
스마트폰 480px 이하 유동 컬럼, 고정폭 아님
/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop

Hidden on...

Here, green checkmarks indicate that class is hidden in your current viewport.

  • Phone✔ Phone
  • Tablet✔ Tablet
  • Desktop✔ Desktop