사용예

링크 목록을 보여주는 켜고 끌 수 있는 컨텍스트 메뉴. 드롭다운 자바스크립트 플러그인을 가지고 동작시킨다.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">행동</a></li>
  <li><a tabindex="-1" href="#">다른 행동</a></li>
  <li><a tabindex="-1" href="#">여기에는 또 다른</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">따로 떨어진 링크</a></li>
</ul>

마크업

드롭다운 메뉴만 보면 이것이 필요한 HTML 전부이다. 드롭다운을 켜고 끄는 링크나 버튼과 드롭다운 메뉴를 모두 .dropdown 안에 넣거나, position: relative;를 선언한 다른 태그가 필요하다. 그리고 메뉴를 만들면 된다.

<div class="dropdown">
  <!-- 드롭다운을 켜고 끌 링크나 버튼 -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">행동</a></li>
    <li><a tabindex="-1" href="#">다른 행동</a></li>
    <li><a tabindex="-1" href="#">여기에는 또 다른</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">따로 떨어진 링크</a></li>
  </ul>
</div>

옵션

메뉴를 오른쪽 정렬하고 하위 드롭다운를 추가한다.

메뉴 정렬

드롭다운 메뉴를 오른쪽 정렬하려면 .dropdown-menu에 .pull-right를 더한다.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

비활성 메뉴 항목

링크를 비활성화하려면 드롭다운의 <li>에 .disabled를 추가한다.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">일반 링크</a></li>
  <li class="disabled"><a tabindex="-1" href="#">비활성 링크</a></li>
  <li><a tabindex="-1" href="#">다른 링크</a></li>
</ul>

드롭다운의 하위 메뉴

몇가지 간단한 마크업을 추가하여, OS X에서 마우스를 올릴 때 보이는 하위 메뉴를 드롭다운 메뉴를 더한다. 기존의 드롭다운 메뉴의 아무 li에나 .dropdown-submenu를 추가하면 자동으로 스타일이 적용된다.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

사용예

두가지 기본 옵션과 두가지 독특한 변형이 있다.

단일 버튼 그룹

.btn을 가진 연속된 버튼들을 .btn-group으로 감싼다.

<div class="btn-group">
  <button class="btn">왼쪽</button>
  <button class="btn">중앙</button>
  <button class="btn">오른쪽</button>
</div>

여러 버튼 그룹

더 복잡한 구성요소를 위해 여러 <div class="btn-group">을 <div class="btn-toolbar"> 안에 넣는다.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

수직 버튼 그룹

버튼들을 수평이 아니라 수직으로 쌓는다.

<div class="btn-group btn-group-vertical">
  ...
</div>

Checkbox와 radio 특징

버튼 그룹은 오직 한 버튼만 기능하는 radio로 동작하거나, 여러 버튼이 기능하는 checkbox로 동작할 수 있다. 자세한 내용은 자바스크립트 문서를 참고하라.

버튼 그룹 속 드롭다운

주의! 드롭다운이 있는 버튼을 제대로 보이게 하려면 .btn-toolbar 안에 개별 .btn-group으로 감싸야 한다.

개요와 사용예

드롭다운 메뉴를 펼치는 버튼을 .btn-group 안에 위치하고 적절한 메뉴 마크업을 준다.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    행동
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- 드롭다운 메뉴 링크들 -->
  </ul>
</div>

모든 버튼 크기 가능

버튼 드롭다운은 .btn-large, .btn-small, .btn-mini 모든 크기에서 동작한다.

자바스크립트 필요

버튼 드롭다운이 동작하려면 부트스트랩 드롭다운 플러그인이 필요하다.

모바일 같은 일부 상황에서 드롭다운 메뉴가 화면 밖으로 나갈 수 있다. 직접 정렬하거나 자바스크립트로 해결해야 한다.

분리된 버튼 드롭다운

버튼 그룹 스타일과 마크업을 기반으로 쉽게 분리된 버튼을 만들 수 있다. 분리된 버튼은 왼쪽에 표준 액션이 있고 오른쪽에는 컨텍스트 메뉴를 가진 드롭다운 스위치가 있다.

<div class="btn-group">
  <button class="btn">행동</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 드롭다운 메뉴 링크들 -->
  </ul>
</div>

크기

.btn-mini, .btn-small, .btn-large 버튼 클래스를 추가하여 크기를 조절한다.

<div class="btn-group">
  <button class="btn btn-mini">액션</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 드롭다운 메뉴 링크들 -->
  </ul>
</div>

위로 펼침(dropup) 메뉴

.dropdown-menu 바로 상위에 클래스 하나를 추가하여 드롭다운 메뉴를 아래에서 위로 펼칠 수 있다. 그러면 .caret 방향을 뒤집고 메뉴 자체를 위에서 아래가 아니라 아래에서 위로 재위치한다.

<div class="btn-group dropup">
  <button class="btn">위로 펼침</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- 드롭다운 메뉴 링크들 -->
  </ul>
</div>

가벼운 기본 탐색 동일한 마크업, 다른 클래스

여기 탭, 알약, 목록, 이 모든 화면 구성요소는 .nav 클래스를 통해 동일한 기본 마크업과 스타일을 공유한다.

기본 탭

링크를 가진 평범한 <ul>에 .nav-tabs를 더한다.

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">대문</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

기본 알약

HTML은 같지만, 대신 .nav-pills를 사용한다.

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">대문</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

비활성 상태

어떤 탐색 구성요소(탭, 알약, 목록)에 링크는 회색으로 하고 마우스 올림 효과를 없애려면 .disabled를 사용한다. 그러나 href 속성을 없애지 않으면 여전히 링크를 클릭할 수 있다. 아니면 자바스크립트를 코딩하여 클릭을 방지할 수 있다.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">대문</a></li>
  ...
</ul>

구성요소 정렬

.pull-left와 .pull-right 도움 클래스를 사용하여 탐색 링크를 정렬한다. 두 클래스는 지시한 방향으로 CSS 유동 흐름을 더한다.

수직으로 쌓기

탭과 알약은 기본적으로 수평이다. 두번째 클래스 .nav-stacked를 추가하면 수직으로 쌓는다.

탭 쌓기

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

알약 쌓기

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

드롭다운

약간의 HTML과 드롭다운 자바스크립트 플러그인을 더하면 드롭다운 메뉴가 된다.

드롭다운이 있는 탭

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        드롭다운
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- 링크들 -->
    </ul>
  </li>
</ul>

드롭다운이 있는 알약

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        드롭다운
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- 링크들 -->
    </ul>
  </li>
</ul>

탐색 목록

제목이 들어갈 수 있는 탐색 링크 그룹을 만드는 간단하고 쉬운 방법이다. OS X 파인더처럼 사이드바에 잘 사용한다.

탐색 목록 예제

링크 목록에 class="nav nav-list"를 더한다.

<ul class="nav nav-list">
  <li class="nav-header">목록 제목</li>
  <li class="active"><a href="#">대문</a></li>
  <li><a href="#">도서관</a></li>
  ...
</ul>

주의 탐색 목록 안에 탐색 목록을 중첩하려면, 중첩하는 <ul>에 class="nav nav-list"를 포함한다.

수평 구분선

아래와 같이 .divider 클래스를 가진 빈 목록 항목을 만들어서 수평 구분선을 추가한다.

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

탭가능한 탐색

탭으로 콘텐츠 사이를 전환하는 간단한 플러그인을 가지고 탭에 활력을 넣는다. 부트스트랩은 윗쪽 (기본값), 오른쪽, 아래쪽, 왼쪽, 이 네가지 스타일로 탭가능한 탭을 모은다.

탭가능 예제

탭을 탭가능하게 하려면, 모든 탭마다 고유한 ID의 .tab-pane을 만들고 이 모두를 .tab-content로 묶는다.

<div class="tabbable"> <!-- 왼쪽과 오른쪽 탭에만 필요 -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">부분 1</a></li>
    <li><a href="#tab2" data-toggle="tab">부분 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>나는 부분 1에 있다.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>안녕, 나는 부분 2에 있어.</p>
    </div>
  </div>
</div>

페이드인 탭

탭이 점점 나타나게 하려면, .tab-pane마다 .fade을 추가한다.

jQuery 플러그인 필요

모든 탭가능한 탭은 우리의 경량 jQuery 플러그인을 사용한다. 탭가능한 탭을 동작하는 방법에 대해서는 자바스크립트 문서 페이지를 참고하라.

모든 방향으로 탭가능

아래쪽으로 탭

아래쪽에 탭을 넣으려면 HTML 순서를 뒤집고 클래스를 추가한다.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

왼쪽으로 탭

왼쪽에 탭을 두려면 클래스를 변경한다.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

오른쪽으로 탭

오른쪽에 탭을 두려면 클래스를 변경한다.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

기본 탐색막대

기본적으로 탐색막대는 (화면 상단에 고정되지 않고) 정적되며 프로젝트명과 기본 탐색을 포함한다. 사이트와 콘텐츠의 폭을 정하는 .container 속 아무 곳에나 둔다.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">프로젝트명</a>
    <ul class="nav">
      <li class="active"><a href="#">대문</a></li>
      <li><a href="#">링크</a></li>
      <li><a href="#">링크</a></li>
    </ul>
  </div>
</div>

탐색막대 구성요소

상표

상표나 프로젝트명을 보여주는 간단한 링크는 a 태그만으로 가능하다.

<a class="brand" href="#">프로젝트명</a>

탐색 링크

탐색 링크는 순서 없는 목록에 간단하게 추가한다.

<ul class="nav">
  <li class="active">
    <a href="#">대문</a>
  </li>
  <li><a href="#">링크</a></li>
  <li><a href="#">링크</a></li>
</ul>

간단한 클래스의 빈 목록 항목으로 탐색막대 링크에 구분선을 쉽게 넣을 수 있다. 그냥 링크들 사이에 이렇게 쓴다.

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

양식

아래와 같이 적절한 클래스를 사용하여 탐색막대 안에 양식의 스타일을 주고 위치를 잡는다. 기본 양식은 .navbar-form과 정렬할 .pull-left 혹은 .pull-right를 사용한다.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">제출</button>
</form>

검색 양식

더 특별한 검색 양식을 만들려면, form에 .navbar-search를 추가하고 탐색막대 속 특별한 스타일의 input에는 .search-query를 준다.

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="검색">
</form>

구성요소 정렬

.pull-left 혹은 .pull-right 도움 클래스를 사용하여 탐색 링크와 검색 양식 그리고 본문을 정렬한다. 두 클래스는 지시한 방향으로 CSS 유동 흐름을 더한다.

드롭다운 사용

약간의 마크업과 드롭다운 자바스크립트 플러그인을 가지고 탐색에 드롭다운과 위로 펼침을 추가할 수 있다.

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      계정
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

드롭다운을 부르는 마크업 등 정보는 자바스크립트 드롭다운 문서를 참고하라.

본문

<p> 태그에 .navbar-text를 사용하여 본문을 감싸면 적절한 행간과 색깔이 나온다.

선택적인 표시 변형

가장 바깥 .navbar div에 클래스를 추가하여 화면 상단 혹은 하단에 탐색막대를 고정한다.

화면 상단에 고정

.navbar-fixed-top을 더하고, <body>에 최소한 40px padding을 주어 아래 안보이는 공간을 고려한다. 이 내용은 부트스트랩 기본 CSS과 선택적인 반응형 CSS 사이에 추가해야 한다.

<div class="navbar navbar-fixed-top">
  ...
</div>

화면 하단에 고정

대신 .navbar-fixed-bottom을 추가한다.

<div class="navbar navbar-fixed-bottom">
  ...
</div>

상단 정적 탐색막대

.navbar-static-top은 폭을 모두 차지하고 페이지와 함께 스크롤되는 탐색막대를 만든다. .navbar-fixed-top 클래스와 달리 body의 패딩을 변경할 필요가 없다.

<div class="navbar navbar-static-top">
  ...
</div>

반응형 탐색막대

숨겨지는 반응형 탐색막대를 만들려면, 탐색막대 내용을 .nav-collapse.collapse div로 감싸고, 탐색막대 스위치 버튼 .btn-navbar를 추가한다.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar는 숨김 탐색막대 내용을 여닫는 스위치이다 -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- 상표가 보이길 바란다면 상표를 밖으로 확실히 뺀다 -->
      <a class="brand" href="#">프로젝트명</a>

      <!-- 940px 이하에서 숨길 모든 내용을 이 안에 둔다 -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form 등 -->
      </div>

    </div>
  </div>
</div>

반전 변형

.navbar-inverse를 더하여 탐색막대 모습을 바꾼다.

<div class="navbar navbar-inverse">
  ...
</div>

사용예

이런 예제를 여러 페이지에 걸쳐 보일 수 있다.

<ul class="breadcrumb">
  <li><a href="#">대문</a> <span class="divider">/</span></li>
  <li><a href="#">라이브러리</a> <span class="divider">/</span></li>
  <li class="active">자료</li>
</ul>

표준 페이지 탐색

Rdio에서 영감을 받은 간단한 페이지 탐색은 앱과 검색 결과에 사용하기 좋다. 큰 블록은 잘못 클릭하기 어렵고, 크기 조절이 쉬우며 클릭 영역이 크다.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

옵션

비활성과 현재 상태

다른 상황에 맞게 링크를 변형한다. 클릭할 수 없는 링크는 .disabled를 사용하고, 현재 페이지는 .active로 표시한다.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

의도한 스타일은 유지하면서 클릭 기능만 없애기위해 현재와 비활성 a를 span과 교체할 수도 있다.

<div class="pagination">
  <ul>
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

크기

크고 작은 페이지 탐색이 필요한가? .pagination-large, .pagination-small, .pagination-mini를 붙이면 다른 크기가 된다.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

정렬

선택적인 두 클래스, .pagination-centered와 .pagination-right 중 하나를 추가하면 페이지 탐색 링크의 정렬이 바뀐다.

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

앞뒤 페이지 (pager)

가벼운 마크업과 스타일의 빠른 이전과 다음 링크를 가지고 간단한 페이지 탐색을 구현한다. 블로그나 잡지 같은 간단한 사이트에 사용하기 좋다.

기본 예제

기본적으로 앞뒤 페이지 링크는 중앙 정렬한다.

<ul class="pager">
  <li><a href="#">이전</a></li>
  <li><a href="#">다음</a></li>
</ul>

링크 정렬

아니면 두 링크를 양끝으로 정렬할 수 있다.

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; 이전</a>
  </li>
  <li class="next">
    <a href="#">다음 &rarr;</a>
  </li>
</ul>

선택적인 비활성 상태

앞뒤 페이지도 페이지 탐색의 범용 .disabled 도움 클래스를 사용할 수 있다.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">&larr; 이전</a>
  </li>
  ...
</ul>

라벨

배지

쉽게 사라짐

쉽게 사용하도록 라벨과 배지는 안에 내용이 없으면 (CSS :empty 선택자를 통해) 그냥 표시하지 않는다.

히어로 유닛 (hero unit)

사이트의 핵심 콘텐츠를 전시하는 가볍고 유연한 화면 구성요소이다. 마케팅과 콘텐츠 중심 사이트에 잘 어울린다.

<div class="hero-unit">
  <h1>제목</h1>
  <p>핵심 문구</p>
  <p>
    <a class="btn btn-primary btn-large">
      더 알아보기
    </a>
  </p>
</div>

페이지 제목

적절하게 공간을 벌리고 페이지에서 내용들을 구분하기위해 h1를 간단히 두른다. h1의 기본 small 태그는 물론이고 여러 다른 구성요소와 스타일을 사용할 수 있다.

<div class="page-header">
  <h1>예제 페이지 제목 <small>제목의 부제목</small></h1>
</div>

기본 미리보기

기본적으로 부트스트랩의 미리보기는 최소한의 마크업으로 링크가 달린 그림들을 전시한다.

매우 맞춤가능

마크업을 조금 더하면 제목, 단락, 버튼 같은 어떤 HTML 내용이라도 미리보기에 넣을 수 있다.

왜 미리보기를 사용하는가

미리보기(과거 1.4 버전까지 .media-grid)는 사진, 동영상, 그림 검색 결과, 소매용품, 포트폴리오 등의 격자를 멋지게 보여준다. 링크나 정적인 내용을 포함할 수 있다.

단순하고 유연한 마크업

미리보기 마크업은 간단하다. ul 안에 여러 li 태그면 끝이다. 또한 매우 유연하여 어떤 내용이든지 감싸는 약간의 마크업만으로 가능하다.

격자 열 크기 사용

끝으로 미리보기 화면 구성요소는 .span2나 .span3 같은 기존의 격자 방식 클래스를 사용하여 미리보기 크기를 조절한다.

마크업

앞에서 말했듯이 미리보기 마크업은 가볍고 복잡하지 않다. 링크가 달린 그림들을 위한 기본 구조를 보라.

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

미리보기에 원하는 HTML 내용을 넣으려면 마크업이 약간 바뀐다. 블록 수준 내용을 아무곳에나 사용하려고 이렇게 <a>를 <div>로 바꾸었다.

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>미리보기 제목</h3>
      <p>미리보기 설명...</p>
    </div>
  </li>
  ...
</ul>

추가 예제

주어진 다양한 격자 클래스를 사용해 보았다. 다른 크기를 혼용할 수도 있다.

기본 경고

간단한 경고문은 본문과 선택적인 닫기 버튼을 .alert로 감싼다.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>경고!</strong> 안색이 썩 좋아보이지 않으니 검사를 받아보는게 좋겠다.
</div>

닫기 버튼

모바일 사파리와 모바일 오페라 웹브라우저에서 <a> 태그를 사용한다면, 경고를 닫기위해 data-dismiss="alert" 속성에 추가로 href="#"이 필요하다.

<a href="#" class="close" data-dismiss="alert">&times;</a>

아니면 이 문서에서 처럼 <button> 태그와 data 속성을 사용할 수 있다. <button>을 사용할 때 type="button"를 사용해야 한다. 안그러면 양식을 제출못할 수도 있다.

<button type="button" class="close" data-dismiss="alert">&times;</button>

자바스크립트로 경고 닫기

경고 jQuery 플러그인을 사용하여 빠르고 쉽게 경고를 닫을 수 있다

옵션

문구가 길다면, .alert-block을 더하여 경고 윗쪽과 아래쪽 패딩을 늘린다.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>경고!</h4>
  안색이 썩 좋아보이지 않으니...
</div>

상황에 따른 변형

선택적인 클래스를 추가하여 경고의 의미를 변경한다.

오류 혹은 위험

<div class="alert alert-error">
  ...
</div>

성공

<div class="alert alert-success">
  ...
</div>

정보

<div class="alert alert-info">
  ...
</div>

예제와 마크업

기본

수직 방향 그라데이션의 기본 진행표시줄.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

줄무늬

그라데이션을 사용하여 만든 줄무늬 효과. IE7~8에서는 불가.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

애니메이션

.progress-striped에 .active를 더하면 줄무늬가 오른쪽에서 왼쪽으로 움직인다. 모든 버전의 IE에서 불가.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

누적

여러 막대를 한 .progress에 누적한다.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

옵션

추가 색깔

진행표시줄은 일관된 스타일을 위해 버튼과 경고 스타일의 일부를 사용한다.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

줄무늬 막대

단일색과 마찬가지로, 다양한 줄무늬 진행표시줄이 가능하다.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

웹브라우저 지원

진행표시줄의 모든 효과는 CSS3의 그라데이션과 전환과 애니메이션을 사용한다. 이 기능은 IE7~9와 파이어폭스 과거 버전에서 지원하지 않는다.

인터넷 익스플로러 10과 오페라 12 이전 버전은 애니메이션을 지원하지 않는다.

왼쪽이나 오른쪽으로 정렬된 그림과 함께 본문 내용이 나오는 (블로그 덧글, 트윗 등) 다양한 종류의 화면 구성요소를 만드는 추상 객체 스타일.

기본 예제

기본적으로 본문 블록 왼쪽이나 오른쪽으로 미디어 객체(그림, 동영상, 소리)를 유동시킨다.

미디어 제목

나의 손을 붉게 하고 내 얼굴을 푸르게 하던 추위는 없어진지 오래이다. 햇볕은 따뜻하고 바람끝은 부드럽다. 잔디밭에는 새싹이 돋아나고 개나리와 진달래는 벌써 산야를 붉고 누르게 수놓았다. 어느덧 버드나무 얽힌 곳에 꾀꼬리는 벗을 찾고 아지랑이 희미한 하늘에 종달새는 높이 떴다.

미디어 제목

나의 손을 붉게 하고 내 얼굴을 푸르게 하던 추위는 없어진지 오래이다. 햇볕은 따뜻하고 바람끝은 부드럽다. 잔디밭에는 새싹이 돋아나고 개나리와 진달래는 벌써 산야를 붉고 누르게 수놓았다. 어느덧 버드나무 얽힌 곳에 꾀꼬리는 벗을 찾고 아지랑이 희미한 하늘에 종달새는 높이 떴다.

미디어 제목

나의 손을 붉게 하고 내 얼굴을 푸르게 하던 추위는 없어진지 오래이다. 햇볕은 따뜻하고 바람끝은 부드럽다. 잔디밭에는 새싹이 돋아나고 개나리와 진달래는 벌써 산야를 붉고 누르게 수놓았다. 어느덧 버드나무 얽힌 곳에 꾀꼬리는 벗을 찾고 아지랑이 희미한 하늘에 종달새는 높이 떴다.

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">미디어 제목</h4>
    ...

    <!-- 안에 있는 미디어 객체 -->
    <div class="media">
      ...
    </div>
  </div>
</div>

미디어 목록

약간 마크업을 더하여 (덧글의 덧글이나 기사 목록에 유용한) 미디어 내부 목록을 만들 수 있다.

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">미디어 제목</h4>
      ...

      <!-- 안에 있는 미디어 객체 -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

우물 (well)

우물은 간단하게 태그에 삽입 효과를 준다.

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

선택적인 클래스

두 선택적인 추가 클래스는 패딩과 둥근 모서리를 조절한다.

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

닫기 아이콘

모달과 경고 같은 내용을 없애는 용도의 범용 닫기 아이콘이다.

<button class="close">&times;</button>

iOS 장치에서 a 태그를 사용하고 싶다면 클릭 이벤트로 href="#"이 필요하다.

<a class="close" href="#">&times;</a>

도움 클래스

외형이나 행동을 약간 변경하는 간단한 전용 클래스들.

.pull-left

태그를 왼쪽으로 유동시킨다.

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

태그를 오른쪽으로 유동시킨다.

class="pull-right"

.pull-right {
  float: right;
}

.muted

태그 색깔을 #999(진회색)로 변경한다.

class="muted"

.muted {
  color: #999;
}

.clearfix

해당 태그의 float 유동 흐름을 마친다.

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}