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

HTML5 doctype

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

모바일 우선

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

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

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

반응형 이미지

부트스트랩3 에서 이미지는 .img-responsive 클래스의 추가로 반응형으로 만들 수 있습니다. 이것은 이미지에 max-width: 100%;height: auto; 을 적용하여 부모 요소에 맞추어 크기조절 됩니다.

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

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

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

CSS 초기화

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

.container

.container 로 콘텐츠를 감싸는 것으로 페이지의 콘텐츠를 쉽게 중앙으로 가져오세요. .container 는 우리의 그리드 시스템에 맞는 다양한 미디어 쿼리 분기점에서 max-width 가 설정되어 있습니다.

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

미디어 쿼리들

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

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

그리드 옵션들

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

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

예제: 쌓이는 것에서 수평으로

.col-md-* 그리드 클래스 세트 하나만 사용하는 것으로, 당신은 모바일과 태블릿 기기(매우 작은부터 작은)에서는 쌓이다가 데스크탑에서는 수평적으로 되는 간단한 그리드 시스템을 만들수 있다.

.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

예제: 모바일과 데스크탑

보다 작은 기기들에서 당신의 컬럼들이 간단하게 쌓이는 것을 원하세요? 당신의 컬럼에 .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

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

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

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-sm-6 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4
.col-xs-6 .col-sm-4 .col-md-4

반응형 컬럼 초기화

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

반응형 분기점에서 컬럼을 클리어하는 것과 더불어, 당신은 오프셋을 초기화 할 필요가 있습니다. 오프셋은 (두번째로)작은 그리드 등급에서부터 사용가능하므로, 이러한 초기화는 중간이나 큰 그리드 등급에서만 사용할 수 있습니다.

컬럼 오프셋하기

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

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

컬럼 중첩하기

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

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6

컬럼 순서정하기

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

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

LESS 믹스인과 변수들

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

변수들

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

믹스인

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

사용법 예제

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

제목

<h1> 부터 <h6> 까지 모든 제목 마크업이 가능합니다.

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px

또한 제목에는 <small> 요소를 넣을 수 있습니다. 제목에 작고, 연한색의 부가문구를 넣기 위해 사용하세요.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

본문

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

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

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

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

리드 문단

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

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

Less 변수

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

강조

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

작은 텍스트

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

This line of text is meant to be treated as fine print.

굵게

폰트를 굵게 하여 텍스트를 강조합니다.

The following snippet of text is rendered as bold text.

이탤릭체

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

The following snippet of text is rendered as italicized text.

선택가능한 요소들

HTML5 에서 <b><i> 는 마음대로 사용해도 됩니다. <b> 는 단어나 구를 강조하기 위해 쓰이나, <i> 는 거의 음성이나 기술적인 부분 등에 쓰입니다.

정렬 클래스

정렬 클래스로 쉽게 정렬하세요.

Left aligned text.

Center aligned text.

Right aligned text.

강조 클래스

소수의 강조 유틸리티 클래스로 색을 통해 의미를 전달하세요.

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.

약어

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

기본 약어

<abbr> 요소로 감싸고 title 속성을 추가하세요.

An abbreviation of the word attribute is attr.

두문자어

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

HTML is the best thing since sliced bread.

주소

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

인용구

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

기본 인용구

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

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

인용구 옵션

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

출처 표기

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

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

Someone famous in Source Title

표시 옵션

인용구를 오른쪽 정렬하려면 .pull-right 를 추가하세요.

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

Someone famous in Source Title

목록

순서없는

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

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

순서있는

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

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

스타일 없는

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

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

인라인

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

설명

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

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

수평 설명

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

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

자동 줄임

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

인라인

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

For example, <section> should be wrapped as inline.

기본 블록

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

<p>Sample text here...</p>

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

기본 예제

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

줄무늬 행

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

크로스브라우저 호환성

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

선있는 테이블

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

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter

행 hover

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

좁은폭 테이블

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

맥락적인 클래스들

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

클래스 설명
.active 특정한 행이나 셀에 hover 했을 때와 같은 색을 입힙니다.
.success 성공적이거나 긍정적인 액션을 의미합니다.
.warning 주의가 필요한 경고를 의미합니다.
.danger 위험하거나 부정적일수 있는 액션을 의미합니다.
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content

반응형 테이블

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

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

기본 예제

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

Example block-level help text here.

인라인 폼

조밀한 레이아웃을 위한 좌측 정렬된 inline-block 콘트롤을 위해 .form-inline 를 추가하세요.

맞춤 너비가 필요합니다.

부트스트랩에서 input, select, textarea 는 기본적으로 100% 너비입니다. 인라인 폼에서 사용하려면, 폼콘트롤에 너비를 설정해주어야 합니다.

항상 라벨을 추가하세요.

모든 input 을 위한 라벨이 없다면 스크린 리더는 문제가 생길 것입니다. 인라인 폼에서 당신은 .sr-only 클래스를 사용하여 라벨을 숨길 수 있습니다.

수평 폼

폼에 .form-horizontal 를 추가하여 수평 레이아웃을 만드세요. 이 안에서는 부트스트랩의 그리드 클래스를 사용하여 라벨과 폼콘트롤 그룹을 정렬합니다. 그리드행 역할은 .form-group 가 하기 때문에 .row 는 필요가 없습니다.

지원되는 콘트롤들

예제 폼에서 지원되는 표준 폼콘트롤의 예제들.

Input

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

타입 선언이 필요합니다.

Input 은 type 이 제대로 선언되었을 때 완전한 스타일이 적용될 것입니다..

Textarea

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

체크박스와 라디오

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

기본 (쌓이는)


인라인 체크박스

일련의 체크박스나 라디오를 같은 줄에 보이게 하려면 .checkbox-inline.radio-inline 클래스를 사용하세요.

셀렉트

기본 옵션을 사용하거나, 여러 옵션을 한번에 보여주기 위해 multiple 을 넣습니다.


정적 콘트롤

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

email@example.com

폼콘트롤 상태

기본 피드백 상태들로 사용자나 방문자에게 폼콘트롤과 라벨의 피드백을 제공합니다.

입력 포커스

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

입력 비활성화

사용자 입력을 막고 약간의 다른 모습을 적용하려면 input 에 disabled 속성을 추가하세요.

필드셋 비활성화

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

<a> 링크 기능성은 영향을 받지 않습니다.

이 클래스는 <a class="btn btn-default"> 버튼들의 기능성이 아닌 오직 모습만 변경합니다. 링크를 비활성화하려면 맞춤 자바스크립트를 사용하세요.

크로스브라우저 호환성

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

검사 상태들

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

폼콘트롤 크기조절

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

높이 조절

버튼 크기에 어울리는 좀더 크거나 작은 폼콘트롤을 만드세요.

컬럼 크기조절

쉽게 원하는 너비를 적용하려면, 그리드 컬럼이나 맞춤 상위 요소로 입력요소들을 감싸세요.

도움말

폼콘트롤을 위한 블록레벨의 도움말입니다.

A block of help text that breaks onto a new line and may extend beyond one line.

옵션

빠르게 스타일이 적용된 버튼을 만들기 위해 가능한 버튼 클래스들을 사용하세요.

크기

좀더 크거나 작은 버튼을 원하세요? 추가적인 크기조절을 위해 .btn-lg, .btn-sm, .btn-xs 를 추가하세요.

.btn-block 를 추가하여 블록레벨 버튼을 만드세요—이것은 상위 요소에 맞춰 너비를 꽉 채웁니다.

비활성화 상태

버튼을 50% 흐리게 만들어 클릭할 수 없는 것처럼 만듭니다.

버튼 요소

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

크로스브라우저 호환성

만약 당신이 <button>disabled 속성을 추가한다면, 인터넷 익스플로러 9 과 그 이하에서는 우리가 어쩔수 없는 회색 텍스트와 흉칙한 그림자가 그려질 것입니다.

앵커 요소

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

Primary link Link

우리는 .active 와 유사하게 보조클래스로서 .disabled 을 사용합니다, 그래서 접두사는 필요하지 않습니다.

링크 기능성은 영향을 받지 않습니다.

이 클래스는 <a> 의 기능성이 아닌 오직 모습만 변경합니다. 링크를 비활성화하려면 맞춤 자바스크립트를 사용하세요.

버튼 태그

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

Link

크로스브라우저 렌더링

모범적으로, 크로스브라우저 렌더링을 확실하게 하기 위해 우리는 가능한 <button> 요소를 사용하는 것을 매우 추천합니다.

여러가지가 있지만, 파이어폭스에서 <input> 기반 버튼의 line-height 설정으로 인하여 다른 버튼들과 높이가 정확하게 맞지않는 파이어폭스 버그 를 방지할수 있습니다.

<img> 요소에 이미지 스타일을 간편하게 추가하세요.

크로스브라우저 호환성

인터넷 익스플로러 8 에서는 둥근모서리가 지원되지 않음을 기억하세요.

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

반응형 이미지

이미지를 반응형으로 만드는 방법을 찾고 계세요? 문서 상단에서 반응형 이미지 섹션을 확인해주세요.

닫기 아이콘

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

간편한 float

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

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

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

.clearfix

.clearfix 클래스로 어느 요소의 float 을 클리어합니다. Nicolas Gallagher 에 의해 알려진 the micro clearfix 를 활용하였습니다. 또한 믹스인으로 사용되어집니다.

콘텐츠 보이기 그리고 숨기기

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

스크린리더 콘텐츠

.sr-only 사용으로 스크린리더에게만 예외로 모든 사용자들에게 요소를 숨기세요. 최적의 접근성 에 필요합니다. 또한 믹스인으로도 사용됩니다.

이미지 대체

.text-hide 클래스나 배경 이미지와 요소의 문자 콘텐츠를 대체하는 것을 돕기위한 믹스인을 활용하세요.

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

같은 사이트의 완전히 다른 버전을 만드는 것을 피하기 위해 제한적으로 이것들을 사용하는 것을 시도해 보세요. 대신, 각 기기의 표현을 보완하기 위해 사용하세요. 반응형 유틸리티는 현재 블록과 테이블 토글링을 위해 사용 가능합니다. 인라인과 테이블 요소의 사용은 현재 지원되지 않습니다.

가능한 클래스들

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

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

프린트 클래스

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

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

테스트 케이스

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

...에서 보이는

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

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

...에서 가려진

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

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