Bootstrap 3.0 learning notes button style

This article mainly explains the style of buttons.

1. Options

2. Size

3. Activity Status

4. Disabled state

5. Html tags that can be used as buttons

6. Summary

Options

Use the classes listed above to quickly create a styled button.

 Copy code
 The code is as follows:

 <button type="button" class="btn btn-default">Default</button>
 <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-success">Success</button>
 <button type="button" class="btn btn-info">Info</button>
 <button type="button" class="btn btn-warning">Warning</button>
 <button type="button" class="btn btn-danger">Danger</button>
 <button type="button" class="btn btn-link">Link</button>

size

Need your buttons to be different sizes? Use .btn-lg, .btn-sm, .btn-xs to get buttons of different sizes.

 Copy code
 The code is as follows:

 <p>
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-default btn-lg">Large button</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-default btn-sm">Small button</button>
 </p>
 <p>
 <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button>
 </p>

By adding .btn-block to the button, it can fill 100% of the width of the parent node, and the button also becomes a block-level element.

 Copy code
 The code is as follows:

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

Activity Status

When the button is active, it appears pressed (darker background, darker border, inset shadow). For the B<button> element, this is achieved through :active. For the <a> element, this is achieved through .active. However, you can also use .active<button> in conjunction with it and make it active programmatically.

Since :active is a pseudo-state, there is no need to add it, but you can add .active if you need to show the same appearance.

 Copy code
 The code is as follows:

 <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
 <button type="button" class="btn btn-default btn-lg active">Button</button>

You can add .activeclass to <a>.

 Copy code
 The code is as follows:

 <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
 <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

You can compare it with the button above.

Disabled state

By fading the background color of the button by 50%, you can make it appear unclickable.

Add the disabled attribute to <button>.

 Copy code
 The code is as follows:

 <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

You can put the mouse on the button and click it to see the effect.

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and lower will draw the text in the button as gray with a nasty shadow. There is currently no way to fix this.

Add .disabledclass to <a>.

 Copy code
 The code is as follows:

 <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
 <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

This is a comparison with the button above.

We use .disabled as a utility class, just like .activeclass, so there is no need to add a prefix.

Link functionality is not affected

The class mentioned above only changes the appearance of <a> and does not affect the functionality. In this document, we disabled the default functionality of links through JavaScript code.

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

Html tags that can be used as buttons

You can add button class to <a>, <button> or <input> elements.

 Copy code
 The code is as follows:

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

Cross-browser performance

As a best practice, we strongly recommend using the <button> element whenever possible to ensure consistent styling across browsers.

Among other reasons, this Firefox bug prevents us from setting the line-height for <input> tag-based buttons, which causes them to be out of line with other buttons on Firefox.

Summarize

This section mainly explains the style of button buttons. The main thing is to flexibly run these styles for control.