cookieChoices = {};

Tuesday 21 July 2015

Bootstrap Button

Button can be rendered using one of the following ways:

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

Its recommended to use <button> over <input> because it ensures matching cross-browser rendering.

Following are the styles we can use for <button>, <input type="button" and <a> tags:

Class                     Description 
btn                      Default/ Standard button.
btn-primary        Provides extra visual weight and identifies the primary action in a set of buttons.
btn-success         Indicates a successful or positive action.
btn-info              Contextual button for informational alert messages.
btn-warning       Indicates caution should be taken with this action.
btn-danger          Indicates a dangerous or potentially negative action.
btn-link             Deemphasize a button by making it look like a link while maintaining button behavior.
btn-sm             Makes a small button
btn-xs              Makes an extra small button
btn-block         Makes a block-level button (spans the full width of the parent element)
active               Makes the button appear pressed
disabled           Makes the button disabled

Examples: 

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

 <a href="#" class="btn btn-primary btn-lg" role="button">Link as Primary Button</a> 

No comments:

Post a Comment