버튼 그룹

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

모범 사례

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

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

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

기본 예

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

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

도구 모음 예

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

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

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

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

자바스크립트 받기 »

버튼 그룹의 드롭다운

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

개요 및 예

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

마크업 예시

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

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

자바 스크립트 필요

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

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

개요 및 예

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

크기

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

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

마크업 예시

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

<div 클래스 = "btn-group" > 
  <버튼 클래스 = "btn" > 작업 </button> 
  <버튼 클래스 = "btn 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 .

사용 시기

탭과 알약은 콘텐츠 섹션 또는 관련 콘텐츠 페이지 간 탐색에 적합합니다.

구성 요소 정렬

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

기본 탭

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

쌓는 방법

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

누적 탭

• 집
• 프로필
• 메시지

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

누적된 알약

• 집
• 프로필
• 메시지

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

다양한 메뉴를 간편하게

Bootstrap 탭과 알약의 드롭다운 메뉴는 매우 쉽고 약간의 추가 HTML과 가벼운 jQuery 플러그인만 있으면 됩니다.

Javascript 페이지로 이동하여 Bootstrap에서 드롭다운 초기화 에 대한 문서를 읽으십시오.

드롭다운이 있는 탭

• 집
• 돕다
• 쓰러지 다
  • Action
  • Another action
  • Something else here
  • Separated link

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

드롭다운이 있는 알약

• 집
• 돕다
• 쓰러지 다
  • Action
  • Another action
  • Something else here
  • Separated link

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

애플리케이션 스타일 탐색

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

구조적으로 탭 및 알약과 동일한 핵심 탐색 스타일을 기반으로 하므로 사용 및 사용자 지정이 간단합니다.

아이콘으로

탐색 목록에는 아이콘도 쉽게 장착할 수 있습니다. <i>클래스와 함께 적절한 태그를 추가하면 설정이 완료됩니다.

수평 디바이더

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

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

탐색 목록의 예

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

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

아이콘이 있는 예

같은 예이지만 <i>아이콘에 대한 태그가 있습니다.

<ul 클래스 = "내비게이션 목록" > 
  ...
  <리>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      도서관
    </a>
  </li>
  ...
</ul>

포함된 항목

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

그들 사이를 변경하는 것은 쉽고 아주 적은 마크업만 변경하면 됩니다.

페이드 인 탭

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

jQuery 플러그인 필요

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

자바스크립트 받기 →

탭 가능한 예

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

오른쪽 또는 왼쪽으로 정렬된 탭의 경우 및를 .nav-tabs로 줄 .tab-content입니다 .tabbable.

간단한 마크업

탭 가능 탭을 사용하려면 래핑 div, 탭 세트 및 탭 가능 콘텐츠 창 세트가 필요합니다.

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

하단의 탭

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

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

왼쪽의 탭

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

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

오른쪽의 탭

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

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

Navbar 비계

navbar는 정적 또는 고정 표시를 위해 잘 구조화하기 위해 몇 개의 div만 필요합니다.

<div 클래스 = "내비게이터" > 
  <div 클래스 = "내비게이터 내부" > 
    <div 클래스 = "컨테이너" > 
      ...
    </div>
  </div>
</div>

고정 탐색 모음

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

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

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

탐색 모음을 부착할 때 아래에 숨겨진 영역을 고려해야 합니다. 40px 이상의 패딩을 추가하십시오.<body> . 핵심 부트스트랩 CSS 뒤와 선택적인 반응형 CSS 앞에 이것을 추가해야 합니다.

상표명

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

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

탐색 모음의 양식

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

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

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

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

선택적 반응 변형

상단 표시줄의 콘텐츠 양에 따라 반응형 옵션을 구현할 수 있습니다. 이렇게 하려면 포함하는 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>

탐색 링크

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

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

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

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

구성 요소 정렬

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

드롭다운 메뉴 추가

탐색에 드롭다운과 드롭업을 추가하는 것은 매우 간단하지만 자바스크립트 플러그인 을 사용해야 합니다 .

<ul 클래스 = "내비게이션" > 
  <li 클래스 = "드롭다운" > 
    <a href = "#" 
          클래스 = "드롭다운 토글"
          데이터 토글 = "드롭다운" >
          계정
          <b 클래스 = "캐럿" ></b> 
    </a>
    <ul class = "드롭다운 메뉴" > 
      ...
    </ul>
  </li>
</ul>

자바스크립트 받기 →

탐색 모음의 텍스트

적절한 행간과 색상을 위해 <.navbar-text>일반적으로 태그 에서 텍스트 문자열을 줄 바꿈 합니다.<p>

사용하는 이유

탐색경로 탐색은 기본 탐색이 아닌 앱이나 사이트 내에서 사용자를 표시하는 방법으로 사용됩니다. 가장 효율적으로 사용하려면 사용 빈도를 줄이고 간결하게 유지하십시오.

예

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

• 집

• 홈 /
• 도서관

• 홈 /
• 도서관 /
• 데이터

마크업

HTML은 링크가 있는 표준 정렬되지 않은 목록입니다.

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

사용 시기

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

상태 저장 페이지 링크

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

유연한 정렬

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

예

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

마크업

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

<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 = "#"> 다음 </a></li> 
  </ul>
</div>

호출기 정보

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

선택적 비활성화 상태

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

기본 예

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

• 이전의
• 다음

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

정렬된 링크

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

• ← 이전
• 최신 →

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

에 대한

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

이용 가능한 수업

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

마크업

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

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

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

<div 클래스 = "페이지 헤더" > 
  <h1> 페이지 헤더의 예 </h1>
</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

마크업

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

<ul 클래스 = "썸네일" > 
  <li 클래스 = "span3" > 
    <a href = "#" 클래스 = "썸네일" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul 클래스 = "썸네일" > 
  <li 클래스 = "span3" > 
    <div 클래스 = "썸네일" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> 썸네일 레이블 </h5>
      <p> 바로 여기에 썸네일 캡션... </p>
    </div>
  </li>
  ...
</ul>

더 많은 예

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

재작성된 기본 클래스

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

단일 경고 메시지

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

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

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

플러그인 받기 »

경고 예시

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

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

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

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

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

오류 또는 위험

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

성공

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

정보

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

기초적인

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

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

줄무늬

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

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

생기 있는

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

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

추가 색상

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

줄무늬 바

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

행동

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

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

브라우저 지원

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

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

웰스

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

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

닫기 아이콘

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

×

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

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

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