2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00

adding basic badges support

This commit is contained in:
Mark Otto
2012-02-20 21:20:06 -08:00
parent d2630ff84e
commit 06d4756114
8 changed files with 277 additions and 10 deletions
+97 -5
View File
@@ -22,6 +22,7 @@
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
@@ -1124,6 +1125,102 @@
<!-- Badges
================================================== -->
<section id="badges">
<div class="page-header">
<h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
</div>
<div class="row">
<div class="span4">
<h3>About</h3>
<p>{{_i}}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.{{/i}}</p>
</div><!-- /.span -->
<div class="span8">
<h3>Available classes</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>{{_i}}Name{{/i}}</th>
<th>{{_i}}Example{{/i}}</th>
<th>{{_i}}Markup{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{_i}}Default{{/i}}
</td>
<td>
<span class="badge">1</span>
</td>
<td>
<code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Success{{/i}}
</td>
<td>
<span class="badge badge-success">2</span>
</td>
<td>
<code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Warning{{/i}}
</td>
<td>
<span class="badge badge-warning">4</span>
</td>
<td>
<code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Error{{/i}}
</td>
<td>
<span class="badge badge-error">6</span>
</td>
<td>
<code>&lt;span class="badge badge-error"&gt;1&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Info{{/i}}
</td>
<td>
<span class="badge badge-info">8</span>
</td>
<td>
<code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
{{_i}}Inverse{{/i}}
</td>
<td>
<span class="badge badge-inverse">10</span>
</td>
<td>
<code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Typographic components
================================================== -->
<section id="typography">
@@ -1515,11 +1612,6 @@
...
&lt;/div&gt;
</pre>
</div><!--/span-->
<div class="span4" style="display: none;">
<h2>{{_i}}Badges{{/i}}</h2>
<p>{{_i}}Use a badge on an element for an unread count or as a simple indicator.{{/i}}</p>
<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
</div><!--/span-->
<div class="span4">
<h2>{{_i}}Close icon{{/i}}</h2>
+1
View File
@@ -32,6 +32,7 @@
<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="labels.less"> {{_i}}Labels{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="badges.less"> {{_i}}Badges{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>