기본 탐색을 가져 와서 추가합니다. .tabs-nav 생성할 클래스 탭 인터페이스. 탭 가능 영역을 만드는 데 사용합니다.

안전하지 않은 콘텐츠 표시

이 형식을 표시하려면 안전하지 않은 콘텐츠 표시를 활성화해야 합니다. 보다 이 Zendesk 기사 자세한 내용은.

 

예시 탭

이것은 일부 자리 표시자 콘텐츠 Test1 탭의 관련 콘텐츠입니다. 클릭 다른 탭은 다음 탭에서 이 탭의 가시성을 토글합니다.
이것은 일부 자리 표시자 콘텐츠 Test2 탭의 관련 콘텐츠입니다. 클릭 다른 탭은 다음 탭에서 이 탭의 가시성을 토글합니다.
이것은 일부 자리 표시자 콘텐츠 Test3 탭의 관련 콘텐츠입니다. 클릭 다른 탭은 다음 탭에서 이 탭의 가시성을 토글합니다.

 

<div class="tabs">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>

 

Tab with active tabs color

이것은 일부 자리 표시자 콘텐츠 Test1 탭의 관련 콘텐츠입니다. 이 탭 1은 이제 활성화되어 흰색 탭을 표시합니다.
이것은 일부 자리 표시자 콘텐츠 Test2 탭의 관련 콘텐츠입니다. 이 탭 2은 이제 활성화되어 흰색 탭을 표시합니다.
이것은 일부 자리 표시자 콘텐츠 Test3 탭의 관련 콘텐츠입니다. 이 탭 3은 이제 활성화되어 흰색 탭을 표시합니다.

 

<div class="tabs colored-1">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>

 

활성 탭 색상 및 배경 색상이 있는 탭

이것은 일부 자리 표시자 콘텐츠 Test1 탭의 관련 콘텐츠입니다. 이 탭 1은 이제 활성화되어 흰색 탭을 표시합니다.
이것은 일부 자리 표시자 콘텐츠 Test2 탭의 관련 콘텐츠입니다. 이 탭 2은 이제 활성화되어 흰색 탭을 표시합니다.
이것은 일부 자리 표시자 콘텐츠 Test3 탭의 관련 콘텐츠입니다. 이 탭 3은 이제 활성화되어 흰색 탭을 표시합니다.

 

<div class="tabs colored-2">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>

 

부르다

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

 

이것은 기본 콜아웃입니다.

간단한 설명 - 확인하십시오!

 

<div class="callout">
<p class="callout-title">This is default callout</p>
<p>...</p>
</div>

 

이것은 점선 콜아웃입니다.

간단한 점선 콜아웃 - 확인하십시오!

 

<div class="callout callout-dashed">
<p class="callout-title">This is dashed callout</p>
<p>...</p>
</div>

 

이것은 투명한 콜아웃입니다.

간단한 투명 콜아웃 - 확인하십시오!

 

<div class="callout callout-transparent">
<p class="callout-title">This is transparent callout</p>
<p>...</p>
</div>

 

이것은 정보 콜아웃입니다

간단한 정보 콜아웃 - 확인하십시오!

 

<div class="callout callout-info">
<p class="callout-title">This is info callout</p>
<p>...</p>
</div>

 

이것은 성공 콜아웃입니다.

간단한 성공 설명 - 확인하십시오!

 

<div class="callout callout-success">
<p class="callout-title">This is success callout</p>
<p>...</p>
</div>

 

경고 문구입니다

간단한 경고 문구 - 확인하십시오!

 

<div class="callout callout-warning">
<p class="callout-title">This is warning callout</p>
<p>...</p>
</div>

 

이것은 경고 콜아웃입니다

간단한 경고 콜아웃 - 확인하십시오!

 

<div class="callout callout-alert">
<p class="callout-title">This is alert callout</p>
<p>...</p>
</div>

 

아코디언

수직으로 접히는 아코디언을 조합하여 만듭니다. 

안전하지 않은 콘텐츠 표시

이 형식을 표시하려면 안전하지 않은 콘텐츠 표시를 활성화해야 합니다. 보다 이 Zendesk 기사 자세한 내용은.

 

예제 아코디언

이것은 아코디언 1

첫 번째 항목의 아코디언 본체입니다. 숨겨져 있다 기본적으로 축소 플러그인이 적절한 클래스를 추가할 때까지 각 요소의 스타일을 지정하는 데 사용합니다. 이 클래스는 전체 모양을 제어하고, CSS 전환을 통한 표시 및 숨기기뿐만 아니라. 당신은 수정할 수 있습니다 사용자 정의 CSS를 사용하거나 기본 변수를 재정의합니다. 그것은 또한 거의 모든 HTML이 .accordion-panel, 전환이 오버플로를 제한하지만.

이것은 아코디언 2

첫 번째 항목의 아코디언 본체입니다. 숨겨져 있다 기본적으로 축소 플러그인이 적절한 클래스를 추가할 때까지 각 요소의 스타일을 지정하는 데 사용합니다. 이 클래스는 전체 모양을 제어하고, CSS 전환을 통한 표시 및 숨기기뿐만 아니라. 당신은 수정할 수 있습니다 사용자 정의 CSS를 사용하거나 기본 변수를 재정의합니다. 그것은 또한 거의 모든 HTML이 .accordion-panel, 전환이 오버플로를 제한하지만.

이것은 아코디언 3

첫 번째 항목의 아코디언 본체입니다. 숨겨져 있다 기본적으로 축소 플러그인이 적절한 클래스를 추가할 때까지 각 요소의 스타일을 지정하는 데 사용합니다. 이 클래스는 전체 모양을 제어하고, CSS 전환을 통한 표시 및 숨기기뿐만 아니라. 당신은 수정할 수 있습니다 사용자 정의 CSS를 사용하거나 기본 변수를 재정의합니다. 그것은 또한 거의 모든 HTML이 .accordion-panel, 전환이 오버플로를 제한하지만.

 

<div class="accordion">This is accordion 1</div>
<div class="accordion-panel">
<p>...</p>
</div>

<div class="accordion">This is accordion 2</div>
<div class="accordion-panel">
<p>...</p>
</div>

<div class="accordion">This is accordion 3</div>
<div class="accordion-panel">
<p>...</p>
</div>

 

이미지 라이트박스

pexels-askar-abayev-5638748.jpg

bootstrap-social.png

bootstrap-illustration.png

댓글

댓글 0개

이 문서에는 댓글을 달 수 없습니다.

Style Variant
Zendesk 제공