Help: Tabs: verschil tussen versies

Huidige versie van 20 mrt 2017 om 21:52

Inhoud

1 Verwisselbare Tabs

Verwisselbare Tabs

Zie de documentatie van Bootstrap voor alle details van deze functionaliteit.

Met de volgende codering kun je tabs maken:

Codering

 <ul class="nav nav-tabs">
   <li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li>
    <li><btn data-toggle="tab" class="">#tab2|Tab 2</btn></li>
 </ul>

 <div class="tab-content">
   <div id="tab1" class="tab-pane fade in active">
     '''Tab 1''': Lorem ipsum...
   </div>
   <div id="tab2" class="tab-pane fade">
     '''Tab 2''': Lorem ipsum...
   </div>
 </div>

Resultaat

Tab 1
Tab 2

Tab 1: Lorem ipsum...

Tab 2: Lorem ipsum...

HTML

  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a>
    </li>
    <li>
      <a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <p><b>Tab 1</b>: Lorem ipsum...</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <p><b>Tab 2</b>: Lorem ipsum...</p>
    </div>
  </div>

@@ Regel 1: / Regel 1: @@
 __TOC__
-[[Category:Tweeki componenten]]
+[[Categorie:Tweeki componenten]]
-=== Togglable Tabs ===
+=== Verwisselbare Tabs ===
-see [http://getbootstrap.com/javascript/#tabs Bootstrap's documentation] for all the details of this feature.
+Zie [http://getbootstrap.com/javascript/#tabs de documentatie van Bootstrap] voor alle details van deze functionaliteit.
-You can create tabs with this code:
+Met de volgende codering kun je tabs maken:
-==== Markup====
+==== Codering ====
- <nowiki><ul class="nav nav-tabs"></nowiki>
+  <nowiki><ul class="nav nav-tabs">
-    <nowiki><li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li></nowiki>
+   <li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li>
-     <nowiki><li><btn data-toggle="tab" class="">#tab2|Tab 2</btn></li></nowiki>
+     <li><btn data-toggle="tab" class="">#tab2|Tab 2</btn></li>
-  <nowiki></ul></nowiki>
+ </ul></nowiki>
    <nowiki><div class="tab-content"></nowiki>
@@ Regel 25: / Regel 25: @@
-====Result====
+==== Resultaat ====
 <div>
@@ Regel 44: / Regel 44: @@
-====HTML====
+==== HTML ====
 <pre>