Shulou(Shulou.com)06/03 Report--

This article is about the style of buttons in the bootstrapt framework. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The main styles of bootstrapt buttons are: base button, default button, main button, success button, information button, warning button, danger button, link button.

A brief introduction to the button:

Buttons are also one of the core contents of the Bootstrap framework. Because buttons are indispensable in Web production.

And different Web pages have different button styles, and even the same Web site or application has multiple button styles, such as different button colors, sizes and states.

Base button .btn default button. Btn-default main button. Btn-primary success button. Btn-success information button. Btn-info warning button. Btn-warning danger button. Btn-danger link button. Btn-link

2. Basic button

The basic buttons in the V3.x version of the Bootstrap framework, like the basic buttons in the V2.x version, are implemented through the class name "btn".

The difference is that the V3.x version is much simpler, removing some of the special effects in a large number of CSS3 in the V2.x version, such as text shadow (text-shadow), gradient background (background-image), border shadow (box-shadow) and so on. The Bootstrap framework takes into account the parsing differences of different browsers, and makes a more secure compatibility treatment, so that the button effect is basically the same in different browsers.

Please refer to line 1992 ~ line 2010 of the bootstrap.css file for source code:

The buttons of the Bootstrap framework are very easy to use, as follows:

I'm a basic button.

3. Default button

The Bootstrap framework first defines a basic button style by the base class name ".btn", and then defines a default button style by ".btn-default".

The style of the default button is to modify the background color, border color, and text color of the button based on the style of the base button.

Please refer to line 2040 ~ line 2044 of the bootstrap.css file for source code.

Using the default button style is also very easy, just add the class name "btn-default" to the base button "btn":

Default button

Fourth, multi-tag support (multiple label making buttons)

In general, in addition to using label elements, you can also use and tags for making buttons.

Similarly, when making buttons in the Bootstrap framework, in addition to the tag elements just mentioned, you can also use them on other tag elements. The only thing to note is that you need to add the class name "btn" to the tag elements that make buttons.

If you don't add it, it won't have any button effect.

Button label button a label button span label button p label button

Although button style can be achieved by using any tag element in the Bootstrap framework, it is not recommended by individuals, and to avoid browser compatibility problems, it is strongly recommended to use button or a tags to make buttons.

5. Customize buttons of different styles

As I said at the beginning of the introduction to buttons, Web pages may have different button styles. Then it is also considered in the Bootstrap framework.

In addition to the default button style in the Bootstrap frame, there are six other button styles, each of which is actually the same, except for the background color, border color, and text color of the button.

In the Bootstrap framework, different button styles are implemented through different class names. In the process of use, developers only need to choose different class names:

It is easy to use, just like the default button described earlier, you only need to append the corresponding class name to the base button ".btn" to get the desired button style. Such as:

Base button .btn default button. Btn-default main button. Btn-primary success button. Btn-success information button. Btn-info warning button. Btn-warning danger button. BTN-danger link button. Btn-link

6. Button size

In the Bootstrap framework, the size of the buttons can also be customized. Similar to input, the size of the button is controlled by appending the class name to the base button ".btn".

Three class names are provided in the Bootstrap framework to control the button size:

From the above table, it is not difficult to find that the size of the buttons in the Bootstrap framework is controlled by modifying the padding, line-height, font-size, and border-radius properties of the buttons.

Check the source code from line 2319 to line 2339 in the bootstrap.css file

In practice, these class names can be used with other color class names in the button, but the only thing is that the ".btn" class name is not missing:

Large buttons. Btn-lg normal button small button. Btn-sm

Block button

A class name "btn-block" is provided in the Bootstrap framework.

The button uses this class name to fill the entire container, and this button does not have any padding and margin values. In practice, this kind of button is often called block button.

For more information on the source code, please refer to line 2340 ~ 2353 of the bootstrap.css document:

The method is similar to the previous one, only to add the ".btn-block" class name to the original button class name, which is indispensable of course:

Large buttons. Btn-lg normal button small button. Btn-sm ultra-small button. Btn-xs

8. Button status-active state

The Bootstrap framework does some special handling for the state of the button. There are mainly two kinds of state effects for buttons in the Bootstrap framework: active state and disabled state.

The active state of Bootstrap button mainly includes suspension state (: hover), click state (: active) and focus state (: focus).

For the source code, please see line 2011 ~ line 2029 of the bootstrap.css file.

Buttons in different styles all have these state effects, but the color has been adjusted to some extent. Let's take the default style (btn-default) as an example:

Please see line 2045 ~ line 2058 of the bootstrap.css file for source code.

When the button handles the clicking state (that is, the unreleased state of mouse press), it is implemented through the ": active" pseudo-class for elements and by adding the class name ".active" for such tag elements.

Base button .btn default button. Btn-default main button. Btn-primary success button. Btn-success information button. Btn-info warning button. Btn-warning danger button. Btn-danger link button. Btn-link

IX. Button status-disabled state

Like form controls such as input, there is a disabled state setting in the buttons of the Bootstrap frame.

Compared with other state buttons, the transparency of the background color is treated to a certain extent, and the value of opcity is adjusted from 100% to 65%.

In the Bootstrap framework, there are two ways to disable buttons:

Method 1: add the disabled attribute to the tag

Method 2: add the class name "disabled" to the element tag

The main differences between the two are:

The ".submission" style does not disable the default behavior of buttons, such as submit and reset behavior.

If you want such a disabled button to also disable the default behavior of the button, you need to deal with it in a language such as JavaScript.

There is a similar problem with tags, where the link behavior cannot be disabled if the button is disabled by the class name ".disable".

The method of adding the "disabled" attribute to the element tag can disable the default behavior of the element.

Through the disabled property disable button by adding the class name disabled disable button not disabled button thank you for reading! This is the end of this article on "what are the styles of buttons in the bootstrapt framework?" I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.