diff options
| author | Mark Otto <[email protected]> | 2011-10-12 08:31:16 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-10-12 08:31:16 -0700 |
| commit | f4fc56b1b3827254dd771536dcb2b711919f3867 (patch) | |
| tree | 0fdcf0d42a253ea1b7adc7ea705d9bbfb12d600b /docs/index.html | |
| parent | fa8b1dc12dcfe993f1e4185f95ebe0981fbeb0f0 (diff) | |
| download | bootstrap-f4fc56b1b3827254dd771536dcb2b711919f3867.tar.xz bootstrap-f4fc56b1b3827254dd771536dcb2b711919f3867.zip | |
first pass at moving over the new tabs stuff to 2.0
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 147 |
1 files changed, 146 insertions, 1 deletions
diff --git a/docs/index.html b/docs/index.html index ced0c658f..0d46084c1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1313,9 +1313,10 @@ <h2>Tabs and pills</h2> <p>Create simple secondary navigation with a <code><ul></code>. Swap between tabs or pills by adding the appropriate class.</p> <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> - <p><a class="btn js-btn" href="./javascript.html#tabs">Get the javascript »</a></p> </div> <div class="span12"> + <h3>Basic tabs example</h3> + <p>Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a <a href="./javascript.html#tabs">tabs plugin</a> that can be used to integrate the latter.</p> <ul class="tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> @@ -1341,6 +1342,141 @@ <li><a href="#">Contact</a></li> </ul> </pre> + <h3>Alternate tabs</h3> + <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p> + <div class="row"> + <div class="span3"> + <div class="clearfix"> + <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> + </div> + </div> + <div class="span3"> + <div class="clearfix"> + <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> + </div> + </div> + <div class="span6"> + <div class="clearfix"> + <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> + </ul> + </div> + </div> + </div> + <h3>Tabbable tabs</h3> + <p>As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.</p> + + <div class="tabbable"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + <li><a href="#4">Section 4</a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="2"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="3"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="4"> + <p>Oh hai #4!</p> + </div> + </div> + </div> + + <div class="row"> + <div class="span6"> + <div class="tabbable tabs-left"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent2"> + <div class="tab-pane active" id="1"> + <h4>Section 1</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="2"> + <h4>Section 2</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="3"> + <h4>Section 3</h4> + <p>Oh hai!</p> + </div> + </div> + </div> + </div> + <div class="span6"> + <div class="tabbable tabs-right"> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + </ul> + <div class="tab-content" id="myTabContent3"> + <div class="tab-pane active" id="1"> + <h4>Section 1</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="2"> + <h4>Section 2</h4> + <p>Oh hai!</p> + </div> + <div class="tab-pane" id="3"> + <h4>Section 3</h4> + <p>Oh hai!</p> + </div> + </div> + </div> + </div> + </div> + + <div class="tabbable tabs-bottom"> + <div class="tab-content"> + <div class="tab-pane active" id="1"> + <p>Oh hai #1!</p> + </div> + <div class="tab-pane" id="2"> + <p>Oh hai #2!</p> + </div> + <div class="tab-pane" id="3"> + <p>Oh hai #3!</p> + </div> + <div class="tab-pane" id="4"> + <p>Oh hai #4!</p> + </div> + </div> + <ul class="tabs" data-tabs="tabs"> + <li class="active"><a href="#1">Section 1</a></li> + <li><a href="#2">Section 2</a></li> + <li><a href="#3">Section 3</a></li> + <li><a href="#4">Section 4</a></li> + </ul> + </div> + + + <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> @@ -1357,6 +1493,15 @@ <li><a href="#">Contact</a></li> </ul> </pre> + <h3>Vertical pill nav</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 span4"> + <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 --> |