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

The main content of this article is to explain "what is the role of bootstrap-vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the role of bootstrap-vue?"

Bootstrap-Vue is a ui component library, which follows the component-based development mode of vue, uses Bootstrap style to control the appearance of components, and abandons the dependence on jquery. Let us continue to enjoy the convenience of the bootstrap style while using Vue.js.

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

Note:

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

Adding a property dismissible to a component displays a close button, which should always be used with the dismissed event to reset the data state of the alert display property in the vm in the dismissed event

Alert under different semantics can be generated through the variant attribute (primary,secondary,success,danger,warining,info)

The dismiss-count-down property accepts a function that can help us achieve alert that shuts off automatically on a regular basis.

2. Badge (badge): allows us to add supplementary information to some content.

Note:

The badge adjusts its own font size according to the font size of the immediate 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 badge (enhanced fillet)

The href property allows you to add behavior to the badge (jump)

If you need a round badge, refer to the round badge implemented by css

3. Breadcrumb (bread crumbs): show the navigation path of the current page and tell us the current location

Note:

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

Items, the navigation items on the path, are specified by an array of objects. You can assign an active property to an object to make it active

If you do not specify which item is active, the last item is recognized as the default active state.

Specify the href or to property for the navigation item to add navigation behavior.

4. Button: the basic control element used to trigger behavior.

Note:

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

The size of the button is defined by the size property (sm,lg), and no default style is specified.

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

Add a disabled state through disabled.

Adding the href or to attribute generates a button-style a tag.

Add the pressed property to control whether the button is in the clicked state. Use the sync modifier to synchronize the state of the button with the data in vm.

At this point, I believe that you have a deeper understanding of "what is the role of bootstrap-vue", you might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.