mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00
Code Activity

move tabs and pills to separate files with unique classes

Browse Source
This commit is contained in:
Mark Otto
2014-07-08 19:00:48 -07:00
parent 6c7a6b4691
commit 0e47ce959c
10 changed files with 374 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_includes/components/navs.html
+53 -16
View File
@@ -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;">