개요

더 우수하고 빠르며 강력한 웹 개발에 대한 접근 방식을 포함하여 Bootstrap 인프라의 주요 부분에 대한 정보를 얻으십시오.

HTML5 문서 유형

부트스트랩은 HTML5 doctype을 사용해야 하는 특정 HTML 요소와 CSS 속성을 사용합니다. 모든 프로젝트의 시작 부분에 포함하십시오.

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

모바일 퍼스트

Bootstrap 2에서는 프레임워크의 주요 측면에 대한 선택적 모바일 친화적 스타일을 추가했습니다. Bootstrap 3를 사용하여 처음부터 모바일 친화적으로 프로젝트를 다시 작성했습니다. 선택적 모바일 스타일을 추가하는 대신 핵심에 바로 구워집니다. 사실 부트스트랩은 모바일 우선 입니다. 모바일 퍼스트 스타일은 별도의 파일이 아닌 전체 라이브러리에서 찾을 수 있습니다.

적절한 렌더링 및 터치 확대/축소를 보장하려면 뷰포트 메타 태그 를 <head>.

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

user-scalable=no뷰포트 메타 태그 에 추가하여 모바일 장치에서 확대/축소 기능을 비활성화할 수 있습니다 . 이렇게 하면 확대/축소가 비활성화됩니다. 즉, 사용자가 스크롤만 할 수 있고 사이트가 네이티브 애플리케이션처럼 느껴지게 됩니다. 전반적으로 모든 사이트에서 이것을 권장하는 것은 아니므로 주의하십시오!

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

부트스트랩은 기본 전역 디스플레이, 타이포그래피 및 링크 스타일을 설정합니다. 구체적으로, 우리는:

  • background-color: #fff;에 설정body
  • @font-family-base, @font-size-base및 @line-height-base속성을 활자체 기반으로 사용
  • 를 통해 전체 링크 색상을 설정하고 @link-color다음에만 링크 밑줄을 적용하십시오.:hover

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

Normalize.css

브라우저 간 렌더링 개선을 위해 Nicolas Gallagher 와 Jonathan Neal 의 프로젝트인 Normalize.css 를 사용 합니다.

컨테이너

부트스트랩은 사이트 콘텐츠를 래핑하고 그리드 시스템을 수용하기 위해 포함 요소가 필요합니다. 프로젝트에서 사용할 두 개의 컨테이너 중 하나를 선택할 수 있습니다. and more 로 인해 padding두 컨테이너 모두 중첩할 수 없습니다.

.container반응형 고정 너비 컨테이너에 사용 합니다.

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

.container-fluid뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너에 사용 합니다.

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

그리드 시스템

Bootstrap에는 장치 또는 뷰포트 크기가 증가함에 따라 최대 12개 열까지 적절하게 확장되는 반응형 모바일 우선 유체 그리드 시스템이 포함됩니다. 여기에는 쉬운 레이아웃 옵션을 위한 미리 정의된 클래스 와 더 의미론적인 레이아웃을 생성하기 위한 강력한 믹스 인이 포함됩니다 .

소개

그리드 시스템은 콘텐츠를 포함하는 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다. 부트스트랩 그리드 시스템이 작동하는 방식은 다음과 같습니다.

  • 적절한 정렬 및 패딩을 위해 행은 .container(고정 너비) 또는 (전체 너비) 내에 배치되어야 합니다 ..container-fluid
  • 행을 사용하여 열의 수평 그룹을 만듭니다.
  • 콘텐츠는 열 내에 배치되어야 하며 열만 행의 직계 자식일 수 있습니다.
  • .row와 같은 미리 정의된 그리드 클래스 .col-xs-4는 그리드 레이아웃을 빠르게 만드는 데 사용할 수 있습니다. 더 적은 믹스인을 더 의미론적인 레이아웃에 사용할 수도 있습니다.
  • 열은 을 통해 거터(열 콘텐츠 사이의 간격)를 padding만듭니다. 해당 패딩은 s의 음수 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됩니다 .row.
  • 음수 여백은 아래 예가 내어쓰기된 이유입니다. 그리드 열 내의 콘텐츠가 그리드가 아닌 콘텐츠와 정렬되도록 하기 위한 것입니다.
  • 그리드 열은 확장하려는 12개의 사용 가능한 열 수를 지정하여 생성됩니다. 예를 들어 3개의 동일한 열은 3개를 사용 .col-xs-4합니다.
  • 단일 행에 12개 이상의 열이 있는 경우 추가 열의 각 그룹은 하나의 단위로 새 줄로 줄바꿈됩니다.
  • 그리드 클래스는 화면 너비가 중단점 크기보다 크거나 같은 장치에 적용되며 더 작은 장치를 대상으로 하는 그리드 클래스를 재정의합니다. 따라서 예를 들어 .col-md-*요소에 클래스를 적용하면 중형 장치의 스타일 지정에 영향을 줄 뿐만 아니라 .col-lg-*클래스가 없는 경우 대형 장치에도 영향을 줍니다.

이러한 원칙을 코드에 적용하기 위한 예제를 살펴보십시오.

미디어 쿼리

Less 파일에서 다음 미디어 쿼리를 사용하여 그리드 시스템에서 주요 중단점을 만듭니다.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

max-width우리는 때때로 CSS를 더 좁은 장치 세트로 제한하기 위해 이러한 미디어 쿼리를 확장 합니다.

@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)
그리드 동작 항상 수평 접혀서 시작, 중단점 위 수평
컨테이너 너비 없음(자동) 750픽셀 970픽셀 1170픽셀
클래스 접두사 .col-xs- .col-sm- .col-md- .col-lg-
열 수 12
열 너비 자동 ~62픽셀 ~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 
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<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>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<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>

<!-- Columns are always 50% wide, on mobile and desktop -->
<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
9 + 4 = 13 > 12이므로 이 4열 너비 div는 하나의 연속 단위로 새 줄에 래핑됩니다.
.col-xs-6
후속 열은 새 줄을 따라 계속됩니다. 
<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와 반응형 유틸리티 클래스 를 함께 사용하세요 .

.col-xs-6 .col-sm-3
뷰포트의 크기를 조정하거나 예를 들어 휴대전화에서 확인하세요.
.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>

  <!-- Add the extra clearfix for only the required viewport -->
  <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>

응답 중단점에서 열 지우기 외에도 오프셋, 푸시 또는 풀을 재설정 해야 할 수 있습니다 . 그리드 예제 에서 실제로 이것을 참조하십시오 .

<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>

거터 제거

.row-no-gutters행에서 거터를 제거하고 클래스 가 있는 열을 제거합니다 .

.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 row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

열 오프셋

.col-md-offset-*클래스 를 사용하여 열을 오른쪽으로 이동합니다 . 이러한 클래스는 열만큼 열의 왼쪽 여백을 늘 *립니다. 예를 들어, 4개의 열 위로 .col-md-offset-4이동 합니다..col-md-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-*-offset-0하위 그리드 계층의 오프셋을 클래스 로 재정의할 수도 있습니다 .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

중첩 열

기본 그리드를 사용하여 콘텐츠를 중첩하려면 기존 열 내에 새로운 열 .row집합을 추가합니다 . 중첩된 행에는 최대 12개 이하의 열을 추가하는 열 집합이 포함되어야 합니다(사용 가능한 열 12개를 모두 사용할 필요는 없음)..col-sm-*.col-sm-*

레벨 1: .col-sm-9
레벨 2: .col-xs-8 .col-sm-6
레벨 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>

믹스인 및 변수 감소

빠른 레이아웃을 위해 미리 빌드된 그리드 클래스 외에도 Bootstrap에는 간단하고 시맨틱한 레이아웃을 빠르게 생성하기 위한 Less 변수와 믹스인이 포함되어 있습니다.

변수

변수는 열 수, 여백 너비 및 부동 열을 시작할 미디어 쿼리 지점을 결정합니다. 우리는 이것을 사용하여 위에 설명된 미리 정의된 그리드 클래스와 아래 나열된 사용자 지정 믹스인을 생성합니다.

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

믹신

믹스인은 그리드 변수와 함께 개별 그리드 열에 대한 의미론적 CSS를 생성하는 데 사용됩니다.

// Creates a wrapper for a series of columns
.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);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-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: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small 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);

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

// Generate the small column offsets
.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));
  }
}

// Generate the medium 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));
  }
}

// Generate the medium column offsets
.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));
  }
}

// Generate the large 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));
  }
}

// Generate the large column offsets
.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));
  }
}

사용 예

변수를 사용자 정의 값으로 수정하거나 기본값과 함께 믹스인을 사용할 수 있습니다. 다음은 기본 설정을 사용하여 간격이 있는 2열 레이아웃을 만드는 예입니다.

.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>사용할 수 있습니다. 제목의 글꼴 스타일을 일치시키고 싶지만 텍스트가 인라인으로 표시되기를 원하는 경우 .h1through 클래스도 사용할 수 있습니다..h6

h1. 부트스트랩 제목

 세미볼트 36px

h2. 부트스트랩 제목

 세미볼트 30px

h3. 부트스트랩 제목

 세미볼드 24픽셀

h4. 부트스트랩 제목

 세미볼트 18px
h5. 부트스트랩 제목
 세미볼트 14px
h6. 부트스트랩 제목
 세미볼트 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. 부트스트랩 제목 보조 텍스트

h2. 부트스트랩 제목 보조 텍스트

h3. 부트스트랩 제목 보조 텍스트

h4. 부트스트랩 제목 보조 텍스트
h5. 부트스트랩 제목 보조 텍스트
h6. 부트스트랩 제목 보조 텍스트
 
<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 이며 a line-height는 1.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 commododo 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 commododo 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 commododo luctus.

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

적은 비용으로 구축

활자체 척도는 variables.less에 있는 두 개의 Less 변수를 기반@font-size-base 으로 합니다 @line-height-base. 첫 번째는 전체에 걸쳐 사용되는 기본 글꼴 크기이고 두 번째는 기본 줄 높이입니다. 우리는 이러한 변수와 몇 가지 간단한 수학을 사용하여 모든 유형 등의 여백, 패딩 및 줄 높이를 만듭니다. 사용자 정의하면 Bootstrap이 적응합니다.

인라인 텍스트 요소

표시된 텍스트

다른 컨텍스트에서의 관련성으로 인해 텍스트 실행을 강조 표시하려면 <mark>태그를 사용하십시오.

마크 태그를 사용하여가장 밝은 부분텍스트.

You can use the mark tag to <mark>highlight</mark> text.

삭제된 텍스트

삭제된 텍스트 블록을 표시하려면 <del>태그를 사용하십시오.

이 텍스트 줄은 삭제된 텍스트로 처리됩니다.

<del>This line of text is meant to be treated as deleted text.</del>

취소선 텍스트

더 이상 관련이 없는 텍스트 블록을 표시하려면 <s>태그를 사용하십시오.

이 텍스트 줄은 더 이상 정확하지 않은 것으로 간주됩니다.

<s>This line of text is meant to be treated as no longer accurate.</s>

삽입된 텍스트

문서에 추가 사항을 표시하려면 <ins>태그를 사용하십시오.

이 텍스트 줄은 문서에 추가된 것으로 간주됩니다.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

밑줄이 그어진 텍스트

텍스트에 밑줄을 긋려면 <u>태그를 사용하십시오.

이 텍스트 줄은 밑줄이 그어진 것으로 렌더링됩니다.

<u>This line of text will render as underlined</u>

가벼운 스타일로 HTML의 기본 강조 태그를 사용하십시오.

작은 텍스트

인라인 또는 텍스트 블록을 강조하지 않으려면 <small>태그를 사용하여 텍스트를 상위 크기의 85%로 설정합니다. 머리글 요소 font-size는 중첩 <small>요소에 대해 고유한 요소를 받습니다.

.small대안 으로 any 대신에 인라인 요소를 사용할 수 있습니다 <small>.

이 텍스트 줄은 작은 글씨로 취급되어야 합니다.

<small>This line of text is meant to be treated as fine print.</small>

용감한

더 무거운 글꼴 두께로 텍스트 스니펫을 강조합니다.

다음 텍스트 스니펫은 굵은 텍스트로 렌더링됩니다 .

<strong>rendered as bold text</strong>

기울임꼴

기울임꼴로 된 텍스트 스니펫을 강조합니다.

다음 텍스트 스니펫은 기울임꼴 텍스트로 렌더링됩니다 .

<em>rendered as italicized text</em>

대체 요소

HTML5에서 <b>자유롭게 사용하세요 . 추가적인 중요성을 전달하지 않고 단어나 구를 강조하기 위한 것이며 주로 음성, 기술 용어 등에 사용됩니다.<i><b><i>

정렬 클래스

텍스트 정렬 클래스를 사용하여 텍스트를 구성요소에 쉽게 재정렬합니다.

왼쪽 정렬된 텍스트입니다.

가운데 정렬된 텍스트.

오른쪽 정렬된 텍스트.

정당화 된 텍스트.

줄 바꿈 텍스트가 없습니다.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

변환 클래스

텍스트 대문자 클래스를 사용하여 구성 요소의 텍스트를 변환합니다.

소문자 텍스트.

대문자 텍스트.

대문자로 된 텍스트.

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

약어

<abbr>마우스 오버 시 확장된 버전을 표시하는 약어 및 두문자어에 대한 HTML 요소의 스타일화된 구현입니다 . a가 있는 약어title 에는 밝은 점선 하단 테두리와 호버에 대한 도움말 커서가 있어 호버 및 보조 기술 사용자에게 추가 컨텍스트를 제공합니다.

기본 약어

속성이라는 단어의 약어는 attr 입니다.

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

이니셜리즘

.initialism약간 더 작은 글꼴 크기에 대한 약어에 추가 합니다.

HTML 은 얇게 썬 빵 이후로 최고입니다.

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

구애

가장 가까운 조상 또는 전체 업무에 대한 연락처 정보를 제시하십시오. 모든 줄을 <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103 전화
: (123) 456-7890
성명
[email protected] 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

인용구

문서 내에서 다른 소스의 콘텐츠 블록을 인용하는 경우.

기본 인용구

HTML 을 인용문으로 <blockquote>둘러 쌉니다 . 직선 따옴표의 경우 .<p>

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.

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

인용 부호 옵션

표준에 대한 단순한 변형을 위한 스타일 및 내용 변경 <blockquote>.

소스 이름 지정

<footer>소스 식별을 위해 추가합니다 . 소스 작업의 이름을 <cite>.

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.

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 sitmet, consectetur adipiscing elit. Integer posuere erat ante.

Source Title 에서 유명한 사람 
<blockquote class="blockquote-reverse">
  ...
</blockquote>

기울기

무순

순서가 명시적으로 중요 하지 않은 항목 목록입니다 .

  • Lorem ipsum dolor sitmet
  • Consectetur adipiscing 엘리트
  • 정수 molestie lorem at massa
  • Pretium nisl aliquet의 시설
  • 눌라 볼룻팟 알리콰암 벨릿
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • 베스티불룸 라오렛 포티터 sem
    • Ac tristique libero volutpat
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

주문

순서 가 명시적으로 중요한 항목 목록입니다 .

  1. Lorem ipsum dolor sitmet
  2. Consectetur adipiscing 엘리트
  3. 정수 molestie lorem at massa
  4. Pretium nisl aliquet의 시설
  5. 눌라 볼룻팟 알리콰암 벨릿
  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 sitmet
  • Consectetur adipiscing 엘리트
  • 정수 molestie lorem at massa
  • Pretium nisl aliquet의 시설
  • 눌라 볼룻팟 알리콰암 벨릿
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • 베스티불룸 라오렛 포티터 sem
    • Ac tristique libero volutpat
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

인라인

display: inline-block;가벼운 패딩과 함께 모든 목록 항목을 한 줄에 배치하십시오 .

  • 로렘 입숨
  • 파셀루스 이아쿨리스
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

설명

관련 설명이 포함된 용어 목록입니다.

설명 목록
설명 목록은 용어를 정의하는 데 적합합니다.
유이스모드
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
말레수아다 포르타
Etiam porta sem malesuada magna mollis euismod. 
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

가로 설명

용어와 설명을 <dl>나란히 정렬하십시오. 기본 s처럼 스택으로 시작 <dl>하지만 탐색 모음이 확장되면 확장됩니다.

설명 목록
설명 목록은 용어를 정의하는 데 적합합니다.
유이스모드
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
말레수아다 포르타
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>.

예를 들어 <section>인라인으로 래핑해야 합니다. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

사용자 입력

<kbd>일반적으로 키보드를 통해 입력되는 입력을 나타내는 데 사용합니다 .

디렉토리를 전환하려면 디렉토리 cd이름 다음에 입력하십시오.
설정을 편집하려면 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>여기에 샘플 텍스트...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

.pre-scrollable최대 높이를 350px로 설정하고 y축 스크롤 막대를 제공하는 클래스를 선택적으로 추가할 수 있습니다 .

변수

변수를 나타내기 위해 <var>태그를 사용하십시오.

y = m x + b

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

샘플 출력

프로그램에서 블록 샘플 출력을 표시하려면 <samp>태그를 사용하십시오.

이 텍스트는 컴퓨터 프로그램의 샘플 출력으로 취급됩니다.

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

테이블

기본 예

기본 스타일(가벼운 패딩 및 가로 구분선만)의 경우 기본 클래스 .table를 any 에 추가합니다 <table>. 너무 중복되어 보일 수 있지만 캘린더 및 날짜 선택기와 같은 다른 플러그인에 대한 테이블의 광범위한 사용을 감안할 때 우리는 사용자 정의 테이블 스타일을 분리하기로 결정했습니다.

선택적 테이블 캡션.
# 이름 성 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table">
  ...
</table>

줄무늬 행

.table-striped. 안의 테이블 행에 얼룩말 줄무늬를 추가하는 데 사용 합니다 <tbody>.

브라우저 간 호환성

:nth-child줄무늬 테이블은 Internet Explorer 8에서 사용할 수 없는 CSS 선택기 를 통해 스타일이 지정됩니다 .

# 이름 성 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table table-striped">
  ...
</table>

테두리가 있는 테이블

.table-bordered표와 셀의 모든 면에 테두리를 추가 합니다.

# 이름 성 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table table-bordered">
  ...
</table>

호버 행

.table-hover.NET 내의 테이블 행에서 호버 상태를 활성화하려면 추가하십시오 <tbody>.

# 이름 성 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 새 @트위터 
<table class="table table-hover">
  ...
</table>

요약 테이블

.table-condensed셀 패딩을 반으로 잘라 테이블을 더 작게 만들려면 추가하십시오 .

# 이름 성 사용자 이름
1 표시 장미유 @mdo
2 야곱 손튼 @지방
삼 래리 버드 @트위터 
<table class="table table-condensed">
  ...
</table>

상황별 클래스

상황별 클래스를 사용하여 테이블 행 또는 개별 셀에 색상을 지정합니다.

수업 설명
.active 특정 행이나 셀에 호버 색상을 적용합니다.
.success 성공 또는 긍정적인 작업을 나타냅니다.
.info 중립적인 정보 변경 또는 조치를 나타냅니다.
.warning 주의가 필요할 수 있는 경고를 나타냅니다.
.danger 위험하거나 잠재적으로 부정적인 행동을 나타냅니다.
# 열 제목 열 제목 열 제목
1 열 내용 열 내용 열 내용
2 열 내용 열 내용 열 내용
삼 열 내용 열 내용 열 내용
4 열 내용 열 내용 열 내용
5 열 내용 열 내용 열 내용
6 열 내용 열 내용 열 내용
7 열 내용 열 내용 열 내용
8 열 내용 열 내용 열 내용
9 열 내용 열 내용 열 내용 
<!-- 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>

보조 기술에 의미 전달

색상을 사용하여 테이블 행이나 개별 셀에 의미를 추가하면 시각적 표시만 제공되며 화면 판독기와 같은 보조 기술 사용자에게는 전달되지 않습니다. 색상으로 표시된 정보가 콘텐츠 자체(관련 테이블 행/셀에 표시되는 텍스트)에서 명확하거나 .sr-only클래스에 숨겨진 추가 텍스트와 같은 대체 수단을 통해 포함되는지 확인합니다.

반응형 테이블

작은 장치(768픽셀 미만)에서 가로로 스크롤되도록 아무 항목 .table이나 래핑하여 반응형 테이블을 만듭니다 . .table-responsive너비가 768px보다 큰 항목을 볼 때 이러한 표에는 차이가 없습니다.

세로 자르기/잘림

반응형 테이블은 을 사용하여 overflow-y: hidden테이블의 맨 아래 또는 맨 위 가장자리를 벗어나는 모든 콘텐츠를 잘라냅니다. 특히 드롭다운 메뉴 및 기타 타사 위젯이 잘릴 수 있습니다.

파이어폭스와 필드셋

widthFirefox에는 반응형 테이블을 방해 하는 일부 어색한 필드셋 스타일이 있습니다. 이것은 부트스트랩에서 제공 하지 않는 Firefox 전용 해킹 없이는 재정의할 수 없습니다 .

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

자세한 내용은 이 스택 오버플로 답변 을 참조 하세요.

# 표 제목 표 제목 표 제목 표 제목 표 제목 표 제목
1 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀
2 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀
삼 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀
# 표 제목 표 제목 표 제목 표 제목 표 제목 표 제목
1 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀
2 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀
삼 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀 테이블 셀 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

양식

기본 예

개별 양식 컨트롤은 자동으로 일부 전역 스타일을 받습니다. 가 포함된 모든 텍스트 <input>, <textarea>및 <select>요소 는 기본적으로 .form-control로 설정됩니다 . 최적의 간격을 위해 width: 100%;레이블과 컨트롤을 감쌉니다 ..form-group

여기에 블록 수준 도움말 텍스트의 예가 있습니다.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

양식 그룹을 입력 그룹과 혼합하지 마십시오.

양식 그룹을 입력 그룹 과 직접 혼합하지 마십시오 . 대신 양식 그룹 내부에 입력 그룹을 중첩하십시오.

인라인 양식

왼쪽 정렬 및 인라인 블록 컨트롤 .form-inline의 경우 양식에 추가 합니다( a일 필요는 없음). 이것은 너비가 최소 768px인 뷰포트 내의 양식에만 적용됩니다.<form>

사용자 정의 너비가 필요할 수 있음

입력 및 선택은 width: 100%;기본적으로 부트스트랩에 적용되었습니다. 인라인 양식 내에서 width: auto;여러 컨트롤이 같은 줄에 있을 수 있도록 재설정합니다. 레이아웃에 따라 추가 사용자 정의 너비가 필요할 수 있습니다.

항상 라벨 추가

모든 입력에 레이블을 포함하지 않으면 화면 판독기가 양식에 문제를 일으키게 됩니다. .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="[email protected]">
  </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="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>

가로 형태

Bootstrap의 미리 정의된 그리드 클래스를 사용하여 양식에 추가하여 수평 레이아웃에서 양식 컨트롤의 레이블과 그룹을 정렬합니다 .form-horizontal( a일 필요는 없음 <form>). 그렇게 하면 .form-groups가 그리드 행처럼 동작하도록 변경되므로 .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>

지원되는 컨트롤

예제 양식 레이아웃에서 지원되는 표준 양식 컨트롤의 예입니다.

입력

가장 일반적인 양식 컨트롤, 텍스트 기반 입력 필드. 모든 HTML5 유형에 대한 지원 포함: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel및 color.

유형 선언 필요

type입력 은 적절하게 선언된 경우에만 완전히 스타일이 지정됩니다 .

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

입력 그룹

텍스트 기반 이전 및/또는 이후에 통합 텍스트 또는 버튼을 추가하려면 입력 그룹 구성 요소<input> 를 확인하십시오 .

텍스트 영역

여러 줄의 텍스트를 지원하는 양식 컨트롤입니다. rows필요에 따라 속성을 변경 합니다.

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

체크박스와 라디오

확인란은 목록에서 하나 또는 여러 옵션을 선택하기 위한 것이고 라디오는 여러 옵션 중에서 하나를 선택하기 위한 것입니다.

비활성화된 체크박스와 라디오가 지원되지만 부모의 호버에 "허용되지 않는" 커서를 제공 하려면 부모 , , 또는 에 클래스를 <label>추가해야 합니다 ..disabled.radio.radio-inline.checkbox.checkbox-inline

기본값(스택)


<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>

선택

Safari 및 Chrome과 같은 많은 기본 선택 메뉴에는 속성을 통해 수정할 수 없는 둥근 모서리가 있습니다 border-radius.

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

<select>속성 이 있는 컨트롤의 경우 기본적 multiple으로 여러 옵션이 표시됩니다.

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

정적 제어

양식 내에서 양식 레이블 옆에 일반 텍스트를 배치해야 하는 .form-control-static경우 <p>.

이메일@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 protected]</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>

이메일@example.com

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</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>

초점 상태

outline일부 양식 컨트롤 에서 기본 스타일을 제거 box-shadow하고 대신 에 적용합니다 :focus.

데모 :focus상태

위의 예제 입력은 설명서의 사용자 정의 스타일을 사용 :focus하여 .form-control.

비활성화 상태

disabled사용자 상호 작용을 방지하기 위해 입력에 부울 속성을 추가합니다 . 비활성화된 입력은 더 밝게 나타나고 not-allowed커서를 추가합니다.

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

비활성화된 필드 세트

disabled속성을 추가하여 한 번에 <fieldset>내의 모든 컨트롤을 비활성화합니다 .<fieldset>

링크 기능에 대한 주의 사항<a>

기본적으로 브라우저는 내부의 모든 기본 양식 컨트롤( 및 요소)을 비활성화된 것으로 처리 <input>하여 <select>키보드 <button>와 <fieldset disabled>마우스 상호 작용을 모두 방지합니다. 그러나 양식에 요소도 포함되어 있는 <a ... class="btn btn-*">경우 이러한 요소에는 의 스타일만 부여됩니다 pointer-events: none. 버튼의 비활성화 상태에 대한 섹션(특히 앵커 요소의 하위 섹션)에서 언급했듯이 이 CSS 속성은 아직 표준화되지 않았으며 Opera 18 이하 또는 Internet Explorer 11에서 완전히 지원되지 않습니다. '는 키보드 사용자가 이러한 링크에 집중하거나 활성화할 수 없도록 합니다. 따라서 안전을 위해 사용자 정의 JavaScript를 사용하여 이러한 링크를 비활성화하십시오.

브라우저 간 호환성

Bootstrap은 모든 브라우저에서 이러한 스타일을 적용하지만 Internet Explorer 11 이하 disabled에서는 <fieldset>. 사용자 정의 JavaScript를 사용하여 이러한 브라우저에서 필드 세트를 비활성화하십시오.

<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입력 값의 수정을 방지하기 위해 입력에 부울 속성을 추가합니다 . 읽기 전용 입력은 비활성화된 입력처럼 더 밝게 나타나지만 표준 커서는 유지됩니다.

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

도움말 텍스트

양식 컨트롤에 대한 블록 수준 도움말 텍스트입니다.

도움말 텍스트를 양식 컨트롤과 연결

aria-describedby도움말 텍스트는 속성 사용과 관련된 양식 컨트롤과 명시적으로 연결되어야 합니다 . 이렇게 하면 화면 판독기와 같은 보조 기술이 사용자가 컨트롤에 초점을 맞추거나 들어갈 때 이 도움말 텍스트를 알릴 수 있습니다.

새 줄로 분리되고 한 줄 이상으로 확장될 수 있는 도움말 텍스트 블록입니다. 
<label 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>

검증 상태

부트스트랩에는 양식 컨트롤의 오류, 경고 및 성공 상태에 대한 유효성 검사 스타일이 포함되어 있습니다. 사용하려면 상위 요소에 .has-warning, .has-error또는 를 추가하십시오 . 해당 요소 내의 .has-success모든 .control-label, .form-control및 는 유효성 검사 스타일을 받습니다..help-block

보조 기술 및 색맹 사용자에게 유효성 검사 상태 전달

이러한 유효성 검사 스타일을 사용하여 양식 컨트롤의 상태를 표시하는 것은 시각적인 색상 기반 표시만 제공하며 화면 판독기와 같은 보조 기술 사용자나 색맹 사용자에게는 전달되지 않습니다.

상태의 대체 표시도 제공되는지 확인하십시오. 예를 들어, 양식 컨트롤의 텍스트 자체에 상태에 대한 힌트를 포함하거나 <label>(다음 코드 예제의 경우와 같이), Glyphicon.sr-only 을 포함하거나( 클래스 를 사용하는 적절한 대체 텍스트 포함 - Glyphicon 예제 참조 ) 추가 도움말 텍스트 블록. 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" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</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">요소에서만 작동합니다.

아이콘, 레이블 및 입력 그룹

레이블이 없는 입력 과 오른쪽에 추가 기능이 있는 입력 그룹 의 경우 피드백 아이콘을 수동으로 배치해야 합니다. 접근성을 위해 모든 입력에 레이블을 제공하는 것이 좋습니다. 레이블이 표시되지 않도록 하려면 .sr-only클래스와 함께 레이블을 숨깁니다. 레이블 없이 해야 하는 top경우 피드백 아이콘의 값을 조정합니다. 입력 그룹의 경우 right애드온의 너비에 따라 값을 적절한 픽셀 값으로 조정합니다.

아이콘의 의미를 보조 기술에 전달

화면 판독기와 같은 보조 기술이 아이콘의 의미를 올바르게 전달하도록 하려면 추가 숨겨진 텍스트가 클래스에 포함되어야 하고 .sr-only클래스가 사용하는 것과 관련된 양식 컨트롤과 명시적으로 연결되어야 합니다 aria-describedby. <label>또는 의미(예: 특정 텍스트 입력 필드에 대한 경고가 있다는 사실)가 양식 컨트롤과 관련된 실제 텍스트를 변경하는 것과 같은 다른 형식으로 전달되도록 합니다 .

다음 예제에서는 이미 텍스트 자체에서 해당 양식 컨트롤의 유효성 검사 상태를 언급하지만 <label>위의 기술( .sr-only텍스트 및 aria-describedby)은 설명을 위해 포함되었습니다.

(성공)
(경고)
(오류)
@
(성공) 
<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>

가로 및 인라인 형식의 선택적 아이콘

(성공)
@
(성공) 
<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>
(성공)

@
(성공) 
<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숨겨진 레이블 이 있는 선택적 아이콘

속성 과 같은 다른 레이블 지정 옵션을 사용하는 대신 클래스를 사용하여 .sr-only양식 컨트롤을 숨기는 경우 Bootstrap은 아이콘이 추가되면 자동으로 아이콘의 위치를 ​​조정합니다.<label>aria-label

(성공)
@
(성공) 
<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>

버튼

버튼 태그

<a>, <button>또는 <input>요소 에서 버튼 클래스를 사용합니다 .

링크 
<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">

상황별 사용법

버튼 클래스는 <a>및 <button>요소에서 사용할 수 있지만 <button>nav 및 navbar 구성 요소 내에서는 요소만 지원됩니다.

버튼 역할을 하는 링크

<a>요소가 현재 페이지 내의 다른 문서나 섹션으로 이동하는 대신 페이지 내 기능을 트리거하는 버튼 역할을 하는 경우 적절한 role="button".

브라우저 간 렌더링

모범 사례로 가능하면 요소 를 사용하는 것이 좋습니다.<button> 으로 브라우저 간 렌더링 일치를 보장하기 위해

무엇보다도 Firefox <30 에는 - 기반 버튼 을 설정하지 못하게 하는 버그가 있어 Firefox 의 다른 버튼 높이와 정확히 일치하지 않습니다.line-height<input>

옵션

사용 가능한 버튼 클래스를 사용하여 스타일이 지정된 버튼을 빠르게 만듭니다.

<!-- 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>

활성 상태

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .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>

Anchor element

Add the .active class to <a> buttons.

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>

Disabled state

Make buttons look unclickable by fading them back with opacity.

Button element

Add the disabled attribute to <button> buttons.

<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>

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

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>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

Images

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

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

Image shapes

Add classes to an <img> element to easily style images in any project.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

140x140 140x140 140x140 
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Helper classes

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

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>

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

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>

Dealing with specificity

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

Close icon

Use the generic close icon for dismissing content like modals and alerts.

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

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

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

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

<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();
}

Not for use in navbars

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar docs for details.

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

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

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

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

<!-- 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();
}

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

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

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

Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

<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();
}

Image replacement

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.

<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
  .text-hide();
}

Responsive utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

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

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		Visible
.hidden-print Visible

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Test cases

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

Visible on...

Green checkmarks indicate the element is visible in your current viewport.

✔ x-small에서 볼 수 있음
✔ 작은 화면에서 볼 수 있음
Medium ✔ 매체에서 볼 수 있음
✔ Visible on large
✔ x-small 및 small에서 볼 수 있음
✔ Visible on medium and large
✔ x-small 및 medium에서 볼 수 있음
✔ Visible on small and large
✔ Visible on x-small and large
✔ 중소형에서 볼 수 있음

Hidden on...

Here, green checkmarks also indicate the element is hidden in your current viewport.

✔ x-small에 숨겨진
✔ 작은 곳에 숨겨져 있습니다.
Medium ✔ Hidden on medium
✔ Hidden on large
✔ Hidden on x-small and small
✔ Hidden on medium and large
✔ Hidden on x-small and medium
✔ Hidden on small and large
✔ Hidden on x-small and large
✔ Hidden on small and medium

Using Less

Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

Grid variables and mixins are covered within the Grid system section.

Compiling Bootstrap

Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.

Third party compilation tools may work with Bootstrap, but they are not supported by our core team.

Variables

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

Colors

Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

@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;

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding

A handful of variables for quickly customizing key elements of your site's skeleton.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Easily style your links with the right color with only one value.

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

// Usage
a {
  color: @link-color;
  text-decoration: none;

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

Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

Typography

Easily set your typeface, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.

@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;

Icons

Two quick variables for customizing the location and filename of your icons.

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

Components

Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.

@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;

Vendor mixins

Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.

Box-sizing

Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

The mixin is deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Rounded corners

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.

.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 (Drop) shadows

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.

The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.

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

Transitions

Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap 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;
}

Transformations

Rotate, scale, translate (move), or skew any object.

The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See 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 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          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 only
          transform-origin: @origin;
}

Animations

A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.

The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap 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;
}

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.

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

Placeholder text

Provide context for form controls within each field.

.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
}

Columns

Generate columns via CSS within a single element.

.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;
}

Gradients

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

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

You can also specify the angle of a standard two-color, linear gradient:

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

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

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

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

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

Heads up! 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;.

Utility mixins

Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.

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

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

Horizontal centering

Quickly center any element within its parent. Requires width or max-width to be set.

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

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

Sizing helpers

Specify the dimensions of an object more easily.

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

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

Resizable textareas

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

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

Truncating text

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

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

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

Retina images

Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

.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);
}

Using Sass

While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

What's included

Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

Path Description
lib/ Ruby gem code (Sass configuration, Rails and Compass integrations)
tasks/ Converter scripts (turning upstream Less to Sass)
test/ Compilation tests
templates/ 나침반 패키지 매니페스트
vendor/assets/ Sass, JavaScript 및 글꼴 파일
Rakefile 레이크 및 변환과 같은 내부 작업

Sass 포트의 GitHub 리포지토리 를 방문하여 이러한 파일이 실제로 작동하는지 확인하십시오.

설치

Sass용 Bootstrap을 설치하고 사용하는 방법에 대한 정보는 GitHub 저장소 readme 를 참조하십시오 . 최신 소스이며 Rails, Compass 및 표준 Sass 프로젝트와 함께 사용하기 위한 정보가 포함되어 있습니다.

Sass용 부트스트랩