diff options
| author | Mark Otto <[email protected]> | 2012-02-20 21:20:06 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-02-20 21:20:06 -0800 |
| commit | 06d4756114f55406b99d20a83eec95039d9af4bd (patch) | |
| tree | 3650d28646ac2addedf26268a7f9c9999ef3786c /docs/components.html | |
| parent | d2630ff84eba322bec79ee25e33e075493744931 (diff) | |
| download | bootstrap-06d4756114f55406b99d20a83eec95039d9af4bd.tar.xz bootstrap-06d4756114f55406b99d20a83eec95039d9af4bd.zip | |
adding basic badges support
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 102 |
1 files changed, 97 insertions, 5 deletions
diff --git a/docs/components.html b/docs/components.html index 046bd7280..67353828e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -98,6 +98,7 @@ </ul> </li> <li><a href="#labels">Labels</a></li> + <li><a href="#badges">Badges</a></li> <li><a href="#typography">Typography</a></li> <li><a href="#thumbnails">Thumbnails</a></li> <li><a href="#alerts">Alerts</a></li> @@ -1200,6 +1201,102 @@ +<!-- Badges +================================================== --> +<section id="badges"> + <div class="page-header"> + <h1>Badges <small>Indicators and unread counts</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h3>About</h3> + <p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p> + </div><!-- /.span --> + <div class="span8"> + <h3>Available classes</h3> + <table class="table table-bordered table-striped"> + <thead> + <tr> + <th>Name</th> + <th>Example</th> + <th>Markup</th> + </tr> + </thead> + <tbody> + <tr> + <td> + Default + </td> + <td> + <span class="badge">1</span> + </td> + <td> + <code><span class="badge">1</span></code> + </td> + </tr> + <tr> + <td> + Success + </td> + <td> + <span class="badge badge-success">2</span> + </td> + <td> + <code><span class="badge badge-success">2</span></code> + </td> + </tr> + <tr> + <td> + Warning + </td> + <td> + <span class="badge badge-warning">4</span> + </td> + <td> + <code><span class="badge badge-warning">4</span></code> + </td> + </tr> + <tr> + <td> + Error + </td> + <td> + <span class="badge badge-error">6</span> + </td> + <td> + <code><span class="badge badge-error">1</span></code> + </td> + </tr> + <tr> + <td> + Info + </td> + <td> + <span class="badge badge-info">8</span> + </td> + <td> + <code><span class="badge badge-info">8</span></code> + </td> + </tr> + <tr> + <td> + Inverse + </td> + <td> + <span class="badge badge-inverse">10</span> + </td> + <td> + <code><span class="badge badge-inverse">10</span></code> + </td> + </tr> + </tbody> + </table> + </div><!-- /.span --> + </div><!-- /.row --> +</section> + + + <!-- Typographic components ================================================== --> <section id="typography"> @@ -1592,11 +1689,6 @@ </div> </pre> </div><!--/span--> - <div class="span4" style="display: none;"> - <h2>Badges</h2> - <p>Use a badge on an element for an unread count or as a simple indicator.</p> -<pre class="prettyprint linenums"><span class="badge">3</div></pre> - </div><!--/span--> <div class="span4"> <h2>Close icon</h2> <p>Use the generic close icon for dismissing content like modals and alerts.</p> |