구성품
아이콘, 드롭다운, 입력 그룹, 탐색, 경고 등을 제공하도록 구축된 12개 이상의 재사용 가능한 구성 요소.
글리프콘
사용 가능한 글리프
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 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
추가 위치 지정이 필요할 수 있음
드롭다운은 문서의 일반적인 흐름 내에서 CSS를 통해 자동으로 배치됩니다. 이는 드롭다운이 특정 overflow속성을 가진 부모에 의해 잘리거나 뷰포트의 범위를 벗어날 수 있음을 의미합니다. 이러한 문제가 발생하면 스스로 해결하십시오.
더 이상 사용되지 않는 .pull-right정렬
v3.1.0부터 .pull-right드롭다운 메뉴에서 더 이상 사용되지 않습니다. 메뉴를 오른쪽 정렬하려면 를 사용 .dropdown-menu-right하십시오. 탐색 모음의 오른쪽 정렬 탐색 구성 요소는 이 클래스의 믹스인 버전을 사용하여 메뉴를 자동으로 정렬합니다. 재정의하려면 를 사용 .dropdown-menu-left하십시오.
<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클래스로 시작하는 공유 마크업과 공유 상태가 있습니다. 수정자 클래스를 교체하여 각 스타일 간에 전환합니다.
탭
.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. 작은 화면에서는 탐색 링크가 누적됩니다.
양쪽 정렬된 탐색 모음 탐색 링크는 현재 지원되지 않습니다.
<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과 드롭다운 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는 애플리케이션 또는 사이트의 탐색 헤더 역할을 하는 반응형 메타 구성 요소입니다. 모바일 보기에서 접히기 시작하고(전환 가능) 사용 가능한 표시 영역 너비가 증가하면 수평이 됩니다.
양쪽 정렬된 탐색 모음 탐색 링크는 현재 지원되지 않습니다.
<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>버튼
에 존재하지 않는 요소 에 .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>하단에 고정
또는 를 중앙에 추가 .navbar-fixed-bottom하고 포함하고 탐색 모음 콘텐츠를 채웁니다..container.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>정적 상단
또는 를 중앙 에 추가 .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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>선택적 비활성화 상태
호출기 링크는 .disabled페이지 매김의 일반 유틸리티 클래스도 사용합니다.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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">링크, 부트스트랩 탐색 등을 추가하여 새 항목이나 읽지 않은 항목을 쉽게 강조 표시 합니다.
<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 콘텐츠를 축소판에 추가할 수 있습니다.
<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">×</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
<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하려면 진행률 표시줄에 추가하는 것이 좋습니다.
<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>). 각 요소 주위에 개별 부모가 필요하지 않습니다.
<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회색으로 표시합니다.
<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
- 에로스의 전정
<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>