Merge pull request #846 from purwandi/2.0-wip

Fix id tabs on docs component

docs/components.html

@@ -358,20 +358,20 @@
         <div class="span4">
           <div class="tabbable tabs-left">
             <ul class="tabs">
-              <li class="active"><a href="#4" data-toggle="tab">Section 1</a></li>
-              <li><a href="#5" data-toggle="tab">Section 2</a></li>
-              <li><a href="#6" data-toggle="tab">Section 3</a></li>
+              <li class="active"><a href="#5" data-toggle="tab">Section 1</a></li>
+              <li><a href="#6" data-toggle="tab">Section 2</a></li>
+              <li><a href="#7" data-toggle="tab">Section 3</a></li>
             </ul>
             <div class="tab-content" id="myTabContent2">
-              <div class="tab-pane active" id="4">
+              <div class="tab-pane active" id="5">
                 <h4>Section 1</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="5">
+              <div class="tab-pane" id="6">
                 <h4>Section 2</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="6">
+              <div class="tab-pane" id="7">
                 <h4>Section 3</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
@@ -381,20 +381,20 @@
         <div class="span4 offset1">
           <div class="tabbable tabs-right">
             <ul class="tabs">
-              <li class="active"><a href="#7" data-toggle="tab">Section 1</a></li>
-              <li><a href="#8" data-toggle="tab">Section 2</a></li>
-              <li><a href="#9" data-toggle="tab">Section 3</a></li>
+              <li class="active"><a href="#8" data-toggle="tab">Section 1</a></li>
+              <li><a href="#9" data-toggle="tab">Section 2</a></li>
+              <li><a href="#10" data-toggle="tab">Section 3</a></li>
             </ul>
             <div class="tab-content" id="myTabContent3">
-              <div class="tab-pane active" id="7">
+              <div class="tab-pane active" id="8">
                 <h4>Section 1</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="8">
+              <div class="tab-pane" id="9">
                 <h4>Section 2</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
-              <div class="tab-pane" id="9">
+              <div class="tab-pane" id="10">
                 <h4>Section 3</h4>
                 <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.</p>
               </div>
@@ -405,24 +405,24 @@
 
       <div class="tabbable tabs-bottom">
         <div class="tab-content">
-          <div class="tab-pane active" id="10">
+          <div class="tab-pane active" id="11">
             <p>Oh hai #1!</p>
           </div>
-          <div class="tab-pane" id="11">
+          <div class="tab-pane" id="12">
             <p>Oh hai #2!</p>
           </div>
-          <div class="tab-pane" id="12">
+          <div class="tab-pane" id="13">
             <p>Oh hai #3!</p>
           </div>
-          <div class="tab-pane" id="13">
+          <div class="tab-pane" id="14">
             <p>Oh hai #4!</p>
           </div>
         </div>
         <ul class="tabs">
-          <li class="active"><a href="#10" data-toggle="tab">Section 1</a></li>
-          <li><a href="#11" data-toggle="tab">Section 2</a></li>
-          <li><a href="#12" data-toggle="tab">Section 3</a></li>
-          <li><a href="#13" data-toggle="tab">Section 4</a></li>
+          <li class="active"><a href="#11" data-toggle="tab">Section 1</a></li>
+          <li><a href="#12" data-toggle="tab">Section 2</a></li>
+          <li><a href="#13" data-toggle="tab">Section 3</a></li>
+          <li><a href="#14" data-toggle="tab">Section 4</a></li>
         </ul>
       </div>