タブ

基本的なナビゲーションを取り、追加します .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>

 

アクティブなタブの色のタブ

これは、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

こちらは第一弾のアコーディオン本体です。 隠されている デフォルトでは、collapse プラグインが適切なクラスを追加するまで、 を使用して各要素のスタイルを設定します。これらのクラスは、全体的な外観を制御します。 CSS トランジションによる表示と非表示も同様です。変更できます カスタム CSS を使用するか、デフォルト変数をオーバーライドします。も ほぼすべての HTML が .accordion-panel, ただし、トランジションはオーバーフローを制限します。

これはアコーディオン 2

こちらは第一弾のアコーディオン本体です。 隠されている デフォルトでは、collapse プラグインが適切なクラスを追加するまで、 を使用して各要素のスタイルを設定します。これらのクラスは、全体的な外観を制御します。 CSS トランジションによる表示と非表示も同様です。変更できます カスタム CSS を使用するか、デフォルト変数をオーバーライドします。も ほぼすべての HTML が .accordion-panel, ただし、トランジションはオーバーフローを制限します。

これはアコーディオン 3

こちらは第一弾のアコーディオン本体です。 隠されている デフォルトでは、collapse プラグインが適切なクラスを追加するまで、 を使用して各要素のスタイルを設定します。これらのクラスは、全体的な外観を制御します。 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
Powered by Zendesk