개요

웹개발을 더 좋고, 빠르고, 강력하게 접근하는 방법을 가진 부트스트랩의 기반시설의 핵심적인 부분을 알아보세요.

HTML5 doctype

부트스트랩은 HTML5 doctype 의 사용을 필요로 하는 HTML 요소와 CSS 속성을 이용합니다. 당신의 프로젝트들을 시작할 때 그것들 포함하세요.

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

모바일 우선

부트스트랩2 에서 우리는 모바일 친화적인 스타일을 프레임워크의 중요한 부분으로 추가했었습니다. 부트스트랩3 에서는 시작부터 모바일 친화적으로 다시 만들었습니다. 모바일은 부가적인 부분이 아닌 핵심적인 부분으로 만들어졌습니다. 말하자면, 부트스트랩은 모바일 우선입니다. 모바일 우선 스타일은 전 독립된 파일들이 아닌 전 영역을 걸쳐 확인할 수 있습니다.

적절한 렌더링과 확대/축소를 위해, 당신의 <head>viewport 메타태그를 추가하세요.

<meta name="viewport" content="width=device-width, initial-scale=1">

당신은 viewport 메타태그에 user-scalable=no 를 추가하여 모바일 기기에서 확대/축소 기능을 끌 수 있습니다. 확대/축소를 끈다는 것은, 사용자들이 오직 스크롤만 할 수 있음을 의미합니다. 그리고 당신의 사이트가 좀더 네이티브 어플같이 느껴지도록 합니다. 종합적으로 봤을때 우리는 모든 사이트에 이것을 추천하지 않습니다. 그러므로 조심히 사용하세요!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

부트스트랩은 기본적인 전역적인 표시, 타이포그래피, 링크 스타일이 설정되어 있습니다. 구체적으로, 우리는::

  • body 에서 background-color: #fff; 를 설정합니다.
  • 기본 타이포그래피로 속성 @font-family-base, @font-size-base, @line-height-base 를 사용합니다.
  • 전역 링크의 색은 @link-color 에 설정하고 밑줄효과는 :hover 에만 적용되어 있습니다.

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

CSS 초기화

향상된 크로스 브라우징을 위해, 우리는 Nicolas GallagherJonathan Neal 의 프로젝트인 Normalize.css 를 사용합니다.

콘테이너

부트스트랩은 사이트 콘텐츠를 감싸고 그리드 시스템을 만들 콘테이너 요소가 필요합니다. 당신은 당신의 프로젝트에 2가지 콘테이너 중 하나를 선택할 수 있습니다. 주목할 점은, padding 등의 문제로 어느 것도 중첩할 수는 없다는 것이다.

반응형 고정폭 콘테이너를 위해 .container 를 사용하세요.

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

당신의 뷰포트 전체폭까지 늘어나는 최대폭 콘테이너를 위해 .container-fluid 을 사용하세요.

<div class="container-fluid">
  ...
</div>

그리드 시스템

부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다. 그것은 쉬운 레이아웃을 위해 미리 정해진 클래스들 뿐만 아니라 강력한 더 시멘틱한 레이아웃을 생성하기 위한 믹스인 을 포함하고 있습니다.

소개

그리드 시스템은 당신의 콘텐츠를 보관할 행과 열 시리즈를 통해 페이지 레이아웃들 만드는데 사용되어집니다. 부트스트랩의 그리드 시스템이 어떻게 작동하는지 여기에 있습니다:

  • 행은 반드시 적절한 정렬과 패딩을 위해서 .container (fixed-width) 나 .container-fluid (full-width) 안에 위치해야 합니다.
  • 열들의 수평그룹을 만드는데 행을 이용하세요.
  • 콘텐츠는 열안에 위치해야 합니다. 그리고 열들만이 행의 바로 아래에 올 수 있습니다.
  • .row.col-xs-4 같은 사전정의된 그리드 클래스들은 간편하게 그리드 레이아웃 만드는 것을 가능하게 합니다. Less 믹스인은 좀 더 시멘틱한 레이아웃을 위해 사용되어질 수 있습니다.
  • 열은 padding 으로 사이 간격을 만듭니다. 패딩은 행 내에서 첫열과 마지막열을 위해 .row 내에 음수 마진으로 offset 되어 있습니다.
  • 음수 마진은 아래의 예제들이 내어쓰기가 되어 있는 이유입니다. 그것은 그리드 열 내의 콘텐츠는 비그리드 콘텐츠와 정렬되기 위함입니다.
  • 그리드 열은 12개의 가능한 열들을 원하는 만큼 명시하는 것으로 만들어집니다. 예를 들면, 같은 크기의 3개 열은 .col-xs-4 를 3개 사용할 수 있습니다.
  • 만약 한 행에 12열보다 더 많이 배치된다면, 남은 열들은, 하나의 유닛으로, 새로운 라인에 감싸집니다.
  • 그리드 클래스는 분기점 크기보다 크거나 같은 너비의 화면을 가진 기기에 적용됩니다. 그리고 보다 작은 기기의 그리드 클래스가 오버라이드 됩니다. 그리하여, 예를 들어 요소에 .col-md-* 클래스를 적용하는 것은 중간 기기에 스타일이 효과가 있는 것뿐만 아니라 .col-lg-* 클래스가 없다면 큰 기기에도 효과가 있게 됩니다.

당신의 코드에 이 원칙들이 적용되는 것을 위해 예제를 보세요.

미디어 쿼리

우리는 우리의 그리드 시스템에서 주요 분기점을 만들기 위해 다음의 미디어 쿼리들을 사용합니다.

/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */
/* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */

/* 작은 기기들 (태블릿, 768px 이상) */
@media (min-width: @screen-sm-min) { ... }

/* 중간 기기들 (데스크탑, 992px 이상) */
@media (min-width: @screen-md-min) { ... }

/* 큰 기기들 (큰 데스크탑, 1200px 이상) */
@media (min-width: @screen-lg-min) { ... }

우리는 가끔 기기들에 CSS 를 좁게 적용하기 위해 미디어쿼리에 max-width 를 포함하여 부연합니다.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

그리드 옵션

다양한 기기들을 넘나드는 부트스트랩 그리드 시스템을 간단한 테이블로 살펴보세요.

매우 작은 기기 모바일폰 (<768px) 작은 기기 태블릿 (≥768px) 중간 기기 데스크탑 (≥992px) 큰 기기 데스크탑 (≥1200px)
그리드 적용 항상 분기점보다 크면 적용
콘테이너 너비 없음 (auto) 750px 970px 1170px
클래스 접두사 .col-xs- .col-sm- .col-md- .col-lg-
컬럼 수 12
컬럼 너비 Auto ~62px ~81px ~97px
사이 너비 30px (컬럼의 양쪽에 15px 씩)
중첩
오프셋
컬럼 순서정하기

예제: 쌓이다가 수평으로

그리드 클래스인 .col-md-* 싱글 세트를 사용하여, 당신은 데스크탑(중간) 기기에서 수평으로 되기전까지, 모바일 기기와 태블릿 기기(매우 작음에서 작음까지)에서 쌓이기 시작하는 기본 그리드 시스템을 만들 수 있다. .row 안에 그리드 컬럼을 놓으세요.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<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>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<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>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

예제: 유동 콘테이너

가장 바깥쪽의 .container.container-fluid 으로 바꿈으로서, 고정폭 그리드 레이아웃을 최대폭 레이아웃으로 전환하세요.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

예제: 모바일과 데스크탑

보다 작은 기기들에서 당신의 컬럼들이 간단하게 쌓이는 것을 원하세요? 당신의 컬럼에 .col-xs-* .col-md-* 를 추가하여 매우 작은 기기와 중간 기기 그리드 클래스들을 사용하세요. 그것이 어떻게 작동되는지 아래의 예제를 보세요.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- 모바일에서 컬럼들이 하나는 꽉찬너비로, 다른 하나는 절반너비로 쌓이게 합니다 -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일과 데스크탑에서 항상 50% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

예제: 모바일, 태블릿, 데스크탑

이전 예제를 태블릿 .col-sm-* 클래스들과 함께 좀더 역동적이고 힘찬 레이아웃들로 만들어보자.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

예제: 열 감싸기

만약 한행에 12열보다 많이 배치된다면, 남은 열은, 하나의 유닛처럼 새로운 라인에 감싸지게 됩니다.

.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

반응형 컬럼 초기화

사용가능한 4등급의 그리드들과 특정 분기점에서, 컬럼들이 하나가 다른 컬럼보다 긴 경우 명확하게 클리어 되지 않을 수 있다. 그걸 고치기 위해서는, .clearfix 와 우리의 responsive utility classes 의 조합을 사용하면 됩니다.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- 필요한 뷰포트에만 clearfix 를 추가하세요 -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

반응형 분기점에서 컬럼을 초기화하는 것과 더불어, 당신은 offset, push, pull 초기화가 필요할 수 있습니다. 이것에 대해서는 그리드 예제 를 보세요.

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

컬럼 오프셋하기

.col-md-offset-* 클래스를 사용하여 컬럼을 우측으로 옮기세요. 이 클래스들은 * 컬럼만큼 한 컬럼의 좌측마진을 증가하게 합니다. 예를 들어, .col-md-offset-4.col-md-4 을 4컬럼만큼 이동시킵니다.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

컬럼 중첩하기

기본그리드로 당신의 콘텐츠를 중첩하려면, 존재하는 .col-md-* 컬럼 내에 새로운 .row.col-md-* 컬럼 세트를 추가하세요. 중첩된 행은 합쳐서 12 가 되는 하나의 컬럼 세트를 포함해야 합니다.

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

컬럼 순서정하기

.col-md-push-*.col-md-pull-* 수식클래스들로 우리의 그리드 컬럼들의 순서를 쉽게 변경하세요.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

LESS 믹스인과 변수

빠른 레이아웃을 위한 미리 만들어진 그리드 클래스들 과 더불어, 부트스트랩은 당신만의 간단하고 시맨틱한 레이아웃을 빠르게 생성하기 위해 LESS 변수과 믹스인을 포함하고 있습니다.

변수

변수들은 컬럼들의 갯수, 간격의 너비, 미디어 쿼리 분기점을 결정합니다. 우리는 위처럼 미리 정의된 그리드 클래스들 뿐만 아니라 아래의 맞춤 믹스인을 위해 사용할 수 있습니다.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

믹스인

믹스인은 그리드 변수와 함께 개개의 그리드 컬럼들을 위한 시맨틱 CSS 를 생성하는데 사용됩니다.

// 일련의 컬럼을 위해 wrapper 를 생성합니다.
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // 컬럼들의 콘텐츠를 정렬하기 위해 중첩된 행들에 음수 마진을 줍니다
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// 매우 작은 기기용 컬럼을 생성합니다
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // 컬럼이 비어있을때 없어지는걸 방지합니다
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // 컬럼수를 기반으로 가능한 너비를 계산합니다
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 작은 기기용 컬럼을 생성합니다
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // 컬럼수를 기반으로 가능한 너비를 계산합니다
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 작은 기기용 컬럼 오프셋을 생성합니다
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// 중간 기기용 컬럼을 생성합니다
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 중간 기기용 컬럼 오프셋을 생성합니다
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// 큰 기기용 컬럼을 생성합니다
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// 큰 기기용 컬럼 오프셋을 생성합니다
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

사용법 예제

당신은 당신만의 맞춤값들로 변수들을 수정하거나, 그냥 기본값들로 사용할 수 있습니다. 여기 사이간격이 있는 두 컬럼 레이아웃을 만드는 기본 설정의 사용예가 있습니다.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}
<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

타이포그래피

제목

모든 HTML 제목인, <h1> 부터 <h6> 까지 사용가능합니다. 당신의 텍스트를 인라인으로 표시되면서 스타일만 제목 스타일로 맞추기 위해 .h1 부터 .h6 클래스 또한 사용 가능합니다.

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

일반적인 <small> 태그나 .small 클래스를 사용하여 제목 안에 가벼운 부제 텍스트를 만들 수 있습니다.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

본문

부트스트랩의 font-size 기본값은 14px 이고, line-height1.428 입니다. 이것은 <body> 와 모든 단락에 적용됩니다. 추가로, <p> (단락) 은 행높이의 절반의 하단 마진을 가집니다.(기본값에 의하면 10px 로 계산됩니다).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

리드 문단

.lead 을 추가하여 문장을 눈에 띄도록 만드세요.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Less 로 만들어진

문자크기는 variables.less 에서의 두 LESS 변수(@font-size-base@line-height-base) 에 기반됩니다. 첫번째 변수는 기본 폰트 크기이고 두번째 변수는 기본 행 높이입니다. 타이포그래피에서 마진, 패딩, 행 높이를 구하기 위해 두 변수와 몇 개의 간단한 수학을 사용합니다.

인라인 텍스트 요소

표시된 텍스트

또다른 맥락에서 관련있는 텍스트들을 찾아내어 강조하기 위해, <mark> 태그를 사용하세요.

당신은 강조할 텍스트에 mark 태그를 사용할 수 있습니다.

당신은 <mark>강조할</mark> 텍스트에 mark 태그를 사용할 수 있습니다.

삭제된 텍스트

텍스트 블록이 삭제 되었음을 나타내기 위해서는 <del> 태그를 사용하세요.

이 텍스트줄은 삭제된 텍스트로 다뤄짐을 의미합니다.

<del>이 텍스트줄은 삭제된 텍스트로 다뤄짐을 의미합니다.</del>

취소선 텍스트

텍스트 블록이 더 이상상 연관이 없음을 나타내기 위해서 <s> 태그를 사용하세요.

이 텍스트줄은 더 이상 정확하지 않다고 다뤄짐을 의미합니다.

<s>이 텍스트줄은 더 이상 정확하지 않다고 다뤄짐을 의미합니다.</s>

삽입된 텍스트

문서에 추가됨을 나타내기 위해서 <ins> 태그를 사용하세요.

이 텍스트줄은 문서에 추가분으로 다뤄짐을 의미합니다.

<ins>이 텍스트줄은 문서에 추가분으로 다뤄짐을 의미합니다.</ins>

밑줄친 텍스트

텍스트에 밑출을 치려면 <u> 태그를 사용하세요.

이 텍스트줄은 밑줄이 그어질것입니다

<u>이 텍스트줄은 밑줄이 그어질것입니다</u>

가벼운 스타일과 함께 HTML 의 기본 강조 태그를 사용하세요.

작은 텍스트

텍스트 인라인이나 블록을 덜 강조하기 위해, 부모 태그보다 85% 의 크기로 보여지게 하는 <small> 태그를 사용하세요. 제목 요소는 내포된 <small> 요소를 위한 그들만의 font-size 를 가지고 있습니다.

당신은 <small> 대신 인라인 요소에 .small 을 사용할 수 있습니다.

이 텍스트는 작게 보이도록 되어 있습니다.

<small>이 텍스트는 작게 보이도록 되어 있습니다.</small>

두껍게

폰트 두께를 두껍게 하여 텍스트를 강조합니다.

다음의 텍스트는 두꺼운 텍스트로 렌더링 됩니다.

<strong>두꺼운 텍스트로 렌더링 됩니다</strong>

이탤릭

이탤릭으로 텍스트를 강조합니다.

다음의 텍스트는 이탤릭체로 렌더링 됩니다.

<em>이탤릭체로 렌더링 됩니다</em>

대체 요소

HTML5 에서 <b><i> 는 마음대로 사용해도 됩니다. <b> 는 추가적인 중요성의 없이 단어나 구를 강조한다는데 의미가 있고, <i> 는 거의 음성이나 기술적 용어 등에 쓰입니다.

정렬 클래스

정렬 클래스로 콤포넌트의 텍스트를 손쉽게 재정렬하세요.

좌측정렬된 텍스트.

중앙정렬된 텍스트.

우측정렬된 텍스트.

양쪽정렬된 텍스트.

그냥 텍스트.

<p class="text-left">좌측정렬된 텍스트.</p>
<p class="text-center">중앙정렬된 텍스트.</p>
<p class="text-right">우측정렬된 텍스트.</p>
<p class="text-justify">양쪽정렬된 텍스트.</p>
<p class="text-nowrap">그냥 텍스트.</p>

변형 클래스

콤포넌트의 텍스트를 대소문자 클래스로 변형시킵니다. (한글은 해당사항이 없습니다)

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

약어

<abbr> 는 약어나 두문자어를 마우스를 올렸을 때 원래 텍스트를 보여주기 위한 요소입니다. title 속성이 있는 약어는 점으로된 밑줄을 가지고 있고 마우스를 올렸을때 물음표 커서가 보여지며, 원래 텍스트를 보여줍니다.

기본 약어

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

두문자어

미세하게 작은(90%) 폰트크기를 가지려면 .initialism 을 추가하세요.

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

주소

주소나 이메일 등의 연락처를 보여줍니다. <br> 로 개행합니다.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

인용구

당신의 문서안에 다른 출처로부터 인용한 콘텐츠 블록을 위해 사용합니다.

기본 인용구

인용구 HTML<blockquote> 로 감싸세요. 직접 인용구를 위해서, 우리는 <p> 태그를 추천합니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

인용구 옵션

기본 <blockquote> 를 기반으로 간단한 변형을 위해 스타일과 내용을 바꿉니다.

출처 표기

출처를 알수 있게 <footer> 태그를 추가하세요. 출처 원천의 이름은 <cite> 로 감싸주세요.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

다른 표시

오른쪽 정렬된 인용구를 위해서 .blockquote-reverse 를 추가하세요.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

목록

순서없는

순서가 명확치 않은 항목들의 목록입니다.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

순서있는

순서가 명확한 항목들의 목록입니다.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

스타일 없는

항목에서 list-style 과 좌측 마진을 제거하세요. (직접 자식만 ) 이것은 오직 바로 아래 항목들에게만 적용됩니다. 그래서 당신은 중첩된 목록에도 따로 클래스를 추가하여야 합니다.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

인라인

display: inline-block; 로 항목들을 한줄에 보여주고 약간의 패딩을 줍니다.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

설명

연관된 설명들의 목록입니다.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

수평 설명

<dl> 내 용어들과 설명들을 나란히 놓습니다. 기본 <dl> 처럼 쌓이는 것부터 시작이지만, 네비게이션 바가 펼쳐지는 때와 같은 타이밍에 다음과 같이 됩니다.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

자동 줄임

수평 설명 목록은 열 길이보다 너무 긴 용어를 text-overflow 로 줄일 것입니다. 좁은 너비에서는 개행되는 모양으로 바뀔 것입니다.

코드

인라인

<code> 로 짧은 코드를 감싸세요.

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

사용자 입력

키보드로 들어가는 입력을 나타내기 위해 <kbd> 를 사용하세요.

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

기본 블록

여러행의 코드를 위해 <pre> 를 사용하세요. 적절한 렌더링을 위해 어떤 꺽쇠 괄호는 부호화를 해야합니다.

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

당신은 선택적으로 .pre-scrollable 클래스를 추가할 수도 있습니다. 그건 최대 높이를 350px 로 설정하고 y축 스크롤바를 제공합니다.

변수

변수들을 나타내기 위해서 <var> 태그를 사용하세요.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

샘플 출력

프로그램으로부터의 샘플 출력을 나타내기 위해서 <samp> 태그를 사용하세요.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

테이블

기본 예제

<table> 에 약간의 패딩과 수평 구분선이 있는 기본 스타일의 .table 클래스를 추가하세요. 그건 매우 불필요해 보이지만, 캘린더와 날짜선택기 같은 플러그인들을 위해 테이블이 널리 사용되는 것을 감안하여, 우리는 맞춤 테이블 스타일들을 분리하기로 했습니다.

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

줄무늬 행

<tbody> 안에 테이블 행에 얼룩말같은 줄무늬를 추가하려면, .table-striped 를 사용하세요.

크로스브라우저 호환성

줄무늬 행 테이블은 :nth-child CSS 셀렉터로 꾸며지기 때문에, 인터넷 익스플로러 8 에서는 가능하지 않습니다.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

선있는 테이블

테이블의 모서리와 셀에 선을 그리기 위해 .table-bordered 을 추가하세요.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

행 hover

<tbody> 안의 테이블 행에 hover 상태를 확인할 수 있게끔 하려면 .table-hover 를 추가하세요.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

좁은폭 테이블

셀 패딩을 반으로 줄여 테이블을 좀 더 조밀하게 만드려면 .table-condensed 을 추가하세요.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

맥락적인 클래스들

테이블 행이나 셀에 색을 넣으려면 맥락적인 클래스들을 사용하세요.

클래스 설명
.active 특정한 행이나 셀에 hover 했을 때와 같은 색을 입힙니다.
.success 성공적이거나 긍정적인 액션을 의미합니다.
.info 중립적인 정보의 변화나 액션을 의미합니다.
.warning 주의가 필요한 경고를 의미합니다.
.danger 위험하거나 부정적일수 있는 액션을 의미합니다.
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

보조 공학으로서 의미를 전달하는 것

테이블 행이나 셀에 의미를 더하는 색을 사용하는 것은 시각적인 암시를 제공합니다만, 스크린리더 같은 보조 공학 사용자들에게는 전달하지 못할 것입니다. 색으로 정보를 나타내는 것은 그것을 콘텐츠 자체(테이블 행이나 셀에 보이는 텍스트) 나 다른 수단을 통해서 포함하는 것을 반드시 하셔야 합니다.

반응형 테이블

.table.table-responsive 으로 감싸서 작은 기기에서는 수평 스크롤을 할 수 있는 반응형 테이블을 만듭니다(768px 이하). 768px 보다 큰 기기에서는 보기에 차이가 없습니다.

수직 잘라내기/절삭

반응형 테이블은 테이블 상하단 모서리를 초과하는 어떤 콘텐츠를 잘라주는 overflow-y: hidden 을 이용합니다. 특히, 이것은 드롭다운 메뉴와 다른 서드-파티 위젯을 잘라버릴수 있습니다.

파이어폭스와 필드셋

파이어폭스는 반응형 테이블에 간섭하는 width 관련 몇가지 이상한 필드셋 스타일을 가지고 있습니다. 이것은 우리가 부트스트랩에서 제공할 수 없는 파이어폭스 전용핵 없이는 오버라이드될 수가 없습니다:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

좀 더 정보를 보려면, this Stack Overflow answer 을 읽어보세요.

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

기본 예제

각각의 폼콘트롤은 자동으로 약간의 전역 스타일링을 받아들입니다. .form-control 이 있는 모든 텍스트 기반의 <input>, <textarea> 그리고 <select> 요소는 기본적으로 width: 100%; 이다. 최적의 여백을 위해 .form-group 으로 라벨과 콘트롤을 감싸세요.

여기에 블록레벨 도움말 예제

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">이메일 주소</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">암호</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">파일 업로드</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">여기에 블록레벨 도움말 예제</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 입력을 기억합니다
    </label>
  </div>
  <button type="submit" class="btn btn-default">제출</button>
</form>

Form group 과 input group 을 같이 쓰지 마세요

Form group 과 input group 을 직접 같이 쓰면 안됩니다. 대신, input group 을 form group 내에 넣도록 하세요.

인라인 폼

좌측 정렬된 인라인-블록 콘트롤을 위해 당신의 폼(<form> 태그가 아니어도 됨)에 .form-inline 를 추가하세요. 이것은 최소 768px 의 뷰포트 내의 폼에만 적용됩니다.

맞춤 너비가 필요할 수 있습니다

입력 콘트롤이나 셀렉트 콘트롤은 부트스트랩에서 기본적으로 width: 100%; 가 적용되어 있습니다. 인라인 폼내에서, 우리는 그것을 width: auto; 로 초기화하여 몇개의 콘트롤들이 같은 줄에 있을 수 있습니다. 당신의 레이아웃에 따라서, 추가적인 맞춤 너비가 필요할 수도 있습니다.

항상 라벨을 추가해야합니다

스크린 리더는 당신이 모든 input 에 라벨을 포함하지 않는다면 당신의 폼에 문제를 가지게 될 수 있습니다. 인라인 폼을 위해서, 당신은 .sr-only 을 사용하여 라벨을 숨길수 있습니다. 보조공학으로서 좀더 나아간 라벨을 제공하기 위한 다른 방법이 있습니다. 그것은 aria-label, aria-labelledby, title 입니다. 이런 것들이 존재하지 않는다면, 스크린 리더는 placeholder 속성에 의지하게 될 수 있습니다. placeholder 으로 다른 라벨링을 대체하는 것은 권장되지는 않습니다.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

수평 폼

폼(<form> 이 아니어도 됨)에 .form-horizontal 를 추가하여 라벨들과 폼콘트롤들의 그룹들을 정렬하기 위해 부트스트랩의 미리정의된 그리드 클래스들을 사용하세요. 그리드행 역할은 .form-group 가 하기 때문에 .row 는 필요가 없습니다.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

지원되는 콘트롤들

폼 레이아웃 예제에서 지원되는 표준 폼콘트롤 예제들.

Inputs

가장 흔한 폼 콘트롤인 텍스트 기반 입력 필드입니다. HTML5 의 모든 타입을 지원합니다: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

유형 선언이 필요합니다

입력은 자신의 type 이 제대로 선언된 경우 완전히 스타일됩니다.

<input type="text" class="form-control" placeholder="Text input">

입력 그룹

텍스트 기반 <input> 전후에 텍스트나 버튼을 통합하려면, 입력 그룹 콤포넌트를 확인하세요..

Textarea

여러 줄의 텍스트를 지원하는 폼콘트롤. 필요에 따라 rows 속성을 바꾸세요.

<textarea class="form-control" rows="3"></textarea>

체크박스와 라디오

체크박스는 목록에서 하나 혹은 몇개의 옵션을 선택하기 위함이고, 라디오는 여러 개중 하나의 옵션을 선택하기 위함입니다.

disabled 속성이 있는 체크박스나 라디오는 적절하게 스타일될 것입니다. 사용자들이 라벨에 마우스를 올렸을 때 "허락되지 않은" 커서를 표시하려면, .radio, .radio-inline, .checkbox, .checkbox-inline, <fieldset>.disabled 클래스를 추가하세요.

기본 (쌓이는)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

인라인 체크박스와 라디오

체크박스나 라디오 콘트롤들을 같은 줄에 보이게 하기 위해, .checkbox-inline 이나 .radio-inline 클래스를 사용하세요.


<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

라벨 텍스트 없는 체크박스와 라디오

입력 콘트롤이 상식적으로 위치한다면 <label> 에 텍스트가 필요하지 않을 수 있습니다. 현재 인라인이 아닌 체크박스과 라디오에서만 작동합니다. 여전히 라벨폼에는 보조 공학이 제공되어야 함을 기억하세요. (예를 들면, aria-label 를 사용하는 것).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

셀렉트

사파리와 크롬의 셀렉트는 border-radius 속성으로 수정되지 않는 둥근 코너를 가지고 있습니다.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

For <select> controls with the multiple attribute, multiple options are shown by default.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

정적 콘트롤

폼에서 텍스트를 넣고 싶을때는 <p>.form-control-static 클래스를 사용하세요.

email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

email@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

포커스 상태(Focus state)

우리는 :focus 를 위해 몇몇 폼콘트롤들의 기본 outline 스타일들을 제거하고 그 대신에 box-shadow 를 적용했습니다.

:focus 상태 데모

위 예제 input 은 .form-control 상의 :focus 상태를 시연하기 위해서 우리 문서 안의 맞춤 스타일을 사용합니다.

비활성화 상태(Disabled state)

Input 에 사용자 상호작용을 막기위해 disabled (boolean) 속성을 추가하세요. 비활성화된 입력양식은 좀더 밝게 보여지고 not-allowed 커서가 추가됩니다.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

비활성화된 필드셋(Disabled fieldsets)

한번에 <fieldset> 내 모든 콘트롤을 비활성화하려면 <fieldset>disabled 속성을 추가하세요.

<a> 링크 기능성에 대한 경고

기본적으로, 브라우저는 <비활성화된 필드셋> 내의 모든 기본 폼콘트롤(<input>, <select>, <button> 요소)들을 키보드와 마우스 상호작용이 되지 않도록 할 것입니다. 하지만, 만약 당신의 폼이 <a ... class="btn btn-*"> 을 포함하면, 그것들은 오직 pointer-events: none 스타일만이 적용될 것입니다. 버튼에서 비활성화 상태 섹션에서 언급한 것처럼 이 CSS 속성은 아직 표준화되지 않았고, 오페라 18 이하나 인터넷 익스플로러 11 에서 완전히 지원되지 않습니다. 그리고 키보드 사용자가 이 링크들에 포커스하는 것을 막을 수 없을 것입니다. 그래서 안전하게 하려면, 그러한 링크들은 비활성활 할 수 있는 맞춤 자바스크립트를 사용하세요.

크로스브라우저 호환성

부트스트랩은 이 스타일들을 모든 브라우저에 적용하지만, 인터넷 익스플로러 11 와 그 이하에서는 실제로 <fieldset> 에서 disabled 속성을 지원하지 않습니다. 이 브라우저들의 필드셋을 비활성화하려면 맞춤 자바스크립트를 사용하세요.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

읽기전용 상태

입력값의 수정을 막기위해 입력콘트롤에 readonly (boolean) 속성을 추가하세요. 읽기전용 입력콘트롤은 좀더 밝게 보여집니다. (비활성화된 입력콘트롤처럼), 하지만 커서는 기본 커서로 남아있습니다.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

유효 상태(Validation states)

부트스트랩은 폼 콘트롤상의 에러, 경고, 성공 상태를 위한 유효 상태 스타일을 포함하고 있습니다. 사용하려면, 부모 요소에 .has-warning, .has-error, .has-success 를 추가하세요. 그 요소안의 모든 .control-label, .form-control, .help-block 은 유효성 스타일을 적용받습니다.

보조공학으로 유효 상태를 전달하기

폼콘트롤의 상태를 알리기 위해 유효성 스타일들을 사용하는 것은 시각적인 표시일뿐입니다, 스크린 리더같은 보조 공학 사용자들에게 전달하지 못할 것입니다.

상태의 대안 표시가 제공될 수 있도록 하세요. 예를 들면, 당신은 폼콘트롤의 <label> 텍스트 자체에 상태에 대한 힌트를 포함할 수 있습니다 (다음 코드 예제와 같이). 아니면 aria-describedby 을 사용하는 폼콘트롤의 유효상태에 관한 텍스트 정보를 추가적인 속성을 사용할 수도 있습니다(따라오는 섹션의 예제를 보세요). 에러의 경우, 당신은 폼콘트롤에 aria-invalid="true" 을 사용할 수 있습니다.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

선택적인 아이콘

당신은 또한 .has-feedback 와 우측 아이콘의 추가로 선택적인 피드백 아이콘을 추가할 수 있습니다.

피드백 아이콘은 오직 텍스트를 사용하는 <input class="form-control"> 요소에서만 작동합니다.

아이콘, 라벨, 입력 그룹

피드백 아이콘의 수동 위치는 라벨 없는 입력콘트롤과 에드온이 오른쪽에 있는 input groups 을 위해 필요합니다. 당신은 접근성 이유를 위해 모든 입력콘트롤을 위한 라벨을 제공하는 것을 강력하게 장려해야 합니다. 만약 당신이 라벨없이 한따면, 피드백 아이콘의 top 값은 조정합니다. 입력 그룹을 위해, 당신의 애드온의 너비를 고려하여 적절한 픽셀값으로 right 값을 조정하세요.

보조 공학에 아이콘의 의미를 전달하는 것

스크린 리더같은 보조 공학에게 아이콘의 의미를 확실하게 전달하는 것을 확실히 하려면, .sr-only 클래스로 추가적인 숨겨진 텍스트가 포함되거나 aria-describedby 을 사용하는 폼콘트롤과 연관되어 있어야 합니다. 그렇지 않으면, 의미를 (예를 들면, 특정 텍스트 입력 필드를 위한 경고) 폼콘트롤에 연결된 <label> 의 텍스트를 바꾸는 것 처럼 다른 폼에서 전달하는 것을 확실히 하셔야 합니다.

다음 예제는 <label> 텍스트 자체안에 폼콘트롤 각각의 유효 상태가 이미 언급되어 있음에도 불구하고, 실례를 보여주기 위해 아래의 테크닉(.sr-onlyaria-describedby 를 사용)이 포함되어 있습니다.

(success)
(warning)
(error)
@
(success)
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

수평폼과 인라인폼에서 보조 아이콘

(success)
@
(success)
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>
(success)

@
(success)
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

숨겨진 .sr-only 라벨과 보조 아이콘

만약 당신이 폼콘트롤의 <label> 을 숨기기 위해서 .sr-only 클래스를 사용한다면 (aria-label 속성같은 다른 라벨링 대안을 사용하는 것보다), 부트스트랩은 자동으로 아이콘의 위치를 조정할 것입니다.

(success)
@
(success)
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

콘트롤 크기조절

.input-lg 같은 클래스를 사용하여 높이를 설정하세요. 그리고 .col-lg-* 같은 그리드 열 클래스를 사용하여 너비를 설정하세요.

높이 조절

폼콘트롤을 버튼 크기에 맞춰 크거나 작게 만드세요.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

수평폼 그룹 크기조절

.form-horizontal 안의 라벨과 폼콘트롤을 간편하게 .form-group-lg.form-group-sm 으로 크기조절 하세요.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

열 크기조절

입력콘트롤을 그리드 열이나 간단히 원하는 너비로 맞춰주는 맞춤 부모 요소로 감싸세요.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

도움말(Help text)

폼콘트롤을 위한 블록 레벨 도움말.

폼콘트롤과 도움말을 연계하기

도움말은 명확하게 aria-describedby 을 사용하여 폼콘트롤과 연계되어야 합니다. 이것은 보조 공학 -스크린 리더같은- 이 콘트롤에 포커스 되거나 들어왔을때 도움말을 알려줍니다.

A block of help text that breaks onto a new line and may extend beyond one line.
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

버튼

버튼 태그

<a>, <button>, <input> 요소에 버튼 클래스를 사용하세요.

Link
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

문맥 특정 사용 (Context-specific usage)

버튼 클래스는 <a><button> 에 사용되어지지만, 오직 <button> 만이 네비게이션이과 네비게이션바 콤포넌트에서 지원됩니다.

버튼처럼 작동하는 링크

만약 <a> 요소가 버튼 처럼 사용된다면, 그들은 적절한 role="button" 도 주어져야 합니다.

크로스브라우저 렌더링

크로스브라우저 렌더링에 맞춤을 확실히 하기 위해 우리는 가능한 <button> 사용하는 것을 강력히 추천합니다.

다른 것들 중에서, 파이어폭스 <30 버그 가 있습니다. 그것은 우리가 <input>line-height 의 설정을 하는 것을 막습니다. 그래서 파이어폭스의 다른 버튼의 높이와 정확하게 맞추지 못합니다.

옵션

간편하게 스타일 버튼을 만들기 위해 사용가능한 버튼 클래스중 하나를 사용하세요.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

보조 공학에 의미를 전달하는 것

버튼에 의미를 추가하기 위해 색을 사용하는 것은 시각적인 표시만 제공할 뿐입니다. 그것은 스크린리더같은 보조 공학의 사용자들에게는 전달되지 않을 것입니다. 색에 의한 정보를 콘텐츠 자체에도 나타낼 수 있도록 하세요. 그리고 .sr-only 로 텍스트를 숨길수도 있습니다.

크기

버튼을 크거나 작게 하고 싶으세요? 크기를 변경하려면 .btn-lg, .btn-sm, .btn-xs 을 추가하세요.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

.btn-block 을 더하는 것으로 블록 레벨 버튼—부모 요소만큼 꽉 찬 너비—을 만듭니다.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

활성 상태

버튼은 활성화 되었을때 눌려진 것처럼(좀더 어두운 배경, 어두운 테두리, 내부 그림자로) 보여질 것입니다. <button> 요소를 위해서, :active 를 통해 되어있습니다. 하지만, 당신은 프로그램적으로 활성화된 상태를 적용할 필요가 있을때, <button>.active 를 사용할 수 있습니다. (그리고 aria-pressed="true" 속성도 포함합니다)

버튼 요소

:active 를 더할 필요는 없습니다만, 만약 강제로 같은 모습이 필요하다면, .active 를 추가하세요.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

앵커 요소

<a> 버튼에 .active 클래스를 추가하세요.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

비활성화된 상태

opacity 로 흐려지게 하여 버튼을 클릭할수 없는 것처럼 보여지게 만드세요.

버튼 요소

<button> 버튼에 disabled 속성을 추가하세요.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

크로스브라우저 호환성

만약 당신이 <button>disabled 속성을 추가한다면, 인터넷 익스플로러 9 와 그 이하는 우리가 고칠수 없는 이상한 텍스트 그림자와 회색 텍스트가 렌더링 될 것입니다.

앵커 요소

<a> 버튼에 .disabled 를 추가하세요.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

우리는 유틸리티 클래스로 .disabled 를 사용합니다. 비슷하게 .active 도요. prefix 는 필요하지 않습니다.

링크 기능성 경고

이 클래스는 <a> 의 링크 기능성을 비활성화하기 위해서 pointer-events: none 를 사용합니다. 그러나 이 CSS 속성은 아직 표준화되지 않았고 오페라18 과 그 이하, 인터넷 익스플로러 11 에서 완전하게 지원되지 않습니다. 추가로, pointer-events: none 를 지원하는 브라우저 조차도, 키보드 네비게이션에는 효력이 없습니다. 그말은 보조공학 사용자들은 여전히 이런 링크들에 접근할 수 있다는 얘기입니다. 안전하게 하려면, 그런 링크들을 비활성화할 수 있는 맞춤 자바스크립트를 사용하세요.

이미지

반응형 이미지

부트스트랩 3 의 이미지들은 .img-responsive 으로 반응형으로 만들수 있습니다. 이것은 이미지에 max-width: 100%;, height: auto; , display: block; 을 적용합니다. 그래서 그것은 부모요소에 알맞게 변화합니다.

.img-responsive 를 사용한 이미지를 가운데 두기 위해서, .text-center 대신 .center-block 를 사용하세요. .center-block 사용에 관해 자세한 것은 헬퍼 클래스 섹션을 보세요.

SVG 이미지와 IE 8-10

인터넷 익스플로러 8-10 에서는, .img-responsive 와 SVG 이미지는 불균형적으로 조절됩니다. 이것을 고치려면, width: 100% \9; 을 더하세요. 부트스트랩은 다른 이미지 포멧에 문제를 일으킬 여지가 있어서 이것을 자동으로 적용하지 않았습니다.

<img src="..." class="img-responsive" alt="Responsive image">

이미지 모양

프로젝트에 손쉽게 스타일된 이미지를 위해서 <img> 요소에 클래스를 추가하세요.

크로스브라우저 호환성

인터넥 익스플로러 8 은 둥근 모서리를 지원하지 않음을 명심하세요.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

헬퍼 클래스

맥락적인 색

몇개의 다용도 강조 클래스로 색으로 의미를 전달하세요. 이것들은 또한 링크에도 적용되고 마우스가 올라갔을때 어두워질것입니다.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

특수성 해결

가끔 강조 클래스는 또다른 앵커 셀렉터의 특수성으로 인해 적용되지 않을 수 있습니다. 많은 경우에서, 해결책은 당신의 텍스트를 클래스와 함께 <span> 로 감싸는 것입니다.

보조공학에 의미를 전달하기

의미를 전달하기 위해 색을 사용하는 것은 오직 시각적인 표시를 제공할 뿐입니다. 보조 공학 사용자들에게는 전달되지 않습니다. 그 색에 의한 정보들이 콘텐츠 자체에도 명백히 나타낼 수 있도록 하세요. 그리고 .sr-only 클래스로 가려두셔도 괜찮습니다.

맥락적인 배경

맥락적인 텍스트 색 클래스와 비슷하게, 하나의 맥락적인 클래스로 요소의 배경을 손쉽게 설정하세요. 앵커 콤포넌트는 텍스트 클래스들 처럼 마우스가 올라오면 어두워질 것입니다.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

특수성 해결

가끔 배경 클래스는 또다른 앵커 셀렉터의 특수성으로 인해 적용되지 않을 수 있습니다. 많은 경우에서, 해결책은 당신의 텍스트를 클래스와 함께 <div> 로 감싸는 것입니다.

보조공학에 의미를 전달하는것

맥락적인 색 처럼, 색의 의미를 전달하는 것을 확실히 하세요.

닫기 아이콘

모달이나 경고같은 콘텐츠를 없애기 위한 보통의 닫기 아이콘을 사용하세요.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

캐럿 (Carets)

드롭다운 기능성과 방향을 알리기 위해 캐럿을 사용하세요. 기본 캐럿은 드롭업 메뉴 에서 반대임을 눈여겨 두세요.

<span class="caret"></span>

간편한 float

요소를 클래스로 좌측이나 우측으로 float 하세요. !important 는 특정한 이슈들을 피하기 위해 포함되어집니다. 클래스들은 또한 믹스인으로 사용할 수 있습니다.

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

네비게이션 바에서 사용하지 않습니다

네비게이션 바에서 콤포넌트들을 정렬하려면, 대신 .navbar-left.navbar-right 를 사용하세요. 자세한건 네비게이션 바 문서를 보세요.

콘텐츠 블록 중앙정렬

display: blockmargin 로 요소를 설정하세요. 믹스인과 클래스로 사용가능합니다.

<div class="center-block">...</div>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

.clearfix 을 추가하여 손쉽게 float 을 클리어하세요. Nicolas Gallagher 가 공개한 the micro clearfix 를 사용하였습니다. 또한 믹스인으로 사용 가능합니다.

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

콘텐츠 보이고 숨기기

.show.hide 클래스의 사용으로 display 를 통해 요소를 보이거나 숨깁니다. 이 클래스들은 간편한 float 처럼 특정한 이슈를 피하기 위해 !important 를 사용합니다. 그들은 오직 블록레벨만 사용 가능합니다. 그들은 또한 믹스인으로 사용됩니다.

.hide 는 가능합니다만 그것은 항상 스크린리더에 효과가 있지 않으며, v3.0.1 부터 deprecated 되었습니다. 대신 .hidden.sr-only 를 사용하세요.

더 나아가, .invisible 은 오직 요소의 가시성을 토글하기 위해 사용되어질 수 있습니다. display 은 수정되지 않고 요소는 여전히 문서의 흐름(공간)에 영향을 미칩니다.

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

스크린 리더와 키보드 네비게이션 콘텐츠

.sr-only스크린 리더를 제외한 모든 기기에서 요소를 숨기세요. 그것이 포커스 되었을때 요소를 보이기 위해서 .sr-only.sr-only-focusable 를 조합하세요. (예를 들면 키보드만 가지고 있는 사용자들에 의해). 최적의 접근성 을 위해 필요합니다. 또한 믹스인으로도 사용할 수 있습니다.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

이미지 대체

.text-hide 클래스나 믹스인을 요소의 텍스트 콘텐츠를 배경 이미지로 대체하는 활용하세요.

<h1 class="text-hide">Custom heading</h1>
// 믹스인으로 사용
.heading {
  .text-hide();
}

반응형 유틸리티

좀더 빠른 모바일 친화 개발을 위해, 미디어 쿼리로 구분하는 기기로 콘텐츠를 보이고 숨기는데 이 유틸리티 클래스를 사용하세요. 또한 프린트할 때의 콘텐츠도 선택할 수 있습니다.

같은 사이트의 완전히 다른 버전을 만드는 것을 피하기 위해 제한적으로 이것들을 사용하는 것을 시도해 보세요. 대신, 각 기기의 표현을 보완하기 위해 사용하세요.

가능한 클래스

뷰포트 분기점을 넘어 콘텐츠를 토글링하기 위한 가능한 클래스들을 혼자 아니면 조합으로 사용하세요.

매우 작은 기기 모바일폰 (<768px) 작은 기기 태블릿 (≥768px) 중간 기기 데스크탑 (≥992px) 큰 기기 데스크탑 (≥1200px)
.visible-xs-* 보임
.visible-sm-* 보임
.visible-md-* 보임
.visible-lg-* 보임
.hidden-xs 보임 보임 보임
.hidden-sm 보임 보임 보임
.hidden-md 보임 보임 보임
.hidden-lg 보임 보임 보임

v3.2.0 부터, .visible-*-* 클래스는 3가지 형태로 나옵니다. 각각의 형태는 아래에 나열된 것처럼 CSS display 속성값을 가집니다.

클래스 그룹 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

그래서, 예를들어 매우 작은 (xs) 화면은 .visible-*-* 의 형태인 3가지 클래스가 가능합니다: .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block.

.visible-xs, .visible-sm, .visible-md, .visible-lg 는 아직 존재합니다만 v3.2.0 부터 deprecated 되었습니다. 그들은 거의 .visible-*-block 과 동등합니다. 단, <table> 관련 요소의 토글링하는 특수한 경우는 예외입니다.

프린트 클래스

보통 반응형 클래스들과 비슷하게, 프린트를 위해 토글링할 클래스에 이것들을 사용하세요.

클래스 브라우저 프린트
.visible-print-block
.visible-print-inline
.visible-print-inline-block
보임
.hidden-print 보임

.visible-print 클래스는 또한 존재합니다만 v3.2.0 부터는 deprecated 되었습니다. 그것은 거의 .visible-print-block 와 유사합니다. 단, <table> 관련 요소처럼 특수한 경우는 예외입니다.

테스트 케이스

반응형 유틸리티 클래스를 테스트하려면 당신의 브라우저 크기를 조절하거나 다른 기기에서 이 주소를 불러오세요.

..에서 보이는

녹색 체크표시는 요소가 당신의 현재 뷰포트에서 보이는 것 임을 가르킵니다.

✔ 매우 작은 기기에서 보임
✔ 작은 기기에서 보임
Medium ✔ 중간 기기에서 보임
✔ 큰 기기에서 보임
✔ 매우 작은 기기와 작은 기기에서 보임
✔ 중간 기기와 큰 기기에서 보임
✔ 매우 작은 기기와 중간 기기에서 보임
✔ 작은 기기와 큰 기기에서 보임
✔ 매우 작은 기기와 큰 기기에서 보임
✔ 작은 기기와 중간 기기에서 보임

..에서 가려진

여기, 녹색 체크는 당신의 현재 뷰포트에서 요소가 가려지고 있음을 가르킵니다.

✔ 매우 작은 기기에서 숨겨짐
✔ 작은 기기에서 숨겨짐
중간 기기 ✔ 중간 기기에서 숨겨짐
✔ 큰 기기에서 숨겨짐
✔ 매우 작은 기기와 작은 기기에서 숨겨짐
✔ 중간 기기와 큰 기기에서 숨겨짐
✔ 매우 작은 기기와 중간 기기에서 숨겨짐
✔ 작은 기기와 큰 기기에서 숨겨짐
✔ 매우 작은 기기와 큰 기기에서 숨겨짐
✔ 작은 기기와 중간 기기에서 숨겨짐

Less 사용

부트스트랩의 CSS 는 Less 를 기반으로 만들어졌습니다. Less 는 CSS 컴파일링을 위한 변수, 믹스인, 함수 같은 부가 기능성을 갖춘 프리프로세서입니다. 컴파일된 CSS 파일들 대신 우리가 프레임워크 내에서 사용한 수많은 변수들과 믹스인들을 활용하는 Less 파일들을 사용하는 것을 고려해보세요.

그리드 변수들과 믹스들은 그리드 시스템 섹션 에 포함되어 있습니다.

부트스트랩 컴파일하기

부트스트랩은 최소한 2가지 방법으로 사용되어질 수 있습니다: 컴파일된 CSS 아니면 Less 파일들. Less 파일들을 컴파일하려면, 어떻게 필수적인 명령어들을 실행하는 개발환경을 설정하는지 시작하기 섹션을 참고하세요.

서드 파티 편집 도구는 부트스트랩에서 작동할 수는 있지만, 코어팀에 의해 지원되는 것은 아닙니다.

변수

변수는 프로젝트 전역에서 흔히 사용되는 색이나 공간, 폰트 스택 등의 변수들을 한곳에 모으고 공유하기 위한 방법으로 사용되어집니다. 자세한 것은, 맞춤화 를 보세요.

손쉽게 2가지 색배합을 이용하세요: 그레이스케일, 시멘틱. 그레이스케일은 흔히 사용되는 검은색의 색조를 빠르게 제어하는 것을 제공합니다. 반면에 시멘틱은 의미있는 맥락적인 값들이 할당된 다양한 색을 포함합니다.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

색 변수들 중 어느 것이라도 당신의 프로젝트 안에서 더 의미있는 변수들에게 그대로 사용하거나 혹은 다시 할당할 수 있습니다.

// 그대로 사용
.masthead {
  background-color: @brand-primary;
}

// Less 에서 변수를 재할당
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

스캐폴딩

당신의 사이트 뼈대의 주요 요소를 빠르게 맞춤화하기 위한 한줌의 변수들.

// 스캐폴딩
@body-bg:    #fff;
@text-color: @black-50;

손쉽게 하나의 값으로 적절한 색을 당신의 링크에 스타일을 입히세요.

// 변수
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// 사용법
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-color 은 Less 의 또다른 놀라운 도구인 함수를 사용하고 있음을 주목하세요. 그것은 마술처럼 편리하게 적절한 hover 색을 만듭니다. 당신은 darken, lighten, saturate, desaturate 을 사용할 수 있습니다.

타이포그래피

손쉽게 당신의 폰트모양, 사이즈, 제목 등을 약간의 변수들로 설정하세요. 부트스트랩은 이들을 사용할 뿐만 아니라 간편한 타이포그래피 믹스인들도 제공합니다.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

아이콘

당신의 아이콘들의 위치와 파일명을 맞춤화하기 위한 두개의 간편한 변수들

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

콤포넌트

부트스트랩의 전반적인 콤포넌트는 보통을 기준으로 하는 약간의 기본값 변수들을 사용합니다. 아래의 변수들이 가장 보편적으로 쓰입니다.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

벤더 믹스인

벤더 믹스인들은 컴파일된 CSS 에 관련있는 모든 벤더 접두사를 포함하여 다양한 브라우저 지원을 돕기위한 믹스인들이다.

박스 사이징

하나의 믹스인으로 당신의 콤포넌트의 박스 모델을 초기화하세요. 왜 그런지에 대하여, 도움이 될만한 모질라의 문서 에서 확인할 수 있습니다.

이 믹스인은 Autoprefixer 도입이 되면서 v3.2.0 부터는 deprecated 되었습니다. 하위 호환성을 지키기 위하여, 부트스트랩은 v4 이전까지는 내부적으로 믹스인을 사용할 것입니다.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // 사파리 <= 5
     -moz-box-sizing: @box-model; // 파이어폭스 <= 19
          box-sizing: @box-model;
}

둥근 모서리

오늘날 모든 현대 브라우저들은 접두사 없는 border-radius 속성을 지원합니다. 그런 까닭에, .border-radius() 믹스인은 없습니다만, 부트스트랩은 객체의 특정한 면의 두 모서리를 간편히 둥글게 하는 믹스인을 포함합니다.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

박스 (드롭) 그림자

만약 당신의 방문자들이 최신 브라우저나 기기들만 사용한다면, 그냥 box-shadow 속성만 사용하면 됩니다. 만약 당신이 예전 안드로이드(v4 이전)와 iOS 기기(iOS5 이전) 를 지원하는 것이 필요하다면, 접두사 -webkit 을 붙이기 위해 deprecated 된 믹스인을 사용하세요.

이 믹스인은 부트스트랩이 표준 속성을 지원하지 않는 지나간 플랫폼을 지원하지 않기로 한, v3.1.0 부터는 deprecated 되었습니다. 하위 호환성을 지키기 위하여, 부트스트랩은 v4 이전까지는 내부적으로 믹스인을 사용할 것입니다.

반드시 rgba() 색을 사용하세요. 그러면 배경과 최대한 매끄럽게 표현됩니다.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

전환

유연성을 위한 다양한 믹스인들. 하나에 모든 전환 정보를 설정하거나, 필요한만큼 딜레이나 지속시간을 명시하세요.

이 믹스인은 Autoprefixer 도입이 되면서 v3.2.0 부터는 deprecated 되었습니다. 하위 호환성을 지키기 위하여, 부트스트랩은 v4 이전까지는 내부적으로 믹스인을 사용할 것입니다.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

변형

객체를 회전, 크기, 이동, 왜곡하세요.

이 믹스인은 Autoprefixer 도입이 되면서 v3.2.0 부터는 deprecated 되었습니다. 하위 호환성을 지키기 위하여, 부트스트랩은 v4 이전까지는 내부적으로 믹스인을 사용할 것입니다.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 만
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 만
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 만
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // https://github.com/twbs/bootstrap/issues/4885 을 보세요; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 만
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 만
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 만
          transform-origin: @origin;
}

애니메이션

한번의 정의로 CSS3 애니메이션 속성들을 사용하기 위한 단일 믹스인.

이 믹스인은 Autoprefixer 도입이 되면서 v3.2.0 부터는 deprecated 되었습니다. 하위 호환성을 지키기 위하여, 부트스트랩은 v4 이전까지는 내부적으로 믹스인을 사용할 것입니다.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

불투명도

모든 브라우저를 위해 불투명도를 설정하고 IE8 을 위해 대안 filter 를 제공합니다.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

플레이스홀더 텍스트

각 필드내 폼콘트롤에 의미를 제공합니다.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

하나의 요소에 CSS 로 단을 생성합니다.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

그라디언트

손쉽게 2개의 색을 배경 그라디언트로 바꿔줍니다. 나아가서 방향을 설정하거나, 3가지 색을 사용하거나, 방사성의 그라디언트를 사용하세요. 하나의 믹스인으로 당신이 필요로 할 모든 접두사 구문을 얻을 수 있습니다.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

당신은 또한 선형 그라디언트 2개의 색의 각도을 명시할 수 있습니다:

#gradient > .directional(#333; #000; 45deg);

만약 당신이 미용실-줄무늬 스타일 그라디언트가 필요하다면, 쉽습니다. 그저 한가지 색을 명시하면 우리는 반투명한 흰 줄무니를 덮어씌울 것입니다.

#gradient > .striped(#333; 45deg);

나가가서 3가지 색을 사용하세요. 아래의 믹스인들로 첫번째, 두번째 색, 두번째 색이 멈추는 곳 (25% 같이 비율로 기입), 세번째 색을 설정합니다:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

주의! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.

유틸리티 믹스인

유틸리티 믹스인은 목표나 과제를 이루기 위해 관계없는 CSS 속성을 합쳐놓은 믹스인입니다.

Clearfix

어느 요소에 class="clearfix" 를 추가하는 대신 적절한 곳에 .clearfix() 믹스인을 추가하세요. Nicolas Gallaghermicro clearfix 를 사용합니다.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

수평 중앙 배치

어떤 요소를 간단하게 부모의 중앙에 위치하게 합니다. widthmax-width 의 값설정이 필요합니다.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

크기조절 헬퍼

객체의 크기를 좀더 쉽게 명시합니다.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

크기조절할수 있는 텍스트영역

어떤 텍스트영역이나 다른 요소에 크기조절 옵션을 손쉽게 환경설정 하세요. 기본적으로 보통의 브라우저 양식에 따릅니다. (both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

텍스트 줄임

ellipsis 와 믹스인 하나로 손쉽게 텍스트를 줄이세요. block 이나 inline-block 레벨의 요소가 필요합니다.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

레티나 이미지

2개의 이미지 경로와 @1x 이미지 크기를 명시하세요, 그러면 부트스트랩은 @2x 미디어쿼리를 제공할 것입니다. 만약 당신이 지원할 많은 이미지를 가지고 있다면, 하나의 미디어 쿼리로 수동적으로 레티나 이미지 CSS 를 작성하는 것을 고려해보세요.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Sass 사용

부트스트랩은 Less 를 기반으로 만들어졌지만, 공식 Sass 버전 도 있습니다. 우리는 그것을 별도의 깃허브 저장소에서 관리하고 전환 스크립트로 업데이트 합니다.

살펴보기

Sass 버전이 분리된 저장소를 가지고 조금 다른 사용자들을 지원하면서, 프로젝트의 콘텐츠는 메인 부트스트랩 프로젝트와 크게 다릅니다. 이것은 Sass 버전이 가능한 많은 Sass 기반 시스템들에 호환성을 가지도록 합니다.

경로 설명
lib/ Ruby gem code (Sass configuration, Rails and Compass integrations)
tasks/ Converter scripts (turning upstream Less to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, and font files
Rakefile Internal tasks, such as rake and convert

파일들을 보려면 Sass 버전 깃허브 저장소 를 방문하세요.

설치

Sass 용 부트스트랩을 설치하고 사용하는 방법에 대한 정보는, 깃허브 저장소 readme 를 살펴보세요. 그것은 가장 최근의 소스이고, 레일즈와 Compass, 표준 Sass 프로젝트들을 위한 정보를 포함하고 있습니다.

Sass 용 부트스트랩