文档
Vue.js 3
组件
指令
图标
参考
主题
演示

v2.23.0
- 最新版本 (v2.23.0)
- 开发

悬停
弹出框
滚动监听
切换
工具提示
可见性

无障碍访问
更新日志
颜色变体
贡献代码
组件图片路径解析
路由器支持
设置
尺寸属性和类
间距类
入门模板
Bootstrap 主题
第三方库
工具类
表单验证

首页
文档
组件

组件组 - 目录

BootstrapVue 组件和组件组插件。

Alert — Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Aspect — The `<b-aspect>` component can be used to maintain a minimum responsive aspect ratio for content. v2.9.0 Avatar — Avatars are typically used to display a user profile as a picture, an icon, or short text. v2.8.0 Badge — Small and adaptive tag for adding context to just about any content. Breadcrumb — Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content. Button — Use BootstrapVue's <b-button> component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more. Button Group — Group a series of buttons together on a single line with <b-button-group>. Button Toolbar — Group a series of <b-button-group> and/or <b-input-group> together on a single line, with optional keyboard navigation. Calendar — BootstrapVue custom calendar widget for selecting dates and controlling other components, fully WAI-ARIA accessible (a11y) and supports internationalization (i18n). v2.5.0 Card — A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Carousel — The <b-carousel> component is a slideshow for cycling through a series of content, built with CSS 3D transforms. It works with a series of images, text, or custom markup. Collapse — Easily toggle content visibility on your pages. Includes support for making accordions. Dropdown — Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format. Embed — Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device. Form — Form component and form helper components that optionally supports inline form styles and validation states. Form Checkbox — Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling. Form Datepicker — BootstrapVue custom date picker input form control, which provides full WAI-ARIA accessibility (a11y) and supports internationalization (i18n). v2.5.0 Form File — Customized, cross-browser consistent, file input control that supports single file, multiple files, and directory upload. Form Group — Easily add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback. Form Input — Create various type inputs such as: text, password, number, url, email, search, range, date and more. Form Radio — Cross browser consistent radio inputs and radio groups, using Bootstrap's custom radio input to replace the browser default radio input. Form Rating — BootstrapVue custom star rating form control for ratings entry or aggregated display. v2.12.0 Form Select — Custom <select> component using cross-browser custom styles. Optionally generate <option> entries based on an array, array of objects. Form Spinbutton — BootstrapVue custom numerical spinbutton form input component, featuring WAI-ARIA accessibility (a11y) and internationalization (i18n). v2.5.0 Form Tags — Lightweight custom tagged input form control, with options for customized interface rendering, duplicate tag detection and optional tag validation. v2.2.0 Form Textarea — Create multi-line text inputs with support for auto height sizing, minimum and maximum number of rows, and contextual validation states. Form Timepicker — BootstrapVue custom time picker input form control, which provides full WAI-ARIA accessibility (a11y) and supports internationalization (i18n). v2.6.0 Image — Create responsive images, optionally adding lightweight styles to them — all via props. Support for rounded images, thumbnail styling, alignment, and even the ability to create blank images with an optional solid background color, and lazy loaded images. Input Group — Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs. Jumbotron — A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site. Layout and Grid System — Use the powerful mobile-first flexbox grid (via the <b-container>, <b-row>, <b-form-row> and <b-col> components) to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes. Link — Use BootstrapVue's custom <b-link> component for generating a standard <a> link or <router-link>. <b-link> supports the disabled state and click event propagation. List Group — List Groups are a flexible and powerful component for displaying a series of content. List Group items can be modified to support just about any content within. They can also be used as navigation via various props. Media — The media object helps build complex and repetitive components where some media is positioned alongside content that doesn't wrap around said media. Modal — Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more. Nav — Navigation components that share general markup and styles, from the base <b-nav> class to the active and disabled states. Swap modifier props to switch between each style. Navbar — The component <b-navbar> is a responsive wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to the <b-collapse> component. Overlay — The b-overlay component is used to visually obscure a particular element or component and its content. It signals to the user of a state change within the element or component and can be used for creating loaders, warnings/alerts and more. v2.7.0 Pagination — Quick first, previous, next, last, and page buttons for pagination control of another component (such as <b-table> or lists). Pagination Nav — Quick first, previous, next, last, and page buttons for navigation based pagination, supporting regular links or router links. Popover — The Popover feature provides a tooltip-like behavior, can be easily applied to any interactive element via the <b-popover> component or v-b-popover directive. Progress — A custom progress component for displaying simple or complex progress bars, featuring support for horizontally stacked bars, animated backgrounds, and text labels. Sidebar — The `<b-sidebar>` component creates a fixed viewport, left or right, sliding popout drawer. v2.10.0 Skeleton — The <b-skeleton> component can be used to scaffold a loading state, while your data is loading. v2.17.0 Spinner — The <b-spinner> component can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue functional component. Table — For displaying tabular data. <b-table> supports pagination, filtering, sorting, custom rendering, events, and asynchronous data. For simple display of tabular data without all the fancy features, BootstrapVue also provides lightweight alternative components <b-table-lite> and <b-table-simple>. Tabs — Create a widget of tabbable panes of local content. The tabs component is built upon navs and cards internally, and provides full keyboard navigation control of the tabs. Time — A custom time input widget that can be used to control other components v2.6.0 Toast — Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Tooltip — Easily add tooltips to elements or components via the <b-tooltip> component or v-b-tooltip directive.

文档

首页
入门指南
组件
指令
图标
参考
代码演示

主题

主题和仪表盘

社区

GitHub
Discord 聊天
Twitter
Open Collective

发行说明

更新日志

设计和构建都充满了爱。由核心团队在贡献者的帮助下维护。

当前版本 v2.23.0。代码使用 MIT 许可证。文档使用 Nuxt.js 生成并自豪地托管在 Vercel 上。