개요

더 우수하고 빠르며 강력한 웹 개발에 대한 접근 방식을 포함하여 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>

열 오프셋

.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 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 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 요소의 스타일화된 구현입니다 . 속성이 있는 약어 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>

인용구

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

기본 인용구

<blockquote>모든 HTML 을 인용문으로 감 쌉니다 . 직선 따옴표의 경우 <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 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>

검증 상태

부트스트랩에는 양식 컨트롤의 오류, 경고 및 성공 상태에 대한 유효성 검사 스타일이 포함되어 있습니다. 사용하려면 상위 요소에 .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>

활성 상태

활성화되면 버튼이 눌러진 것처럼 보입니다(더 어두운 배경, 더 어두운 테두리 및 삽입된 그림자 포함). <button>요소의 경우 를 통해 수행 됩니다 :active. <a>요소의 경우 로 완료 됩니다 .active. 그러나 프로그래밍 방식으로 활성 상태를 복제해야 하는 경우 .activeon <button>s(및 속성 포함 )를 사용할 수 있습니다.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>

앵커 요소

버튼 에 .active클래스를 추가 합니다.<a>

기본 링크 링크 

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

버튼 요소

버튼 에 disabled속성을 추가 합니다.<button>

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

브라우저 간 호환성

disabled속성을 에 추가하면 <button>Internet Explorer 9 이하에서는 수정할 수 없는 불쾌한 텍스트 그림자가 있는 텍스트를 회색으로 렌더링합니다.

앵커 요소

버튼 에 .disabled클래스를 추가 합니다.<a>

기본 링크 링크 

<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하므로 접두사가 필요하지 않습니다.

링크 기능 주의 사항

이 클래스는 s pointer-events: none의 링크 기능을 비활성화하는 데 사용 <a>하지만 해당 CSS 속성은 아직 표준화되지 않았으며 Opera 18 이하 또는 Internet Explorer 11에서 완전히 지원되지 않습니다. 또한 pointer-events: none, 키보드 를 지원하는 브라우저에서도 탐색은 영향을 받지 않은 상태로 유지됩니다. 즉, 시각 키보드 사용자와 보조 기술 사용자는 여전히 이러한 링크를 활성화할 수 있습니다. 따라서 안전을 위해 사용자 정의 JavaScript를 사용하여 이러한 링크를 비활성화하십시오.

이미지

반응형 이미지

Bootstrap 3의 이미지는 .img-responsive클래스를 추가하여 반응형으로 만들 수 있습니다. 이는 max-width: 100%;, height: auto;및 display: block;이미지에 적용되어 상위 요소에 맞게 조정됩니다.

.img-responsive클래스 를 사용하는 이미지를 가운데에 맞추려면 .center-block대신 을 사용하십시오 .text-center. 사용법 에 대한 자세한 내용 은 도우미 클래스 섹션 을 참조하세요..center-block

SVG 이미지 및 IE 8-10

Internet Explorer 8-10에서 SVG 이미지의 .img-responsive크기는 불균형합니다. 이 문제를 해결하려면 width: 100% \9;필요한 곳에 추가하세요. 부트스트랩은 다른 이미지 형식에 문제를 일으킬 수 있으므로 이를 자동으로 적용하지 않습니다.

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

이미지 모양

요소에 클래스를 추가 <img>하여 모든 프로젝트에서 이미지의 스타일을 쉽게 지정할 수 있습니다.

브라우저 간 호환성

Internet Explorer 8은 둥근 모서리를 지원하지 않습니다.

140x140 140x140 140x140 
<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 commododo 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 commododo 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>

캐럿

캐럿을 사용하여 드롭다운 기능과 방향을 나타냅니다. 기본 캐럿은 드롭업 메뉴 에서 자동으로 반전됩니다 .

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

빠른 수레

클래스를 사용하여 요소를 왼쪽이나 오른쪽으로 띄웁니다. !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대신 사용하십시오. 자세한 내용은 navbar 문서 를 참조하십시오.

중앙 콘텐츠 블록

요소를 로 설정하고 display: block를 통해 가운데로 설정합니다 margin. 믹스인 및 클래스로 사용 가능합니다.

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

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

클리어픽스

상위 요소float 에 추가하여 s를 쉽게 지웁니다 . Nicolas Gallagher가 대중화한 micro clearfix 를 사용합니다. 믹스인으로도 사용할 수 있습니다..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();
}

콘텐츠 표시 및 숨기기

및 클래스 를 사용 하여 요소를 강제로 표시하거나 숨깁니다( 화면 판독기용 포함 ). 이러한 클래스 는 빠른 float 처럼 특정성 충돌을 피하기 위해 사용합니다 . 블록 레벨 토글에만 사용할 수 있습니다. 믹스인으로도 사용할 수 있습니다..show.hidden!important

.hide사용할 수 있지만 항상 화면 판독기에 영향을 미치는 것은 아니며 v3.0.1부터 더 이상 사용되지 않습니다 . .hidden또는 .sr-only대신 사용하십시오 .

또한 .invisible요소의 가시성만 토글하는 데 사용할 수 있습니다. 즉, 요소 display가 수정되지 않고 요소가 여전히 문서의 흐름에 영향을 미칠 수 있습니다.

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

스크린 리더 및 키보드 탐색 콘텐츠

가 있는 스크린 리더 를 제외한 모든 장치에서 요소를 숨깁니다 .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>
// Usage as a mixin
.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-*-*각 중단점에 대한 클래스는 아래 나열된 각 CSS display속성 값에 대해 하나씩 세 가지 변형이 있습니다.

수업 그룹 CSSdisplay
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

따라서, 예를 들어 초소형( xs) 화면의 경우 사용 가능한 .visible-*-*클래스는 .visible-xs-block, .visible-xs-inline및 .visible-xs-inline-block입니다.

클래스 .visible-xs, .visible-sm, .visible-md및 .visible-lg도 존재하지만 v3.2.0부터 더 이상 사용되지 않습니다 . 토글 관련 요소 .visible-*-block에 대한 추가 특수 경우를 제외하고는 와 거의 동일합니다 .<table>

인쇄 수업

일반 반응형 클래스와 유사하게 콘텐츠를 인쇄용으로 전환하는 데 사용합니다.

클래스 브라우저 인쇄
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		보이는
.hidden-print 보이는

클래스 .visible-print도 존재하지만 v3.2.0부터 더 이상 사용되지 않습니다 . 관련 요소 .visible-print-block에 대한 추가 특수 경우를 제외하고는 와 거의 동일합니다 .<table>

테스트 케이스

브라우저의 크기를 조정하거나 다른 장치에서 로드하여 반응형 유틸리티 클래스를 테스트합니다.

에 보이는...

녹색 체크 표시는 요소 가 현재 뷰포트에 표시됨을 나타냅니다.

✔ x-small에서 볼 수 있음
✔ 작은 화면에서 볼 수 있음
중간 ✔ 매체에서 볼 수 있음
✔ 크게 볼 수 있음
✔ x-small 및 small에서 볼 수 있음
✔ 중형 및 대형에서 볼 수 있음
✔ x-small 및 medium에서 볼 수 있음
✔ 크고 작은 화면에서 볼 수 있습니다.
✔ x-small 및 large에서 볼 수 있음
✔ 중소형에서 볼 수 있음

숨겨진...

여기에서 녹색 체크 표시는 요소 가 현재 뷰포트에 숨겨져 있음을 나타냅니다.

✔ x-small에 숨겨진
✔ 작은 곳에 숨겨져 있습니다.
중간 ✔ 매체에 숨겨진
✔ 크게 숨겨져 있음
✔ x-small 및 small에 숨겨진
✔ 중형 및 대형에 숨겨진
✔ Hidden on x-small and medium
✔ 크고 작은 숨겨진
✔ x-small 및 large에 숨겨져 있습니다.
✔ Hidden on small and medium

적게 사용

Bootstrap의 CSS는 CSS 컴파일을 위한 변수, 믹스인 및 함수와 같은 추가 기능이 있는 전처리기인 Less를 기반으로 합니다. 컴파일된 CSS 파일 대신 소스 Less 파일을 사용하려는 사람들은 프레임워크 전체에서 사용하는 수많은 변수와 믹스인을 사용할 수 있습니다.

그리드 변수와 믹스인은 그리드 시스템 섹션에서 다룹 니다.

부트스트랩 컴파일

부트스트랩은 컴파일된 CSS와 소스 Less 파일의 두 가지 방법으로 사용할 수 있습니다. Less 파일을 컴파일하려면 시작하기 섹션을 참조하십시오. 에서 필요한 명령을 실행하도록 개발 환경을 설정하는 방법을 참조하십시오.

타사 컴파일 도구는 Bootstrap과 함께 작동할 수 있지만 핵심 팀에서는 지원하지 않습니다.

변수

변수는 색상, 간격 또는 글꼴 스택과 같이 일반적으로 사용되는 값을 중앙 집중화하고 공유하는 방법으로 전체 프로젝트에서 사용됩니다. 전체 분석은 커스터마이저를 참조 하십시오 .

그림 물감

그레이스케일과 시맨틱의 두 가지 색 구성표를 쉽게 사용할 수 있습니다. 회색조 색상은 일반적으로 사용되는 검은색 음영에 대한 빠른 액세스를 제공하는 반면 의미론에는 의미 있는 컨텍스트 값에 할당된 다양한 색상이 포함됩니다.

@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 as-is
.masthead {
  background-color: @brand-primary;
}

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

발판

사이트 골격의 핵심 요소를 빠르게 사용자 정의하기 위한 소수의 변수.

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

단 하나의 값으로 올바른 색상으로 링크의 스타일을 쉽게 지정하십시오.

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

@link-hover-colorLess의 또 다른 멋진 도구인 기능을 사용하여 올바른 호버 색상을 자동으로 생성합니다 . 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에 모든 관련 공급업체 접두사를 포함하여 여러 브라우저를 지원하는 데 도움이 되는 믹스인입니다.

상자 크기

단일 믹스인으로 구성 요소의 상자 모델을 재설정합니다. 문맥 은 Mozilla의 이 유용한 기사를 참조하십시오 .

믹스인은 Autoprefixer의 도입과 함께 v3.2.0부터 더 이상 사용되지 않습니다 . 이전 버전과의 호환성을 유지하기 위해 Bootstrap은 Bootstrap v4까지 내부적으로 믹스인을 계속 사용합니다.

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

둥근 모서리

오늘날 모든 최신 브라우저는 접두사가 없는 border-radius속성을 지원합니다. 따라서 .border-radius()믹스인은 없지만 Bootstrap에는 개체의 특정 면에서 두 모서리를 빠르게 둥글게 하는 단축키가 포함되어 있습니다.

.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속성을 단독으로 사용하십시오. 이전 Android(v4 이전) 및 iOS 장치(iOS 5 이전)에 대한 지원이 필요한 경우 더 이상 사용되지 않는 mixin을 사용하여 필요한-webkit 접두사를 선택하세요.

믹스인은 더 이상 사용되지 않습니다부트스트랩은 표준 속성을 지원하지 않는 오래된 플랫폼을 공식적으로 지원하지 않기 때문에이전 버전과의 호환성을 유지하기 위해 Bootstrap은 Bootstrap 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부터 더 이상 사용되지 않습니다 . 이전 버전과의 호환성을 유지하기 위해 Bootstrap은 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;
}

변환

개체를 회전, 크기 조정, 변환(이동) 또는 기울이십시오.

믹스인은 Autoprefixer의 도입과 함께 v3.2.0부터 더 이상 사용되지 않습니다 . 이전 버전과의 호환성을 유지하기 위해 Bootstrap은 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;
}

애니메이션

하나의 선언에서 CSS3의 모든 애니메이션 속성을 사용하고 개별 속성에 대해 다른 믹스인을 사용하기 위한 단일 믹스인.

믹스인은 Autoprefixer의 도입과 함께 v3.2.0부터 더 이상 사용되지 않습니다 . 이전 버전과의 호환성을 유지하기 위해 Bootstrap은 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;
}

불투명

모든 브라우저에 대해 불투명도를 설정하고 filterIE8에 대한 대체를 제공합니다.

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

그라디언트

두 가지 색상을 배경 그라디언트로 쉽게 바꿀 수 있습니다. 더 발전하여 방향을 설정하거나 세 가지 색상을 사용하거나 방사형 그라디언트를 사용하십시오. 단일 믹스인으로 필요한 모든 접두어 구문을 얻을 수 있습니다.

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

표준 2색 선형 그라디언트의 각도를 지정할 수도 있습니다.

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

이발사 줄무늬 스타일 그라디언트가 필요한 경우에도 쉽습니다. 단일 색상을 지정하기만 하면 반투명 흰색 줄무늬가 오버레이됩니다.

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

앤티를 높이고 대신 세 가지 색상을 사용하십시오. 다음 믹스인을 사용하여 첫 번째 색상, 두 번째 색상, 두 번째 색상의 색상 정지점(25%와 같은 백분율 값) 및 세 번째 색상을 설정합니다.

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

머리! 그래디언트를 제거해야 하는 filter경우 추가했을 수 있는 IE 관련 항목을 모두 제거해야 합니다. .reset-filter()믹스인을 함께 사용하여 그렇게 할 수 있습니다 background-image: none;.

유틸리티 믹스인

유틸리티 믹스인은 특정 목표나 작업을 달성하기 위해 관련이 없는 CSS 속성을 결합하는 믹스인입니다.

클리어픽스

요소에 추가하는 것을 잊어버리고 class="clearfix"대신 .clearfix()적절한 곳에 믹스인을 추가하십시오. Nicolas Gallagher 의 마이크로 클리어픽스 를 사용합니다 .

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

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

수평 센터링

부모 내의 모든 요소를 ​​빠르게 중앙에 배치합니다. 또는 설정 width해야 max-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;
}

텍스트 자르기

단일 믹스인으로 줄임표가 있는 텍스트를 쉽게 자릅니다. 요소가 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();
}

망막 이미지

두 개의 이미지 경로와 @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 사용하기

Bootstrap은 Less를 기반으로 하지만 공식 Sass 포트 도 있습니다. 별도의 GitHub 리포지토리에서 유지 관리하고 변환 스크립트로 업데이트를 처리합니다.

포함된 항목

Sass 포트에는 별도의 저장소가 있고 약간 다른 청중을 지원하기 때문에 프로젝트의 내용은 기본 Bootstrap 프로젝트와 크게 다릅니다. 이렇게 하면 Sass 포트가 가능한 한 많은 Sass 기반 시스템과 호환됩니다.

길 설명
lib/ Ruby gem 코드(Sass 구성, Rails 및 Compass 통합)
tasks/ 변환기 스크립트(업스트림 Less를 Sass로 전환)
test/ 컴파일 테스트
templates/ 나침반 패키지 매니페스트
vendor/assets/ Sass, JavaScript 및 글꼴 파일
Rakefile 레이크 및 변환과 같은 내부 작업

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

설치

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

Sass용 부트스트랩