Use of the Bootstrap button

Any element with class.btn inherits the default appearance of the rounded gray button. However, Bootstrap provides some options to define button styles, as shown in the following table:

The following styles can be used on , , or elements:

• .bTN: Add a basic style to the button
• . Btn-default: default/standard button

<button type="button" class="btn btn-default">The default button</button>
Copy the code

• .btn-primary: Original button style (not operated)

<button type="button" class="btn btn-primary">The original button</button>
Copy the code

• Btn-success: indicates the successful action

<button type="button" class="btn btn-success">Successful button</button>
Copy the code

• .btn-info: This style can be used for buttons to pop up information

<button type="button" class="btn btn-info">Information button</button>
Copy the code

• Btn-warning: indicates a button that needs to be operated with caution

<button type="button" class="btn btn-warning">The warning button</button>
Copy the code

• . Btn-danger: Indicates a button operation for a dangerous action

<button type="button" class="btn btn-danger">Dangerous button</button>
Copy the code

• .btn-link: Makes the button look like a link (still keeping the button behavior)

<button type="button" class="btn btn-link">Link button</button>
Copy the code

• .bTN-LG: Make a big button
• .bTN-SM: Make a small button
• .bTN-XS: Make a super small button
• .btn-block: Block-level button (stretched to 100% width of parent element)
• Active: The button is clicked
• . Disabled: Indicates the disabled button

Size of the button

• .bTN-LG: Make a big button

<button type="button" class="btn btn-primary btn-lg">Big original button</button>
<button type="button" class="btn btn-default btn-lg">The big button</button>
Copy the code

• .bTN-SM: Make a small button

<button type="button" class="btn btn-primary btn-sm">Small original button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
Copy the code

• .bTN-XS: Make a super small button

<button type="button" class="btn btn-primary btn-xs">Very small original button</button>
<button type="button" class="btn btn-default btn-xs">Very small buttons</button>
Copy the code

• .btn-block: Block-level button (stretched to 100% width of parent element)

<button type="button" class="btn btn-primary btn-lg btn-block">Block-level raw buttons</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level buttons</button>
Copy the code

Button state

Bootstrap provides classes for activating, disabling, and other button states

(1) Activation status

Buttons will appear pressed when activated (dark background, dark border, shadows).

• Button element: Add.active class to show that it is active

<button type="button" class="btn btn-default btn-lg ">The default button</button>
<button type="button" class="btn btn-default btn-lg active">The activation button</button>
Copy the code

• Anchor element: Add.active class to the button to show that it is active

<button type="button" class="btn btn-primary btn-lg ">The original button</button>
<button type="button" class="btn btn-primary btn-lg active">The original button that is activated</button>
Copy the code

(2) Disabled

When you disable a button, its color becomes 50% lighter and it loses its gradient.

• Button element: Adds the disabled attribute to<button>button

<p>
  <button type="button" class="btn btn-default btn-lg">The default button</button>
  <button type="button" class="btn btn-default btn-lg" disabled="disabled">Disable the button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">The original button</button>
  <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Disable the original button</button>
</p>
Copy the code

• Anchor element: Adds a disabled class to<a>button

<p>
  <a href="#" class="btn btn-default btn-lg" role="button">link</a>
  <a href="#" class="btn btn-default btn-lg disabled" role="button">Disable the link</a>
</p>
<p>
  <a href="#" class="btn btn-primary btn-lg" role="button">The original link</a>
  <a href="#" class="btn btn-primary btn-lg disabled" role="button">Disable the original link</a>
</p>
Copy the code

The button labels

You can use a button class on , , or elements. However, it is recommended that you use button classes on elements to avoid cross-browser inconsistencies.

<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">
Copy the code

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Copy the code

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>
Copy the code

<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Apple</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Samsung</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Sony</button>
    </div>
</div>
Copy the code

<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Sony <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Tablet</a></li>
            <li><a href="#">Smartphone</a></li>
        </ul>
    </div>
</div>
Copy the code