Bootstrap 4教程-Bootstrap 4 Buttons - 书目录

Bootstrap 4教程-Bootstrap 4 Buttons

Bootstrap 4 provides nine predefined styles for buttons — each serving a different semantic purpose.

To style a button, use Bootstrap’s .btn class, followed by the desired style. For example, class="btn btn-primary" results in a primary button.

Here’s the code used for all nine button styles:

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 introduced the .btn-secondary, .btn-light, and .btn-dark classes.

Bootstrap 4 dropped the .btn-default class, which is included in Bootstrap 3’s semantic button classes.

Button Elements

Bootstrap 4’s button styles are designed to be used with the <button> element, but they can also be applied to <input> and <a> elements.

You can also apply the button styles to a <label> element when working with checkboxes and radio buttons (more on that below).

When using the <a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use role="button".

It is recommended to use the <button> element whenever possible, as this has the best consistency across browsers.

Button Outlines

Use Bootstrap 4’s .btn-outline-* classes to apply the semantic color to the outline only.

Bootstrap 4 vs Bootstrap 3

Outline buttons are new in Bootstrap 4.

No Outlines for Link Buttons

There is no outline for link buttons (i.e. there is no .btn-outline-link class).

Button Size

You can specify the button size with Bootstrap’s .btn-lg and .btn-sm classes. Place these in addition to the other button classes. Like this:

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 has dropped the .btn-xs for extra small buttons.

Block Level Buttons

A block level button spans the width of its parent. You can create a block level button by adding Bootstrap’s .btn-block class.

Disabled Buttons

Bootstrap provides specific styles for the disabled state (as well as for other states, such as active).

If you need to disable a button that uses an <a> element, you can use Bootstrap’s .disabled class.

You don’t need to do this on buttons that use the <button> and <input> elements. To disable those buttons, use the standard HTML disabled attribute.

Bootstrap uses the non-standard (at the time of writing) pointer-events: none to disable link buttons (those buttons created with the <a> element). Although this works in many cases, it doesn’t work in all cases. Therefore, you should also use JavaScript to disable any link button functionality (or just use a <button> element if you can).

Toggle Checkboxes & Radio Buttons

You can apply the Bootstrap 4 button styles to radio buttons and checkboxes to provide a toggle feature.

To do this, nest the checkboxes or radio buttons inside a <label> element that has the applicable button class applied.

Also, nest the elements inside a .btn-group element that also has data-toggle="buttons" applied.


Click some buttons to see the toggle effect.

Radio Buttons

Click some buttons to see the toggle effect.



英语原文: 由工具自动翻译,由书目录整理