예시

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

<ul class = "dropdown-menu" 역할 = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > 작업 </a></li>  
  <li><a tabindex = "-1" href = "#" > 다른 작업 </a></li>  
  <li><a tabindex = "-1" href = "#" > 여기에 다른 것 </a></li>  
  <li 클래스 = "분할기" ></li> 
  <li><a tabindex = "-1" href = "#" > 분리된 링크 </a></li>  
</ul>

마크업

드롭다운 메뉴만 보면 필요한 HTML이 있습니다. 드롭다운의 트리거와 드롭다운 메뉴를 .dropdown, 또는 를 선언하는 다른 요소 내에 래핑해야 합니다 position: relative;. 그런 다음 메뉴를 생성하면 됩니다.

<div 클래스 = "드롭다운" > 
  <!-- 드롭다운을 전환하는 링크 또는 버튼 -->
  <ul 클래스 = "드롭다운 메뉴" 역할 = "메뉴" aria- labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > 작업 </a></li>  
    <li><a tabindex = "-1" href = "#" > 다른 작업 </a></li>  
    <li><a tabindex = "-1" href = "#" > 여기에 다른 것 </a></li>  
    <li 클래스 = "분할기" ></li> 
    <li><a tabindex = "-1" href = "#" > 분리된 링크 </a></li>  
  </ul>
</div>

옵션

메뉴를 오른쪽에 정렬하고 추가 수준의 드롭다운을 추가합니다.

메뉴 정렬

드롭다운 메뉴를 오른쪽 정렬에 추가 .pull-right합니다 ..dropdown-menu

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

비활성화된 메뉴 옵션

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

<ul class = "dropdown-menu" 역할 = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > 일반 링크 </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > 비활성화된 링크 </a></li>   
  <li><a tabindex = "-1" href = "#" > 다른 링크 </a></li>  
</ul>

드롭다운의 하위 메뉴

몇 가지 간단한 마크업 추가와 함께 OS X처럼 마우스를 가져가면 나타나는 드롭다운 메뉴의 추가 수준을 추가합니다. 자동 스타일 지정을 위해 기존 드롭다운 메뉴에 추가 .dropdown-submenu합니다 .li

<ul 클래스 = "드롭다운 메뉴" 역할 = "메뉴" aria- labelledby = "dLabel" >   
  ...
  <li class = "드롭다운-하위 메뉴" > 
    <a tabindex = "-1" href = "#" > 추가 옵션 </a>  
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </li>
</ul>

예

두 가지 더 구체적인 변형과 함께 두 가지 기본 옵션.

단일 버튼 그룹

일련의 버튼을 .btnin 으로 감쌉니다 .btn-group.

<div 클래스 = "btn-group" > 
  <버튼 클래스 = "btn" > 왼쪽 </button> 
  <버튼 클래스 = "btn" > 중간 </button> 
  <버튼 클래스 = "btn" > 오른쪽 </button> 
</div>

여러 버튼 그룹

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

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

수직 버튼 그룹

버튼 세트를 가로가 아닌 세로로 쌓은 것처럼 보이게 합니다.

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

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

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

버튼 그룹의 드롭다운

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

개요 및 예

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

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

모든 버튼 크기에서 작동

버튼 드롭다운은 .btn-large, .btn-small, 또는 .btn-mini.

자바스크립트 필요

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

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

분할 버튼 드롭다운

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

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

크기

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

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

드롭업 메뉴

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

<div class = "btn-group dropup" > 
  <button class = "btn" > 드롭업 </button> 
  <버튼 클래스 = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span 클래스 = "캐럿" ></span> 
  </버튼>
  <ul class = "드롭다운 메뉴" > 
    <!-- 드롭다운 메뉴 링크 -->
  </ul>
</div>

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

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

기본 탭

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

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

기본 알약

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

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

비활성화 상태

모든 탐색 구성요소(탭, 알약 또는 목록)에 .disabled대해 회색 링크를 추가하고 호버 효과가 없습니다 . href그러나 속성 을 제거하지 않는 한 링크는 계속 클릭할 수 있습니다 . 또는 이러한 클릭을 방지하기 위해 사용자 정의 JavaScript를 구현할 수 있습니다.

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

구성 요소 정렬

탐색 링크를 정렬하려면 .pull-left또는 .pull-right유틸리티 클래스를 사용하십시오. 두 클래스 모두 지정된 방향으로 CSS float를 추가합니다.

쌓을 수 있는

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

누적 탭

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

누적된 알약

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

드롭다운

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

드롭다운이 있는 탭

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

드롭다운이 있는 알약

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

탐색 목록

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

탐색 목록의 예

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

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

메모탐색 목록 내 중첩의 class="nav nav-list"경우 중첩된 <ul>.

수평 디바이더

다음과 같이 class 로 빈 목록 항목을 만들어 가로 구분선을 추가합니다 .divider.

<ul 클래스 = "내비게이션 목록" > 
  ...
  <li 클래스 = "분할기" ></li> 
  ...
</ul>

탭 가능한 탐색

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

탭 가능한 예

탭을 탭할 수 있도록 하려면 .tab-pane모든 탭에 대해 고유한 ID를 생성하고 .tab-content.

<div class = "tabbable" > <!-- 왼쪽/오른쪽 탭에만 필요 -->  
  <ul 클래스 = "내비게이션 탭" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > 섹션 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 섹션 2 </a></li>  
  </ul>
  <div 클래스 = "탭 콘텐츠" > 
    <div 클래스 = "탭 창 활성" id = "tab1" >  
      <p> 저는 섹션 1에 있습니다. </p>
    </div>
    <div 클래스 = "탭 창" id = "tab2" >  
      <p> 안녕하세요, 저는 섹션 2에 있습니다. </p>
    </div>
  </div>
</div>

페이드 인 탭

탭을 페이드 인하려면 .fade각각 에 추가하십시오 .tab-pane.

jQuery 플러그인 필요

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

모든 방향으로 탭 가능

하단의 탭

HTML의 순서를 뒤집고 하단에 탭을 넣을 클래스를 추가합니다.

<div 클래스 = "탭 가능한 탭 아래" > 
  <div 클래스 = "탭 콘텐츠" > 
    ...
  </div>
  <ul 클래스 = "내비게이션 탭" > 
    ...
  </ul>
</div>

왼쪽의 탭

왼쪽에 탭을 두도록 클래스를 바꿉니다.

<div 클래스 = "탭 가능한 탭-왼쪽" > 
  <ul 클래스 = "내비게이션 탭" > 
    ...
  </ul>
  <div 클래스 = "탭 콘텐츠" > 
    ...
  </div>
</div>

오른쪽의 탭

오른쪽에 탭을 두도록 클래스를 바꿉니다.

<div 클래스 = "탭 가능한 탭-오른쪽" > 
  <ul 클래스 = "내비게이션 탭" > 
    ...
  </ul>
  <div 클래스 = "탭 콘텐츠" > 
    ...
  </div>
</div>

기본 탐색 모음

시작하려면 탐색 모음이 정적(상단에 고정되지 않음)이며 프로젝트 이름 및 기본 탐색에 대한 지원이 포함됩니다. .container사이트 및 콘텐츠의 너비를 설정하는 의 아무 곳에 나 배치합니다.

<div 클래스 = "내비바" > 
  <div 클래스 = "내비게이터 내부" > 
    <a class = "brand" href = "#" > 제목 </a>  
    <ul 클래스 = "내비게이션" > 
      <li class = "active" ><a href = "#" > 홈 </a></li>  
      <li > <a href = "#"> 링크 </a></li> 
      <li > <a href = "#"> 링크 </a></li> 
    </ul>
  </div>
</div>

Navbar 구성 요소

상표

브랜드 또는 프로젝트 이름을 표시하는 간단한 링크에는 앵커 태그만 필요합니다.

<a class = "brand" href = "#" > 프로젝트 이름 </a>  

탐색 링크

탐색 항목은 순서가 지정되지 않은 목록을 통해 간단하게 추가할 수 있습니다.

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

빈 목록 항목과 간단한 클래스를 사용하여 탐색 링크에 구분선을 쉽게 추가할 수 있습니다. 링크 사이에 다음을 추가하기만 하면 됩니다.

<ul 클래스 = "내비게이션" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

양식

탐색 모음 내에서 양식의 스타일을 적절하게 지정하고 위치를 지정하려면 아래와 같이 적절한 클래스를 추가하십시오. 기본 양식의 경우 .navbar-form및 중 하나 .pull-left를 포함 .pull-right하여 적절하게 정렬합니다.

<form class = "navbar-form-왼쪽으로 당기기" > 
  <입력 유형 = "텍스트" 클래스 = "span2" >  
  <버튼 유형 = "제출" 클래스 = "btn" > 제출 </button>  
</form>

검색 양식

보다 맞춤화된 검색 양식 .navbar-search을 위해 form및 .search-query를 탐색 표시줄의 특수 스타일에 대한 입력에 추가하십시오.

<form class = "navbar-search pull-left" > 
  <입력 유형 = "텍스트" 클래스 = "검색 쿼리" 자리 표시자 = "검색" >   
</form>

구성 요소 정렬

탐색 링크, 검색 양식 또는 텍스트를 정렬하고 .pull-left또는 .pull-right유틸리티 클래스를 사용합니다. 두 클래스 모두 지정된 방향으로 CSS float를 추가합니다.

드롭다운 사용

약간의 마크업과 드롭다운 JavaScript 플러그인 을 사용하여 탐색에 드롭다운 및 드롭업을 추가합니다 .

<ul 클래스 = "내비게이션" > 
  <li 클래스 = "드롭다운" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      계정
      <b 클래스 = "캐럿" ></b> 
    </a>
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </li>
</ul>

추가 마크업 및 드롭다운 호출에 대한 정보 는 JavaScript 드롭다운 설명서 를 참조하세요.

텍스트

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

선택적 디스플레이 변형

가장 바깥쪽 div에 추가 클래스를 사용하여 탐색 모음을 뷰포트의 상단 또는 하단에 고정합니다 .navbar.

상단에 고정

.navbar-fixed-top최소 40px padding를 <body>. 핵심 부트스트랩 CSS 뒤와 선택적인 반응형 CSS 앞에 이것을 추가해야 합니다.

<div 클래스 = "navbar navbar-fixed-top" > 
  ...
</div>

하단에 고정

대신 추가하십시오 .navbar-fixed-bottom.

<div 클래스 = "navbar navbar-fixed-bottom" > 
  ...
</div>

정적 상단 탐색 모음

을 추가하여 페이지와 함께 스크롤되는 전체 너비 탐색 모음을 만듭니다 .navbar-static-top. 클래스 와 달리 에서 .navbar-fixed-top패딩을 변경할 필요가 없습니다 body.

<div 클래스 = "navbar navbar-static-top" > 
  ...
</div>

반응형 탐색바

축소 반응형 탐색 모음을 구현하려면 탐색 모음 콘텐츠를 포함하는 div로 래핑 .nav-collapse.collapse하고 탐색 모음 토글 버튼 을 추가합니다 .btn-navbar.

<div 클래스 = "내비바" > 
  <div 클래스 = "내비게이터 내부" > 
    <div 클래스 = "컨테이너" > 
 
      <!-- .btn-navbar는 축소된 탐색 모음 콘텐츠에 대한 토글로 사용됩니다. -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- 표시하려면 브랜드를 그대로 두십시오 -->
      <a class = "brand" href = "#" > 프로젝트 이름 </a>  
 
      <!-- 940px 이하로 숨기고 싶은 모든 것을 여기 안에 넣으세요 -->
      <div 클래스 = "내비게이션 접기" > 
        <!-- .nav, .navbar-search, .navbar-form 등 -->
      </div>
 
    </div>
  </div>
</div>

역변이

를 추가하여 탐색 모음의 모양을 수정합니다 .navbar-inverse.

<div 클래스 = "navbar navbar-inverse" > 
  ...
</div>

예

여러 페이지에 걸쳐 표시될 수 있는 단일 예입니다.

<ul 클래스 = "이동 경로" > 
  <li><a href = "#" > 홈 </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > 라이브러리 </a> <span class = "divider" > / </span></li>   
  <li class = "active" > 데이터 </li> 
</ul>

표준 페이지 매김

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

<div 클래스 = "페이지 매김" > 
  <울>
    <li > <a href = "#"> 이전 </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 = "#"> 다음 </a></li> 
  </ul>
</div>

옵션

비활성화 및 활성 상태

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

<div 클래스 = "페이지 매김" > 
  <울>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li 클래스 = "활성" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

원하는 스타일을 유지하면서 클릭 기능을 제거하기 위해 범위에 대해 활성 또는 비활성화된 앵커를 선택적으로 교체할 수 있습니다.

<div 클래스 = "페이지 매김" > 
  <울>
    <li class = "disabled" ><span> « </span></li> 
    <li 클래스 = "활성" ><span> 1 </span></li> 
    ...
  </ul>
</div>

크기

더 크거나 작은 페이지 매김을 원하십니까? 추가 크기 .pagination-large의 경우 .pagination-small, 또는 .pagination-mini을(를) 추가합니다.

<div class = "pagination pagination-large" > 
  <울>
    ...
  </ul>
</div>
<div 클래스 = "페이지 매김" > 
  <울>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <울>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <울>
    ...
  </ul>
</div>

조정

두 개의 선택적 클래스 중 하나를 추가하여 페이지 매김 링크의 정렬을 변경합니다. .pagination-centered및 .pagination-right.

<div 클래스 = "페이지 매김 페이지 매김 중심" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

휴대용 소형 무선 호출기

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

기본 예

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

<ul 클래스 = "페이저" > 
  <li > <a href = "#"> 이전 </a></li> 
  <li > <a href = "#"> 다음 </a></li> 
</ul>

정렬된 링크

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

<ul 클래스 = "페이저" > 
  <li 클래스 = "이전" > 
    <a href = "#"> & larr ; 이전 </a> 
  </li>
  <li 클래스 = "다음" > 
    <a href = "#"> 최신 & rarr ; </a> 
  </li>
</ul>

선택적 비활성화 상태

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

<ul 클래스 = "페이저" > 
  <li class = "이전 비활성화" > 
    <a href = "#"> & larr ; 이전 </a> 
  </li>
  ...
</ul>

라벨

배지

쉽게 접을 수 있습니다

쉽게 구현할 수 있도록 :empty콘텐츠가 없을 때 레이블과 배지는 CSS 선택기를 통해 축소됩니다.

영웅 유닛

사이트의 주요 콘텐츠를 보여주는 가볍고 유연한 구성 요소입니다. 마케팅 및 콘텐츠가 많은 사이트에서 잘 작동합니다.

<div 클래스 = "영웅 유닛" > 
  <h1> 제목 </h1>
  <p> 태그라인 </p>
  <p>
    <a 클래스 = "btn btn-primary btn-large" > 
      더 알아보기
    </a>
  </p>
</div>

페이지 헤더

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

<div 클래스 = "페이지 헤더" > 
  <h1> 예제 페이지 헤더 <small> 헤더의 하위 텍스트 </small></h1>
</div>

기본 썸네일

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

고도로 사용자 정의 가능

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

썸네일을 사용하는 이유

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

간단하고 유연한 마크업

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

그리드 열 크기 사용

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

마크업

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

<ul 클래스 = "썸네일" > 
  <li 클래스 = "span4" > 
    <a href = "#" 클래스 = "썸네일" >  
      <img 데이터 -src = "holder.js/300x200" Alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul 클래스 = "썸네일" > 
  <li 클래스 = "span4" > 
    <div 클래스 = "썸네일" > 
      <img 데이터 -src = "holder.js/300x200" Alt = "" >  
      <h3> 썸네일 레이블 </h3>
      <p> 썸네일 캡션... </p>
    </div>
  </li>
  ...
</ul>

더 많은 예

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

기본 경고

.alert기본 경고 경고 메시지 에 대한 텍스트와 선택적인 해제 버튼을 줄 바꿈하십시오 .

<div 클래스 = "경고" > 
  <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "경고" > × </버튼>   
  <strong> 경고! </strong> 스스로를 확인하는 것이 좋습니다. 당신은 너무 좋아 보이지 않습니다.
</div>

닫기 버튼

data-dismiss="alert"속성 외에도 Mobile Safari 및 Mobile Opera 브라우저 는 태그 href="#"를 사용할 때 경고를 해제 해야 합니다.<a>

<a href = "#" class = "닫기" data-dismiss = "alert" > × </a>   

<button>또는 우리가 문서용으로 선택한 데이터 속성이 있는 요소를 사용할 수 있습니다 . 를 사용할 때 <button>반드시 포함해야 type="button"하며 그렇지 않으면 양식이 제출되지 않을 수 있습니다.

<버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "경고" > × </버튼>   

JavaScript를 통해 경고 닫기

빠르고 쉽게 경고를 해제 하려면 경고 jQuery 플러그인 을 사용하십시오.

옵션

더 긴 메시지의 경우 를 추가하여 경고 래퍼의 상단과 하단 패딩을 늘 .alert-block립니다.

<div 클래스 = "경고 경고 차단" > 
  <버튼 유형 = "버튼" 클래스 = "닫기" data-dismiss = "경고" > × </버튼>   
  <h4> 경고! </h4>
  최선을 다해 확인하세요, 당신은...
</div>

상황에 맞는 대안

경고의 의미를 변경하려면 선택적 클래스를 추가하십시오.

오류 또는 위험

<div 클래스 = "경고 경고 오류" > 
  ...
</div>

성공

<div 클래스 = "경고 알림 성공" > 
  ...
</div>

정보

<div 클래스 = "경고 경보 정보" > 
  ...
</div>

예제 및 마크업

기초적인

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

<div 클래스 = "진행" > 
  <div 클래스 = "막대" 스타일 = " 너비 : 60 %; " ></div>   
</div>

줄무늬

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

<div class = "progress progress-striped" > 
  <div 클래스 = "막대" 스타일 = " 너비 : 20 %; " ></div>   
</div>

생기 있는

줄무늬를 오른쪽에서 왼쪽으로 움직이려면 에 추가하십시오 .active. .progress-striped모든 버전의 IE에서 사용할 수 있는 것은 아닙니다.

<div class = "progress progress-striped active" > 
  <div 클래스 = "막대" 스타일 = " 너비 : 40 %; " ></div>   
</div>

쌓인

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

<div 클래스 = "진행" > 
  <div class = "bar bar-success" 스타일 = " 너비 : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " 너비 : 10 %; " ></div>   
</div>

옵션

추가 색상

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

<div 클래스 = "진행 상황 정보" > 
  <div 클래스 = "막대" 스타일 = " 너비 : 20 % " ></div>   
</div>
<div 클래스 = "진행 진행-성공" > 
  <div 클래스 = "막대" 스타일 = " 너비 : 40 % " ></div>   
</div>
<div 클래스 = "진행 상황 경고" > 
  <div 클래스 = "바" 스타일 = " 너비 : 60 % " ></div>   
</div>
<div 클래스 = "진행 진행 위험" > 
  <div 클래스 = "바" 스타일 = " 너비 : 80 % " ></div>   
</div>

줄무늬 바

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

<div class = "progress progress-info progress-striped" > 
  <div 클래스 = "막대" 스타일 = " 너비 : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div 클래스 = "막대" 스타일 = " 너비 : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div 클래스 = "바" 스타일 = " 너비 : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div 클래스 = "바" 스타일 = " 너비 : 80 % " ></div>   
</div>

브라우저 지원

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

Internet Explorer 10 및 Opera 12 이전 버전은 애니메이션을 지원하지 않습니다.

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

기본 예

기본 미디어를 사용하면 콘텐츠 블록의 왼쪽이나 오른쪽에 미디어 개체(이미지, 비디오, 오디오)를 띄울 수 있습니다.

미디어 제목

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.

<div 클래스 = "미디어" > 
  <a class = "pull-left" href = "#" >  
    <img 클래스 = "미디어 개체" 데이터 -src = "holder.js/64x64" >  
  </a>
  <div 클래스 = "미디어 바디" > 
    <h4 class = "media-heading" > 미디어 제목 </h4> 
    ...
 
    <!-- 중첩된 미디어 개체 -->
    <div 클래스 = "미디어" > 
      ...
    </div>
  </div>
</div>

미디어 목록

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

<ul 클래스 = "미디어 목록" > 
  <li 클래스 = "미디어" > 
    <a class = "pull-left" href = "#" >  
      <img 클래스 = "미디어 개체" 데이터 -src = "holder.js/64x64" >  
    </a>
    <div 클래스 = "미디어 바디" > 
      <h4 class = "media-heading" > 미디어 제목 </h4> 
      ...
 
      <!-- 중첩된 미디어 개체 -->
      <div 클래스 = "미디어" > 
        ...
     </div>
    </div>
  </li>
</ul>

웰스

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

<div 클래스 = "잘" > 
  ...
</div>

선택 수업

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

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

<div 클래스 = "잘 작은" > 
  ...
</div>

닫기 아이콘

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

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

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

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

도우미 클래스

작은 디스플레이 또는 동작 조정을 위한 단순하고 집중된 클래스입니다.

.당기기

요소를 왼쪽으로 띄우기

클래스 = "왼쪽으로 당기기"

. 당기기 - 왼쪽 {
  플로트 : 왼쪽 ;
}

.당기기

요소를 오른쪽으로 띄우기

클래스 = "당기기"

. 당겨 - 오른쪽 {
  플로트 : 오른쪽 ;
}

.음소거

요소의 색상을 다음으로 변경#999

클래스 = "음소거"

. 음소거 {
  색상 : #999; 
}

.clearfix

float모든 요소에서 지우기

클래스 = "clearfix"

. 클리어픽스 {
  * 줌 : 1 ; 
  &: 전에 ,
  &: { 이후
    디스플레이 : 테이블 ;
    내용 : "" ; 
  }
  &: { 이후
    클리어 : 둘 다 ;
  }
}