github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-01-20 03:47:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Documented tabbable improvements

Browse Source 
Added jasny/navs-tabbable.less to jasny/bootstrap.less
This commit is contained in:
Arnold Daniels
2012-07-16 22:01:39 +02:00
parent 0daa71b70b
commit b001c8a6cf
3 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -727,7 +727,7 @@
<p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
</div>
<div class="tab-pane" id="tab3">
<p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
<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 -->
@@ -769,7 +769,7 @@
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
</div>
<div class="tab-pane" id="C">
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
<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>
<ul class="nav nav-tabs">
@@ -806,7 +806,7 @@
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
</div>
<div class="tab-pane" id="lC">
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
<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 -->
@@ -838,7 +838,7 @@
<p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
</div>
<div class="tab-pane" id="rC">
<p>{{_i}}What up girl, this is Section C.{{/i}}</p>
<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 -->
@@ -855,6 +855,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>

4
docs/templates/pages/index.mustache vendored
View File

@@ -56,6 +56,10 @@
<p>{{_i}}Go beyond uneditable input and create a full uneditable form, with disabled and uneditable elements.{{/i}}</p>
<p>{{_i}}Add .editor to a textarea to create a larger field for content editing.{{/i}}</p>
</div>
<div class="span3">
<h3><a href="./components.html#navs">{{_i}}Tabbable{{/i}}</a></h3>
<p>{{_i}}Tabs work better than ever. You now have a bordered tabbable available. Also, a container can be turned into a tabbable.{{/i}}</p>
</div>
</div><!--/row-->
</div>

3
less/jasny/bootstrap.less vendored
View File

@@ -16,3 +16,6 @@
@import "forms-uneditable.less";
@import "forms-editor.less";
// Components: Nav
@import "navs-tabbable.less";