사용 가능한 글리프

Glyphicon Halflings 세트의 글꼴 형식으로 된 250개 이상의 글리프를 포함합니다. Glyphicons Halflings는 일반적으로 무료로 사용할 수 없지만 제작자가 Bootstrap에서 무료로 사용할 수 있도록 했습니다. 감사의 의미로 가능한 한 항상 Glyphicons 로 돌아가는 링크를 포함해 주시기 바랍니다.

문자 모양 문자 모양 별표
글리피콘 글리피콘 플러스
glyphicon glyphicon-유로
glyphicon glyphicon-eur
glyphicon glyphicon-마이너스
글리프콘 글리프콘 클라우드
glyphicon glyphicon 봉투
글리피콘 글리피콘 연필
글리피콘 글리피콘 글라스
glyphicon glyphicon 음악
glyphicon glyphicon 검색
glyphicon glyphicon-하트
glyphicon glyphicon-스타
glyphicon glyphicon-star-empty
glyphicon glyphicon 사용자
글리피콘 글리피콘 필름
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon 제거
glyphicon glyphicon 확대
glyphicon glyphicon 축소
glyphicon glyphicon-off
glyphicon glyphicon 신호
glyphicon glyphicon-cog
glyphicon glyphicon-쓰레기
glyphicon glyphicon-홈
glyphicon glyphicon 파일
glyphicon glyphicon-시간
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon 다운로드
glyphicon glyphicon 업로드
glyphicon glyphicon 받은 편지함
glyphicon glyphicon-play-circle
glyphicon glyphicon-반복
glyphicon glyphicon 새로 고침
glyphicon glyphicon-list-alt
glyphicon glyphicon 잠금
glyphicon glyphicon 플래그
glyphicon glyphicon 헤드폰
glyphicon glyphicon 볼륨 오프
glyphicon glyphicon-볼륨 다운
glyphicon glyphicon 볼륨 업
glyphicon glyphicon-qrcode
glyphicon glyphicon-바코드
glyphicon glyphicon 태그
glyphicon glyphicon 태그
글리피콘 글리프콘북
glyphicon glyphicon-책갈피
글리피콘 글리피콘 프린트
glyphicon glyphicon 카메라
glyphicon glyphicon 글꼴
glyphicon glyphicon-굵게
glyphicon glyphicon-이탤릭체
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-들여쓰기-왼쪽
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-비디오
글리프콘 글리프콘 그림
glyphicon glyphicon-map-marker
글리프콘 글리프콘 조정
글리피콘 글리피콘 틴트
글리프콘 글리프콘 편집
glyphicon glyphicon 공유
글리피콘 글리피콘 체크
glyphicon glyphicon 이동
glyphicon glyphicon-step-backward
glyphicon glyphicon-고속 뒤로
문자 모양 문자 모양-뒤로
글리피콘 글리피콘 플레이
glyphicon glyphicon-일시 중지
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-빨리 감기
glyphicon glyphicon 한 단계 앞으로
글리피콘 글리피콘 꺼내기
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
글리프콘 글리프콘 더하기 기호
글리프콘 글리프콘 마이너스 기호
문자 모양 문자 모양 제거 기호
glyphicon glyphicon-ok-sign
글리프콘 글리프콘 물음표
glyphicon glyphicon-info-sign
glyphicon glyphicon 스크린샷
글리프콘 글리프콘 제거 원
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
글리프콘 글리프콘-화살표-왼쪽
글리프콘 글리프콘-화살표-오른쪽
glyphicon glyphicon-화살표 위쪽
glyphicon glyphicon-아래쪽 화살표
glyphicon glyphicon-share-alt
glyphicon glyphicon 크기 조정 전체
glyphicon glyphicon-크기 조정-작게
문자 모양 문자 모양 느낌표 기호
glyphicon glyphicon-선물
glyphicon glyphicon 잎
글리피콘 글리피콘 파이어
glyphicon glyphicon-눈 뜨다
glyphicon glyphicon-눈 닫기
glyphicon glyphicon-warning-sign
glyphicon glyphicon-평면
glyphicon glyphicon 캘린더
glyphicon glyphicon-random
glyphicon glyphicon-주석
glyphicon glyphicon 자석
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-장바구니
glyphicon glyphicon-폴더-닫기
glyphicon glyphicon 폴더 열기
glyphicon glyphicon 크기 조정 수직
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
글리피콘 글리피콘 벨
glyphicon glyphicon 인증서
glyphicon glyphicon 엄지손가락 위로
glyphicon glyphicon-아래로
glyphicon glyphicon-hand-right
glyphicon glyphicon-손 왼쪽
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-원-화살표-오른쪽
glyphicon glyphicon-원-화살표-왼쪽
glyphicon glyphicon-원-화살표 위쪽
glyphicon glyphicon-circle-arrow-down
글리프콘 글리프콘 글로브
글리피콘 글리피콘 렌치
glyphicon glyphicon 작업
글리피콘 글리피콘 필터
glyphicon glyphicon 서류 가방
glyphicon glyphicon 전체 화면
glyphicon glyphicon-대시보드
glyphicon glyphicon-종이 클립
glyphicon glyphicon-heart-empty
glyphicon glyphicon 링크
glyphicon glyphicon-전화기
glyphicon glyphicon 압정
glyphicon glyphicon-usd
글리피콘 글리피콘-gbp
글리피콘 글리피콘 정렬
문자 모양 문자 모양 알파벳 정렬
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-order-by-order
glyphicon glyphicon-order-by-order-alt
문자 모양 문자 모양 속성별
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon 체크 해제
glyphicon glyphicon 확장
glyphicon glyphicon-collapse-down
glyphicon glyphicon 접기
glyphicon glyphicon 로그인
glyphicon glyphicon 플래시
glyphicon glyphicon 로그아웃
glyphicon glyphicon-new-window
glyphicon glyphicon-레코드
글리피콘 글리피콘 저장
글리피콘 글리피콘 오픈
glyphicon glyphicon 저장
glyphicon glyphicon 가져오기
glyphicon glyphicon 내보내기
glyphicon glyphicon-보내기
glyphicon glyphicon-플로피 디스크
glyphicon glyphicon-플로피 저장
glyphicon glyphicon-플로피 제거
glyphicon glyphicon 플로피 저장
glyphicon glyphicon-플로피-오픈
glyphicon glyphicon 신용 카드
glyphicon glyphicon 전송
글리피콘 글리피콘 칼붙이
글리프콘 글리프콘 헤더
glyphicon glyphicon 압축
glyphicon glyphicon 이어폰
glyphicon glyphicon-phone-alt
glyphicon glyphicon 타워
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-자막
glyphicon glyphicon-사운드-스테레오
glyphicon glyphicon-사운드-돌비
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon 등록 표시
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-나무 침엽수
glyphicon glyphicon-나무 낙엽
glyphicon glyphicon-cd
glyphicon glyphicon 파일 저장
glyphicon glyphicon 파일 열기
글리피콘 글리피콘 레벨업
glyphicon glyphicon 복사
글리피콘 글리피콘-붙여넣기
glyphicon glyphicon 경고
glyphicon 글리피콘 이퀄라이저
glyphicon glyphicon-king
글리피콘 글리피콘 퀸
글리피콘 글리피콘 폰
glyphicon glyphicon-비숍
글리피콘 글리프콘나이트
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-칠판
glyphicon glyphicon 침대
glyphicon glyphicon 사과
글리피콘 글리프콘 지우기
glyphicon glyphicon 모래시계
글리피콘 글리피콘 램프
glyphicon glyphicon-중복
glyphicon glyphicon 돼지 저금통
glyphicon glyphicon 가위
glyphicon glyphicon 비트코인
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
글리피콘 글리피콘엔
glyphicon glyphicon-jpy
글리피콘 글리피콘 루블
글리프콘 글리프콘 문지름
글리피콘 글리피콘 스케일
glyphicon glyphicon-얼음 사탕
glyphicon glyphicon 얼음 사탕 맛
glyphicon glyphicon 교육
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-옵션-수직
glyphicon glyphicon 메뉴 햄버거
glyphicon glyphicon 모달 창
글리피콘 글리피콘 오일
glyphicon glyphicon-그레인
glyphicon glyphicon 선글라스
glyphicon glyphicon-텍스트 크기
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 콘솔
glyphicon glyphicon-위 첨자
글리프콘 글리프콘-첨자
glyphicon glyphicon-메뉴-왼쪽
glyphicon glyphicon 메뉴 오른쪽
glyphicon glyphicon 메뉴 다운
glyphicon glyphicon 메뉴 업

사용하는 방법

성능상의 이유로 모든 아이콘에는 기본 클래스와 개별 아이콘 클래스가 필요합니다. 사용하려면 다음 코드를 거의 아무 곳에나 배치하세요. 적절한 패딩을 위해 아이콘과 텍스트 사이에 공백을 남겨 두십시오.

다른 성분과 혼합하지 마십시오

아이콘 클래스는 다른 구성 요소와 직접 결합할 수 없습니다. 같은 요소의 다른 클래스와 함께 사용하면 안 됩니다. 대신 중첩을 추가 <span>하고 아이콘 클래스를 <span>.

빈 요소에만 사용

아이콘 클래스는 텍스트 콘텐츠가 없고 자식 요소가 없는 요소에만 사용해야 합니다.

아이콘 글꼴 위치 변경

부트스트랩은 아이콘 글꼴 파일이 ../fonts/컴파일된 CSS 파일과 관련된 디렉토리에 있다고 가정합니다. 이러한 글꼴 파일을 이동하거나 이름을 바꾸는 것은 다음 세 가지 방법 중 하나로 CSS를 업데이트하는 것을 의미합니다.

@icon-font-path소스 Less 파일에서 및/또는 @icon-font-name변수를 변경 합니다.
Less 컴파일러에서 제공 하는 상대 URL 옵션을 활용합니다 .
url()컴파일된 CSS에서 경로를 변경합니다 .

특정 개발 설정에 가장 적합한 옵션을 사용하십시오.

액세스 가능한 아이콘

최신 버전의 보조 기술은 CSS 생성 콘텐츠와 특정 유니코드 문자를 발표합니다. 화면 판독기에서 의도하지 않고 혼란스러운 출력을 피하기 위해(특히 아이콘이 순전히 장식용으로 사용되는 경우) 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>

링크 목록을 표시하기 위한 전환 가능한 상황별 메뉴입니다. 드롭다운 JavaScript 플러그인 과 대화식으로 만들어 졌습니다.

예시

드롭다운의 트리거와 드롭다운 메뉴를 .dropdown, 또는 를 선언하는 다른 요소 내에 래핑합니다 position: relative;. 그런 다음 메뉴의 HTML을 추가합니다.

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

.dropup드롭다운 메뉴는 상위 항목 에 추가하여 아래쪽이 아닌 위쪽으로 확장되도록 변경할 수 있습니다 .

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

조정

기본적으로 드롭다운 메뉴는 상위 항목의 왼쪽과 위쪽에서 100% 자동으로 배치됩니다. 드롭다운 메뉴를 오른쪽 정렬에 추가 .dropdown-menu-right합니다 ..dropdown-menu

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

헤더

드롭다운 메뉴에서 작업 섹션에 레이블을 지정하는 헤더를 추가합니다.

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

분할기

드롭다운 메뉴에서 일련의 링크를 분리하려면 구분선을 추가하세요.

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

비활성화된 메뉴 항목

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

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

버튼 그룹을 사용하여 한 줄에 일련의 버튼을 그룹화합니다. 버튼 플러그인 을 사용하여 선택적 JavaScript 라디오 및 확인란 스타일 동작을 추가하십시오 .

버튼 그룹의 도구 설명 및 팝오버에는 특별한 설정이 필요합니다.

의 요소 에 도구 설명이나 팝오버를 사용할 때 원치 않는 부작용(예: 도구 설명이나 팝오버가 트리거될 때 요소가 더 넓어지거나 둥근 모서리가 손실되는 경우)을 방지하기 위한 .btn-group옵션을 지정해야 합니다 .container: 'body'

정확한지 확인 `role`하고 라벨 제공

스크린 리더와 같은 보조 기술이 일련의 버튼이 그룹화되었음을 전달하려면 적절한 role속성을 제공해야 합니다. 버튼 그룹의 경우 role="group", 도구 모음에는 role="toolbar".

한 가지 예외는 단일 컨트롤(예: 요소가 있는 양쪽 맞춤 버튼 그룹<button> ) 또는 드롭다운 만 포함하는 그룹 입니다 .

role또한 그룹 및 도구 모음에는 올바른 속성 이 있음에도 불구하고 대부분의 보조 기술이 이를 알리지 않기 때문에 명시적 레이블을 지정해야 합니다. 여기에 제공된 예에서는 를 사용 aria-label하지만 와 같은 대안 aria-labelledby도 사용할 수 있습니다.

기본 예

일련의 버튼을 .btnin 으로 감쌉니다 .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-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-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에서 테두리를 제거하는 대신 쌓는 데 사용됩니다. 그러나 에서는 margin작동하지 않습니다 display: table-cell. 결과적으로 Bootstrap에 대한 사용자 정의에 따라 테두리를 제거하거나 다시 색칠할 수 있습니다.

IE8과 테두리

<a>Internet Explorer 8은 켜져 있거나 <button>요소 에 관계없이 양쪽 맞춤 단추 그룹의 단추에 테두리를 렌더링하지 않습니다 . 이 문제를 해결하려면 각 버튼을 다른 .btn-group.

자세한 내용은 #12476 을 참조하십시오.

요소 `<a>`포함

일련의 .btns를 .btn-group.btn-group-justified.

왼쪽 가운데 오른쪽

왼쪽 가운데

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

버튼 역할을 하는 링크

<a>요소가 현재 페이지 내의 다른 문서나 섹션으로 이동하는 대신 페이지 내 기능을 트리거하는 버튼 역할을 하는 경우 적절한 role="button".

요소 `<button>`포함

<button>요소 와 함께 정렬된 버튼 그룹을 사용하려면 각 버튼을 버튼 그룹으로 래핑해야 합니다 . 대부분의 브라우저는 요소에 대한 정당화를 위해 CSS를 제대로 적용하지 않지만 <button>버튼 드롭다운을 지원하므로 이 문제를 해결할 수 있습니다.

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

플러그인 종속성

버튼 드롭다운을 사용하려면 Bootstrap 버전에 드롭다운 플러그인 이 포함되어 있어야 합니다.

단일 버튼 드롭다운

몇 가지 기본적인 마크업 변경으로 버튼을 드롭다운 토글로 바꿉니다.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" 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-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" 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-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-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-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-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-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-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-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

텍스트 기반의 앞, 뒤 또는 양쪽에 텍스트 또는 버튼을 추가하여 양식 컨트롤을 확장합니다 <input>. 또는 .input-group와 함께 사용 하여 단일 요소에 요소를 추가하거나 추가합니다 ..input-group-addon.input-group-btn.form-control

텍스트 `<input>`전용

<select>WebKit 브라우저에서는 완전히 스타일을 지정할 수 없으므로 여기에서 요소를 사용하지 마십시오 .

경우에 따라 속성이 존중되지 않을 수 있으므로 <textarea>여기에서 요소를 사용하지 마십시오 .rows

입력 그룹의 도구 설명 및 팝오버에는 특별한 설정이 필요합니다.

내 요소 에 도구 설명 또는 팝오버를 사용할 때 원치 않는 부작용(예: 도구 설명 또는 팝오버가 트리거될 때 요소가 더 넓어지거나 둥근 모서리가 손실되는 경우)을 방지하기 위한 .input-group옵션을 지정해야 합니다 .container: 'body'

다른 성분과 혼합하지 마십시오

양식 그룹 또는 그리드 열 클래스를 입력 그룹과 직접 혼합하지 마십시오. 대신 양식 그룹 또는 그리드 관련 요소 내부에 입력 그룹을 중첩합니다.

항상 라벨 추가

모든 입력에 레이블을 포함하지 않으면 화면 판독기가 양식에 문제를 일으킬 것입니다. 이러한 입력 그룹의 경우 추가 레이블 또는 기능이 보조 기술에 전달되도록 합니다.

사용할 정확한 기술(보이는 <label>요소, 클래스를 사용하여 숨겨진 요소 또는 , , 또는 속성 사용 <label>) 과 전달 해야 하는 추가 정보는 구현하는 인터페이스 위젯의 정확한 유형에 따라 다릅니다. 이 섹션의 예는 몇 가지 제안된 사례별 접근 방식을 제공합니다..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

기본 예

입력의 양쪽에 하나의 애드온 또는 버튼을 배치합니다. 입력의 양쪽에 하나씩 배치할 수도 있습니다.

한 쪽에서 여러 추가 기능( .input-group-addon또는 )을 지원하지 않습니다..input-group-btn

단일 입력 그룹에서 여러 양식 컨트롤을 지원하지 않습니다.

<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>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</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-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" 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-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" 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>

여러 버튼

한 면당 하나의 애드온만 가질 수 있지만 단일 .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </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">
    <!-- Buttons -->
  </div>
</div>

부트스트랩에서 사용할 수 있는 탐색에는 기본 .nav클래스로 시작하는 공유 마크업과 공유 상태가 있습니다. 수정자 클래스를 교체하여 각 스타일 간에 전환합니다.

탭 패널에 navs를 사용하려면 JavaScript 탭 플러그인이 필요합니다.

탭 가능 영역이 있는 탭의 경우 tabs JavaScript 플러그인 을 사용해야 합니다 . 마크업에는 추가 role및 ARIA 속성도 필요합니다. 자세한 내용은 플러그인의 예제 마크업 을 참조하세요.

탐색으로 사용되는 탐색을 액세스 가능하게 만들기

탐색 모음을 제공하기 위해 탐색을 사용하는 경우 role="navigation"의 가장 논리적인 상위 컨테이너에 a를 추가하거나 전체 탐색 주위에 요소를 <ul>래핑해야 합니다 . <nav>역할을 자체에 추가하지 마십시오. <ul>이렇게 하면 보조 기술에 의해 실제 목록으로 발표되지 않습니다.

탭

.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>

정당화

를 사용하여 768px보다 넓은 화면에서 탭이나 알약을 상위 항목의 너비와 동일하게 쉽게 만들 수 있습니다 .nav-justified. 작은 화면에서는 탐색 링크가 누적됩니다.

양쪽 정렬된 탐색 모음 탐색 링크는 현재 지원되지 않습니다.

Safari 및 반응형 정당화 탐색

v9.1.2부터 Safari는 브라우저를 가로로 크기를 조정하면 새로 고침 시 지워지는 정당화 탐색에서 렌더링 오류가 발생하는 버그가 있습니다. 이 버그는 정당화된 탐색 예제 에도 표시됩니다 .

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

비활성화된 링크

모든 탐색 구성요소(탭 또는 알약)에 .disabled대해 회색 링크를 추가하고 호버 효과가 없습니다 .

영향을 받지 않는 링크 기능

이 클래스는 <a>기능이 아니라 의 모양만 변경합니다. 사용자 정의 JavaScript를 사용하여 여기에서 링크를 비활성화하십시오.

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

드롭다운 사용

약간의 추가 HTML과 드롭다운 JavaScript 플러그인 으로 드롭다운 메뉴를 추가합니다 .

드롭다운이 있는 탭

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

Navbar는 애플리케이션 또는 사이트의 탐색 헤더 역할을 하는 반응형 메타 구성 요소입니다. 모바일 보기에서 접히기 시작하고(전환 가능) 사용 가능한 표시 영역 너비가 증가하면 수평이 됩니다.

양쪽 정렬된 탐색 모음 탐색 링크는 현재 지원되지 않습니다.

넘쳐나는 콘텐츠

Bootstrap은 탐색 모음의 콘텐츠에 필요한 공간이 얼마인지 모르기 때문에 콘텐츠를 두 번째 행으로 줄바꿈하는 데 문제가 발생할 수 있습니다. 이 문��를 해결하려면 다음을 수행할 수 있습니다.

탐색 모음 항목의 양이나 너비를 줄입니다.
반응형 유틸리티 클래스 를 사용하여 특정 화면 크기에서 특정 탐색 모음 항목을 숨깁니다 .
탐색 모음이 축소 모드와 수평 모드 간에 전환되는 지점을 변경합니다. @grid-float-breakpoint변수를 사용자 지정 하거나 고유한 미디어 쿼리를 추가합니다.

<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" aria-expanded="false">
        <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-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <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-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

텍스트를 <img>. .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좁은 뷰포트에서 적절한 수직 정렬 및 축소 동작을 위해 내부에 양식 콘텐츠 를 배치합니다. 정렬 옵션을 사용하여 탐색 모음 콘텐츠 내에서 위치를 결정합니다.

참고 로 via mixin .navbar-form과 코드의 대부분을 공유합니다 . 입력 그룹과 같은 일부 양식 컨트롤은 고정 너비가 탐색 모음에 올바르게 표시되어야 할 수 있습니다..form-inline

<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속성을 사용할 수 있지만(있는 경우) placeholder다른 레이블 지정 방법에 대한 대체 수단으로 를 사용하는 것은 권장되지 않습니다.

에 없는 요소 에 .navbar-btn클래스를 추가하여 탐색 모음에서 세로로 가운데에 배치합니다.<button><form>

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

적절한 행간 및 색상을 위해 .navbar-text일반적으로 태그 에서 요소의 텍스트 문자열을 래핑 합니다.<p>

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

일반 탐색 모음 탐색 구성 요소에 없는 표준 링크를 사용하는 사람들의 경우 .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이지만 장치 크기에 걸쳐 navbar 구성 요소를 더 쉽게 처리할 수 있도록 미디어 쿼리로 범위가 지정됩니다.

또는 를 추가 .navbar-fixed-top하고 포함하여 탐색 모음 콘텐츠를 가운데에 채우고 채웁니다..container.container-fluid

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

바디 패딩 필요

padding고정 탐색 모음은 의 상단에 추가하지 않는 한 다른 콘텐츠를 오버레이합니다 <body>. 자신의 값을 시도하거나 아래 스니펫을 사용하세요. 팁: 기본적으로 탐색 모음의 높이는 50픽셀입니다.

body { padding-top: 70px; }

핵심 부트스트랩 CSS 뒤에 이것을 포함해야 합니다 .

또는 를 추가 .navbar-fixed-bottom하고 포함하여 탐색 모음 콘텐츠를 가운데에 채우고 채웁니다..container.container-fluid

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

바디 패딩 필요

padding고정 탐색 모음은 의 맨 아래에 추가하지 않는 한 다른 콘텐츠를 오버레이합니다 <body>. 자신의 값을 시도하거나 아래 스니펫을 사용하세요. 팁: 기본적으로 탐색 모음의 높이는 50픽셀입니다.

body { padding-bottom: 70px; }

핵심 부트스트랩 CSS 뒤에 이것을 포함해야 합니다 .

또는 를 중앙 에 추가 .navbar-static-top하고 포함하고 탐색 모음 콘텐츠 를 채워 페이지와 함께 스크롤되는 전체 너비 탐색 모음을 만듭니다 ..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>

빵 부스러기

탐색 계층 구조 내에서 현재 페이지의 위치를 나타냅니다.

:before구분 기호는 및 를 통해 CSS에 자동으로 추가됩니다 content.

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

쪽수 매기기

다중 페이지 페이지 매김 구성 요소 또는 더 간단한 호출기 대안 을 사용하여 사이트 또는 앱에 대한 페이지 매김 링크를 제공합니다 .

기본 페이지 매김

Rdio에서 영감을 받은 간단한 페이지 매김, 앱 및 검색 결과에 좋습니다. 큰 블록은 놓치기 어렵고 쉽게 확장 가능하며 큰 클릭 영역을 제공합니다.

<nav aria-label="Page navigation">
  <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>

페이지 매김 구성 요소에 레이블 지정

<nav>페이지 매김 구성 요소는 화면 판독기 및 기타 보조 기술에 대한 탐색 섹션으로 식별할 수 있도록 요소에 래핑되어야 합니다 . 또한 페이지에 이미 두 개 이상의 탐색 섹션이 있을 수 있으므로(예: 헤더의 기본 탐색 또는 사이드바 탐색) 목적을 반영 하는 설명 aria-label을 제공하는 것이 좋습니다. <nav>예를 들어 페이지 매김 구성 요소가 검색 결과 집합 사이를 탐색하는 데 사용되는 경우 적절한 레이블은 가 될 수 있습니다 aria-label="Search results pages".

비활성화 및 활성 상태

링크는 다양한 상황에 맞게 사용자 정의할 수 있습니다. .disabled클릭 할 수 없는 링크에 사용 .active하고 현재 페이지를 나타냅니다.

<nav aria-label="...">
  <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 aria-label="...">
  <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 aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

휴대용 소형 무선 호출기

가벼운 마크업 및 스타일을 사용하여 간단한 페이지 매김 구현을 위한 빠른 이전 및 다음 링크. 블로그나 잡지와 같은 간단한 사이트에 적합합니다.

기본 예

기본적으로 호출기는 링크를 중앙에 배치합니다.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

정렬된 링크

또는 각 링크를 측면에 정렬할 수 있습니다.

<nav aria-label="...">
  <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 aria-label="...">
  <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>

예시

예 제목 신규

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

사용 가능한 변형

레이블의 모양을 변경하려면 아래에 언급된 수정자 클래스를 추가하십시오.

기본 기본 성공 정보 경고 위험

<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>

수많은 레이블이 있습니까?

좁은 컨테이너 안에 각각 고유한 inline-block요소(예: 아이콘)를 포함하는 수십 개의 인라인 레이블이 있는 경우 렌더링 문제가 발생할 수 있습니다. 이 문제를 해결하는 방법은 설정 display: inline-block;입니다. 컨텍스트 및 예는 #13219를 참조하십시오 .

<span class="badge">링크, 부트스트랩 탐색 등을 추가하여 새 항목이나 읽지 않은 항목을 쉽게 강조 표시 합니다.

받은 편지함42

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

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

자체 붕괴

새 항목이나 읽지 않은 항목이 없는 경우 배지는 :empty콘텐츠가 없는 경우 CSS 선택기를 통해 단순히 축소됩니다.

브라우저 간 호환성

:emptyInternet Explorer 8에서는 선택기 를 지원하지 않기 때문에 배지가 자동으로 축소되지 않습니다 .

활성 탐색 상태에 적응

알약 탐색에서 배지를 활성 상태로 배치하기 위한 기본 제공 스타일이 포함되어 있습니다.

<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>

선택적으로 전체 표시 영역을 확장하여 사이트의 주요 콘텐츠를 표시할 수 있는 가볍고 유연한 구성 요소입니다.

안녕하세요, 세계입니다!

이것은 단순한 영웅 유닛으로, 주요 콘텐츠나 정보에 특별한 관심을 불러일으키기 위한 단순한 점보트론 스타일 구성 요소입니다.

더 알아보기

<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하고 대신 내부를 추가합니다 .container.

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

h1페이지에서 콘텐츠 섹션을 적절하게 간격을 두고 분할하기 위한 간단한 셸입니다 . h1의 기본 small요소와 대부분의 다른 구성 요소(추가 스타일 포함) 를 활용할 수 있습니다 .

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

썸네일 구성 요소로 Bootstrap의 그리드 시스템 을 확장하여 이미지, 비디오, 텍스트 등의 그리드를 쉽게 표시할 수 있습니다.

다양한 높이 및/또는 너비의 미리보기 이미지를 Pinterest와 유사하게 표시하려는 경우 Masonry , Isotope 또는 Salvattore 와 같은 타사 플러그인을 사용해야 합니다 .

기본 예

기본적으로 Bootstrap의 축소판은 최소한의 필수 마크업으로 연결된 이미지를 표시하도록 설계되었습니다.

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

맞춤 콘텐츠

약간의 추가 마크업으로 제목, 단락 또는 버튼과 같은 모든 종류의 HTML 콘텐츠를 축소판에 추가할 수 있습니다.

썸네일 라벨

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.

단추 단추

썸네일 라벨

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.

단추 단추

썸네일 라벨

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.

단추 단추

<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>

사용 가능하고 유연한 몇 가지 경고 메시지를 사용하여 일반적인 사용자 작업에 대한 상황별 피드백 메시지를 제공합니다.

예

기본 경고 메시지에 대한 텍스트와 선택적인 해제 버튼을 .alert4개의 컨텍스트 클래스(예: ) 중 하나에 래핑합니다..alert-success

기본 클래스 없음

경고에는 기본 클래스가 없고 기본 및 수정자 클래스만 있습니다. 기본 회색 경고는 그다지 의미가 없으므로 컨텍스트 클래스를 통해 유형을 지정해야 합니다. 성공, 정보, 경고 또는 위험 중에서 선택하십시오.

잘했어요! 이 중요한 경고 메시지를 성공적으로 읽었습니다.

머리! 이 경고는 주의가 필요하지만 그다지 중요하지 않습니다.

경고! 자신을 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.

오 스냅! 몇 가지를 변경하고 다시 제출해 보세요.

<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닫기 버튼을 추가하여 모든 경고를 기반으로 합니다.

JavaScript 경고 플러그인 필요

완전히 작동하고 해제 가능한 경고의 경우 경고 JavaScript 플러그인 을 사용해야 합니다 .

경고! 자신을 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.

<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>

간단하면서도 유연한 진행률 표시줄을 사용하여 워크플로 또는 작업의 진행 상황에 대한 최신 피드백을 제공합니다.

브라우저 간 호환성

진행률 표시줄은 CSS3 전환 및 애니메이션을 사용하여 일부 효과를 얻습니다. 이러한 기능은 Internet Explorer 9 이하 또는 이전 버전의 Firefox에서는 지원되지 않습니다. Opera 12는 애니메이션을 지원하지 않습니다.

콘텐츠 보안 정책(CSP) 호환성

웹사이트에 를 허용하지 않는 콘텐츠 보안 정책(CSP) 이 있는 경우 아래 예와 같이 style-src 'unsafe-inline'인라인 속성을 사용 하여 진행률 표시줄 너비를 설정할 수 없습니다. style엄격한 CSP와 호환되는 너비를 설정하는 다른 방법에는 약간의 사용자 정의 JavaScript(설정 element.style.width)를 사용하거나 사용자 정의 CSS 클래스를 사용하는 것이 있습니다.

기본 예

기본 진행률 표시줄.

<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>

라벨 부착

표시되는 백분율을 표시하려면 진행률 표시줄 내에서 <span>with 클래스를 제거하십시오 ..sr-only

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>

상황에 맞는 대안

진행률 표시줄은 일관된 스타일을 위해 동일한 버튼 및 경고 클래스 중 일부를 사용합니다.

<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>

줄무늬

그라데이션을 사용하여 줄무늬 효과를 만듭니다. IE9 이하에서는 사용할 수 없습니다.

<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>

생기 있는

줄무늬를 오른쪽에서 왼쪽으로 움직이려면 에 추가하십시오 .active. .progress-bar-stripedIE9 이하에서는 사용할 수 없습니다.

<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>

쌓인

여러 막대를 같은 곳에 배치 .progress하여 쌓습니다.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

텍스트 콘텐츠와 함께 왼쪽 또는 오른쪽으로 정렬된 이미지를 특징으로 하는 다양한 유형의 구성 요소(예: 블로그 댓글, 트윗 등)를 구축하기 위한 추상 개체 스타일입니다.

기본 미디어

기본 미디어는 콘텐츠 블록의 왼쪽 또는 오른쪽에 미디어 개체(이미지, 비디오, 오디오)를 표시합니다.

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

중첩된 미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, 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부터 해당 용도로 사용되지 않습니다. html에서 뒤에 배치해야 한다는 점을 제외하고 는 .media-left및 와 거의 동일합니다 ..media-right.media-right.media-body

미디어 정렬

이미지 또는 기타 미디어를 위쪽, 중간 또는 아래쪽에 정렬할 수 있습니다. 기본값은 위쪽 정렬입니다.

상단 정렬 미디어

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

도넥 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.

중간 정렬 미디어

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

도넥 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.

하단 정렬 미디어

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Faucibus의 Donec lacinia congue felis.

도넥 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>

미디어 목록

약간의 추가 마크업으로 목록 내부의 미디어를 사용할 수 있습니다(댓글 스레드 또는 기사 목록에 유용).

미디어 제목

Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.

중첩된 미디어 제목
Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.

중첩된 미디어 제목
Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, tempus viverra turpis.

중첩된 미디어 제목
Cras sit amet nibh libero, in gravida nulla. 공론화를 금지하십시오. Cras purus odio, vulputate at vulputate의 전정, 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>

목록 그룹은 단순한 요소 목록뿐만 아니라 사용자 정의 콘텐츠가 포함된 복잡한 요소 목록을 표시하기 위한 유연하고 강력한 구성 요소입니다.

기본 예

가장 기본적인 목록 그룹은 단순히 목록 항목과 적절한 클래스가 있는 정렬되지 않은 목록입니다. 다음 옵션을 사용하거나 필요에 따라 고유한 CSS를 사용하여 빌드하십시오.

Cras Justo Odio
Dapibus ac 시설
모르비 레오 리수스
Porta ac consectetur ac
에로스의 전정

<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>

배지

목록 그룹 항목에 배지 구성 요소를 추가하면 자동으로 오른쪽에 배치됩니다.

14Cras Justo Odio
2Dapibus ac 시설
1모르비 레오 리수스

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

연결된 항목

목록 항목 대신 앵커 태그를 사용하여 목록 그룹 항목을 연결합니다(즉, <div>대신 상위를 의미함 <ul>). 각 요소 주위에 개별 부모가 필요하지 않습니다.

Cras Justo Odio Dapibus ac 시설 모르비 레오 리수스 Porta ac consectetur ac 에로스의 전정

<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>

버튼 항목

목록 그룹 항목은 목록 항목 대신 버튼일 수 있습니다(즉, <div>대신 부모를 의미함 <ul>). 각 요소 주위에 개별 부모가 필요하지 않습니다. 여기에서 표준 클래스를 사용하지 마십시오 ..btn

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

비활성화된 항목

비활성화된 것처럼 보이려면 에 추가 .disabled하면 회색으로 표시됩니다..list-group-item

Cras Justo Odio Dapibus ac 시설 모르비 레오 리수스 Porta ac consectetur ac 에로스의 전정

<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 시설
Cras sit amet nibh libero
Porta ac consectetur ac
에로스의 전정

Dapibus ac 시설 Cras sit amet nibh libero Porta ac consectetur ac 에로스의 전정

<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>

맞춤 콘텐츠

아래와 같은 연결 목록 그룹의 경우에도 거의 모든 HTML을 내부에 추가합니다.

목록 그룹 항목 제목

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

목록 그룹 항목 제목

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

목록 그룹 항목 제목

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

<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을 상자에 넣어야 합니다. 이러한 상황에서는 패널 구성 요소를 사용해 보십시오.

기본 예

기본적으로 모든 .panel작업은 일부 콘텐츠를 포함하기 위해 일부 기본 테두리와 패딩을 적용합니다.

기본 패널 예

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

제목이 있는 패널

를 사용하여 패널에 제목 컨테이너를 쉽게 추가할 수 있습니다 .panel-heading. 미리 스타일이 지정된 제목을 추가하는 클래스 와 함께 any <h1>를 포함할 수도 있습니다 . 그러나 - 의 글꼴 크기 는 에 의해 무시됩니다 .<h6>.panel-title<h1><h6>.panel-heading

적절한 링크 색상을 위해 . 안의 제목에 링크를 배치해야 합니다 .panel-title.

제목이 없는 패널 제목

패널 내용

패널 제목

패널 내용

<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. 패널 바닥글 은 전경에 있어야 하는 것이 아니므로 상황에 맞는 변형을 사용할 때 색상과 테두리를 상속 하지 않습니다 .

패널 내용

패널 바닥글

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

상황에 맞는 대안

다른 구성 요소와 마찬가지로 컨텍스트 상태 클래스를 추가하여 특정 컨텍스트에 더 의미 있는 패널을 쉽게 만들 수 있습니다.

패널 제목

패널 내용

패널 제목

패널 내용

패널 제목

패널 내용

패널 제목

패널 내용

패널 제목

패널 내용

<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분리를 위해 테이블 상단에 추가 테두리를 추가합니다.

패널 제목

여기에 일부 기본 패널 콘텐츠가 있습니다. 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.

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

<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>

패널 본문이 없으면 구성 요소가 중단 없이 패널 헤더에서 테이블로 이동합니다.

패널 제목

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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

목록 그룹 사용

모든 패널에 전체 너비 목록 그룹 을 쉽게 포함할 수 있습니다.

패널 제목

여기에 일부 기본 패널 콘텐츠가 있습니다. 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 시설
모르비 레오 리수스
Porta ac consectetur ac
에로스의 전정

<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다른 속성의 스타일을 일치시키려면 선택적으로 명시적 자손 클래스 를 사용하십시오.

프로 팁! 우리가 당신을 위해 그것을 재정의하므로 당신의 s frameborder="0"에 포함할 필요가 없습니다 .<iframe>

<!-- 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>

기본 우물

우물을 요소에 간단한 효과로 사용하여 삽입 효과를 줍니다.

봐봐, 난 우물 속에 있어!

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

선택 수업

두 개의 선택적 수정자 클래스로 패딩 및 둥근 모서리를 제어합니다.

봐봐, 난 큰 우물 속에 있어!

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

봐봐, 난 작은 우물 속에 있어!

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

구성품

글리프콘

사용 가능한 글리프

사용하는 방법

다른 성분과 혼합하지 마십시오

빈 요소에만 사용

아이콘 글꼴 위치 변경

액세스 가능한 아이콘

예

드롭다운

예시

조정

추가 위치 지정이 필요할 수 있음

더 이상 사용되지 않는 .pull-right정렬

헤더

분할기

비활성화된 메뉴 항목

버튼 그룹

버튼 그룹의 도구 설명 및 팝오버에는 특별한 설정이 필요합니다.

정확한지 확인 role하고 라벨 제공

기본 예

버튼 툴바

사이징

중첩

수직 변동

양쪽 맞춤 버튼 그룹

테두리 처리

IE8과 테두리

요소 <a>포함

버튼 역할을 하는 링크

요소 <button>포함

버튼 드롭다운

플러그인 종속성

단일 버튼 드롭다운

분할 버튼 드롭다운

사이징

드롭업 변형

입력 그룹

텍스트 <input>전용

입력 그룹의 도구 설명 및 팝오버에는 특별한 설정이 필요합니다.

다른 성분과 혼합하지 마십시오

항상 라벨 추가

기본 예

사이징

체크박스 및 라디오 애드온

버튼 애드온

드롭다운이 있는 버튼

분할된 버튼

여러 버튼

탐색

탭 패널에 navs를 사용하려면 JavaScript 탭 플러그인이 필요합니다.

탐색으로 사용되는 탐색을 액세스 가능하게 만들기

탭

의사

정당화

Safari 및 반응형 정당화 탐색

비활성화된 링크

영향을 받지 않는 링크 기능

드롭다운 사용

드롭다운이 있는 탭

드롭다운이 있는 알약

나브바

기본 탐색 모음

넘쳐나는 콘텐츠

JavaScript 플러그인 필요

접힌 모바일 탐색 모음 중단점 변경

탐색 모음을 액세스 가능하게 만들기

브랜드 이미지

양식

휴대기기 주의사항

항상 라벨 추가

버튼

상황별 사용법

텍스트

비 탐색 링크

구성 요소 정렬

여러 구성 요소를 오른쪽 정렬

상단에 고정

바디 패딩 필요

하단에 고정

더 이상 사용되지 않는 `.pull-right`정렬

정확한지 확인 `role`하고 라벨 제공

요소 `<a>`포함

요소 `<button>`포함

텍스트 `<input>`전용