Glyphicons

사용가능한 기호

Glyphicon Halflings 세트로 폰트 포멧에 250 기호 이상을 포함하고 있습니다. Glyphicons Halflings 은 보통 무료로 가능하지 않습니다만, 그들의 제작자는 부트스트랩을 위해 비용 없이 만들었습니다. 고맙게 생각하신다면, 당신이 가능한 때에 Glyphicons 에 방문해주세요.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

사용법

성능상의 이유로, 모든 아이콘은 기본클래스와 개개의 클래스를 필요로 합니다. 사용하려면, 다음의 코드를 어디든지 붙혀놓으면 됩니다. 적절한 패딩을 위해 아이콘과 글자 사이에 공간을 남겨두세요.

다른 콤포넌트와 섞지 마세요

아이콘 클래스는 다른 콤포넌트와 직접 섞일수 없습니다. 그들은 같은 요소에 다른 클래스와 함께 사용되지 않을 것입니다. 대신, 중첩된 <span> 를 추가하고 <span> 에 아이콘 클래스를 적용하세요.

빈요소에만 사용하세요

아이콘 클래스는 텍스트나 자식 요소가 없는 요소에만 사용되어야 합니다.

아이콘 폰트 위치 변경하기

부트스트랩은 아이콘 폰트 파일은 컴파일된 CSS 파일의 상대적인 ../fonts/ 에 있을 것이라고 추정합니다. 이 폰트 파일을 옮기거나 이름을 바꾸는 방법은 3가지 방법중 하나로 하시면 됩니다.

  • Less 파일에서 @icon-font-path@icon-font-name 변수를 변경합니다.
  • Less 컴파일러에서 제공되는 relative URLs 옵션 을 활용하세요.
  • 컴파일된 CSS 에서 url() 경로를 변경하세요.

당신의 개발 설정에 최대한 맞춘 옵션을 사용하세요.

접근가능한 아이콘

보조 공학의 현대 버전은 유니코드를 알릴것입니다. 스크린리더에서 의도치 않고 혼란스러운 출력을 피하기 위해, 우리는 그들을 aria-hidden="true" 속성으로 숨깁니다.

만약 당신이 의미를 전달하는 아이콘을 사용한다면, .sr-only 를 사용하여, 보조공학에도 의미가 전달되어야만 합니다.

만약 당신이 텍스트 없는 콘트롤(아이콘만 있는 <button> 처럼)을 만든다면, 당신은 항상 콘트롤의 목적을 식별할 수 있는 대체 콘텐츠를 제공해야 합니다. 이 경우, 당신은 콘트롤 자체에 aria-label 속성을 추가하셔도 됩니다.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

예제

툴바와 네비게이션을 위해 버튼과 버튼 그룹에 그들을 사용하거나, 폼 입력요소 앞에 덧붙힙니다.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

아이콘은 경보에서 그것이 에러메시지라는 것을 전달하기 위해 사용됩니다. 그리고 그것은 보조 공학 사용자들에게도 알리기 위해 추가적인 .sr-only 텍스트가 필요합니다.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

드롭다운

링크들의 목록을 보여주기 위한 토글이 가능한 컨텍스트 메뉴. 드롭다운 자바스크립트 플러그인 으로 상호작용하도록 만드세요.

드롭다운의 트리거와 드롭다운 메뉴를 .dropdown 으로 둘러싸세요, 아니면 다른 태그에 position: relative; 를 정의하고, 메뉴 HTML 을 추가하세요. 드롭다운 메뉴는 부모에 .dropup 를 추가하는 것으로 바뀌는 것이 가능합니다.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

기본적으로, 드롭다운 메뉴는 자동적으로 좌상단에 위치합니다. 우측 정렬하려면 .dropdown-menu.dropdown-menu-right 를 추가하세요.

추가적으로 위치를 잡는 것이 필요할 수 있습니다

드롭다운은 자동적으로 CSS 를 통해 문서의 기본 흐름으로 위치를 잡습니다. 이것은 드롭다운은 부모의 overflow 이나 뷰포트의 바깥영역에 의해 크롭(crop)될 수 있음을 의미합니다. 이런 이슈가 발생하면 스스로 해결해야합니다.

폐지예정된 .pull-right 정렬

v3.1.0 이후로, 우리는 드롭다운 메뉴에 .pull-right 을 폐지예정으로 하였습니다. 메뉴를 우측정렬하려면, .dropdown-menu-right 를 사용하세요. 네비게이션바에서 우측정렬된 네비게이션 콤포넌트는 메뉴를 자동적으로 정렬하기 위해 이 클래스의 믹스인 버전을 사용합니다. 그것을 오버라이드하기 위해, .dropdown-menu-left 을 사용하세요.

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

드롭다운 메뉴의 액션 그룹에 라벨을 붙이려면 헤더를 추가하세요.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  ...
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

드롭다운 메뉴에 일련의 링크를 구분하기 위해 구분선을 추가하세요.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="presentation" class="divider"></li>
  ...
</ul>

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

버튼 그룹

일련의 버튼들을 버튼 그룹으로 같이 한줄에 모으세요. 버튼 플러그인 으로 라디오와 체크박스처럼 사용할 수도 있습니다.

버튼 그룹안의 툴팁 & 팝오버 특별한 설정이 필요합니다

.btn-group 요소에 툴팁이나 팝오버를 사용할 때, 당신은 원치않는 부작용(요소가 넓어진다거나 모서리가 없어진다거나)을 피하기 위해 옵션 container: 'body' 을 명시해야 할 것입니다.

정확한 role 을 부여하고 라벨을 제공하세요

보조 공학을 위해 그룹화된 일련의 버튼들을 전달하기 위해서, 적절한 role 속성이 제공되어져야 합니다. 버튼 그룹을 위해, 이것은 role="group" 이 될 수 있습니다. 툴바는 role="toolbar" 을 가져야 합니다.

한가지 예외는 하나의 콘트롤 밖에 없는 그룹이나 드롭다운입니다. 예를 들면 <button> 요소와 함께하는 양쪽정렬된 버튼 그룹

게다, 대부분의 보조 공학은 올바른 role 속성이 존재함에도 불구하고, 그룹과 툴바는 명확하게 라벨이 주어져야 합니다. 여기에 제공된 예제에서, 우리는 aria-label 을 사용했습니다만 aria-labelledby 같은 대안도 사용될 수 있습니다.

기본 예제

.btn 로 된 일련의 버튼들을 .btn-group 으로 감싸세요.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

버튼 툴바

더 복합적인 콤포넌트를 만드려면 <div class="btn-group"> 세트를 <div class="btn-toolbar"> 으로 합치세요.

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

크기 조절

그룹 내 모든 버튼에 일일이 크기조절 클래스를 적용하는 대신, .btn-group.btn-group-* 을 추가합니다.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

중첩하기

일련의 버튼과 같이 있는 드롭다운 메뉴를 원할 때는 .btn-group 안에 다른 .btn-group 을 넣으시면 됩니다.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

수직형

버튼 그룹이 수평으로 말고 수직으로 쌓입니다. 분리된 버튼 드롭다운은 지원되지 않습니다.

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

양쪽정렬된 버튼 그룹

버튼 그룹을 그것의 부모의 꽉찬 너비 걸쳐 같은 크기로 늘리게 합니다. 또한 버튼 그룹내의 드롭다운에도 작동합니다.

모서리 다루기

양쪽정렬된 버튼을 위해 사용된 특정 HTML 과 CSS 로 인해 (말하자면, display: table-cell), 그들사이의 모서리는 두배입니다. 보통 버튼 그룹에서는, 그들을 없애기 위해 margin-left: -1px 를 사용됩니다. 하지만 margindisplay: table-cell 와 같이 작동하지 않습니다. 결과적으로, 부트스트랩을 맞춤화하여, 모서리를 제거하거나 색을 적용하는 것을 원할 수 있습니다.

IE8 과 모서리

인터넷 익스플로러 8 은 양쪽 정렬된 버튼 그룹의 버튼모서리를 렌더링 하지 않습니다. 그것이 <a> 이거나 <button> 인지는 상관이 없습니다. 이것을 우회하려면, 버튼을 또다른 .btn-group 으로 감싸세요.

더 많은 정보는 #12476 을 보세요.

<a> 요소와

그냥 일련의 .btn 들을 .btn-group.btn-group-justified 으로 감싸세요.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

버튼으로서의 링크

만약 <a> 요소가 버튼으로서 사용된다면, 그들은 적절한 role="button" 이 주어져야 합니다.

<button> 요소와

<button> 요소와 양쪽정렬된 버튼 그룹을 사용하기 위해, 당신은 각 버튼을 버튼 그룹으로 감싸야 합니다. 대부분의 브라우저들은 <button> 요소를 정렬하기 위한 우리의 CSS 를 적절히 적용하지 않습니다만, 우리가 버튼 드롭다운을 지원한 이후로, 우리는 그것을 우회하여 작동할 수 있습니다.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

버튼 드롭다운

드롭다운 메뉴가 작동되는 버튼을 사용하려면 .btn-group 안에 그것들을 두고 적절한 메뉴 마크업을 해줍니다.

플러그인 의존성

버튼 드롭다운은 부트스트랩에 포함된 드롭다운 플러그인 를 필요로 합니다.

단버튼 드롭다운

몇가지 기본 마크업을 변경하여 버튼을 드롭다운 토글로 바꾸세요.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

분할된 버튼 드롭다운

똑같은 마크업에, 분리된 버튼만 추가하여 분할된 버튼 드롭다운을 만드세요.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

크기조절

버튼 드롭다운은 모든 크기의 버튼에서 동작합니다.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

드롭업형

상위태그에 .dropup 을 더하여 드롭다운 메뉴를 요소 위로 올라가도록 작동시키세요.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

입력 그룹

문자 기반의 <input> 의 전,후 혹은 양쪽에 문자나 버튼을 추가하여 폼컨트롤을 확장하세요. .form-control 에 앞이나 뒤에 첨부된 .input-group-addon 과 함께 .input-group 을 사용합니다.

문자 기반의 <input>

여기에 <select> 요소를 사용하는 것을 피하세요. 왜냐하면 웹킷 브라우저에서 완전히 지원되지 않기 때문입니다.

여기에 <textarea> 요소를 사용하는 것을 피하세요. 왜냐하면 그들의 rows 속성은 몇몇 경우에 적용되지 않기 때문입니다.

입력 그룹안의 툴팁 & 팝오버 특별한 설정이 필요합니다

.input-group 요소에 툴팁이나 팝오버를 사용할 때, 당신은 원치않는 부작용(요소가 넓어진다거나 모서리가 없어진다거나)을 피하기 위해 옵션 container: 'body' 을 명시해야 할 것입니다.

다른 콤포넌트와 섞지 마세요

폼 그룹이나 그리드 열 클래스와 직접 섞지 마세요. 대신, 폼 그룹이나 그리드 관련 요소 안에 중첩하세요.

항상 라벨을 추가하세요

스크린 리더는 만약 모든 입력에 라벨을 포함하지 않는다면 당신의 폼에 있어 문제를 일으킬 것입니다. 이런 입력 그룹을 위해, 보조 공학에게 추가적인 라벨이나 기능성을 전달하는 것을 확실히 하도록 하세요.

사용되어질 수 있는 정확한 기법(.sr-only 클래스를 사용하여 숨겨진 <label> 요소나, aria-label, aria-labelledby, aria-describedby, title, placeholder 요소를 사용)과 전달하는 필요하게 될 추가적인 정보들은 당신이 사용하는 인터페이스 위젯의 정확한 유형에 따라서 달라질 것입니다. 이 섹션의 예제는 몇 가지 유형별 접근을 제안합니다.

기본 예제

입력콘트롤의 양쪽에 애드온이나 버튼을 넣으세요. 당신은 한쪽 아니면 양쪽 다 넣을 수 있습니다.

우리는 한쪽면에 다수의 애드온을 지원하지 않습니다.

우리는 하나의 입력 그룹내에 다수의 폼콘트롤을 지원하지 않습니다.

@

@example.com

$ .00
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

크기 조절

.input-group 에 크기조절 클래스를 추가하세요. 내부의 요소들은 자동으로 크기조절이 됩니다. ㅡ 각각의 태그에 폼콘트롤 크기 클래스들을 반복할 필요가 없습니다.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

체크박스와 라디오 에드온

입력그룹 내 에드온에 문자 대신 체크박스나 라디오를 두세요.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

버튼 에드온

입력그룹 내 버튼은 별도의 약간 다른 중첩 태그를 필요로 합니다. .input-group-addon 대신 .input-group-btn 으로 버튼을 감쌉니다. 이것은 오버라이드 할 수 없는 기본 브라우저 스타일들로 인해 필요합니다.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

드롭다운 버튼

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

분할된 버튼

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

네비게이션

부트스트랩 내 사용가능한 네비게이션은 기본 .nav 클래스로 시작하는 마크업을 공유할 뿐만 아니라 상태 클래스도 공유합니다. 각 스타일로 전환하려면 수식 클래스를 교체하세요.

탭 패널을 위해 네비게이션을 사용하는 것은 자바스크립트 탭 플러그인을 필요로 합니다.

탭할수있는 영역에서의 탭을 위해, 당신은 탭 자바스크립트 플러그인 를 사용해야 합니다. 마크업은 또한 추가적인 role 과 ARIA 속성을 필요할 것입니다. 좀더 자세한 것은 플러그인의 마크업 예제 을 보세요.

접근가능한 네비게이션으로서 네비게이션(navs) 을 사용하세요

만약 당신이 네비게이션 바를 제공하기 위해 navs 를 사용한다면, <ul> 의 부모 콘테이너에 role="navigation" 를 추가하거나 <nav> 으로 감싸야 합니다. <ul> 자체에 역할(role)을 추가하지 마세요. 왜냐하면 보조 공학에서 실제 목록을 가져오는 것을 막기 때문입니다.

.nav-tabs 클래스는 .nav 클래스가 필요한 것을 기억하세요.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

같은 HTML 이지만, .nav-pills 을 대신 사용하세요.

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

알약형은 수직적으로 쌓을 수도 있습니다. .nav-stacked 을 추가하세요.

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

.nav-justified 로 탭형이나 알약형을 그것들의 상위 태그와 같은 너비로 만드세요. 작은 화면에서는, 네비게이션 링크는 쌓이게 됩니다.

양쪽정렬된 navbar nav 링크는 현재 지원되지 않습니다.

사파리와 반응형 양쪽정렬 navs

v8.0 이후로, 사파리는 양쪽정렬된 nav 에서 당신의 브라우저를 수평적으로 크기를 조절할때 에러를 렌더링하는 버그를 보였습니다. 이 버그는 또한 양쪽정렬된 nav 예제 에 볼 수 있습니다.

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

어떤 네비게이션 콤포넌트(탭형, 알약형, 목록형)에서, 회색 링크와 금지 호버 효과 를 위해 .disabled 를 추가하세요.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

약간의 HTML 과 드롭다운 자바스크립트 플러그인 로 드롭다운 메뉴를 추가하세요.

탭형에서의 드롭다운

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

알약형에서의 드롭다운

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

네비게이션 바 (Navbar)

네비게이션 바는 당신의 어플리케이션이나 사이트를 위한 상단 네비게이션으로 적합한 반응형 메타 콤포넌트입니다. 그것들은 모바일 뷰에서 가려진 상태(토글할 수 있음)로 시작하며 가능한 뷰포트 너비가 되었을 때 수평적으로 펼쳐집니다.

양쪽정렬된 네비게이션 바 링크는 현재 지원되지 않습니다.

콘텐츠 오버플로우 하는것

이것을 해결하려면, 당신은 다음과 같이 할 수 있습니다. Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

  1. navbar 항목들의 양이나 너비를 줄입니다.
  2. 반응형 유틸리티 클래스 를 사용하여 몇몇 화면 크기에서 몇몇 navbar 항목을 숨깁니다.
  3. navbar 가 펼쳐지고 접어지는 지점을 바꿉니다. @grid-float-breakpoint 변수를 수정하거나 당신의 미디어 쿼리에 추가하세요.

플러그인 의존성

만약 자바스크립트가 비활성화되 뷰포트가 좁을때, 그것은 navbar 가 펼쳐지고 .navbar-collapse 의 내용이 보여지는 것이 불가능 할 것입니다.

반응형 navbar 는 부트스트랩에 포함된 컬랩스 플러그인 이 필요합니다.

접히는 모바일 navbar 분기점을 변경하기

navbar 는 모바일 세로뷰에서 @grid-float-breakpoint 보다 작으면 접히고, @grid-float-breakpoint 보다 크면 펼쳐집니다. navbar 접힘/펼침의 때을 제어하려면 Less 에서 이 변수를 조정하세요. 기본값은 768px 입니다. ("태블릿" 이하 화면)

navbars 을 접근성있게 만드세요

보조 공학의 사용자들에게 확실하게 알리기 위해 <nav> 을 사용하는 것을 확실히 하거나, 좀 더 일반적인 <div> 같은 요소에, role="navigation" 를 추가하도록 하세요.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<img> 를 위한 텍스트를 교체하는 것으로 navbar 브랜드를 당신의 이미지로 교체하세요. .navbar-brand 는 자신의 패딩과 높이를 가졌기때문에, 당신은 당신의 이미지에 맞게 약간의 CSS 를 오버라이드해야할 수 있습니다.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

좁은 뷰포트에서 적절한 수직 정렬과 접히는 행위를 위해서 .navbar-form 안에 폼콘텐츠를 넣으세요. 그것이 navbar 내에서 어디에 위치할지 결정하기 위해 정렬 옵션을 사용하세요.

주의할 점은 .navbar-form 은 믹스인을 통해 .form-inline 의 많은 코드를 공유합니다. navbar 에서 적절하게 보여지게 하기 위해 입력 그룹같은 몇몇 폼 콘트롤은 고정된 너비가 필요할 수 있습니다.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

모바일 기기 경고

모바일기기에서 고정된 요소안에 폼 콘트롤을 사용하는데 몇가지 규칙이 있습니다. 자세한 것은 우리의 브라우저 지원 문서를 보세요

항상 라벨을 추가하세요

스크린 리더는 만약 모든 입력에 라벨을 포함하지 않는다면 당신의 폼에 있어 문제를 일으킬 것입니다. 이런 인라인 폼을 위해, 당신은 .sr-only 클래스로 라벨을 숨길수 있습니다. 여기에는 보조공학을 위해 라벨을 제공하는 aria-label, aria-labelledby, title 과 같은 또다른 대체 방법이 있습니다. 만약 이것들이 존재하지 않는다면, 스크린 리더는 placeholder 속성을 사용할 수도 있습니다. 하지만 이것은 권장하지 않습니다.

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Context-specific usage

Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.

적절한 행간과 색을 위해 문자열을 .navbar-text 가 적용된 태그(보통은 <p>)로 감싸세요.

<p class="navbar-text">Signed in as Mark Otto</p>

.nav 내부에 있지 않은 링크를 사용하려면, 기본과 반전 네비게이션 바에 적절한 색을 맞추기 위해 .navbar-link 를 사용하세요.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

보조 클래스 .navbar-left.navbar-right 를 사용하여, 네비게이션 링크, 폼, 버튼, 텍스트를 정렬하세요. 이 클래스들은 특정한 방향으로 CSS float 을 적용합니다. 예를 들어, 네비게이션 링크를 정렬하려면, 그것들을 각각의 보조 클래스가 적용한 <ul> 로 분리하여 둡니다.

이 클래스들은 .pull-left.pull-right 의 가공 버전입니다만, 그것들은 다양한 기기에서 네비게이션 바를 더 쉽게 다루기 위한 미디어 쿼리들에 맞춰져 있습니다.

Right aligning multiple components

Navbars currently have a limitation with multiple .navbar-right classes. To properly space content, we use negative margin on the last .navbar-right element. When there are multiple elements using that class, these margins don't work as intended.

We'll revisit this when we can rewrite that component in v4.

Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.

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

Body 에 패딩이 필요합니다

<body> 의 상단에 padding 을 주지 않으면, 네비게이션 바는 다른 콘텐츠를 덮어버립니다. 당신만의 값을 시도해 보거나 하단의 값을 이용하세요. 팁: 기본적으로, 네비게이션 바는 50px 보다 큽니다.

body { padding-top: 70px; }

반드시 부트스트랩 CSS 보다 뒤쪽에 넣어야 합니다.

Add .navbar-fixed-bottom and include a .container or .container-fluid to center and pad navbar content.

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

Body 에 패딩이 필요합니다

<body> 의 하단에 padding 을 주지 않으면, 네비게이션 바는 다른 콘텐츠를 덮어버립니다. 당신만의 값을 시도해 보거나 하단의 값을 이용하세요. 팁: 기본적으로, 네비게이션 바는 50px 보다 큽니다.

body { padding-bottom: 70px; }

반드시 부트스트랩 CSS 보다 뒤쪽에 넣어야 합니다.

.navbar-static-top 를 추가하여 페이지에 스크롤 없는 꽉찬너비의 navbar 를 만들고, .container.container-fluid 를 포함하세요.

.navbar-fixed-* 클래스와는 다르게, 당신은 body 의 패딩을 바꿀 필요가 없습니다.

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

.navbar-inverse 을 추가하여 네비게이션 바의 모습을 바꿔보세요.

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

경로(Breadcrumbs)

네비게이션 체계 내에서의 현재페이지 위치를 가르키세요.

구분자는 CSS 에서 :beforecontent 를 통해 자동으로 추가됩니다.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

페이지네이션(Pagination)

멀티페이지 페이지네이션 콤포넌트나 좀 더 단순한 페이저 콤퍼넌트 로 당신의 사이트나 앱을 위한 페이지네이션 링크를 제공합니다.

기본 페이지네이션(Default pagination)

Rdio 에서 영감을 받은 단순한 페이지네이션, 앱과 검색 결과에 좋습니다. 큰 블록은 눈에 잘 띄며, 쉽게 크기조절이 되고, 넓은 클릭 영역을 제공합니다.

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

비활성화된 그리고 활성상태

링크는 다른 상황을 위해 맞춤화 할 수 있습니다. 클릭할수 없는 링크를 위해 .disabled 를 사용하고 현재 페이지를 가르킬 때는 .active 를 사용하세요.

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

당신은 선택적으로 의도한 스타일은 유지하면서 클릭 기능성을 제거하기 위해 활성화 되었거나 비활성화된 앵커 태그를 <span> 로 교체할 수 있습니다.

<nav>
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

크기 조절

좀 더 크거나 작은 페이지네이션을 원하세요? .pagination-lg.pagination-sm 을 추가하시면 됩니다.

<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

페이저(Pager)

페이저는 가벼운 마크업과 스타일로 단순한 페이지네이션 구현을 위한 빠른 전후 이동 링크입니다. 블로그나 매거진 같은 간단한 사이트에 좋습니다.

기본 예제(Default example)

기본적으로, 페이저는 링크를 가운데 정렬합니다.

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

정렬된 링크(Aligned links)

그렇지 않으면, 각 링크를 양쪽 모서리에 정렬할 수 있습니다:

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

비활성화 상태

페이저 링크는 또한 일반적인 .disabled 보조 클래스를 사용합니다.

<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

라벨(labels)

Example

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>

가능한 변화들(Available variations)

라벨 모습을 바꾸려면 아래 명시된 수식클래스 중 하나를 추가하세요.

Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

다수의 라벨을 가지고 있습니까?

렌더링 문제는 좁은 콘테이너 내에 많은 인라인 라벨을 가지고 있을 때 일어날 수 있습니다. 이것을 우회하는 방법은 display: inline-block; 으로 설정하는 것입니다. 맥락과 예제를 위해, #13219 를 보세요.

배지

링크, 네비게이션 바 등에 <span class="badge"> 을 추가하여, 새롭거나 읽지 않은 항목을 쉽게 강조하세요.

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

자동 가리기

새롭거나 읽지 않은 항목이 없을때, 배지는 간단하게 가려집니다. (CSS 의 :empty 셀렉터로)

크로스브라우저 호환성

배지는 IE8 에서는 자동 가리기가 되지 않습니다. 왜냐하면 IE8 은 :empty 셀렉트를 지원하지 않기 때문입니다.

활성화된 네이게이션 상태에 맞춤

알약형이나 목록형 네비게이션에서 활성화 상태 안에 놓여진 배지를 위해 만들어진 스타일이 포함되어 있습니다.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

점보트론(Jumbotron)

점보트론은 당신의 사이트에서 중요한 콘텐츠를 보여주기 위한 선택적으로 전체 뷰포트로 확장할 수 있는 가볍고 유연한 콤포넌트입니다.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

점보트론을 최대 너비로 만드려면 .container 안에 넣지 마세요. 콘테이너 내 놓여진 점보트론은 최대 너비를 만들지 못합니다.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

페이지 제목(Page header)

페이지에 h1 적절한 여백과 구분된 공간을 주는 간단한 껍데기이다. 그것은 h1 의 기본 small 태그를 다른 콤포넌트들보다 가장 잘 활용할 수 있다.

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

썸네일(Thumbnails)

이미지, 비디오, 텍스트 등을 쉽게 그리드하려면 썸네일 콤포넌트와 부트스트랩의 그리드 시스템을 동원하세요.

만약 당신이 핀터레스트같은 다양한 높이와 너비의 썸네일 표현을 찾고 있다면, 당신은 Masonry, Isotope, Salvattore 같은 서드파티 플러그인을 사용하는 것이 필요할 것입니다.

기본 예제

기본적으로, 부트스트랩의 썸네일은 최소한의 필수 마크업으로 링크 이미지들을 보여주기 위해 고안되었습니다.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

맞춤 콘텐츠

약간의 추가적인 마크업으로, 썸네일 안에 제목, 본문, 버튼과 같이 어떤 종류의 HTML 내용이라도 추가할 수 있습니다.

Generic placeholder thumbnail

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.

Button Button

Generic placeholder thumbnail

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.

Button Button

Generic placeholder thumbnail

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.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

경보(Alerts)

적은 수의 사용가능하고 유연한 경보 메시지로 전형적인 사용자 액션에 대해 맥락적인 피드백 메시지를 제공합니다.

예제

기본 경보 메시지를 위해 문자와 옵션인 없애기 버튼을 .alert 과 4개의 맥락적인 클래스들 중 하나로 감싸세요. (예: .alert-success)

기본(default) 클래스 없습니다

경보는 기본 클래스를 가지지 않습니다, 오직 기본과 수식클래스를 가집니다. 기본 회색 경보는 이상합니다. 그래서 당신은 맥락적인 클래스를 이용하여 타입을 명시해야 합니다. success, info, warning, danger 중 하나를 선택하세요.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

없앨 수 있는 경보

경보에 옵션인 .alert-dismissible 과 없애기 버튼을 추가하여 만듭니다.

자바스크립트 경보 플러그인이 필요합니다

완전한 기능, 지울수있는 경보를 위해, 당신은 경보 플러그인 를 사용해야합니다.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

모든 기기에서 제대로 작동하도록 합니다

<button> 태그를 반드시 data-dismiss="alert" 속성과 함께 사용해야 합니다.

경보 내 맞춤색의 링크를 빠르게 제공하는 보조클래스 .alert-link 를 사용합니다.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

진행바(Progress bars)

작업흐름이나 액션의 진행에서 간단하고도 유연한 진행바로 최신 피드백을 제공합니다.

크로스브라우저 호환성

진행바는 몇몇 효과를 위해 CSS3 의 트랜지션과 애니메이션을 사용합니다. 이 기능들은 IE9 이하에서나 파이어폭스의 구버전에서 지원되지 않습니다. 오페라 12 는 애니메이션을 지원하지 않습니다.

기본 예제

기본 진행바

60% Complete
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

라벨과

진행율을 보기위해 진행바내에 .sr-only 클래스가 있는 <span> 을 제거하세요 Remove the <span> with .sr-only class from within the progress bar to show a visible percentage.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

낮은 진행율에서도 라벨 텍스트를 읽을 수 있게 하기 위해, 진행바에 min-width 를 추가하는 것을 고려해보세요.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

맥락적인 대안

진행바는 일관된 스타일을 위해 버튼과 경보 클래스와 같은 것들을 사용합니다.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

줄무늬(Striped)

그라디언트를 이용해 줄무늬 효과를 만듭니다. IE8 에서는 작동하지 않습니다.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

움직이는(Animated)

진행바를 오른쪽에서 왼쪽으로 움직이는 줄무늬 효과를 주려면 .active.progress-striped 을 추가하세요. IE 의 모든 버전에서 작동하지 않습니다.

45% Complete
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

쌓는(Stacked)

여러 진행바를 쌓으려면 같은 .progress 안에 여러 개의 진행바를 둡니다.

기본 미디어(Default media)

기본 미디어는 미디어 객체 (그림, 영상, 소리) 를 내용 부분의 왼쪽이나 오른쪽에 float 하게 합니다.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

.pull-left.pull-right 클래스들은 존재하고 미디어 콤포넌트의 부분으로 사용되었습니다만, v3.3.0 부터 사용이 폐기예정이 되었습니다. 그들은 .media-left.media-right 과 거의 유사합니다. Html 에서 .media-right.media-body 다음에 위치해야한다는 것을 제외하구요.

미디어 정렬

이미지나 다른 미디어는 위, 가운데, 아래로 정렬될 수 있습니다. 기본값은 상단 장렬입니다.

Top aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Middle aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom aligned media

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

미디어 목록(Media list)

약간의 추가적인 마크업으로, 목록안에 미디어를 사용할 수 있습니다. (댓글이나 기사목록에 유용)

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

목록 그룹(List group)

목록 그룹은 간단한 것의 목록 뿐만 아니라 맞춤화된 내용의 복잡한 것도 보여줄 수 있는 유연하고 강력한 콤포넌트입니다.

기본 예제(Basic example)

가장 기본적인 목록 그룹은 그냥 순서없는 목록이다. 적절한 클래스로 다음의 옵션들을 사용하거나 당신만의 CSS 를 사용하세요.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

배지

배지 콤포넌트를 목록 그룹 항목에 추가하면 자동으로 오른쪽에 위치하게 됩니다.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

링크 있는 항목

링크가 있는 항목은 <ul> 대신 <a> 태그를 사용합니다. (또한 <ul> 대신에 <div> 을 사용) 각 요소에 각각 부모요소는 필요없습니다.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

비활성화된 항목

그것을 비활성화된 것처럼 회색으로 보이도록 .list-group-item.disabled 를 추가하세요.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

맥락적인 클래스

목록의 항목들을 꾸미려면 맥락적인 클래스를 사용하세요. 또한 .active 상태도 활용하세요.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

맞춤 콘텐츠(Custom content)

아래처럼 링크가 있는 목록 그룹도 어떤 HTML 을 안에 추가할 수 있습니다.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

패널

항상은 아니지만, 가끔 박스안에 DOM 을 넣을 필요가 있습니다. 이런 상황을 위해 패널을 사용해보세요.

기본 예제(Basic example)

기본적으로, 모든 .panel 은 조금의 내용을 포함하기 위해 약간의 기본 테두리와 패딩을 가지고 있습니다.

Basic panel example
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

상단이 있는 패널

당신의 패널에 .panel-heading 으로 쉽게 상단을 추가하세요. 또한 .panel-title 을 적용한 <h1>-<h6>.panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.-->

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title
Panel content

Panel title

Panel content
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

버튼이나 부가적인 텍스트를 .panel-footer 로 감싸세요. 패널 하단은 크게 의미가 없으므로 맥락적인 변화를 사용할 때에 색이나 테두리를 상속받지 않습니다.

Panel content
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

맥락적인 대안

다른 콤포넌트와 같이, 패널도 맥락적인 상태 클래스들 중 하나를 추가하여 특정한 내용에 의미를 부여할 수 있습니다.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

테이블과

이음새 없는 디자인을 위한 패널 내에 테두리 없는 .table 을 추가하세요. 만약 .panel-body 이 있다면, 우리는 구분을 위해 테이블 위쪽에 추가적인 테두리를 붙힙니다.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

panel-body 가 없다면, 콤포넌트는 패널 상단과 테이블이 바싹 붙습니다.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

목록 그룹과(With list groups)

패널 내에 쉽게 꽉찬 너비의 목록 그룹 을 포함하세요.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

반응형 임베드

브라우저들에게 어느 기기에나 크기가 조절될 수 있도록 고유의 비율을 만드는 것으로 비디오나 슬라이드쇼의 콘테이닝 블록 너비 기반의 면적을 알아내는 것을 허가합니다.

규칙은 <iframe>, <embed>, <video>, <object> 에 직접 적용됩니다. 선택적으로 .embed-responsive-item 를 사용하세요.

유용한팁! <iframe>frameborder="0" 포함할 필요가 없습니다. 우리가 오버라이드 하고 있습니다.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Wells

기본(Default) well

태그에 오목한 효과를 주는 well 을 사용하세요.

Look, I'm in a well!
<div class="well">...</div>

옵션 클래스(Optional classes)

2개의 옵션 수식 클래스로 패딩과 둥근모서리를 조정하세요.

Look, I'm in a large well!
<div class="well well-lg">...</div>
Look, I'm in a small well!
<div class="well well-sm">...</div>