diff options
| author | Mark Otto <[email protected]> | 2011-10-09 22:55:12 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-10-09 22:55:12 -0700 |
| commit | 770e7647d1372974a7e89d53259ce6b3a6ba8f68 (patch) | |
| tree | f051f8a04edacbb0c1cdb3eadebb0b48d26e1cf0 | |
| parent | a05be0cba38eef0c7507bb05c0988eb9efd70091 (diff) | |
| download | bootstrap-770e7647d1372974a7e89d53259ce6b3a6ba8f68.tar.xz bootstrap-770e7647d1372974a7e89d53259ce6b3a6ba8f68.zip | |
start adding examples to docs for alternate tabs and pills
| -rw-r--r-- | docs/index.html | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/docs/index.html b/docs/index.html index 846d26ed1..a83b75e62 100644 --- a/docs/index.html +++ b/docs/index.html @@ -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 @@ <li><a href="#">Contact</a></li> </ul> </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 @@ <li><a href="#">Contact</a></li> </ul> </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 --> |