In this tutorial of twitter bootstrap we are going to cover three amazing things. Labels, Badges, and third one is surprise.
Labels:
You might have seen different labels/tags beside blog posts? Those tags represents to which field a particular post is related to. We are going to make those labels in today’s lesson.
What it looks like?
The syntax of creating label is much like creating buttons. You write label class inside span tags or div tags. If you want to include effects of success label/warning label you include the respective class along with default label class.
<p><span class=”label”>Default</span></p> <p><span class=”label label-success”>Success</span></p>
CLICK HERE TO SEE HOW TO MAKE AMAZING FORMS USING TWITTER BOOTSTRAP
Badges:
You might have seen a round comment counter in most blogs, this is badge. Twitter bootstrap provides us one similar badge class to create amazing badges.
What it looks like?
The syntax of creating badges is much like creating labels you saw in above paragraph. You write badge class inside span tags or div tags. If you want to include effects of success badge/warning badge you include the respective class along with default badge class.
<p><span class=”badge”>Default</span></p> <p><span class=” badge badge -success”>Success</span></p>
To me there is not much difference between labels and badge. But I can see the difference of rounded corners in labels and circular corners in badges.
What is Surprise?
In the surprise package we are going to teach you to make some input field like this below:
You can see a nice looking envelope icon in the text field. You need two classes for creating such a thing in bootstrap: input-prepend and add-on. You write a div tag with input-prepend class. Then under these tags you write two tags; one is <span> and other is <input> for text box. In span tags we write our second class, i.e. add-on and under <span> we include envelope icon. If you didn’t get it check out the code for better understanding. If you don’t know how to include icons in twitter bootstrap CLICK HERE.
<div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i> </span> <input class="span4" type="text"> </div>
Click here to more to the see the next tutorial of twitter bootstrap.
Author Description
