Tighten up badges docs; less bottom margin on h3

This commit is contained in:
Mark Otto
2013-01-19 18:53:41 -08:00
parent c21c3f101b
commit d30f47efb2
5 changed files with 108 additions and 18 deletions

View File

@@ -1271,13 +1271,49 @@
<h1>Counters</h1>
</div>
<h3>Basic usage</h3>
<p>Counters are used to indicator unread or new items. Add a <code>&lt;span class="counter"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-docs-example">
<a href="#">Inbox</a> <span class="counter">42</span>
</div>
<pre class="prettyprint linenums">
&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
</pre>
<p>Built-in styles are included for placing counters in active states in pill and list navigations.</p>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="counter">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="counter">3</span></a></li>
</ul>
<br>
<ul class="nav nav-list" style="max-width: 260px;">
<li class="active">
<a href="#">
<span class="counter pull-right">42</span>
Home
</a>
</li>
<li><a href="#">Profile</a></li>
<li>
<a href="#">
<span class="counter pull-right">3</span>
Messages
</a>
</li>
</ul>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="active"&gt;
&lt;a href="#"&gt;Home&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h3>Easily collapsible</h3>
<p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>