mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 21:49:09 +01:00
Code Issues Releases Wiki Activity

fixes #10316: Document .active and :active for buttons

Browse Source
This commit is contained in:
Mark Otto 2013-09-02 00:09:49 +02:00
parent 741e0fc52c
commit 14b3a3542f
2 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/nav-css.html
View File

@ -67,6 +67,7 @@
<ul class="nav">
<li><a href="#buttons-options">Options</a></li>
<li><a href="#buttons-sizes">Sizes</a></li>
<li><a href="#buttons-active">Active state</a></li>
<li><a href="#buttons-disabled">Disabled state</a></li>
<li><a href="#buttons-tags">Button tags</a></li>
</ul>

26
css.html
View File

@ -2112,6 +2112,32 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h2 id="buttons-active">Active state</h2>
<p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> <code>&lt;button&gt;</code>s should you need to replicate the active state progammatically.</p>
<h3>Button element</h3>
<p>No need to add <code>:active</code> as it's a pseudo state, but if you need it, go ahead and add <code>.active</code>.</p>
<p class="bs-example">
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
</p>
{% highlight html %}
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
{% endhighlight %}
<h3>Anchor element</h3>
<p>Add the <code>.active</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-example">
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
</p>
{% highlight html %}
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
{% endhighlight %}
<h2 id="buttons-disabled">Disabled state</h2>
<p>Make buttons look unclickable by fading them back 50%.</p>