Bootstrap Buttons
This chapter will discuss about how to use Bootstrap button with examples. Anything that is given a class of .btn will inherit the default look of a gray button with rounded corners. However Bootstrap provides some options to style buttons, which are summarized in the following table:
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.
Following example demonstrates all the above button classes:
<!-- 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
The following table summarizes classes used to get buttons of various sizes:
Class
Description
.btn-lg
This makes button size large.
.btn-sm
This makes button size small.
.btn-xs
This makes button size with extra small.
.btn-block
This creates block level buttons—those that span the full width of a parent.
The following example demonstrates this:
<p>
<button type="button" class="btnbtn-primary btn-lg">
Large Primary button
</button>
<button type="button" class="btnbtn-default btn-lg"
>Large button
</button>
</p>
<p>
<button type="button" class="btnbtn-primary">
Default size Primary button
</button>
<button type="button" class="btnbtn-default">
Default size button
</button>
</p>
<p>
<button type="button" class="btnbtn-primary btn-sm">
Small Primary button
</button>
<button type="button" class="btnbtn-default btn-sm">
Small button
</button>
</p>
<p>
<button type="button" class="btnbtn-primary btn-xs">
Extra small Primary button
</button>
<button type="button" class="btnbtn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type="button" class="btnbtn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type="button" class="btnbtn-default btn-lg btn-block">
Block level button
</button>
</p>
Button State
Bootstrap provides classes which allow you change the state of buttons say active, disabledetc each of these are discussed in the following sections:
Active State
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. The following table summarizes classes used to make button element and anchor element active:
Element
Class
Button element
Use .active class to show that it is activated..
Anchor element
Use .active class to <a> buttons to show that it is activated.
The following example demonstrates this:
<p>
<button type="button" class="btnbtn-default btn-lg ">
Default Button
</button>
<button type="button" class="btnbtn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type="button" class="btnbtn-primary btn-lg ">
Primary button
</button>
<button type="button" class="btnbtn-primary btn-lg active">
Active Primary button
</button>
</p>
Disabled State
When you disable a button, it will fade in color by 50%, and lose the gradient.
The following table summarizes classes used to make button element and anchor element disabled:
Element
Class
Button element
Add the disabled attribute to <button> buttons.
Anchor element
Add the disabled class to <a> buttons.
Note: This class will only change the <a>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.
The following example demonstrates this:
<p>
<button type="button" class="btnbtn-default btn-lg">
Default Button
</button>
<button type="button" class="btnbtn-default btn-lg" disabled="disabled">
Disabled Button
</button>
</p>
<p>
<button type="button" class="btnbtn-primary btn-lg ">
Primary button
</button>
<button type="button" class="btnbtn-primary btn-lg" disabled="disabled">
Disabled Primary button
</button>
</p>
<p>
<a href="#" class="btn btn-defaultbtn-lg" role="button">
Link
</a>
<a href="#" class="btn btn-defaultbtn-lg disabled" role="button">
Disabled Link
</a>
</p>
<p>
<a href="#" class="btn btn-primarybtn-lg" role="button">
Primary link
</a>
<a href="#" class="btn btn-primarybtn-lg disabled" role="button">
Disabled Primary link
</a>
</p>
Button Tags
You may use button classes with <a>, <button>, or <input> element. But it is recommended that you use it with <button> elements mostly to avoid cross browser inconsistency issues.
The 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">
ليست هناك تعليقات:
إرسال تعليق