Bootstrap-Vue is a ui component library that follows the component development method of vue, uses the Bootstrap style to control the appearance of components, and abandons the dependence on jquery. Let us continue to enjoy the convenience of bootstrap styles while using Vue.js.
Official website: https://bootstrap-vue.js.org
This article tries to test 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: The main usage scenario is to give feedback on the user's behavior.
Example: //jsfiddle.net/xcchcaptain/ur1xnjqb/2/embedded/result,js,html/
Notice:
-
The visibility of components should always be controlled using the show property.
-
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 reset the data state that controls the alert display attribute in the vm
-
Alerts with different semantics can be generated through variant attributes (primary, secondary, success, danger, warining, info)
-
The dismiss-count-down property accepts a function that can help us implement an alert that automatically closes on time
2. badge: Allows us to add supplementary information to certain content.
Example: //jsfiddle.net/xcchcaptain/exbtssp8/2/embedded/result,js,html/
Notice:
-
The badge will adjust 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 pill attribute to define capsule badges (enhanced rounded corners)
-
You can add behavior (jump) to the badge through the href attribute
-
If you need a round badge, refer to the round badge implemented by CSS
3. Breadcrumb: Display the navigation path of the current page and tell us the current location
Example: //jsfiddle.net/xcchcaptain/vu2hpLg5/1/embedded/result,js,html/
Notice:
-
The path separator is automatically added by CSS by specifying the content property of the pseudo-element ::before.
-
items are the navigation items on the path, specified by an array of objects. You can assign an active property to an object to make it active
-
If no item is explicitly specified to be active, the last item is assumed to be active by default.
-
Specifying href or to attributes for navigation items can add navigation behavior.
4. Button: The basic control element used to trigger behavior.
Example: //jsfiddle.net/xcchcaptain/29sy7o83/2/embedded/result,js,html/
Notice:
-
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, and there will be a default style if not specified.
-
You can still use the type attribute (submit, reset, button).
-
Add disabled state via disabled.
-
Adding the href or to attribute will generate a button-style a tag.
-
Add the pressed attribute 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 the vm.
5. Button group: Placing a group of buttons in a row or column can help us achieve the top navigation bar or tab switching effect.
Example: //jsfiddle.net/xcchcaptain/z3271q30/1/embedded/result,js,html/
Notice:
-
The default is a horizontal button group, you can add the vertical attribute to generate a vertical button group.
-
The size of the buttons in the button group is controlled by size.
6, Button toolbar (button toolbar): used to place the button group and the input box group in a row.
Example: //jsfiddle.net/xcchcaptain/hkk9s1vy/1/embedded/result,js,html/
Input box groups, drop-down menus and button groups can be freely combined in the toolbar. Spacing can also be adjusted using tool classes.
Notice:
-
Add the justify property to the toolbar to make the tool occupy the entire parent container space and automatically adjust the spacing between items.
-
Add the key-nav attribute to the toolbar to enable keyboard navigation of the toolbar. For details, please refer to the official documentation
7. Cards: A card is a component that can be configured flexibly and has good scalability. It is a mobile friendly presentation. It can set the head, footsteps, and the torso part can use other components. Best of all, if a theme color is set, its content will automatically apply that theme color. There are also a number of properties that can be used to configure component rendering.
The default width of <b-card> is to fill the parent container. Of course you can use bootstrap-v4's style classes for customization.
Example: //jsfiddle.net/xcchcaptain/hkk9s1vy/4/embedded/result,js,html,css/
Notice:
-
The default root node tag of the component is div, and the tag attribute is specified for the component, which can be customized.
-
The title is set by the title attribute, and the subtitle is set by the sub-title attribute.
-
If you want to use a link in the card component, you can use the b-link component or other tags, just specify the style class card-link for the tag.
-
You can add a picture to the card, add img-src to point to the picture address, img-alt picture to replace text, img-top/img-bottom picture at the top or bottom, the default is the top. If you also add the overlay attribute, the image will be used as the background image of the card.
-
The header and footer properties can be used to specify the header of the card, the text of the footstep, and the named slot can be used for complex points.
-
The body section has the style class .card-body, which provides an area with padding for the card component. The content of the card component is placed on the torso by default.
-
You can set no-body for the card component, so that the body part is not decorated with the .card-body style class. At this point, setting title and sub-title to the card component will not render.
-
Customize the style of the content in the card component through the class names of card-text, card-body, and card-link.
-
You can also set various variant colors through bg-variant and border-variant. For more details, you can set the body color of each part. For details, refer to the official website documentation.
-
b-card-group can place a group of cards in a row, the default is no space. Adding the deck attribute can add spacing, and the waterfall flow layout can be achieved through the columns attribute. For details, refer to the official website documentation.
8, Carousel (carousel): used to display a series of content in a loop. Images, text and custom tags can be supported. You can also add previous/next action buttons and indicators.
Example: //jsfiddle.net/xcchcaptain/hkk9s1vy/5/embedded/result,js,html,css/
Notice:
-
The carousel does not automatically standardize the size of the carousel items, you can use the tool class or custom styles to adjust the size of the content. If all images are used, make sure that the images are all the same size, at least the aspect ratio of the images.
-
If the img-src or img-blank attributes are used for b-carousel-slide, the dimensions defined by img-width and img-height in the carousel will be automatically applied to each item.
-
The image is responsive and automatically scales to fill the parent container.
-
Inside b-carousel-slide, the b-img component is used to display images.
-
Set the time interval of the rotation through the interval property
-
The controls property sets the carousel controls, the indicators property sets the indicators, they are independent of each other
-
If you need to customize the style of the element, add a style class to the carousel to form a namespace, and then override the default style by the priority of the selector.
-
Use v-model for the component, it will bind the index of the current carousel item (counting from 0)
To be continued
Why can't I insert an iframe?