Bootstrap inline tags and badges
Brief introduction
Use Bootstrap, you can create inline tag (ie Label text and comments) and emblem (ie indicators and unread counts).
Inline tags
Inline tag you can create eye-catching labels and annotation text.
Examples
Examples
<Div class = "container">
<Div class = "row">
<Div class = "span12">
<P> <span class = "label"> default </ span> </ p>
<P> <span class = "label label-success"> success </ span> </ p>
<P> <span class = "label label-warning"> Warning </ span> </ p>
<P> <span class = "label label-important"> Important </ span> </ p>
<P> <span class = "label label-info"> Information </ span> </ p>
<P> <span class = "label label-inverse"> Invert Selection </ span> </ p>
</ Div>
</ Div>
</ Div>
<Div class = "row">
<Div class = "span12">
<P> <span class = "label"> default </ span> </ p>
<P> <span class = "label label-success"> success </ span> </ p>
<P> <span class = "label label-warning"> Warning </ span> </ p>
<P> <span class = "label label-important"> Important </ span> </ p>
<P> <span class = "label label-info"> Information </ span> </ p>
<P> <span class = "label label-inverse"> Invert Selection </ span> </ p>
</ Div>
</ Div>
</ Div>
View Online
bootstrap.css, the line number from 3162 to 3200 line number, showing the label, label-success, label-warning, label-important, label-info and label-inverse pattern.
badge
Like Bootstrap mentioned,
Badge is a small and simple components for counting the number of display indicators or classifications. They can usually be found on the e-mail client for push notifications such as Mail.app or mobile app.
Examples
Examples
<Div class = "container">
<Div class = "row">
<Div class = "span12">
<P> <span class = "badge"> 1 </ span> </ p>
<P> <span class = "badge badge-success"> 2 </ span> </ p>
<P> <span class = "badge badge-warning"> 4 </ span> </ p>
<P> <span class = "badge badge-important"> 6 </ span> </ p>
<P> <span class = "badge badge-info"> 8 </ span> </ p>
<P> <span class = "badge badge-inverse"> 10 </ span> </ p>
</ Div>
</ Div>
</ Div>
<Div class = "row">
<Div class = "span12">
<P> <span class = "badge"> 1 </ span> </ p>
<P> <span class = "badge badge-success"> 2 </ span> </ p>
<P> <span class = "badge badge-warning"> 4 </ span> </ p>
<P> <span class = "badge badge-important"> 6 </ span> </ p>
<P> <span class = "badge badge-info"> 8 </ span> </ p>
<P> <span class = "badge badge-inverse"> 10 </ span> </ p>
</ Div>
</ Div>
</ Div>
View Online
Note that in this example, we used the bootstrap-2.0.3.css, because there is no definition of badge styles of Bootstrap v2.0.1.
Click here to download the tutorial to use all the HTML, CSS, JS and image files.