제목

<h1>부터 <h6>까지 모든 HTML 제목이 있다.

h1. 제목 1

h2. 제목 2

h3. 제목 3

h4. 제목 4

h5. 제목 5

h6. 제목 6

본문

부트스크랩 기본 font-size는 14px이고, line-height는 20px이다. 이 설정은 <body>와 모든 단락에 적용된다. 추가로 <p>(단락)은 자신의 행높이 절반만큼 (기본값이라면 10px) 하단 여백을 둔다.

생체막을 통해 외부에서 세포 내로 물질을 받아들이는 방법에는 여러 가지가 있다. 그 중 고형물을 세포 내에 받아들이는 현상을 식세포 작용, 액상체를 받아들이는 현상을 음세포 작용이라 한다.

두 작용은 본질적으로는 같은 구조로 행해지기 때문에 이를 합쳐 식작용이라고 부르는 경우도 있다. 식세포 작용은 대부분의 원생 동물과 후생 동물의 일부에서 볼 수 있다. 원생 동물에서는 식세포 작용은 영양 공급이라는 의미를 갖고 있지만, 후생 동물에서는 오히려 이물질을 제거하고 소화한다.

이른바 방어 기능으로서의 의의가 크다. 식세포 작용은 고형물이 세포막에 흡착하는 과정과 세포막의 함입(陷入)으로 그 물질을 세포내에 받아들여 세포질 내에 유리하는 과정의 두 가지로 나눌 수 있다.

<p>...</p>

도입부 본문

.lead을 추가하여 단락을 두드러지게 한다.

18세에 소지선사 밑에서 승려가 되었으며, 혜명 국사로부터 불법을 배운 뒤 묘향산의 금강굴에서 수도하였다.

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

Less로 컴파일

타이포그래피 기준은 variables.less에 있는 두 LESS 변수 @baseFontSize와 @baseLineHeight가 결정한다. 전자는 전체적으로 사용하는 기본 글꼴 크기이고, 후자는 기본 행높이이다. 우리는 이 변수를 가지고 다른 모든 여백과 패딩과 행높이를 간단히 계산한다. 부트스트랩을 맞춤 다운로드하면 된다.

강조

HTML 기본 강조 태그와 경량 스타일을 사용할 수 있다.

`<small>`

본문 인라인이나 블록을 덜 강조하려면 small 태그를 사용한다.

이 본문 줄은 작은 글꼴로 의도했다.

<p>
  <small>이 본문 줄은 작은 글꼴로 의도했다.</small>
</p>

굵은 글꼴

본문의 일부를 두꺼운 font-weight로 강조한다.

다음에 나오는 본문은 굵은 글씨로 보인다.

<strong>굵은 글씨로 보인다</strong>

이탤릭체

본문의 일부를 이탤릭체로 강조한다.

다음에 나오는 본문은 이탤릭체로 보인다.

<em>이탤릭체로 보인다</em>

주의! HTML5에서 <b><i>를 사용해도 된다. <b>는 중요성을 함축하지 않고 단어나 구절을 강조하는 목적이고, <i>는 목소리나 기술 용어 등을 위해 사용한다.

정렬 클래스

정렬 클래스를 사용하여 본문을 구성요소로 쉽게 재정렬할 수 있다.

좌측 정렬 본문.

중앙 정렬 본문.

우측 정렬 본문.

<p class="text-left">좌측 정렬 본문.</p>
<p class="text-center">중앙 정렬 본문.</p>
<p class="text-right">우측 정렬 본문.</p>

강조 클래스

몇가지 강조 도움 클래스를 가지고 색깔로 의미를 전달한다.

소싸움경기장에서 싸움소간의 힘겨루기를 말한다.

소싸움경기투표 적중자에게 환급금을 교부하는 행위를 말한다.

소싸움경기에 출전하게 할 목적으로 소싸움경기시행자에게 등록된 소를 말한다.

싸움소를 소유하거나 소유할 목적으로 소싸움경기시행자에게 등록한 자를 말한다.

소싸움경기시행자의 면허를 받아 싸움소를 관리하고 조련시키는 자를 말한다.

<p class="muted">소싸움경기장에서 싸움소간의 힘겨루기를 말한다.</p>
<p class="text-warning">소싸움경기투표 적중자에게 환급금을 교부하는 행위를 말한다.</p>
<p class="text-error">소싸움경기에 출전하게 할 목적으로 소싸움경기시행자에게 등록된 소를 말한다.</p>
<p class="text-info">싸움소를 소유하거나 소유할 목적으로 소싸움경기시행자에게 등록한 자를 말한다.</p>
<p class="text-success">소싸움경기시행자의 면허를 받아 싸움소를 관리하고 조련시키는 자를 말한다.</p>

축약어

HTML <abbr> 태그에 스타일을 입혀서 축약어나 두문자에 마우스를 올리면 원문이 보인다. 태그에 title 속성은 사용하면, 연한 점선 밑줄이 생기고 마우스를 올리면 도움말 커서와 추가 내용이 보인다.

`<abbr>`

title 속성을 추가하면, 축약어에 오래 마우스를 올릴 때 추가 본문이 보인다.

attr은 단어 attribute의 축약어이다.

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

`<abbr class="initialism">`

축약어를 약간 작은 글꼴로 보이려면 .initialism을 더한다.

HTML은 식빵이후 최고의 것이다.

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

주소

작품 전체나 작품에 맞붙여 연락처 정보를 보여준다.

`<address>`

줄마다 <br>로 끝내서 형식을 유지한다.

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

Full Name
first.last@example.com

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

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

인용

문서 안에 다른 출처의 내용을 인용한다.

기본 인용

인용하려면 아무 HTML이나 <blockquote>로 두른다. 일반적인 인용으로 <p>를 권한다.

그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.

<blockquote>
  <p>그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.</p>
</blockquote>

인용 옵션

표준 인용을 살짝 변경하는 스타일.

출처 명시

<small> 태그로 출처를 밝힌다. 작품명은 <cite>로 감싼다.

그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.
올드보이에서 오대수

<blockquote>
  <p>그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.</p>
  <small><cite title="올드보이">올드보이</cite>에서 오대수</small>
</blockquote>

다르게 표시

.pull-right를 사용하면, 우측 정렬된 유동 인용이 된다.

그 때 그들이 15년이라고 말해줬다면, 조금이라도 견디기가 쉬워졌을까.
올드보이에서 오대수

<blockquote class="pull-right">
  ...
</blockquote>

순서 없음

명시적인 순서가 중요하지 않는 항목들의 목록.

우세르카프
사후레
네페리르카레 카카이
솁세스카레
네페레프레
- 라네프에르에프
- 마네토의 연대기
- 토리노 파피루스
- 미로슬라프 베르너
니우세르레
멘카우호르
제드카레

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

순서 있음

명시적인 순서가 중요한 항목들의 목록.

우세르카프
사후레
네페리르카레 카카이
솁세스카레
네페레프레
니우세르레
멘카우호르
제드카레

<ol>
  <li>...</li>
</ol>

스타일 없음

기본 list-style과 목록 항목의 왼쪽 패딩을 없앤다. (바로 아래 항목에만 적용된다.)

우세르카프
사후레
네페리르카레 카카이
솁세스카레
네페레프레
- 라네프에르에프
- 마네토의 연대기
- 토리노 파피루스
- 미로슬라프 베르너
니우세르레
멘카우호르
제드카레

<ul class="unstyled">
  <li>...</li>
</ul>

인라인

inline-block을 사용하면, 모든 목록 항목을 약간 패딩을 사이에 두고 한 줄에 둔다.

우세르카프
사후레
네페리르카레 카카이

<ul class="inline">
  <li>...</li>
</ul>

단어 설명

각각에 설명이 붙은 단어 목록.

단어 설명 목록: 단어 설명 목록을 단어를 정의하는 목적으로 안성맞춤이다.
백제고분제: 백제전기왕들의 신령께 제를 드리는 행사로 석촌동 백제초기 적석총(사적 제243호)에서 개최한다.; 1996년부터는 격년제로 개최하고 있다.
서울세계불꽃축제: 2000년 이후 매년 여의도에서 열리는 축제 중 하나이다.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

수직 단어 설명

<dl> 양편에 단어와 설명을 줄세운다.

단어 설명 목록: 단어 설명 목록을 단어를 정의하는 목적으로 안성맞춤이다.
백제고분제: 백제전기왕들의 신령께 제를 드리는 행사로 석촌동 백제초기 적석총(사적 제243호)에서 개최한다.; 1996년부터는 격년제로 개최하고 있다.
서울세계불꽃축제: 2000년 이후 매년 여의도에서 열리는 축제 중 하나이다.
인사동 포도대장과 그 순라군들: 순라군은 총 18명으로 구성돼 있으며 전통복장과 육모방망이, 함거, 오라줄, 검, 삼지창 등의 순라장비를 두루 갖추었다.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

주의! 수직 단어 설명 목록에서 너무 길어서 왼쪽 열에 맞지 않는 단어는 text-overflow로 줄인다. 좁은 화면에서는 위아래로 쌓인 기본 레이아웃이 된다.

인라인

인라인 코드 조각은 <code>로 감싼다.

예를 들어, <section>은 인라인으로 감싸야 한다.

예를 들어, <code>&lt;section&gt;</code>은 인라인으로 감싸야 한다.

기본 블록

여러 줄 코드는 <pre>를 사용한다. 코드 안에 나오는 부등호가 제대로 보이도록 예외처리해야 한다.

<p>여기에 아무 글이나...</p>

<pre>
  &lt;p&gt;여기에 아무 글이나...&lt;/p&gt;
</pre>

주의! <pre> 태그 안에 코드는 최대한 왼쪽으로 붙여야 한다. 이 태그는 탭도 모두 보여준다.

.pre-scrollable 클래스를 더하면, max-height가 350px로 고정되고 세로 방향 스크롤막대가 생긴다.

기본 스타일

아무 <table>에 .table 클래스를 더하면 패딩이 약간 있고 수평으로만 구분선을 그은 기본 스타일을 적용한다.

#	이름	성	사용자명
1	마크	오토	@mdo
2	제이콥	손턴	@fat
3	래리	새	@twitter

<table class="table">
  …
</table>

선택적인 클래스

아래 클래스들을 .table 기본 클래스에 더할 수 있다.

`.table-striped`

(IE7~8에는 없는) :nth-child CSS 선택자를 사용하여 표 <tbody> 안에 있는 모든 행에 얼룩말 무늬를 넣는다.

#	이름	성	사용자명
1	마크	오토	@mdo
2	제이콥	손턴	@fat
3	래리	새	@twitter

<table class="table table-striped">
  …
</table>

`.table-bordered`

표에 둘레와 둥그런 모서리를 더한다.

#	이름	성	사용자명
1	마크	오토	@mdo
1	마크	오토	@TwBootstrap
2	제이콥	손턴	@fat
3	새 래리		@twitter

<table class="table table-bordered">
  …
</table>

`.table-hover`

표 <tbody> 안의 행에 마우스 올림 상태를 적용한다.

#	이름	성	사용자명
1	마크	오토	@mdo
2	제이콥	손턴	@fat
3	새 래리		@twitter

<table class="table table-hover">
  …
</table>

`.table-condensed`

셀 패딩을 절반으로 줄여서 표를 더 촘촘하게 만든다.

#	이름	성	사용자명
1	마크	오토	@mdo
2	제이콥	손턴	@fat
3	새 래리		@twitter

<table class="table table-condensed">
  …
</table>

선택적인 행 클래스

클래스를 사용하여 표의 특정 행에 색을 입힌다.

클래스	설명
`.success`	성공이나 긍정적인 행동을 나타낸다.
`.error`	위험하거나 잠재적으로 부정적인 행동을 나타낸다.
`.warning`	주의가 필요한 경고를 나타낸다.
`.info`	기본 스타일에 대체로 사용한다.

#	제품	결제일	상태
1	TB - 월간	01/04/2012	승인
2	TB - 월간	02/04/2012	거부
3	TB - 월간	03/04/2012	보류
4	TB - 월간	04/04/2012	전화로 확인

...
  <tr class="success">
    <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>`	특히 화면읽기 프로그램에 유용한, 표 내용에 대한 설명이나 요약

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

기본 스타일

약식 입력요소들은 <form>에 기본 클래스나 마크업상 큰 변화 없이도 스타일 적용을 받는다. 그래서 라벨은 양식 입력요소 위에 왼쪽 정렬한다.

<form>
  <fieldset>
    <legend>범례</legend>
    <label>라벨명</label>
    <input type="text" placeholder="아무거나 입력…">
    <span class="help-block">블록 수준 도움말은 여기에.</span>
    <label class="checkbox">
      <input type="checkbox"> 나 좀 봐
    </label>
    <button type="submit" class="btn">제출</button>
  </fieldset>
</form>

레이아웃 선택

부트스트랩에는 일상적인 용도를 위해 세가지 선택적인 레이아웃이 들어있다.

검색 양식

양식에 .form-search를 더하고 <input>에 .search-query를 더하면, 테두리가 둥근 문자 입력요소가 된다.

<form class="form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">검색</button>
</form>

인라인 양식

작은 레이아웃을 위해 .form-inline을 더하면, 라벨을 왼쪽 정렬하고 블록 입력요소를 인라인한다.

<form class="form-inline">
  <input type="text" class="input-small" placeholder="이메일">
  <input type="password" class="input-small" placeholder="암호">
  <label class="checkbox">
    <input type="checkbox"> 로그인 유지
  </label>
  <button type="submit" class="btn">로그인</button>
</form>

수직 양식

오른쪽 정렬된 라벨을 왼쪽으로 유동시켜 입력요소와 같은 줄에 보이게 만든다. 기본 양식에서 마크업 변화가 가장 많이 필요하다.

양식에 .form-horizontal 추가
.control-group으로 라벨과 입력요소 둘러쌈
라벨에 .control-label 추가
연관된 입력요소들을 .controls로 감싸서 적절히 정렬

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">이메일</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="이메일">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">암호</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="암호">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> 로그인 유지
      </label>
      <button type="submit" class="btn">로그인</button>
    </div>
  </div>
</form>

지원하는 양식 입력요소

양식 레이아웃에서 지원하는 표준 양식 입력요소들이다.

Input

가장 일상적인, 문자를 입력하는 양식 입력요소이다. 모든 HTML5 종류(text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color)를 지원한다.

항상 특정 type이 필요하다.

<input type="text" placeholder="문자 입력">

Textarea

여러 줄의 글을 지원하는 양식 입력요소이다. 필요한만큼 rows 속성을 변경한다.

<textarea rows="3"></textarea>

Checkbox와 radio

Checkbox는 목록에서 하나 혹은 여러 항목을 선택하고, radio는 여러개 중 한가지 항목만 선택한다.

기본 (위아래로 쌓임)

<label class="checkbox">
  <input type="checkbox" value="">
  선택 1은 아무개이다—이것이 왜 대단한지 적어야 한다
</label>

<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  선택 1은 아무개이다—이것이 왜 대단한지 적어야 한다
</label>
<label class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
  선택 2는 다른 무언가이고, 이것을 선택하면 선택 1을 선택해제한다
</label>

인라인 checkbox

여러 연속된 checkbox나 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>

Select

기본 옵션을 사용할 수 있다. 한번에 여러 선택을 보여주려면 multiple="multiple"을 명시한다.

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

확장 양식 입력요소

부트스트랩은 기존의 웹브라우저 입력요소에 추가로 다른 유용한 양식 입력요소를 제공한다.

앞뒤에 덧붙이는 입력 input

문자를 입력하는 input의 앞이나 뒤에 문자나 버튼을 추가한다. 여기서 select 태그는 지원하지 않으니 주의하라.

기본 옵션

문자를 input 앞이나 뒤에 붙이려면, 두 클래스 중 하나로 .add-on과 input을 감싼다.

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="사용자명">
</div>
<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

혼합

input 앞뒤로 붙이려면, 두 클래스와 .add-on 두개를 모두 사용한다.

<div class="input-prepend input-append">
  <span class="add-on">$</span>
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

문자 대신 버튼

문자 <span> 대신 .btn을 사용하여 input에 버튼 한개나 두개를 붙인다.

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">진행!</button>
</div>

<div class="input-append">
  <input class="span2" id="appendedInputButtons" type="text">
  <button class="btn" type="button">검색</button>
  <button class="btn" type="button">선택사항</button>
</div>

드롭다운 버튼

<div class="input-append">
  <input class="span2" id="appendedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      행동
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

<div class="input-prepend">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      행동
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="prependedDropdownButton" type="text">
</div>

<div class="input-prepend input-append">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      행동
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input class="span2" id="appendedPrependedDropdownButton" type="text">
  <div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">
      행동
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
</div>

분리된 드롭다운 그룹

<form>
  <div class="input-prepend">
    <div class="btn-group">...</div>
    <input type="text">
  </div>
  <div class="input-append">
    <input type="text">
    <div class="btn-group">...</div>
  </div>
</form>

검색 양식

<form class="form-search">
  <div class="input-append">
    <input type="text" class="span2 search-query">
    <button type="submit" class="btn">검색</button>
  </div>
  <div class="input-prepend">
    <button type="submit" class="btn">검색</button>
    <input type="text" class="span2 search-query">
  </div>
</form>

입력요소 크기 조절

.input-large 같은 상대적인 크기 클래스를 사용할 수 있고, .span* 클래스를 사용하여 격자 열 크기에 input을 맞출 수도 있다.

블록 수준 input

<input>과 <textarea> 태그를 블록 수준 태그처럼 만든다.

<input class="input-block-level" type="text" placeholder=".input-block-level">

상대적인 크기 조절

<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<input class="input-large" type="text" placeholder=".input-large">
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">

주의! 우리는 앞으로 상대적인 input 클래스를 버튼 크기와 동일하게 변경할 예정이다. 예를 들어, .input-large는 input의 패딩과 글꼴 크기를 늘리게 된다.

격자 크기 조절

input에 .span1부터 .span12까지를 사용하여 격자 열과 동일한 크기로 맞춘다.

<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
<select class="span1">
  ...
</select>
<select class="span2">
  ...
</select>
<select class="span3">
  ...
</select>

한 줄에 여러 격자 input이 있다면, .controls-row 클래스를 사용하여 적절한 간격을 만든다. 그러면 input을 빈공백을 없애도록 유동화하고, 적당한 여백을 설정한 후 유동 흐름을 마친다.

<div class="controls">
  <input class="span5" type="text" placeholder=".span5">
</div>
<div class="controls controls-row">
  <input class="span4" type="text" placeholder=".span4">
  <input class="span1" type="text" placeholder=".span1">
</div>
...

수정할 수 없는 input

실제 형식 마크업을 사용하지 않고 수정할 수 없는 자료를 보여준다.

<span class="input-xlarge uneditable-input">Some value here</span>

양식 행동

액션 버튼들로 형식을 마무리한다. .form-actions 안에 두면, 자동으로 버튼들을 형색 입력요소와 나란히 맞춘다.

<div class="form-actions">
  <button type="submit" class="btn btn-primary">변경사항 저장</button>
  <button type="button" class="btn">취소</button>
</div>

도움말

양식 입력요소 주위에 인라인과 블록 수준 도움말을 보여준다.

인라인 도움말

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

블록 도움말

<input type="text"><span class="help-block">더 긴 도움말 블록은 새 줄에서 시작하고 여러 줄을 걸칠 수 있다.</span>

양식 입력요소 상태

사용자와 방문자에게 보일 기본적인 상태 알림을 양식 입력요소와 라벨에 준다.

Input 포커스

일부 입력 양식의 기본 outline 스타일을 제거하고, :focus를 받는 경우 box-shadow를 적용한다.

<input class="input-xlarge" id="focusedInput" type="text" value="포커스를 받은 상태...">

유효하지 않는 input

:invalid와 웹브라우저 기본 기능을 가지고 input에 스타일을 부여한다. type을 지정하고, 필수 항목이라면 required 속성을 더하며 (필요하다면) pattern을 지정한다.

CSS 유사선택자를 지원하지 않는 인터넷 익스플로러 7~9 버전에서는 불가하다.

<input class="span3" type="email" required>

비활성 input

Input의 disabled 속성은 사용자 입력을 막고 약간 다른 모습을 보인다.

<input class="input-xlarge" id="disabledInput" type="text" placeholder="이것은 비활성 input..." disabled>

유효검사 상태

부트스트랩은 오류, 경고, 안내, 성공 문구를 위한 유효검사 스타일을 제공한다. 사용하려면, 모두를 둘러싼 .control-group에 적당한 클래스를 더한다.

<div class="control-group warning">
  <label class="control-label" for="inputWarning">warning을 사용한 input</label>
  <div class="controls">
    <input type="text" id="inputWarning">
    <span class="help-inline">무언가 잘못될 수 있습니다</span>
  </div>
</div>

<div class="control-group error">
  <label class="control-label" for="inputError">error를 사용한 input</label>
  <div class="controls">
    <input type="text" id="inputError">
    <span class="help-inline">오류를 정정하시기 바랍니다</span>
  </div>
</div>

<div class="control-group info">
  <label class="control-label" for="inputInfo">info를 사용한 input</label>
  <div class="controls">
    <input type="text" id="inputInfo">
    <span class="help-inline">사용자명 사용중</span>
  </div>
</div>

<div class="control-group success">
  <label class="control-label" for="inputSuccess">success를 사용한 input</label>
  <div class="controls">
    <input type="text" id="inputSuccess">
    <span class="help-inline">우후!</span>
  </div>
</div>

기본 버튼

버튼 스타일은 .btn 클래스의 모든 태그에 사용할 수 있다. 그러나 잘 보이기위해 보통 <a>와 <button> 태그에만 사용한다.

버튼	class=""	설명
	`btn`	그라데이션을 준 표준 회색 버튼
	`btn btn-primary`	버튼 중 가장 중요한 행동을 시각적으로 강조
	`btn btn-info`	기본 스타일의 대안으로 사용
	`btn btn-success`	성공적이거나 긍정적인 행동 나타냄
	`btn btn-warning`	이 행동에는 주의가 필요하다고 알림
	`btn btn-danger`	위험하거나 잠재적으로 부정적인 행동 나타냄
	`btn btn-inverse`	행동의 의미와 무관한, 다른 진회색 버튼
	`btn btn-link`	버튼의 행동은 그대로이지만, 링크처럼 보이게 하여 버튼 강조 해제

웹브라우저간 호환성

IE9는 둥근 모서리의 배경 그라데이션을 자르지 못하기 때문에 제외했다. 또, 비활성 button 태그의 회색 글씨에 지저분한 그림자를 그리는 IE9 문제도 해결하지 못했다.

버튼 크기

크고 작은 버튼이 필요한가? .btn-large, .btn-small, .btn-mini를 붙이면 다른 크기가 된다.

<p>
  <button class="btn btn-large btn-primary" type="button">큰 버튼</button>
  <button class="btn btn-large" type="button">큰 버튼</button>
</p>
<p>
  <button class="btn btn-primary" type="button">기본 버튼</button>
  <button class="btn" type="button">기본 버튼</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">작은 버튼</button>
  <button class="btn btn-small" type="button">작은 버튼</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">미니 버튼</button>
  <button class="btn btn-mini" type="button">미니 버튼</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% 어둡게 만들어 클릭할 수 없는 버튼으로 보이게 한다.

A 태그

<a> 버튼에 .disabled 클래스를 더한다.

주요 링크 링크

<a href="#" class="btn btn-large btn-primary disabled">주요 링크</a>
<a href="#" class="btn btn-large disabled">링크</a>

주의! 일반적인 .active 클래스와 비슷하게 .disabled을 도움 클래스로 사용하기 때문에 접두사가 필요없다. 또, 이 클래스는 외관만 영향을 준다. 링크가 동작하지 않게 만들 자바스크립트가 필요하다.

버튼 태그

<button> 버튼에 .disabled 속성을 더한다.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">주요 버튼</button>
<button type="button" class="btn btn-large" disabled>버튼</button>

한 클래스, 여러 태그

<a>, <button>, <input> 태그에 .btn 클래스를 사용해 본다.

<a class="btn" href="">링크</a>
<button class="btn" type="submit">버튼</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

여러 웹브라우저와 호환을 위해 상황에 적합한 태그를 사용하는 것이 좋다. input이 있다면 <input type="submit">로 버튼을 만든다.

프로젝트에서 그림에 쉽게 스타일을 부여하려면 <img> 태그에 클래스를 더한다.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

주의! border-radius를 지원하지 않기 때문에 IE7~8에서는 .img-rounded와 .img-circle이 동작하지 않는다.

아이콘 문자

글리피콘스에서 진회색(기본)과 흰색으로 제공한, 스프라이트 형식의 140개 아이콘.

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-thumbs-up
icon-thumbs-down
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen

글리피콘스 감사

글리피콘스 하플링스는 무료가 아니지만, 부트스트랩과 글리피콘스 제작자들이 합의하여 개발자 여러분에게 무료로 제공한다. 고마움의 표시로, 가능하다면 글리피콘스 링크를 달도록 부탁한다.

사용법

모든 아이콘은 icon-으로 시작하는 클래스의 <i> 태크가 필요하다. 아래와 같은 코드를 아무곳에서나 사용할 수 있다.

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

한 클래스만 더하면 되는, 반전 (흰색) 아이콘을 위한 스타일도 있다. 우리는 탐색(nav)과 드롭다운 링크의 마우스 올림과 활성 상태에 이 클래스를 명시적으로 강제할 예정이다.

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

주의! 버튼이나 탐색 링크와 같은 본문이 아닌 곳에서 사용한다면, 적절히 공간을 벌이기 위해 <i> 태그 뒤에 공백을 주어야 한다.

아이콘 사용예

버튼과 도구막대의 버튼 그룹, 탐색, 앞에 덧붙인 양식 input에 아이콘을 사용해 본다.

버튼

버튼 도구막대의 버튼 그룹

<div class="btn-toolbar">
  <div class="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 class="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="dropdown-menu">
    <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 class="divider"></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 class="nav nav-list">
  <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 class="control-group">
  <label class="control-label" for="inputIcon">이메일 주소</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>