구성품

수십 개의 재사용 가능한 구성 요소가 Bootstrap에 내장되어 탐색, 경고, 팝오버 등을 제공합니다.

버튼 그룹

버튼 그룹을 사용하여 여러 버튼을 하나의 복합 구성 요소로 결합합니다. 일련의 <a>또는 <button>요소로 구성하십시오.

더 복잡한 프로젝트를 위해 <div class="btn-group">의 세트를 결합할 수도 있습니다.<div class="btn-toolbar">

마크업 예시

HTML이 앵커 태그 버튼으로 구축된 표준 버튼 그룹을 찾는 방법은 다음과 같습니다.

<div 클래스 = "btn-group" > 
  <a 클래스 = "btn" href = "#" > 1 </a>  
  <a 클래스 = "btn" href = "#" > 2 </a>  
  <a 클래스 = "btn" href = "#" > 3 </a>  
</div>

그리고 여러 그룹을 위한 도구 모음:

<div 클래스 = "btn-toolbar" > 
  <div 클래스 = "btn-group" > 
    ...
  </div>
</div>

체크박스와 라디오 플레이버

버튼 그룹은 또한 하나의 버튼만 활성화될 수 있는 라디오 또는 임의의 수의 버튼이 활성화될 수 있는 체크박스로 기능할 수 있습니다. 이에 대한 Javascript 문서 를 보십시오.

자바스크립트 받기 »

주의

버튼 그룹용 CSS는 별도의 파일인 button-groups.less에 있습니다.

버튼 드롭다운

.btn-group아무 버튼이나 사용하여 드롭다운 메뉴를 안에 배치 하고 적절한 메뉴 마크업을 제공하여 트리거합니다 .

마크업 예시

버튼 그룹과 유사하게, 우리 마크업은 일반 버튼 마크업을 사용하지만 스타일을 구체화하고 부트스트랩의 드롭다운 jQuery 플러그인을 지원하기 위해 몇 가지 추가 사항이 있습니다.

<div 클래스 = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    동작
    <span 클래스 = "캐럿" ></span> 
  </a>
  <ul class = "드롭다운 메뉴" > 
    <!-- 드롭다운 메뉴 링크 -->
  </ul>
</div>

분할 버튼 드롭다운

버튼 그룹 스타일과 마크업을 기반으로 분할 버튼을 쉽게 만들 수 있습니다. 분할 버튼은 왼쪽에 표준 동작이 있고 오른쪽에 컨텍스트 링크가 있는 드롭다운 토글이 있습니다.

마크업 예시

일반 버튼 드롭다운을 확장하여 별도의 드롭다운 트리거로 작동하는 두 번째 버튼 작업을 제공합니다.

<div 클래스 = "btn-group" > 
  <a class = "btn" href = "#" > 작업 </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span 클래스 = "캐럿" ></span> 
  </a>
  <ul class = "드롭다운 메뉴" > 
    <!-- 드롭다운 메뉴 링크 -->
  </ul>
</div>

경량 기본값 동일한 마크업, 다른 클래스

강력한 기본 클래스

탭, 알약 및 목록과 같은 여기의 모든 탐색 구성 요소 는 클래스를 통해 동일한 기본 마크업 및 스타일을 공유합니다.nav .

탭과 알약을 사용하는 이유

Bootstrap의 탭과 알약은 <ul>동일한 핵심 HTML인 링크 목록을 기반으로 합니다. 클래스만 있는 탭 또는 알약 간에 전환합니다.

두 옵션 모두 콘텐츠의 하위 섹션이나 관련 콘텐츠 페이지 사이를 탐색하는 데 유용합니다.

기본 탭

<ul>링크를 정기적으로 가져 와서 다음 을 추가하십시오 .nav-tabs.

<ul 클래스 = "내비게이션 탭" > 
  <li 클래스 = "활성" > 
    <a href = "#" > 홈 </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

기본 알약

동일한 HTML을 사용하되 .nav-pills대신 다음을 사용하십시오.

<ul 클래스 = "내비게이션 알약" > 
  <li 클래스 = "활성" > 
    <a href = "#" > 홈 </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

쌓을 수 있는 탭 또는 알약을 세로 로 만듭니다.

쌓는 방법

탭과 알약은 기본적으로 가로로 되어 있으므로 두 번째 클래스인 를 추가하여 .nav-stacked세로로 쌓인 것처럼 보이게 하십시오.

누적 탭

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

누적된 알약

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

고급 탐색 구성 요소에 대한 드롭다운

다양한 메뉴를 간편하게

Bootstrap 탭과 알약의 드롭다운 메뉴는 매우 쉽고 약간의 추가 HTML과 가벼운 jQuery 플러그인만 있으면 됩니다.

Javascript 페이지로 이동하여 Bootstrap에서 드롭다운 초기화 에 대한 문서를 읽으십시오.

드롭다운이 있는 탭

<ul 클래스 = "내비게이션 탭" > 
  <li 클래스 = "드롭다운" > 
    <a class = "dropdown-toggle" 
       데이터 토글 = "드롭다운"
       href = "#" >
        쓰러지 다
        <b 클래스 = "캐럿" ></b> 
      </a>
    <ul class = "드롭다운 메뉴" > 
      <!-- 링크 -->
    </ul>
  </li>
</ul>

드롭다운이 있는 알약

<ul 클래스 = "내비게이션 알약" > 
  <li 클래스 = "드롭다운" > 
    <a class = "dropdown-toggle" 
       데이터 토글 = "드롭다운"
       href = "#" >
        쓰러지 다
        <b 클래스 = "캐럿" ></b> 
      </a>
    <ul class = "드롭다운 메뉴" > 
      <!-- 링크 -->
    </ul>
  </li>
</ul>

탐색 목록 사이드바에 적합한 간단한 누적 탐색 만들기

애플리케이션 스타일 탐색

탐색 목록은 선택적 헤더가 있는 탐색 링크 그룹을 구축하는 간단하고 쉬운 방법을 제공합니다. OS X의 Finder와 같은 사이드바에서 가장 잘 사용됩니다.

구조적으로 탭 및 알약과 동일한 핵심 탐색 스타일을 기반으로 하므로 사용 및 사용자 지정이 간단합니다.

아이콘으로

탐색 목록에는 아이콘도 쉽게 장착할 수 있습니다. <i>클래스와 함께 적절한 태그를 추가하면 설정이 완료됩니다.

탐색 목록의 예

링크 목록을 가져 와서 다음을 추가하십시오 class="nav nav-list".

<ul 클래스 = "내비게이션 목록" > 
  <li 클래스 = "내비 헤더" > 
    목록 헤더
  </li>
  <li 클래스 = "활성" > 
    <a href = "#" > 홈 </a> 
  </li>
  <리>
    <a href = "#" > 라이브러리 </a> 
  </li>
  ...
</ul>

아이콘이 있는 예

같은 예이지만 <i>아이콘에 대한 태그가 있습니다.

<ul 클래스 = "내비게이션 목록" > 
  ...
  <리>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      도서관
    </a>
  </li>
  ...
</ul>

Tabbbable nav 자바스크립트를 통해 탭에 생명을 불어 넣다

포함된 항목

탭을 통해 콘텐츠 간에 전환하는 간단한 플러그인으로 탭에 생기를 불어넣으세요. 부트스트랩은 탭 가능한 탭을 위쪽(기본값), 오른쪽, 아래쪽 및 왼쪽의 네 가지 스타일로 통합합니다.

그들 사이를 변경하는 것은 쉽고 아주 적은 마크업만 변경하면 됩니다.

탭 가능한 예

.nav-tabs탭을 탭할 수 있게 하려면 다른 div를 class 로 래핑합니다 .tabbable.

저는 섹션 1에 있습니다.

안녕하세요, 저는 섹션 2에 있습니다.

무슨 일이야, 이것은 섹션 3입니다.

사용자 정의 jQuery 플러그인

모든 탭 가능 탭은 경량 jQuery 플러그인으로 구동됩니다. 자바스크립트 문서 페이지에서 탭 가능한 탭에 생명을 불어넣는 방법에 대해 자세히 알아보세요.

자바스크립트 받기 →

간단한 마크업

탭 가능 탭을 사용하려면 래핑 div, 탭 세트 및 탭 가능 콘텐츠 창 세트가 필요합니다.

<div 클래스 = "탭 가능" > 
  <ul 클래스 = "내비게이션 탭" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > 섹션 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > 섹션 2 </a></li>  
  </ul>
  <div 클래스 = "탭 콘텐츠" > 
    <div 클래스 = "탭 창 활성" id = "1" >  
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Tabbable in any direction

Tabs on the bottom

Flip the order of the HTML and add a class to put tabs on the bottom.

I'm in Section A.

안녕하세요, 저는 섹션 B에 있습니다.

잘가요, 여기는 섹션 C입니다.

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

Tabs on the left

Swap the class to put tabs on the left.

I'm in Section A.

안녕하세요, 저는 섹션 B에 있습니다.

잘가요, 여기는 섹션 C입니다.

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

Tabs on the right

Swap the class to put tabs on the right.

I'm in Section A.

안녕하세요, 저는 섹션 B에 있습니다.

잘가요, 여기는 섹션 C입니다.

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

Static navbar example

An example of a static (not fixed to the top) navbar with project name, navigation, and search form.

Navbar scaffolding

The navbar requires only a few divs to structure it well for static or fixed display.

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

To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.

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

Brand name

A simple link to show your brand or project name only requires an anchor tag.

<a class="brand" href="#">
  Project name
</a>

Search form

Search forms receive custom styles in the navbar with the .navbar-search class. Include .pull-left or .pull-right on the form to align it.

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

Optional responsive variation

Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <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>
 
      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>
 
      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Heads up! The responsive navbar requires the collapse plugin.

Nav links

Nav items are simple to add via unordered lists.

<ul class="nav">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Adding dropdowns

Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.

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

Get the javascript →

Why use them

Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.

Examples

A single example shown as it might be displayed across multiple pages.

Markup

HTML is your standard unordered list with links.

<ul class="breadcrumb">
  <li>
    <a href="#">Home</a> <span class="divider">/</span>
  </li>
  <li>
    <a href="#">Library</a> <span class="divider">/</span>
  </li>
  <li class="active">
    <a href="#">Data</a>
  </li>
</ul>

Multicon-page pagination

When to use

Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Stateful page links

Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

Flexible alignment

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

Examples

The default pagination component is flexible and works in a number of variations.

Markup

Wrapped in a <div>, pagination is just a <ul>.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active">
      <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="#">Next</a></li>
  </ul>
</div>

Pager For quick previous and next links

About pager

The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

<ul class="pager">
  <li>
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>

Aligned links

Alternatively, you can align each link to the sides:

<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

Labels	Markup
Default	`<span class="label">Default</span>`
New	`<span class="label label-success">New</span>`
Warning	`<span class="label label-warning">Warning</span>`
Important	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action
Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

The markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
      <h5>Thumbnail label</h5>
      <p>Thumbnail caption right here...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Lightweight defaults

Rewritten base class

With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.

Single alert message

For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

Goes great with javascript

Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

× Warning! Best check yo self, you’re not looking too good.

<div class="alert">
  <a class="close">×</a>
  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
</div>

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

Warning!

Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <a class="close">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you’re not...
</div>

Contextual alternatives Add optional classes to change an alert's connotation

Error or danger

× Oh snap! Change a few things up and try submitting again.

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

Success

× Well done! You successfully read this important alert message.

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

Information

× Heads up! This alert needs your attention, but it’s not super important.

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

Examples and markup

Basic

Default progress bar with a vertical gradient.

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

Striped

Uses a gradient to create a striped effect.

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

Animated

Takes the striped example and animates it.

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

Options and browser support

Additional colors

Progress bars utilize some of the same class names as buttons and alerts for similar styling.

.progress-info
.progress-success
.progress-danger

Alternatively, you can customize the LESS files and roll your own colors and sizes.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

Opera does not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

Look, I'm in a well!

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

배지

읽지 않은 수를 나타내거나 간단한 표시기로 요소에 배지를 사용합니다.

<스팬 클래스 = "배지" > 3 </div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

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

버튼 그룹 더 많은 도구 모음과 유사한 기능을 위한 버튼 조인

버튼 그룹

마크업 예시

체크박스와 라디오 플레이버

주의

버튼 드롭다운 버튼 그룹을 기반으로 하는 상황별 드롭다운 메뉴

버튼 드롭다운

마크업 예시

분할 버튼 드롭다운

마크업 예시

탐색, 탭 및 알약 고도로 사용자 정의 가능한 목록 스타일 탐색

경량 기본값 동일한 마크업, 다른 클래스

강력한 기본 클래스

탭과 알약을 사용하는 이유

기본 탭

기본 알약

쌓을 수 있는 탭 또는 알약을 세로 로 만듭니다.

쌓는 방법

누적 탭

누적된 알약

고급 탐색 구성 요소에 대한 드롭다운

다양한 메뉴를 간편하게

드롭다운이 있는 탭

드롭다운이 있는 알약

탐색 목록 사이드바에 적합한 간단한 누적 탐색 만들기

애플리케이션 스타일 탐색

아이콘으로

탐색 목록의 예

아이콘이 있는 예

Tabbbable nav 자바스크립트를 통해 탭에 생명을 불어 넣다

포함된 항목

탭 가능한 예

사용자 정의 jQuery 플러그인

간단한 마크업

Tabbable in any direction

Tabs on the bottom

Tabs on the left

Tabs on the right

Navbar

Static navbar example

Navbar scaffolding

Brand name

Search form

Optional responsive variation

Nav links

Adding dropdowns

Breadcrumbs

Why use them

Examples

Markup

Pagination Two options for paging through content

Multicon-page pagination

When to use

Stateful page links

Flexible alignment

Examples

Markup

Pager For quick previous and next links

About pager

Default example

Aligned links

Inline labels Label and annotate text

Thumbnails Grids of images, videos, text, and more

Default thumbnails

Highly customizable

Thumbnail label

Thumbnail label

Why use thumbnails

Simple, flexible markup

Uses grid column sizes

The markup

More examples

Alerts Styles for success, warning, and error messages

Lightweight defaults

Rewritten base class

Single alert message

Goes great with javascript

Example alerts

Warning!

Contextual alternatives Add optional classes to change an alert's connotation