BootStrap 3 - Lecture 4
-
Upload
salman-mushtaq -
Category
Documents
-
view
107 -
download
1
Transcript of BootStrap 3 - Lecture 4
Boot Strap 3 – Lecture 4
Ok today I teach you beautiful feature of Bootstrap buttons. And please note that for Bootstrap I use BS
onward.
Buttons
Buttons have also different classes. All classes are same but the physical look is changed and depends on
the requirement.
o .btn-default
o .btn-primary
o .btn-danger
o .btn-info
o .btn-link
o .btn-success
o .btn-warning
Above are seven classes for buttons and you can also you sm, lg, etc. with these classes to make smaller,
larger and extra larger.
Button classes use with <a>, <button>, or <input> and also <asp:Button> control.
For button sizes please see below picture.
You can also use .btn-block to make button with 100% width.
Sometimes we just shows button but do not want to make it clickable. And want to play with JQuery.
And change its property or class at runtime you can use:
o .active (to make button clickable)
o .disabled (to make button unclick able)
Button Group
Sometimes for visibility purpose you need a group of button. It seems beautiful. So for this you just use
.btn-group class with <div>
Output:
By default its direction is horizontal. But if you want to display it in vertical direction you just use class
.btn-group-vertical. The only benefit of button group is you can some common property to .btn-group
and it automatically applies to all button under it.
Yes you can also display button group on entire span (with 100% width) with using justified class.
And the most important benefit of buttons/ group buttons is you can use nested group button and drop
downs.
You can also split buttons and drop downs.
The class caret prints on button.
Reference: W3Schools
Thanks.
Salman Mushtaq
Email: [email protected]