What is bootstrap-vue

Bootstrap-Vue is a UI component library that follows vue's component development method, uses Bootstrap styles to control the appearance of components, and abandons dependence on jquery. Let us continue to enjoy the convenience of bootstrap styles while using Vue.js.

This article attempts to try out each component. In order to minimize the interference of other factors, the method of accessing CDN is still used. If you like to use modular packaging tools, such as webpack, the official website has detailed documentation for reference.

1. Alerts (warning box): The main usage scenario is to give feedback on the user's behavior.

Note:

You should always use the show attribute to control the visibility of a component.

Add the attribute dismissible to the component to display a close button. It should always be used with the dismissed event. In the dismissed event, the data status of the alert display attribute is reset in the vm.

You can pass The variant attribute (primary, secondary, success, danger, warning, info) generates alerts with different semantics

The dismiss-count-down attribute accepts a function that can help us implement an alert that automatically closes at a scheduled time

2. badge: allows us to add supplementary information to certain content.

Note:

The badge will adjust its font size according to the font size of the direct parent element, which uses em units.

The semantic style of the badge can be defined through the variant attribute. (default, primary, success, warning, info, danger)

Add the pill attribute to define a capsule-style badge (enhanced rounded corners)

You can add behaviors to the badge through the href attribute (skip Transfer)

If you need a circular badge, refer to the circular badge implemented in css

3. Breadcrumb: Display the navigation path of the current page and tell us where we are currently Position

Note: The delimiter of the

path is automatically added by css by specifying the content attribute of the pseudo element::before.

items are each navigation item on the path, specified through an object array. You can assign the active attribute to an object to make it in the active state

If no item is explicitly specified as the active state, the last item will be considered to be the default active state.

Specifying href or to attributes for navigation items can add navigation behavior.

4. Button: a basic control element used to trigger behaviors.

Note:

The semantic style of the button can be defined through the variant attribute. (default, primary, success, warning, info, danger)

Define the size of the button (sm, lg) through the size attribute. If not specified, there will be a default style.​​

You can still use the type attribute (submit, reset, button).

Add disabled status through disabled.

Adding href or to attributes will generate a button-style a tag.

Add the pressed attribute to control whether the button is clicked. Use the sync modifier to synchronize the button's state with data in the vm.

The above is the detailed content of What is bootstrap-vue. For more information, please follow other related articles on the PHP Chinese website!