github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added support for .tabbable-bordered

Browse Source 
Using padding instead of margin for spacing between tabs and tab-content
Set 10px padding for tabs below and 20px for others
Added example to docs
This commit is contained in:
Arnold Daniels
2012-02-07 23:16:01 +01:00
parent a4653d1ade
commit ffc5317eb6
2 changed files with 89 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/templates/pages/components.mustache vendored
View File

@@ -652,6 +652,46 @@
</div>
</div>
<h3>{{_i}}Bordered tabbable{{/i}}</h3>
<div class="row">
<div class="span4">
<p>{{_i}}You can place a border around the tab content by adding <code>.tabbable-bordered</code> to the <code>.tabbable</code>.{{/i}}</p>
<div class="alert">{{_i}}<b>Warning!</b> A bordered tabbable with the tabs on the left or right side, will not look well if the height of <code>.tab-content</code> is less than the height of <code>.nav-tabs</code>.{{/i}}</div>
</div>
<div class="span4">
<div class="tabbable tabbable-bordered">
<ul class="nav nav-tabs">
<li class="active"><a href="#bA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
<li><a href="#bB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
<li><a href="#bC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bA">
<p>{{_i}}I'm in Section A.{{/i}}</p>
</div>
<div class="tab-pane" id="bB">
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
</div>
<div class="tab-pane" id="bC">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros.</p>
</div>
</div>
</div> <!-- /tabbable -->
</div>
<div class="span4">
<pre class="prettyprint linenums">
&lt;div class="tabbable tabbable-bordered"&gt;
&lt;ul class="nav nav-tabs"&gt;
...
&lt;/ul&gt;
&lt;div class="tab-content"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
</section>