제목

모든 HTML 제목 <h1>을 <h6>사용할 수 있습니다.

h1. 제목 1

h2. 제목 2

h3. 제목 3

h4. 제목 4

h5. 제목 5

h6. 제목 6

본문

부트스트랩의 전역 기본값 font-size은 14px 이고 a line-height는 20px 입니다. 이는 <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 클래스 = "리드" > ... </p>

적은 비용으로 구축

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

중요성

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

`<small>`

인라인 또는 텍스트 블록을 강조하지 않으 려면 작은 태그를 사용하십시오.

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

<p> <small> 이 텍스트 줄은 작은 글씨로 취급됩니다. </작은> </p>

용감한

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

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

<strong> 굵은 텍스트로 렌더링 </strong>

기울임꼴

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

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

<em> 기울임꼴 텍스트로 렌더링 </em>

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

정렬 클래스

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

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

가운데 정렬된 텍스트.

오른쪽 정렬된 텍스트.

<p class = "text-left" > 왼쪽 정렬된 텍스트. </p> 
<p class = "text-center" > 가운데 정렬된 텍스트입니다. </p> 
<p class = "text-right" > 오른쪽 정렬된 텍스트. </p>

강조 수업

소수의 강조 유틸리티 클래스를 사용하여 색상을 통해 의미를 전달합니다.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

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

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commododo luctus, nisi erat porttitor ligula. </p>

약어

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

`<abbr>`

약어를 길게 가리킬 때 확장된 텍스트의 경우 title속성을 포함합니다.

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

<abbr 제목 = "속성" > 속성 </abbr >

`<abbr class="initialism">`

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

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

<abbr 제목 = "HyperText 마크업 언어" 클래스 = "초기주의" > HTML </abbr>

구애

가장 가까운 조상 또는 전체 업무에 대한 연락처 정보를 제시하십시오.

`<address>`

모든 줄을 <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 전화
: (123) 456-7890

성명
[email protected]

<주소>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, 스위트 600 <br>
  샌프란시스코, CA 94107 <br>
  <abbr title = "전화" > 전화 : </abbr> (123) 456-7890 
</주소>
 
<주소>
  <strong> 성명 </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</주소>

인용구

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

기본 인용구

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

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

<블록 인용>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
</blockquote>

인용 부호 옵션

표준 블록 인용에 대한 간단한 변형에 대한 스타일 및 내용 변경.

소스 이름 지정

<small>소스를 식별하기 위한 태그를 추가 합니다. 소스 작업의 이름을 <cite>.

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.
Source Title 에서 유명한 사람

<블록 인용>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante. </p>
  <small> 유명한 사람 <cite title = "Source Title" > 출처 제목 </cite></small> 
</blockquote>

대체 디스플레이

.pull-right부동, 오른쪽 정렬 블록 인용에 사용 합니다.

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.
Source Title 에서 유명한 사람

<blockquote 클래스 = "당기기" > 
  ...
</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

<울>
  <li> ... </li>
</ul>

주문

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

Lorem ipsum dolor sitmet
Consectetur adipiscing 엘리트
정수 molestie lorem at massa
Pretium nisl aliquet의 시설
눌라 볼룻팟 알리콰암 벨릿
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<올>
  <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 클래스 = "스타일이 지정되지 않은" > 
  <li> ... </li>
</ul>

인라인

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

로렘 입숨
파셀루스 이아쿨리스
Nulla volutpat

<ul 클래스 = "인라인" > 
  <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>나란히 정렬하십시오.

설명 목록: 설명 목록은 용어를 정의하는 데 적합합니다.
유이스모드: 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 클래스 = "dl-수평" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

머리!수평 설명 목록은 너무 길어서 왼쪽 열 수정에 맞지 않는 용어를 자릅니다 text-overflow. 더 좁은 뷰포트에서는 기본 스택 레이아웃으로 변경됩니다.

인라인

코드의 인라인 스니펫을 <code>.

예를 들어 <section>인라인으로 래핑해야 합니다.

예를 들어 , <코드> & lt ; 섹션 & gt ;</ code > 는 인라인 으로 래핑되어야 합니다 .

기본 블록

<pre>여러 줄의 코드에 사용 합니다. 적절한 렌더링을 위해 코드에서 꺾쇠 괄호를 이스케이프 처리해야 합니다.

<p>여기에 샘플 텍스트...</p>

<사전>
  <p>샘플 텍스트는 여기...</p>
</pre>

머리!태그 내의 코드 <pre>를 가능한 한 왼쪽에 가깝게 유지해야 합니다. 모든 탭을 렌더링합니다.

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

기본 스타일

기본 스타일(가벼운 패딩 및 가로 구분선만)의 경우 기본 클래스 .table를 any 에 추가합니다 <table>.

#	이름	성	사용자 이름
1	표시	장미유	@mdo
2	야곱	손튼	@지방
삼	래리	새	@트위터

<테이블 클래스 = "테이블" > 
  …
</표>

선택 수업

.table기본 클래스 에 다음 클래스를 추가합니다 .

`.table-striped`

<tbody>CSS 선택기 를 통해 테이블 행에 얼룩말 줄무늬를 추가합니다 :nth-child(IE7-8에서는 사용할 수 없음).

#	이름	성	사용자 이름
1	표시	장미유	@mdo
2	야곱	손튼	@지방
삼	래리	새	@트위터

<테이블 클래스 = "테이블 테이블 스트라이프" > 
  …
</표>

`.table-bordered`

테이블에 테두리와 둥근 모서리를 추가합니다.

#	이름	성	사용자 이름
1	표시	장미유	@mdo
1	표시	장미유	@getbootstrap
2	야곱	손튼	@지방
삼	래리 버드		@트위터

<테이블 클래스 = "테이블 테이블 테두리" > 
  …
</표>

`.table-hover`

. 안의 테이블 행에서 마우스 오버 상태를 활성화합니다 <tbody>.

#	이름	성	사용자 이름
1	표시	장미유	@mdo
2	야곱	손튼	@지방
삼	래리 버드		@트위터

<테이블 클래스 = "테이블 테이블 호버" > 
  …
</표>

`.table-condensed`

셀 패딩을 반으로 잘라 테이블을 더 컴팩트하게 만듭니다.

#	이름	성	사용자 이름
1	표시	장미유	@mdo
2	야곱	손튼	@지방
삼	래리 버드		@트위터

<테이블 클래스 = "테이블 테이블 압축" > 
  …
</표>

선택적 행 클래스

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

수업	설명
`.success`	성공 또는 긍정적인 작업을 나타냅니다.
`.error`	위험하거나 잠재적으로 부정적인 행동을 나타냅니다.
`.warning`	주의가 필요할 수 있는 경고를 나타냅니다.
`.info`	기본 스타일의 대안으로 사용됩니다.

#	제품	지불 완료	상태
1	결핵 - 월간	2012년 01월 4일	승인됨
2	결핵 - 월간	2012년 2월 4일	거부됨
삼	결핵 - 월간	2012년 3월 4일	보류 중
4	결핵 - 월간	2012년 4월 4일	확인 전화

...
  < tr 클래스 = "성공" >
    <td> 1 < /td>
    <td>TB - 월간</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>승인됨</ td >
  </ tr >
...

지원되는 테이블 마크업

지원되는 테이블 HTML 요소 목록 및 사용 방법.

꼬리표	설명
`<table>`	데이터를 표 형식으로 표시하기 위한 래핑 요소
`<thead>`	`<tr>`테이블 열에 레이블을 지정하기 위한 테이블 헤더 행( )의 컨테이너 요소
`<tbody>`	`<tr>`테이블 본문의 테이블 행( )에 대한 컨테이너 요소
`<tr>`	단일 행에 나타나는 테이블 셀 세트( `<td>`또는 )에 대한 컨테이너 요소`<th>`
`<td>`	기본 테이블 셀
`<th>`	열(또는 범위 및 배치에 따라 행) 레이블에 대한 특수 테이블 셀
`<caption>`	화면 판독기에 특히 유용한 테이블에 대한 설명 또는 요약

<표>
  <캡션> ... </캡션>
  <머리>
    <tr>
      <일> ... </th>
      <일> ... </th>
    </tr>
  </thead>
  <바디>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </t바디>
</표>

기본 스타일

개별 양식 컨트롤은 스타일 지정을 받지만 <form>마크업에 대한 필수 기본 클래스나 큰 변경 사항이 없습니다. 양식 컨트롤 위에 누적된 왼쪽 정렬 레이블이 생성됩니다.

<형태>
  <필드셋>
    <범례> 범례 </범례>
    <label> 레이블 이름 </label>
    <입력 유형 = "텍스트" 자리 표시자 = "무언가 입력..." >  
    <span class = "help-block" > 블록 수준 도움말 텍스트의 예는 여기에 있습니다. </span> 
    <레이블 클래스 = "체크박스" > 
      <입력 유형 = "확인란" > 확인 
    </레이블>
    <버튼 유형 = "제출" 클래스 = "btn" > 제출 </button>  
  </필드셋>
</form>

선택적 레이아웃

Bootstrap에는 일반적인 사용 사례를 위한 세 가지 선택적 양식 레이아웃이 포함되어 있습니다.

검색 양식

추가 둥근 텍스트 입력을 위해 .form-search양식과 .search-query에 추가하십시오.<input>

<양식 클래스 = "양식 검색" > 
  <입력 유형 = "텍스트" 클래스 = "입력 매체 검색 쿼리" >  
  <버튼 유형 = "제출" 클래스 = "btn" > 검색 </button>  
</form>

인라인 양식

.form-inline컴팩트 레이아웃을 위한 왼쪽 정렬 레이블 및 인라인 블록 컨트롤을 추가 합니다.

<양식 클래스 = "양식 인라인" > 
  <입력 유형 = "텍스트" 클래스 = "작은 입력" 자리 표시자 = "이메일" >   
  <입력 유형 = "암호" 클래스 = "작은 입력" 자리 표시자 = "암호" >   
  <레이블 클래스 = "체크박스" > 
    <input type = "checkbox" > 기억하기 
  </레이블>
  <button type = "submit" class = "btn" > 로그인 </button>  
</form>

가로 형태

레이블을 오른쪽 정렬하고 왼쪽으로 띄우면 컨트롤과 같은 줄에 표시됩니다. 기본 양식에서 가장 많은 마크업 변경이 필요합니다.

.form-horizontal양식에 추가
레이블 및 컨트롤 줄 바꿈.control-group
.control-label레이블에 추가
.controls적절한 정렬을 위해 연결된 모든 컨트롤을 래핑합니다.

<양식 클래스 = "양식 수평" > 
  <div 클래스 = "제어 그룹" > 
    <label class = "control-label" for = "inputEmail" > 이메일 </label>  
    <div 클래스 = "컨트롤" > 
      <입력 유형 = "텍스트" id = "inputEmail" 자리 표시자 = "이메일" >   
    </div>
  </div>
  <div 클래스 = "제어 그룹" > 
    <label class = "control-label" for = "inputPassword" > 비밀번호 </label>  
    <div 클래스 = "컨트롤" > 
      <입력 유형 = "비밀번호" id = "입력비밀번호 " 자리 표시자 = "비밀번호" >   
    </div>
  </div>
  <div 클래스 = "제어 그룹" > 
    <div 클래스 = "컨트롤" > 
      <레이블 클래스 = "체크박스" > 
        <input type = "checkbox" > 기억하기 
      </레이블>
      <button type = "submit" class = "btn" > 로그인 </button>  
    </div>
  </div>
</form>

지원되는 양식 컨트롤

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

입력

가장 일반적인 양식 컨트롤, 텍스트 기반 입력 필드. 텍스트, 비밀번호, 날짜/시간, 날짜/현지, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화번호, 색상 등 모든 HTML5 유형에 대한 지원을 포함합니다.

type항상 지정된 사용이 필요합니다 .

<입력 유형 = "텍스트" 자리 표시자 = "텍스트 입력" >

텍스트 영역

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

<텍스트 영역 행 = "3" ></textarea>

체크박스와 라디오

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

기본값(스택)

<레이블 클래스 = "체크박스" > 
  <입력 유형 = "확인란" 값 = "" >  
  옵션 1은 이것과 저것입니다. 이것이 왜 훌륭한지 포함해야 합니다.
</레이블>
 
<레이블 클래스 = "라디오" > 
  <입력 유형 = "라디오" 이름 = "optionsRadios" id = "optionsRadios1" 값 = "option1" 선택됨 >     
  옵션 1은 이것과 저것입니다. 이것이 왜 훌륭한지 포함해야 합니다.
</레이블>
<레이블 클래스 = "라디오" > 
  <입력 유형 = "라디오" 이름 = "optionsRadios" id = "optionsRadios2" 값 = "option2" >    
  옵션 2는 다른 것일 수 있으며 이를 선택하면 옵션 1이 선택 해제됩니다.
</레이블>

인라인 체크박스

.inline일련의 확인란에 클래스를 추가 하거나 컨트롤에 대한 라디오가 같은 줄에 표시됩니다.

<label class = "체크박스 인라인" > 
  <입력 유형 = "checkbox" id = "inlineCheckbox1" 값 = "option1" > 1   
</레이블>
<label class = "체크박스 인라인" > 
  <입력 유형 = "checkbox" id = "inlineCheckbox2" 값 = "option2" > 2   
</레이블>
<label class = "체크박스 인라인" > 
  <입력 유형 = "checkbox" id = "inlineCheckbox3" 값 = "option3" > 3   
</레이블>

선택

기본 옵션을 사용하거나 multiple="multiple"한 번에 여러 옵션을 표시하도록 지정합니다.

<선택>
  <옵션> 1 </옵션>
  <옵션> 2 </옵션>
  <옵션> 3 </옵션>
  <옵션> 4 </옵션>
  <옵션> 5 </옵션>
</select>
 
< 여러 개 선택 = "여러 개" > 
  <옵션> 1 </옵션>
  <옵션> 2 </옵션>
  <옵션> 3 </옵션>
  <옵션> 4 </옵션>
  <옵션> 5 </옵션>
</select>

폼 컨트롤 확장

기존 브라우저 컨트롤 위에 추가하는 Bootstrap에는 다른 유용한 양식 구성 요소가 포함되어 있습니다.

추가 입력 및 추가 입력

텍스트 기반 입력 전후에 텍스트 또는 버튼을 추가합니다. 요소 select는 여기에서 지원되지 않습니다.

기본 옵션

.add-onand 를 두 클래스 중 하나로 감싸서 input입력에 텍스트를 추가하거나 추가합니다.

<div 클래스 = "입력 앞에 추가" > 
  <스팬 클래스 = "추가 기능" > @ </span> 
  <입력 클래스 = "span2" id = "prependedInput" 유형 = "텍스트" 자리 표시자 = "사용자 이름" >    
</div>
<div 클래스 = "입력-추가" > 
  <입력 클래스 = "span2" id = "appendedInput" 유형 = " 텍스트" >   
  <스팬 클래스 = "추가 기능" > .00 </span> 
</div>

결합

.add-on입력을 앞에 추가하고 추가하려면 클래스와 의 두 인스턴스를 모두 사용하십시오 .

<div 클래스 = "입력-앞에 추가-입력-추가" > 
  <span 클래스 = "추가 기능" > $ </span> 
  <입력 클래스 = "span2" id = "appendedPrependedInput" 유형 = " 텍스트" >   
  <스팬 클래스 = "추가 기능" > .00 </span> 
</div>

텍스트 대신 버튼

<span>텍스트 가 있는 대신 을 사용 .btn하여 버튼(또는 두 개)을 입력에 연결합니다.

<div 클래스 = "입력-추가" > 
  <입력 클래스 = "span2" id = "appendedInputButton" 유형 = " 텍스트" >   
  <버튼 클래스 = "btn" 유형 = "버튼" > Go! </버튼>  
</div>

<div 클래스 = "입력-추가" > 
  <입력 클래스 = "span2" id = "appendedInputButtons" 유형 = " 텍스트" >   
  <버튼 클래스 = "btn" 유형 = "버튼" > 검색 </button>  
  <버튼 클래스 = "btn" 유형 = "버튼" > 옵션 </button>  
</div>

버튼 드롭다운

<div 클래스 = "입력-추가" > 
  <입력 클래스 = "span2" id = "appendedDropdownButton" 유형 = " 텍스트" >   
  <div 클래스 = "btn-group" > 
    <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >  
      동작
      <span 클래스 = "캐럿" ></span> 
    </버튼>
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </div>
</div>

<div 클래스 = "입력 앞에 추가" > 
  <div 클래스 = "btn-group" > 
    <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >  
      동작
      <span 클래스 = "캐럿" ></span> 
    </버튼>
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </div>
  <입력 클래스 = "span2" id = "prependedDropdownButton" 유형 = "텍스트" >   
</div>

<div 클래스 = "입력-앞에 추가-입력-추가" > 
  <div 클래스 = "btn-group" > 
    <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >  
      동작
      <span 클래스 = "캐럿" ></span> 
    </버튼>
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </div>
  <입력 클래스 = "span2" id = "appendedPrependedDropdownButton" 유형 = " 텍스트" >   
  <div 클래스 = "btn-group" > 
    <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >  
      동작
      <span 클래스 = "캐럿" ></span> 
    </버튼>
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </div>
</div>

세분화된 드롭다운 그룹

<형태>
  <div 클래스 = "입력 앞에 추가" > 
    <div 클래스 = "btn-group" > ... </div> 
    <입력 유형 = "텍스트" > 
  </div>
  <div 클래스 = "입력-추가" > 
    <입력 유형 = "텍스트" > 
    <div 클래스 = "btn-group" > ... </div> 
  </div>
</form>

검색 양식

<양식 클래스 = "양식 검색" > 
  <div 클래스 = "입력-추가" > 
    <입력 유형 = "텍스트" 클래스 = "span2 검색어" >  
    <버튼 유형 = "제출" 클래스 = "btn" > 검색 </button>  
  </div>
  <div 클래스 = "입력 앞에 추가" > 
    <버튼 유형 = "제출" 클래스 = "btn" > 검색 </button>  
    <입력 유형 = "텍스트" 클래스 = "span2 검색어" >  
  </div>
</form>

크기 조절

.input-large클래스 를 사용하여 그리드 열 크기와 같거나 입력을 일치시키는 상대 크기 조정 클래스 를 사용 .span*합니다.

블록 레벨 입력

any <input>또는 <textarea>요소가 블록 수준 요소처럼 작동하도록 합니다.

<입력 클래스 = "입력 블록 수준" 유형 = "텍스트" 자리 표시자 = ".입력 블록 수준" >

상대적 크기

<input class = "input-mini" 유형 = "text" 자리 표시자 = ".input-mini" >   
<input class = "input-small" 유형 = "text" 자리 표시자 = ".input-small" >   
<입력 클래스 = "입력 매체" 유형 = "텍스트" 자리 표시자 = ".입력 매체" >   
<input class = "input-large" 유형 = "text" 자리 표시자 = ".input-large" >   
<입력 클래스 = "input-xlarge" 유형 = "텍스트" 자리 표시자 = ".input-xlarge" >   
<입력 클래스 = "input-xxlarge" 유형 = "텍스트" 자리 표시자 = ".input-xxlarge" >

머리!향후 버전에서는 이러한 상대 입력 클래스의 사용을 버튼 크기와 일치하도록 변경할 것입니다. 예를 들어, .input-large입력의 패딩과 글꼴 크기를 늘립니다.

그리드 크기 조정

동일한 크기의 그리드 열과 일치하는 입력에 사용 .span1합니다 ..span12

<입력 클래스 = "span1" 유형 = "텍스트" 자리 표시자 = ".span1" >   
<입력 클래스 = "span2" 유형 = "텍스트" 자리 표시자 = ".span2" >   
<입력 클래스 = "span3" 유형 = "텍스트" 자리 표시자 = ".span3" >   
< 클래스 선택 = "span1" > 
  ...
</select>
< 클래스 선택 = "span2" > 
  ...
</select>
< 클래스 선택 = "span3" > 
  ...
</select>

한 줄에 여러 그리드 입력 의 경우 적절한 간격을 위해 수정자 클래스를 사용합니다.controls-row . 공백을 축소하기 위해 입력을 띄우고 적절한 여백을 설정하고 부동 소수점을 지웁니다.

<div 클래스 = "컨트롤" > 
  <입력 클래스 = "span5" 유형 = "텍스트" 자리 표시자 = ".span5" >   
</div>
<div class = "controls-row" > 
  <입력 클래스 = "span4" 유형 = "텍스트" 자리 표시자 = ".span4" >   
  <입력 클래스 = "span1" 유형 = "텍스트" 자리 표시자 = ".span1" >   
</div>
...

편집할 수 없는 입력

실제 양식 마크업을 사용하지 않고는 편집할 수 없는 양식으로 데이터를 표시합니다.

<span class = "input-xlarge uneditable-input" > 여기에 값이 있습니다. </span>

양식 작업

작업 그룹(버튼)으로 양식을 종료합니다. 에 배치되면 .form-actions버튼이 자동으로 들여쓰기되어 양식 컨트롤과 정렬됩니다.

<div 클래스 = "양식 작업" > 
  <버튼 유형 = "제출" 클래스 = "btn btn-primary" > 변경 사항 저장 </button>  
  <버튼 유형 = "버튼" 클래스 = "btn" > 취소 </button>  
</div>

도움말 텍스트

양식 컨트롤 주변에 나타나는 도움말 텍스트에 대한 인라인 및 블록 수준 지원.

인라인 도움말

<input type = "text" ><span class = "help-inline" > 인라인 도움말 텍스트 </span>

도움말 차단

<input type = "text" ><span class = "help-block" > 새 줄로 분할되고 한 줄 이상으로 확장될 수 있는 더 긴 도움말 텍스트 블록입니다. </span>

양식 제어 상태

양식 컨트롤 및 레이블에 대한 기본 피드백 상태로 사용자 또는 방문자에게 피드백을 제공합니다.

입력 초점

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

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "이것은 초점이 맞춰져 있습니다..." >

잘못된 입력

을(를) 사용하여 기본 브라우저 기능을 통해 입력 스타일을 지정 :invalid합니다. a를 지정하고 , 필드가 선택 사항이 아닌 경우 속성 type을 추가하고 , (해당되는 경우) a를 지정합니다 .requiredpattern

CSS 의사 선택기에 대한 지원 부족으로 인해 Internet Explorer 7-9 버전에서는 사용할 수 없습니다.

<입력 클래스 = "span3" 유형 = "이메일" 필수 >

비활성화된 입력

disabled사용자 입력을 방지하고 약간 다른 모양을 트리거하려면 입력에 속성을 추가하십시오 .

<input class = "input-xlarge" id = "disabledInput" 유형 = "text" 자리 표시자 = "여기서 입력을 비활성화했습니다..." 비활성화 >

검증 상태

부트스트랩에는 오류, 경고, 정보 및 성공 메시지에 대한 유효성 검사 스타일이 포함되어 있습니다. 사용하려면 주변에 적절한 클래스를 추가하십시오 .control-group.

<div 클래스 = "제어 그룹 경고" > 
  <label class = "control-label" for = "inputWarning" > 경고가 있는 입력 </label>  
  <div 클래스 = "컨트롤" > 
    <입력 유형 = "텍스트" id = "입력 경고" >  
    <span class = "help-inline" > 문제가 발생했을 수 있습니다. </span> 
  </div>
</div>
 
<div 클래스 = "제어 그룹 오류" > 
  <label class = "control-label" for = "inputError" > 오류가 있는 입력 </label>  
  <div 클래스 = "컨트롤" > 
    <입력 유형 = "텍스트" id = "입력 오류" >  
    <span class = "help-inline" > 오류를 수정하십시오. </span> 
  </div>
</div>
 
<div 클래스 = "제어 그룹 정보" > 
  <label class = "control-label" for = "inputInfo" > 정보가 있는 입력 </label>  
  <div 클래스 = "컨트롤" > 
    <입력 유형 = "텍스트" id = "입력 정보" >  
    <span class = "help-inline" > 사용자 이름이 이미 사용 중입니다. </span> 
  </div>
</div>
 
<div 클래스 = "제어 그룹 성공" > 
  <label class = "control-label" for = "inputSuccess" > 입력 성공 </label>  
  <div 클래스 = "컨트롤" > 
    <입력 유형 = "텍스트" id = "inputSuccess" >  
    <span class = "help-inline" > 우후! </span> 
  </div>
</div>

기본 버튼

버튼 스타일은 .btn클래스가 적용된 모든 것에 적용할 수 있습니다. 그러나 일반적으로 최상의 렌더링을 위해 이러한 요소를 <a>및 요소 에만 적용하려고 합니다 .<button>

단추	클래스=""	설명
	`btn`	그라데이션이 있는 표준 회색 버튼
	`btn btn-primary`	추가 시각적 가중치를 제공하고 버튼 세트에서 기본 작업을 식별합니다.
	`btn btn-info`	기본 스타일의 대안으로 사용
	`btn btn-success`	성공 또는 긍정적인 작업을 나타냅니다.
	`btn btn-warning`	이 작업에 주의를 기울여야 함을 나타냅니다.
	`btn btn-danger`	위험하거나 잠재적으로 부정적인 행동을 나타냅니다.
	`btn btn-inverse`	의미론적 동작이나 사용에 연결되지 않은 대체 짙은 회색 버튼
	`btn btn-link`	버튼 동작을 유지하면서 링크처럼 보이게 하여 버튼을 덜 강조합니다.

브라우저 간 호환성

IE9는 둥근 모서리에서 배경 그라디언트를 자르지 않으므로 제거합니다. 이와 관련하여 IE9는 비활성화된 요소를 jankify button하여 수정할 수 없는 불쾌한 텍스트 그림자로 텍스트를 회색으로 렌더링합니다.

버튼 크기

더 크거나 작은 버튼이 마음에 드시나요? 추가 크기 .btn-large의 경우 .btn-small, 또는 .btn-mini을(를) 추가합니다.

<p>
  <버튼 클래스 = "btn btn-large btn-primary" 유형 = "버튼" > 큰 버튼 </button>  
  <버튼 클래스 = "btn btn-large" 유형 = "버튼" > 큰 버튼 </button>  
</p>
<p>
  <버튼 클래스 = "btn btn-primary" 유형 = "버튼" > 기본 버튼 </button>  
  <버튼 클래스 = "btn" 유형 = "버튼" > 기본 버튼 </button>  
</p>
<p>
  <버튼 클래스 = "btn btn-small btn-primary" type = "버튼" > 작은 버튼 </button>  
  <버튼 클래스 = "btn btn-small" 유형 = "버튼" > 작은 버튼 </button>  
</p>
<p>
  <버튼 클래스 = "btn btn-mini btn-primary" type = "버튼" > 미니 버튼 </button>  
  <버튼 클래스 = "btn btn-mini" 유형 = "버튼" > 미니 버튼 </button>  
</p>

를 추가하여 부모의 전체 너비에 걸쳐 있는 블록 수준 버튼을 만듭니다 .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > 블록 레벨 버튼 </button>  
<button class = "btn btn-large btn-block" type = "button" > 블록 레벨 버튼 </button>

비활성화 상태

버튼을 50% 뒤로 페이드하여 클릭할 수 없게 만듭니다.

앵커 요소

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

기본 링크 링크

<a href = "#" class = "btn btn-large btn-primary disabled" > 기본 링크 </a>  
<a href = "#" class = "btn btn-large 비활성화됨" > 링크 </a>

머리!.disabled여기서는 일반 클래스와 유사한 유틸리티 클래스로 사용 .active하므로 접두사가 필요하지 않습니다. 또한, 이 클래스는 미학을 위한 것입니다. 여기에서 링크를 비활성화하려면 사용자 정의 JavaScript를 사용해야 합니다.

버튼 요소

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

<버튼 유형 = "버튼" 클래스 = "btn btn-large btn-primary disabled" disabled = "disabled" > 기본 버튼 </button>   
<버튼 유형 = "버튼" 클래스 = "btn btn-large" 비활성화 됨 > 버튼 </button>

하나의 클래스, 여러 태그

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

<a class = "btn" href = "" > 링크 </a>  
<버튼 클래스 = "btn" 유형 = "제출" > 버튼 </버튼>  
<입력 클래스 = "btn" 유형 = "버튼" 값 = "입력" >   
<입력 클래스 = "btn" 유형 = "제출" 값 = "제출" >

가장 좋은 방법은 브라우저 간 렌더링이 일치하도록 컨텍스트에 대한 요소를 일치시키는 것입니다. 가 있는 경우 버튼에 를 input사용 <input type="submit">하십시오.

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

<img src = "..." 클래스 = "img 반올림" >  
<img src = "..." 클래스 = "img-circle" >  
<img src = "..." 클래스 = "img-폴라로이드" >

머리! .img-rounded.img-circle지원 부족으로 인해 IE7-8에서 작동하지 않습니다 border-radius.

아이콘 글리프

스프라이트 형태의 아이콘 140개, 짙은 회색(기본값) 및 흰색으로 제공되며 Glyphicons 에서 제공합니다 .

아이콘 유리
아이콘 음악
아이콘 검색
아이콘 봉투
아이콘 하트
아이콘 스타
icon-star-empty
아이콘 사용자
아이콘 필름
아이콘 크기
아이콘-번째
아이콘 목록
아이콘 확인
아이콘 제거
아이콘 확대
아이콘 축소
아이콘 오프
아이콘 신호
아이콘 톱니
아이콘 휴지통
아이콘 홈
아이콘 파일
아이콘 시간
아이콘로드
아이콘 다운로드 대체
아이콘 다운로드
아이콘 업로드
아이콘 받은 편지함
아이콘 플레이 서클
아이콘 반복
아이콘 새로고침
아이콘 목록 대체
아이콘 잠금
아이콘 플래그
아이콘 헤드폰
아이콘 볼륨 끄기
아이콘 볼륨 다운
아이콘 볼륨 업
아이콘-qrcode
아이콘 바코드
아이콘 태그
아이콘 태그
아이콘 책
아이콘 북마크
아이콘 인쇄
아이콘 카메라
아이콘 글꼴
아이콘 굵게
아이콘 기울임꼴
아이콘 텍스트 높이
아이콘 텍스트 너비
아이콘 정렬 왼쪽
아이콘 정렬 센터
아이콘 정렬 오른쪽
아이콘 정렬
아이콘 목록
아이콘 들여쓰기 왼쪽
아이콘 들여쓰기 오른쪽
icon-facetime-비디오
아이콘 그림
아이콘 연필
아이콘 맵 마커
아이콘 조정
아이콘 색조
아이콘 편집
아이콘 공유
아이콘 체크
아이콘 이동
아이콘 단계 뒤로
아이콘 빨리 뒤로
아이콘 뒤로
아이콘 플레이
아이콘 일시 중지
아이콘 정지
아이콘 앞으로
아이콘 빨리 감기
아이콘 한 단계 앞으로
아이콘 꺼내기
아이콘 갈매기 왼쪽
아이콘 갈매기 오른쪽
아이콘 더하기 기호
아이콘 빼기 기호
아이콘 제거 기호
아이콘 확인 표시
아이콘 물음표
아이콘 정보 기호
아이콘 스크린샷
아이콘 제거 원
아이콘 확인 원
아이콘 금지 원
아이콘-화살표-왼쪽
아이콘-화살표-오른쪽
아이콘-화살표
아이콘 아래쪽 화살표
아이콘 공유 대체
아이콘 크기 전체
아이콘 크기 조정 작게
아이콘 플러스
아이콘 마이너스
아이콘 별표
아이콘 느낌표 기호
아이콘 선물
아이콘 잎
아이콘 불
아이콘 눈 뜨다
아이콘 눈을 감다
아이콘 경고 표시
아이콘 평면
아이콘 캘린더
아이콘 랜덤
아이콘 설명
아이콘 자석
아이콘 갈매기
아이콘 갈매기 모양
아이콘 리트윗
아이콘-장바구니
아이콘 폴더 닫기
아이콘 폴더 열기
아이콘 크기 조정 수직
아이콘 크기 조정 가로
아이콘-HDD
아이콘 물러나
아이콘 벨
아이콘 인증서
아이콘 좋아요
아이콘 싫어요
아이콘-손-오른쪽
아이콘-손-왼쪽
아이콘 건네기
아이콘 전달
아이콘-원-화살표-오른쪽
아이콘-원-화살표-왼쪽
아이콘-원-화살표-위쪽
아이콘-원-화살표-아래쪽
아이콘 글로브
아이콘 렌치
아이콘 작업
아이콘 필터
아이콘-서류가방
아이콘 전체 화면

글리프콘 속성

Glyphicons Halflings는 일반적으로 무료로 제공되지 않지만 Bootstrap과 Glyphicons 제작자 간의 합의로 개발자로서 무료로 이를 가능하게 했습니다. 감사의 의미로, 필요할 때마다 Glyphicons 에 대한 선택적 링크를 포함하도록 요청합니다.

사용하는 방법

모든 아이콘에는 <i>접두사가 붙은 고유 클래스가 있는 태그가 필요합니다 icon-. 사용하려면 거의 모든 위치에 다음 코드를 배치하세요.

<i 클래스 = "아이콘 검색" ></i>

하나의 추가 클래스로 준비된 반전(흰색) 아이콘에 사용할 수 있는 스타일도 있습니다. 특히 탐색 및 드롭다운 링크에 대한 호버 및 활성 상태에서 이 클래스를 적용합니다.

<i class = "icon-search icon-white" ></i>

머리!<i>버튼이나 탐색 링크와 같이 텍스트 문자열 옆에 사용할 때 적절한 간격을 위해 태그 뒤에 공백을 남겨 두십시오 .

아이콘 예

버튼, 도구 모음의 버튼 그룹, 탐색 또는 추가 양식 입력에서 사용하십시오.

버튼

버튼 도구 모음의 버튼 그룹

<div 클래스 = "btn-toolbar" > 
  <div 클래스 = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

버튼 그룹의 드롭다운

사용자

<div 클래스 = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> 사용자 </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "드롭다운 메뉴" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> 수정 </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> 삭제 </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> 차단 </a></li>  
    <li 클래스 = "분할기" ></li> 
    <li><a href = "#" ><i class = "i" ></i> 관리자 만들기 </a></li>  
  </ul>
</div>

버튼 크기

별 별 별

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> 별표 </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> 별표 </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> 별표 </a>

항해

<ul 클래스 = "내비게이션 목록" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> 홈 </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> 라이브러리 </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> 응용 프로그램 </a></li>  
  <li><a href = "#" ><i class = "i" ></i> 기타 </a></li>  
</ul>

양식 필드

<div 클래스 = "제어 그룹" > 
  <label class = "control-label" for = "inputIcon" > 이메일 주소 </label>  
  <div 클래스 = "컨트롤" > 
    <div 클래스 = "입력 앞에 추가" > 
      <span class = "추가 기능" ><i class = "icon-envelope" ></i></span>  
      <입력 클래스 = "span2" id = "inputIcon" 유형 = "텍스트" >   
    </div>
  </div>
</div>

타이포그래피

제목

h1. 제목 1

h2. 제목 2

h3. 제목 3

h4. 제목 4

h5. 제목 5

h6. 제목 6

본문

리드 본문 카피

적은 비용으로 구축

중요성

<small>

용감한

기울임꼴

정렬 클래스

강조 수업

약어

<abbr>

<abbr class="initialism">

구애

<address>

인용구

기본 인용구

인용 부호 옵션

소스 이름 지정

대체 디스플레이

기울기

무순

주문

스타일이 없는

인라인

설명

가로 설명

암호

인라인

기본 블록

테이블

기본 스타일

선택 수업

.table-striped

.table-bordered

.table-hover

.table-condensed

선택적 행 클래스

지원되는 테이블 마크업

양식

기본 스타일

선택적 레이아웃

검색 양식

인라인 양식

가로 형태

지원되는 양식 컨트롤

입력

텍스트 영역

체크박스와 라디오

기본값(스택)

인라인 체크박스

선택

폼 컨트롤 확장

추가 입력 및 추가 입력

기본 옵션

결합

텍스트 대신 버튼

버튼 드롭다운

세분화된 드롭다운 그룹

검색 양식

크기 조절

블록 레벨 입력

상대적 크기

그리드 크기 조정

편집할 수 없는 입력

양식 작업

도움말 텍스트

인라인 도움말

도움말 차단

양식 제어 상태

입력 초점

잘못된 입력

비활성화된 입력

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`