diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 38 |
1 files changed, 37 insertions, 1 deletions
diff --git a/docs/components.html b/docs/components.html index 6710e8338..b88e54b88 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1342,13 +1342,49 @@ <h1>Counters</h1> </div> + <h3>Basic usage</h3> + <p>Counters are used to indicator unread or new items. Add a <code><span class="counter"></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"> <a href="#">Inbox</a> <span class="counter">42</span> </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"> +<ul class="nav nav-list"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> +</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> |