diff options
| author | Mark Otto <[email protected]> | 2014-07-08 19:00:48 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-08 19:00:48 -0700 |
| commit | 0e47ce959ce6257c8fdde13b1362dbbe19fb56e3 (patch) | |
| tree | 4e034b9d3b9fa72036e07ccd3b2a227bafa56825 /docs/_includes | |
| parent | 6c7a6b4691746937a127c0834f48e3f3e1443c3e (diff) | |
| download | bootstrap-0e47ce959ce6257c8fdde13b1362dbbe19fb56e3.tar.xz bootstrap-0e47ce959ce6257c8fdde13b1362dbbe19fb56e3.zip | |
move tabs and pills to separate files with unique classes
Diffstat (limited to 'docs/_includes')
| -rw-r--r-- | docs/_includes/components/navs.html | 69 |
1 files changed, 53 insertions, 16 deletions
diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html index 494474ef8..055418d50 100644 --- a/docs/_includes/components/navs.html +++ b/docs/_includes/components/navs.html @@ -6,17 +6,35 @@ <h2 id="nav-tabs">Tabs</h2> <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <div class="bs-example"> - <ul class="nav nav-tabs" role="tablist"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> + <ul class="nav-tab" role="tablist"> + <li class="nav-tab-item active"> + <a href="#" class="nav-tab-link">Active</a> + </li> + <li class="nav-tab-item"> + <a href="#" class="nav-tab-link">Link</a> + </li> + <li class="nav-tab-item"> + <a href="#" class="nav-tab-link">Another link</a> + </li> + <li class="nav-tab-item disabled"> + <a href="#" class="nav-tab-link">Disabled</a> + </li> </ul> </div> {% highlight html %} -<ul class="nav nav-tabs" role="tablist"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> +<ul class="nav-tab" role="tablist"> + <li class="nav-tab-item active"> + <a href="#" class="nav-tab-link">Active</a> + </li> + <li class="nav-tab-item"> + <a href="#" class="nav-tab-link">Link</a> + </li> + <li class="nav-tab-item"> + <a href="#" class="nav-tab-link">Another link</a> + </li> + <li class="nav-tab-item disabled"> + <a href="#" class="nav-tab-link">Disabled</a> + </li> </ul> {% endhighlight %} <div class="bs-callout bs-callout-info"> @@ -27,19 +45,38 @@ <h2 id="nav-pills">Pills</h2> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <div class="bs-example"> - <ul class="nav nav-pills" role="tablist"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> + <ul class="nav-pill" role="tablist"> + <li class="nav-pill-item active"> + <a href="#" class="nav-pill-link">Active</a> + </li> + <li class="nav-pill-item"> + <a href="#" class="nav-pill-link">Link</a> + </li> + <li class="nav-pill-item"> + <a href="#" class="nav-pill-link">Another link</a> + </li> + <li class="nav-pill-item disabled"> + <a href="#" class="nav-pill-link">Disabled</a> + </li> </ul> </div> {% highlight html %} -<ul class="nav nav-pills" role="tablist"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> +<ul class="nav-pill" role="tablist"> + <li class="nav-pill-item active"> + <a href="#" class="nav-pill-link">Active</a> + </li> + <li class="nav-pill-item"> + <a href="#" class="nav-pill-link">Link</a> + </li> + <li class="nav-pill-item"> + <a href="#" class="nav-pill-link">Another link</a> + </li> + <li class="nav-pill-item disabled"> + <a href="#" class="nav-pill-link">Disabled</a> + </li> </ul> {% endhighlight %} + <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <div class="bs-example"> <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;"> |