rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-30 12:24:19 +01:00
Code Issues Actions Packages Releases Activity

start adding examples to docs for alternate tabs and pills

Browse Source
This commit is contained in:
Mark Otto 2011-10-09 22:55:12 -07:00
parent a05be0cba3
commit 770e7647d1
1 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/index.html
View File

@ -1447,6 +1447,7 @@
<p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
</div>
<div class="span12">
<h3>Basic tab example</h3>
<ul class="tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@ -1472,6 +1473,29 @@
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Alternate styles</h3>
<p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
<ul class="tabs tabs-left">
<li class="active"><a href="#">Active link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Linky link</a></li>
<li><a href="#">What up link</a></li>
</ul>
<ul class="tabs tabs-right">
<li class="active"><a href="#">Active link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Linky link</a></li>
<li><a href="#">What up link</a></li>
</ul>
<ul class="tabs tabs-bottom">
<li class="active"><a href="#">Active link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Linky link</a></li>
<li><a href="#">What up link</a></li>
</ul>
<p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
<hr>
<h3>Basic pills example</h3>
<ul class="pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@ -1488,6 +1512,15 @@
&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Alternate styles</h3>
<p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
<ul class="pills pills-vertical">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div><!-- /row -->