Composant de formatage

Onglets

Prend la navigation de base et ajoute la classe .tabs-nav à générer une interface à onglets. Utilisez-les pour créer des régions tabulables.

Onglet Exemple

Test1 Test2 Test3

Il s'agit d'un espace réservé au contenu associé à l'onglet Test1. Clic un autre onglet fera basculer la visibilité de celui-ci pour le suivant.

Ceci est un espace réservé au contenu associé à l'onglet Test2. Clic un autre onglet fera basculer la visibilité de celui-ci pour le suivant.

Ceci est un espace réservé au contenu associé à l'onglet Test3. Clic un autre onglet fera basculer la visibilité de celui-ci pour le suivant.

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

Onglet avec la couleur des onglets actifs

Test1 Test2 Test3

Ceci est un espace réservé au contenu associé à l'onglet Test1. Cet onglet est maintenant actif et affiche des onglets de couleur blanche.

Il s'agit d'un espace réservé au contenu associé à l'onglet Test2. Cet onglet est maintenant actif et affiche des onglets de couleur blanche.

Ceci est un espace réservé au contenu associé à l'onglet Test3. Cet onglet est maintenant actif et affiche des onglets de couleur blanche.

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

Onglet avec la couleur des onglets actifs et la couleur d'arrière-plan

Test1 Test2 Test3

Ceci est un espace réservé au contenu associé à l'onglet Test1. Cet onglet est maintenant actif et affiche les onglets de couleur d'arrière-plan actifs.

Il s'agit d'un espace réservé au contenu associé à l'onglet Test2. Cet onglet est maintenant actif et affiche les onglets de couleur d'arrière-plan actifs.

Ceci est un espace réservé au contenu associé à l'onglet Test3. Cet onglet est maintenant actif et affiche les onglets de couleur d'arrière-plan actifs.

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

Légende

Fournissez des messages de retour contextuels pour les actions typiques des utilisateurs avec la poignée de messages disponibles et flexibles.

Ceci est la légende par défaut

Une simple légende : regardez-la !

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

Ceci est une légende en pointillé

Une simple légende en pointillés : regardez-la !

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

Ceci est une légende transparente

Une simple légende transparente : regardez-la !

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

Ceci est une légende d'information

Un simple rappel d'information : consultez-le !

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

C'est une légende de réussite

Une simple incitation à la réussite : vérifiez-la !

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

Ceci est un avertissement

Un simple avertissement : regardez-le !

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

Ceci est un avertissement

Un simple avertissement : regardez-le !

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

Accordéon

Construisez des accordéons à effondrement vertical en combinaison.

Exemple d'accordéon

C'est l'accordéon 1

C'est le corps accordéon du premier élément. Il est caché par défaut, jusqu'à ce que le plugin collapse ajoute les classes appropriées que nous utiliser pour styliser chaque élément. Ces classes contrôlent l'apparence générale, ainsi que l'affichage et le masquage via les transitions CSS. Vous pouvez modifier n'importe quel de cela avec un CSS personnalisé ou en remplaçant nos variables par défaut. ça vaut aussi la peine notant qu'à peu près n'importe quel code HTML peut entrer dans le .accordion-panel, bien que la transition limite le débordement.

C'est l'accordéon 2

C'est le corps accordéon du deuxième élément. Il est caché par défaut, jusqu'à ce que le plugin collapse ajoute les classes appropriées que nous utiliser pour styliser chaque élément. Ces classes contrôlent l'apparence générale, ainsi que l'affichage et le masquage via les transitions CSS. Vous pouvez modifier n'importe quel de cela avec un CSS personnalisé ou en remplaçant nos variables par défaut. ça vaut aussi la peine notant qu'à peu près n'importe quel code HTML peut entrer dans le .accordion-panel, bien que la transition limite le débordement.

C'est l'accordéon 3

C'est le corps accordéon du troisième élément. Il est caché par défaut, jusqu'à ce que le plugin collapse ajoute les classes appropriées que nous utiliser pour styliser chaque élément. Ces classes contrôlent l'apparence générale, ainsi que l'affichage et le masquage via les transitions CSS. Vous pouvez modifier n'importe quel de cela avec un CSS personnalisé ou en remplaçant nos variables par défaut. ça vaut aussi notant qu'à peu près n'importe quel code HTML peut entrer dans le .accordion-panel, bien que la transition limite le débordement.

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

Image Lightbox