Get the App
SLTechnology News&Howtos  ›  Development  › 

What style buttons does bootstrap have?

Shulou Source: shulou.com Published: 2022-06-02 04:59:52 10月07日 Update

This article mainly introduces what style buttons bootstrap has, which can be used for reference by interested friends. I hope you will gain a lot after reading this article. Let's take a look at it with you.

Bootstrap style buttons are: 1, ".btn" rounded gray button; 2, ".btn-lg" big button; 3, ".btn-sm" small button; 4, ".btn-xs" ultra-small button; 5, ".btn-block" block-level button; 6, ".button" disable style button and so on.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap button style summary class style description .btn rounded gray button, in order to make the button less sharp, our buttons should use this style to get rounded corners, and then override other features. .btn-default default / standard button, press gray if white. .btn-primary original button style (unmanipulated), which corresponds to active, which is the style of a button that is not manipulated, and active is the corresponding style displayed when the button is clicked. .btn-success indicates a successful action .btn-info this style can be used for buttons that pop up messages. Btn-warning indicates a button that needs to be handled carefully. Btn-danger represents a button operation of a dangerous action. Btn-link makes the button look like a link (still retains button behavior). Btn-lg large button .btn-sm small button. Btn-xs ultra-small button .btn-block block-level button (stretch to 100% width of the parent element). Active button is clicked The button will appear as a pressed appearance (dark background, dark border, shadow) when activated. If you disable the button, the color will fade by 50% and the gradient will be lost.

Basic button set

Button 1 Button 2 Button 3

The size of the button

Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7 Button 8 Button 9

Thank you for reading this article carefully. I hope the article "what style Button for bootstrap" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Tags: Buttons styles articles rounded corners gray actions dark primitive sharp dangerous success value information elements interests at the same time appearance size width tutorials Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Tech Info MariaDB Shulou Technology Huawei Redmi