Any with class BTN elements inherit the default appearance of rounded gray buttons. However, Bootstrap provides some options to define the button style, as shown in the following table:

The following styles can be used on < a >, < button >, or < input > elements:

• . btn: add basic style for button
• . BTN default: default / standard button

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

• . BTN primary: original button style (not operated)

<button type="button" class="btn btn-primary"> Original button </button>

• . BTN success: indicates a successful action

<button type="button" class="btn btn-success"> Success button </button>

• . BTN Info: this style can be used for buttons to pop up information

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

• . BTN warning: indicates a button that needs careful operation

<button type="button" class="btn btn-warning"> Warning button </button>

• . BTN danger: indicates the button operation of a dangerous action

<button type="button" class="btn btn-danger"> Danger button </button>

• . BTN link: make the button look like a link (still keep the button behavior)

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

• . 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% of the width of the parent element)
• . active: the button is clicked
• . disabled: disable button

Button size

• . BTN LG: make a big button

<button type="button" class="btn btn-primary btn-lg"> Large original button </button>
<button type="button" class="btn btn-default btn-lg"> Big button </button>

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

• . BTN XS: make a super small button

<button type="button" class="btn btn-primary btn-xs">Extra small original button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>

• . BTN block: block level button (stretched to 100% of the width of the parent element)

<button type="button" class="btn btn-primary btn-lg btn-block">Original button at block level</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level buttons</button>

Button status

Bootstrap provides a class of button states such as activation and deactivation

(1) Active state

When activated, the button will appear as pressed (dark background, dark border, shadow).

• Button elements: adding active class to show that it is active

<button type="button" class="btn btn-default btn-lg "> Default button </button>
<button type="button" class="btn btn-default btn-lg active"> Activate button </button>

• Anchor elements: adding active class to the button to show that it is active

<button type="button" class="btn btn-primary btn-lg "> Original button </button>
<button type="button" class="btn btn-primary btn-lg active"> Active original button </button>

(2) Disabled status

When you disable a button, its color will fade by 50% and lose the gradient.

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

<p>
  <button type="button" class="btn btn-default btn-lg">Default button</button>
  <button type="button" class="btn btn-default btn-lg" disabled="disabled">Disable button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-lg ">Original button</button>
  <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Disabled original button</button>
</p>

• Anchor element: add 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 links</a>
</p>
<p>
  <a href="#"Class =" BTN BTN primary BTN LG "role =" button "> original link</a>
  <a href="#"Class =" BTN BTN primary BTN LG disabled "role =" button "> disabled original links</a>
</p>

Button label

You can use the button class on < a >, < button > or < input > elements. However, it is recommended that you use the button class on the < button > element to avoid cross browser inconsistency.

example

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

(1) Button group

Use directly in div BTN group can create button groups:

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

(2) Adaptive size button group

Yes BTN group justified class to set the adaptive size of the button group.

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

Note: if it is an element, you need to use it in the outer layer BTN group class to wrap:

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

(3) Button group with embedded drop-down menu

The buttons embedded in the button group can set the drop-down menu

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