Tuesday, July 22, 2014

Bootstrap Buttons

We will discuss in this tutorial regarding usage of bottons in Bootstrap with different examples. Default class of buttons is “.btn” which gives a look of grey button with rounded corners. Bootstrap is providing some more styles options of buttons. Following table of describes the classes and its appearance according to use.




































ClassDescription
btnThis is Standard button class or Default button class.
btn-primaryThis class provides additional visual weight and classifies the main action in a set of buttons.
btn-successThis class point out a positive or successful action.
btn-infoThis class of button will use for informational alert messages.
btn-warningSpecify warning should be taken with this action.
btn-dangerPointing towards a dangerous or likely harmful action.
btn-linkThis class shows button look like as a link although upholding the behavior of button.

Below mentioned examples shows behavior of all the above classes of button.


<!-- Standard button -->
<button type="button" class="btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link Button</button>


Button Size


There are different classes for sizes of buttons following table describes use of those classes.























ClassDescription
.btn-lgTo makes the button large size.
.btn-smTo makes the button small size.
.btn-xsTo makes the button size with extra small.
.btn-blockThis creates block level buttons those that span the full width of a parent.

These examples show that how to buttons will display:


<p>
<button type="button" class="btn btn-primary btn-lg">
Large Primary button
</button>
<button type="button" class="btn btn-default btn-lg"
>Large button
</button>
</p>
<p>
<button type="button" class="btn btn-primary">
Default size Primary button
</button>
<button type="button" class="btn btn-default">
Default size button
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">
Small Primary button
</button>
<button type="button" class="btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type="button" class="btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type="button" class="btn btn-default btn-lg btn-block">
Block level button
</button>
</p>


Button State


Bootstrap is offering active, disabled etc. classes which allow you to change the states of buttons. Each of all these are talked about in the following sections:


Active State


Active state appears when button is pressed and that gives a look with darker background, darker border and inset shadow. The following mentioned classed used to make anchor tag and button tag active.















ElementClass
Button element Use .active class to show that it is activated..
Anchor elementUse .active class to <a> buttons to show that it is activated.

These example willl demonstrates this:


<p>
<button type="button" class="btn btn-default btn-lg ">
Default Button
</button>
<button type="button" class="btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">Default link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Default Link Active</a>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">
Primary button
</button>
<button type="button" class="btn btn-primary btn-lg active">
Active Primary button
</button>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">Primary link</a>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary Link Active</a>
</p>


Disabled State


When you apply disables attribute on a button, it will fade in color by 50%, and lose the gradient. The following table describes classes are using to make button tag and anchor tag disabled:















ElementClass
Button elementAdd the disabled attribute to <button> tag.
Anchor elementAdd the disabled class to <a> tag.

Here are the example for demonstrates:


<p>
<button type="button" class="btn btn-default btn-lg">
Default Button
</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">
Disabled Button
</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">
Primary button
</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">
Disabled Primary button
</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">
Link
</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">
Disabled Link
</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">
Primary link
</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">
Disabled Primary link
</a>
</p>


Button Tags


You may possibly use these button classes with <button>, <a> or <input> tags. But this is suggested that you use it with <button> tags generally to avoid cross browser irregularity problems. Following example demonstrates this:


<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">



Bootstrap Buttons

No comments:

Post a Comment