2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00

add justified nav links for tabs and pills

This commit is contained in:
Mark Otto
2012-11-04 00:52:10 -07:00
parent 05a2d37559
commit 83a3789b5e
4 changed files with 129 additions and 52 deletions
+25
View File
@@ -680,6 +680,31 @@
<h2>{{_i}}Options{{/i}}</h2>
<h3>{{_i}}Justified links{{/i}}</h3>
<p>{{_i}}Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.{{/i}}</p>
<div class="bs-docs-example">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
<li><a href="#">{{_i}}Profile{{/i}}</a></li>
<li><a href="#">{{_i}}Messages{{/i}}</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-tabs nav-justified"&gt;
...
&lt;/ul&gt;
&lt;ul class="nav nav-pills nav-justified"&gt;
...
&lt;/ul&gt;
</pre>
<h3>{{_i}}Disabled state{{/i}}</h3>
<p>{{_i}}For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}</p>
<div class="bs-docs-example">