구성품

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

버튼 그룹

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

모범 사례

버튼 그룹 및 도구 모음 사용에 대한 다음 지침을 권장합니다.

  • 단일 버튼 그룹에서 항상 동일한 요소를 사용 <a>하거나 <button>.
  • 동일한 버튼 그룹에 다른 색상의 버튼을 혼합하지 마십시오.
  • 텍스트와 함께 또는 텍스트 대신 아이콘을 사용하지만 적절한 경우 대체 텍스트와 제목 텍스트를 포함해야 합니다.

드롭다운이 있는 관련 버튼 그룹(아래 참조)은 별도로 호출해야 하며 의도한 동작을 나타내기 위해 항상 드롭다운 캐럿을 포함해야 합니다.

기본 예

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

  1. <div 클래스 = "btn-group" >
  2. <버튼 클래스 = "btn" > 1 </버튼>
  3. <버튼 클래스 = "btn" > 2 </버튼>
  4. <버튼 클래스 = "btn" > 3 </버튼>
  5. </div>

도구 모음 예

더 복잡한 구성 요소를 위해 <div class="btn-group">의 세트를 결합합니다 .<div class="btn-toolbar">

  1. <div 클래스 = "btn-toolbar" >
  2. <div 클래스 = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

자바스크립트 받기 »

버튼 그룹의 드롭다운

머리! 드롭다운이 있는 버튼 은 적절한 렌더링을 위해 .btn-group내 에서 개별적으로 래핑되어야 합니다 ..btn-toolbar

버튼 드롭다운

마크업 예시

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

  1. <div 클래스 = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. 동작
  4. <span 클래스 = "캐럿" ></span>
  5. </a>
  6. <ul class = "드롭다운 메뉴" >
  7. <!-- 드롭다운 메뉴 링크 -->
  8. </ul>
  9. </div>

모든 버튼 크기에서 작동

버튼 드롭다운은 모든 크기에서 작동합니다. 버튼 크기를 .btn-large, .btn-small또는 .btn-mini.

자바 스크립트 필요

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

모바일과 같은 일부 경우에는 드롭다운 메뉴가 뷰포트 외부로 확장됩니다. 수동으로 또는 사용자 정의 자바스크립트를 사용하여 정렬을 해결해야 합니다.


분할 버튼 드롭다운

개요 및 예

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

크기

추가 버튼 클래스 .btn-mini, .btn-small또는 .btn-large크기 조정을 활용합니다.

  1. <div 클래스 = "btn-group" >
  2. ...
  3. <ul class = "드롭다운 메뉴 풀-오른쪽" >
  4. <!-- 드롭다운 메뉴 링크 -->
  5. </ul>
  6. </div>

마크업 예시

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

  1. <div 클래스 = "btn-group" >
  2. <버튼 클래스 = "btn" > 작업 </button>
  3. <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span 클래스 = "캐럿" ></span>
  5. </버튼>
  6. <ul class = "드롭다운 메뉴" >
  7. <!-- 드롭다운 메뉴 링크 -->
  8. </ul>
  9. </div>

드롭업 메뉴

의 직계 부모에 단일 클래스를 추가하여 드롭다운 메뉴를 아래에서 위로 토글할 수도 있습니다 .dropdown-menu. .caret위아래가 아닌 아래에서 위로 이동하도록 메뉴 자체 의 방향을 뒤집고 위치를 변경합니다.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > 드롭업 </button>
  3. <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span 클래스 = "캐럿" ></span>
  5. </버튼>
  6. <ul class = "드롭다운 메뉴" >
  7. <!-- 드롭다운 메뉴 링크 -->
  8. </ul>
  9. </div>

다중 페이지 페이지 매김

사용 시기

Rdio에서 영감을 받은 매우 단순하고 최소한의 스타일의 페이지 매김으로 앱 및 검색 결과에 적합합니다. 큰 블록은 놓치기 어렵고 쉽게 확장 가능하며 큰 클릭 영역을 제공합니다.

상태 저장 페이지 링크

링크는 사용자 정의가 가능하며 올바른 클래스와 함께 다양한 상황에서 작동합니다. .disabled클릭 할 수 없는 링크 및 .active현재 페이지의 경우.

유연한 정렬

페이지 매김 링크의 정렬을 변경하려면 두 개의 선택적 클래스 .pagination-centered및 를 추가하십시오 .pagination-right.

기본 페이지 매김 구성 요소는 유연하며 다양한 변형에서 작동합니다.

마크업

에 싸인 <div>, 페이지 매김은 단지 <ul>.

  1. <div 클래스 = "페이지 매김" >
  2. <울>
  3. <li > <a href = "#"> 이전 </a></li>
  4. <li 클래스 = "활성" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li > <a href = "#"> 2 </a></li>
  8. <li > <a href = "#"> 3 </a></li>
  9. <li > <a href = "#"> 4 </a></li>
  10. <li > <a href = "#"> 다음 </a></li>
  11. </ul>
  12. </div>

호출기 빠른 이전 및 다음 링크용

호출기 정보

호출기 구성 요소는 가벼운 마크업과 더 가벼운 스타일을 사용하여 간단한 페이지 매김 구현을 위한 링크 집합입니다. 블로그나 잡지와 같은 간단한 사이트에 적합합니다.

선택적 비활성화 상태

호출기 링크는 .disabled페이지 매김의 일반 클래스도 사용합니다.

기본 예

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

  1. <ul 클래스 = "페이저" >
  2. <리>
  3. <a href = "#" > 이전 </a>
  4. </li>
  5. <리>
  6. <a href = "#" > 다음 </a>
  7. </li>
  8. </ul>

정렬된 링크

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

  1. <ul 클래스 = "페이저" >
  2. <li 클래스 = "이전" >
  3. <a href = "#" > 이전 </a>
  4. </li>
  5. <li 클래스 = "다음" >
  6. <a href = "#"> 최신 & rarr ; </a>
  7. </li>
  8. </ul>
라벨 마크업
기본 <span class="label">Default</span>
성공 <span class="label label-success">Success</span>
경고 <span class="label label-warning">Warning</span>
중요한 <span class="label label-important">Important</span>
정보 <span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

에 대한

배지는 일종의 지표나 개수를 표시하기 위한 작고 간단한 구성 요소입니다. 일반적으로 Mail.app과 같은 이메일 클라이언트나 푸시 알림용 모바일 앱에서 찾을 수 있습니다.

이용 가능한 수업

이름 예시 마크업
기본 1 <span class="badge">1</span>
성공 2 <span class="badge badge-success">2</span>
경고 4 <span class="badge badge-warning">4</span>
중요한 6 <span class="badge badge-important">6</span>
정보 8 <span class="badge badge-info">8</span>
10 <span class="badge badge-inverse">10</span>

영웅 유닛

부트스트랩은 사이트의 콘텐츠를 보여주기 위해 히어로 유닛이라는 가볍고 유연한 구성 요소를 제공합니다. 마케팅 및 콘텐츠가 많은 사이트에서 잘 작동합니다.

마크업

div다음 과 같이 콘텐츠를 래핑합니다 .

  1. <div 클래스 = "영웅 유닛" >
  2. <h1> 제목 </h1>
  3. <p> 태그라인 </p>
  4. <p>
  5. <a 클래스 = "btn btn-primary btn-large" >
  6. 더 알아보기
  7. </a>
  8. </p>
  9. </div>

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

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

더 알아보기

페이지 헤더

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

  1. <div 클래스 = "페이지 헤더" >
  2. <h1> 페이지 헤더의 예 </h1>
  3. </div>

기본 썸네일

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

고도로 사용자 정의 가능

약간의 추가 마크업으로 제목, 단락 또는 버튼과 같은 모든 종류의 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.

    동작 동작

썸네일을 사용하는 이유

썸네일(이전 .media-gridv1.4까지)은 사진 또는 비디오 그리드, 이미지 검색 결과, 소매 제품, 포트폴리오 등에 적합합니다. 링크 또는 정적 콘텐츠일 수 있습니다.

간단하고 유연한 마크업

썸네일 마크업은 간단 합니다. 요소 ul수에 관계없이 필요한 모든 것입니다. li또한 매우 유연하여 콘텐츠를 래핑하기 위해 약간의 마크업만 추가하면 모든 유형의 콘텐츠를 허용합니다.

그리드 열 크기 사용

마지막으로 썸네일 구성 요소는 썸네일 크기를 제어하기 위해 .span2또는 와 같은 기존 그리드 시스템 클래스를 사용합니다..span3

마크업

앞서 언급했듯이 썸네일에 필요한 마크업은 가볍고 간단합니다. 연결된 이미지 의 기본 설정은 다음과 같습니다.

  1. <ul 클래스 = "썸네일" >
  2. <li 클래스 = "span3" >
  3. <a href = "#" 클래스 = "썸네일" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

축소판의 사용자 정의 HTML 콘텐츠의 경우 마크업이 약간 변경됩니다. 어디에서나 블록 수준 콘텐츠를 허용하기 <a>위해 다음 <div>과 같이 교환합니다.

  1. <ul 클래스 = "썸네일" >
  2. <li 클래스 = "span3" >
  3. <div 클래스 = "썸네일" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> 썸네일 레이블 </h5>
  6. <p> 바로 여기에 썸네일 캡션... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

더 많은 예

사용 가능한 다양한 그리드 클래스로 모든 옵션을 탐색하십시오. 또한 다양한 크기를 믹스 앤 매치할 수 있습니다.

가벼운 기본값

재작성된 기본 클래스

Bootstrap 2를 사용하여 기본 클래스를 단순화 .alert했습니다 .alert-message. 또한 최소 필수 마크업을 줄였습니다 . <p>기본적으로는 필요하지 않으며 외부만 필요합니다 <div>.

단일 경고 메시지

더 적은 코드로 더 내구성 있는 구성 요소를 위해 더 많은 패딩과 일반적으로 더 많은 텍스트와 함께 제공되는 메시지인 차단 경고에 대한 차별화된 모양을 제거했습니다. 클래스도 로 변경되었습니다 .alert-block.


자바 스크립트와 잘 어울립니다.

부트스트랩은 경고 메시지를 지원하는 훌륭한 jQuery 플러그인과 함께 제공되어 경고 메시지를 빠르고 쉽게 해제할 수 있습니다.

플러그인 받기 »

경고 예시

간단한 클래스를 사용하여 div에 메시지와 선택적 닫기 아이콘을 래핑합니다.

경고! 스스로 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.
  1. <div 클래스 = "경고" >
  2. <버튼 클래스 = "닫기" 데이터 해제 = "경고" > × </버튼>
  3. <strong> 경고! </strong> 스스로를 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.
  4. </div>

머리! iOS 기기 href="#"는 경고 해제가 필요합니다. 앵커 닫기 아이콘에 대한 데이터 속성과 이를 포함해야 합니다. <button>또는 우리가 문서용으로 선택한 데이터 속성이 있는 요소를 사용할 수 있습니다 . 를 사용할 때 <button>다음을 포함해야 합니다.type="button" 하며 그렇지 않으면 양식이 제출되지 않을 수 있습니다.

.alert-block더 많은 패딩 및 텍스트 컨트롤과 .alert-heading일치하는 제목에 대한 두 가지 선택적 클래스를 사용하여 표준 경고 메시지를 쉽게 확장할 수 있습니다 .

경고!

스스로 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div 클래스 = "경고 경고 차단" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > 경고! </h4>
  4. 최선을 다해 확인하세요, 당신은...
  5. </div>

상황별 대안 경고의 의미를 변경하기 위해 선택적 클래스 추가

오류 또는 위험

오 스냅! 몇 가지를 변경하고 다시 제출해 보세요.
  1. <div 클래스 = "경고 경고 오류" >
  2. ...
  3. </div>

성공

잘했어요! 이 중요한 경고 메시지를 성공적으로 읽었습니다.
  1. <div 클래스 = "경고 알림 성공" >
  2. ...
  3. </div>

정보

머리! 이 경고는 주의가 필요하지만 그다지 중요하지 않습니다.
  1. <div 클래스 = "경고 알림 정보" >
  2. ...
  3. </div>

예제 및 마크업

기초적인

수직 그라디언트가 있는 기본 진행률 표시줄.

  1. <div 클래스 = "진행" >
  2. <div 클래스 = "바"
  3. 스타일 = " 너비 : 60 %; " ></div>
  4. </div>

줄무늬

그라디언트를 사용하여 줄무늬 효과를 만듭니다(IE 없음).

  1. <div class = "progress progress-striped" >
  2. <div 클래스 = "바"
  3. 스타일 = " 너비 : 20 %; " ></div>
  4. </div>

생기 있는

스트라이프 예제를 가져와 애니메이션을 적용합니다(IE 없음).

  1. <div class = "진행률 줄무늬
  2. 활성" >
  3. <div 클래스 = "바"
  4. 스타일 = " 너비 : 40 %; " ></div>
  5. </div>

옵션 및 브라우저 지원

추가 색상

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

줄무늬 바

단색과 유사하게 다양한 줄무늬 진행률 표시줄이 있습니다.

행동

프로그레스 바는 CSS3 트랜지션을 사용하므로 자바스크립트를 통해 동적으로 너비를 조정하면 부드럽게 크기가 조정됩니다.

.active클래스 를 사용하는 경우 .progress-striped진행률 표시줄이 줄무늬를 왼쪽에서 오른쪽으로 움직입니다.

브라우저 지원

진행률 표시줄은 CSS3 그라디언트, 전환 및 애니메이션을 사용하여 모든 효과를 달성합니다. 이러한 기능은 IE7-9 또는 이전 버전의 Firefox에서는 지원되지 않습니다.

Opera와 IE는 현재 애니메이션을 지원하지 않습니다.

웰스

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

봐봐, 난 우물 속에 있어!
  1. <div 클래스 = "잘" >
  2. ...
  3. </div>

닫기 아이콘

모달 및 경고와 같은 콘텐츠를 닫으려면 일반 닫기 아이콘을 사용하세요.

  1. <버튼 클래스 = "닫기" > × </버튼>

앵커를 사용하려면 iOS 기기에서 클릭 이벤트에 대해 href="#"가 필요합니다.

  1. <a class = "close" href = "#" > × </a>