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>
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