**BootstrapVue**, with over 40 available plugins and more than 80 custom components, provides one of the most comprehensive implementations of the Bootstrap v4.3 component and grid system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup.
[](https://www.npmjs.com/package/bootstrap-vue)[](https://getbootstrap.com/docs)[](https://vuejs.org/)
[[git repo]]([https://github.com/bootstrap-vue/bootstrap-vue](https://github.com/bootstrap-vue/bootstrap-vue))
[[官方网站]](https://bootstrap-vue.js.org/)
[TOC]
## Get Started
* [Vue.js](https://vuejs.org/)`v2.6`is required,`v2.6.10`is recommended
* [Bootstrap](https://getbootstrap.com/)`v4.3`is required,`v4.3.1`is recommended
* [PortalVue](https://portal-vue.linusb.org/)`v2.1`is required by[Toasts](https://bootstrap-vue.js.org/docs/components/toast),`v2.1.6`is recommended
* [jQuery](https://jquery.com/)is**not**required
some good starting points would be:
* [Vue Guide](https://vuejs.org/v2/guide/)
* [Vue API](https://vuejs.org/v2/api/)
* [Bootstrap v4.3 documentation](https://getbootstrap.com/)
### Important HTML globals
Bootstrap v4 CSS employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Refer to the following sub-sections for details.
**HTML5 doctype**
Bootstrap requires the use of the`HTML5`doctype. Without it, you*may*see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
~~~
<!doctype html>
<html lang="en">
...
</html>
~~~
**Responsive meta tag**
Bootstrap is developed for mobile first, a strategy in which code is optimized for mobile devices first and then scales up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta** tag to your `<head>`.
~~~
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
~~~
**CSS box-sizing**
For more straightforward sizing in CSS, the global`box-sizing`value is switched from`content-box`to`border-box`. This ensures`padding`does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:
~~~
.selector-for-some-widget {
box-sizing: content-box;
}
~~~
With the above snippet, nested elements — including generated content via `::before` and `::after` — will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box-sizing/).
**Style reboot**
For improved cross-browser rendering, Bootstrap v4.3 uses [Reboot](https://getbootstrap.com/docs/4.3/content/reboot/) to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to commonHTMLelements.
### Using module bundlers
If you are using module bundlers like `webpack`, [rollup.js](https://rollupjs.org/), etc, you may prefer to directly include the package into your project. To get started, use `yarn` or `npm` to get the latest version of Vue.js, BootstrapVue and Bootstrap v4:
~~~
//With npm
npm install vue bootstrap-vue bootstrap
//With yarn
yarn add vue bootstrap-vue bootstrap
~~~
Then, register BootstrapVue plugin in your app entry point:
~~~
// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
~~~
And import Bootstrap and BootstrapVue`css`files:
~~~
// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
~~~
**Note**: Requires webpack configuration to load CSS/SCSS files ([official guide](https://webpack.js.org/guides/asset-management/#loading-css)).
### Aliasing Vue import
### Tree shaking with module bundlers
When using a module bundler you can optionally import only specific components groups (plugins), components and/or directives.
>[info] **Note:** Optimal tree shaking only works when webpack 4 is in [`production`](https://webpack.js.org/guides/tree-shaking) mode and javascript minification is enabled.
**Component groups and directives as Vue plugins**
You can import component groups and directives as Vue plugins by importing from the`bootstrap-vue`:
~~~
// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)
// This imports <b-modal> as well as the v-b-modal directive as a plugin:
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)
// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)
// This imports directive v-b-scrollspy as a plugin:
import { VBScrollspyPlugin } from 'bootstrap-vue'
Vue.use(VBScrollspyPlugin)
// This imports the dropdown and table plugins
import { DropdownPlugin, TablePlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)
Vue.use(TablePlugin)
~~~
When importing as plugins, all subcomponents and related directives are imported in most cases.
There are two additional helper plugins for providing the`$bvModal`and`$bvToast`injections (if you are not using the`ModalPlugin`or`ToastPlugin`plugins) which are available for import from`'bootstrap-vue'`:
* `BVModalPlugin` \- provides the injection `$bvModal` for generating [message boxes](https://bootstrap-vue.js.org/docs/components/modal#modal-message-boxes).
* `BVToastPlugin` \- provides the injection `$bvToast` for generating [on demand toasts](https://bootstrap-vue.js.org/docs/components/toast#toasts-on-demand).
When importing multiple component group and/or directive group plugins, include all imports in a single`import`statement for optimal tree shaking.
**Individual components and directives**
If you would like to only pull in a specific component or set of components, you can do this by directly importing those components.
To cherry pick a component/directive, start by importing it in the file where it is being used:
~~~
// Place all imports from 'bootstrap-vue' in a single import
// statement for optimal bundle sizes
import { BModal, VBModal } from 'bootstrap-vue'
~~~
Then add it to your component definition:
~~~
Vue.component('my-component', {
components: {
'b-modal': BModal
},
directives: {
// Note that Vue automatically prefixes directive names with `v-`
'b-modal': VBModal
}
// ...
})
~~~
Or register them globally:
~~~
Vue.component('b-modal', BModal)
// Note that Vue automatically prefixes directive names with `v-`
Vue.directive('b-modal', VBModal)
~~~
Vue allows for various component and directive name syntaxes here, so feel free to utilizekebab-casing(shown),camelCasing,PascalCasing, and/or object property shorthand (components only).
### Using BootstrapVue source code for smaller bundles
When using module bundlers, they will usually default to using the`esm/`modular build, which has been pre-transpiled by Babel for our [supported browsers](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/.browserslistrc).
You can override the use of the`esm/`build by aliasing`'bootstrap-vue'`to use the BootstrapVue source files, and whitelisting`node_modules/bootstrap-vue/src/*`for transpilation by your build process, in your module bundler config. This will allow you to transpile BootstrapVue for your target browsers/environments and potentially reduce bundle sizes (and will only include the babel helper utils once) at the expense of slightly longer build times.
**Example webpack.config.js for Babel transpilation:**
~~~
module.exports = {
resolve: {
alias: {
// Alias for using source of BootstrapVue
'bootstrap-vue$': 'bootstrap-vue/src/index.js'
}
},
module: {
rules: [
{
test: /\.js$/,
// Exclude transpiling `node_modules`, except `bootstrap-vue/src`
exclude: /node_modules\/(?!bootstrap-vue\/src\/)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
}
~~~
You may need to install`babel-core`,`babel-loader`, and`babel-preset-env`:
~~~
# If using npm
npm install babel-core babel-loader babel-preset-env --save-dev
# If using yarn
yarn add babel-core babel-loader babel-preset-env --dev
~~~
For more details see:
* [Webpack`resolve.alias`](https://webpack.js.org/configuration/resolve/)
* [Webpack`rule`](https://webpack.js.org/configuration/module/#rule)
* [rollup.js](https://rollupjs.org/)
* [Parcel](https://parceljs.org/)
## Component
[[官方网站]](https://bootstrap-vue.js.org/docs/components/)
## Directive
[[官方网站]](https://bootstrap-vue.js.org/docs/directives)
**Directives** are prefixed with`v-`to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM.
### Popover
### Scrollspay
### Tooltip
## Settings
BootstrapVue provides a few options for customizing component default values, and more.
BootstrapVue is pre-configured for the default Bootstrap v4.x configuration. It assumes the breakpoints are the standard breakpoint names of`xs`,`sm`,`md`,`lg`, and`xl`. Also various BootstrapVue components have props with default variants and text content.
BootstrapVue provides several methods for changing the default configuration.
Note that it is not possible to change the defaults when using BootstrapVue via a`<script>`tag.
### Default configuration
Default breakpoint names are stored in the`breakpoints`property, default form control size is stored under the`formControls`property, while component specific defaults are keyed by theirPascalCasename with the props ascamelCaseproperties. Only properties defined in the default configuration can be overridden. Attempting to set a config property that is not defined in the default will generate a console warning.
The`formControls`entry was introduced in `v2.0.0-rc.28`.
~~~ Javascript
{
"breakpoints": [
"xs",
"sm",
"md",
"lg",
"xl"
],
"formControls": {
"size": null
},
"BAlert": {
"dismissLabel": "Close",
"variant": "info"
},
"BBadge": {
"variant": "secondary"
},
"BButton": {
"size": null,
"variant": "secondary"
},
"BButtonClose": {
"textVariant": null,
"ariaLabel": "Close"
},
"BCardSubTitle": {
"subTitleTextVariant": "muted"
},
"BCarousel": {
"labelPrev": "Previous Slide",
"labelNext": "Next Slide",
"labelGotoSlide": "Goto Slide",
"labelIndicators": "Select a slide to display"
},
"BDropdown": {
"toggleText": "Toggle Dropdown",
"size": null,
"variant": "secondary",
"splitVariant": null
},
"BFormFile": {
"browseText": "Browse",
"placeholder": "No file chosen",
"dropPlaceholder": "Drop files here"
},
"BFormText": {
"textVariant": "muted"
},
"BImg": {
"blankColor": "transparent"
},
"BImgLazy": {
"blankColor": "transparent"
},
"BInputGroup": {
"size": null
},
"BJumbotron": {
"bgVariant": null,
"borderVariant": null,
"textVariant": null
},
"BListGroupItem": {
"variant": null
},
"BModal": {
"titleTag": "h5",
"size": "md",
"headerBgVariant": null,
"headerBorderVariant": null,
"headerTextVariant": null,
"headerCloseVariant": null,
"bodyBgVariant": null,
"bodyTextVariant": null,
"footerBgVariant": null,
"footerBorderVariant": null,
"footerTextVariant": null,
"cancelTitle": "Cancel",
"cancelVariant": "secondary",
"okTitle": "OK",
"okVariant": "primary",
"headerCloseLabel": "Close"
},
"BNavbar": {
"variant": null
},
"BNavbarToggle": {
"label": "Toggle navigation"
},
"BPagination": {
"size": null
},
"BPaginationNav": {
"size": null
},
"BPopover": {
"boundary": "scrollParent",
"boundaryPadding": 5,
"customClass": null,
"delay": 0,
"variant": null
},
"BProgress": {
"variant": null
},
"BProgressBar": {
"variant": null
},
"BSpinner": {
"variant": null
},
"BTable": {
"selectedVariant": "primary",
"headVariant": null,
"footVariant": null
},
"BToast": {
"toaster": "b-toaster-top-right",
"autoHideDelay": 5000,
"variant": null,
"toastClass": null,
"headerClass": null,
"bodyClass": null
},
"BToaster": {
"ariaLive": null,
"ariaAtomic": null,
"role": null
},
"BTooltip": {
"boundary": "scrollParent",
"boundaryPadding": 5,
"customClass": null,
"delay": 0,
"variant": null
}
}
~~~
### Setting new configuration values
ENHANCED in `v2.0.0-rc.22`
When you `Vue.use(BootstrapVue)`, you can optionally pass a configuration object which specifies new values to replace the default values. For example if you wish to define new breakpoint names (which will generate appropriate properties on components such as `<b-col>` and `<b-form-group>` ), so that the new breakpoints are `['aa', 'bb', 'cc', 'dd']` then `<b-col>` will now have `bb`, `cc`, and `dd` props instead of `sm`,`md`,`lg` and `xl` props (Similar for the `label-cols-{breakpoint}` and `label-align-{breakpoint}` props on `<b-form-group>`):
~~~
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue, {
breakpoints: [`xs`, 'sm', 'md', 'lg', 'xl', 'xxl']
})
~~~
Or if changing the default variants for`<b-button>`and`<b-alert>`:
~~~
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue, {
BAlert: { variant: 'danger' },
BButton: { variant: 'primary' }
})
~~~
The values provided as the config option to`Vue.use`will be merged with the default values.
**Note:**When defining custom breakpoints, keep the names short (2 to 3 characters). At least two breakpoint names must be defined. The breakpoint names**must**match the breakpoint names defined in your custom Bootstrap SCSS. Breakpoint names must not conflict with non-breakpoint prop names used on various components (i.e. avoid`to`,`col`, etc)
## Vue CLI 3
Create a new project in the directory`my-project`:
~~~
npx @vue/cli create my-project
~~~
Enter the`my-project`directory and install`bootstrap-vue`:
~~~
npm install bootstrap-vue
~~~
Under the hood, Vue CLI uses webpack, so we can register the BootstrapVue plugin as with the webpack instructions.
~~~
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
~~~
For additional configuration for Vue CLI 3 for using project relative paths for image src props on various BootstrapVue components, refer to the Vue CLI 3 section of the[Image Src Resolving](https://bootstrap-vue.js.org/docs/reference/images#vue-cli-3-support)reference page.
- WebAPP
- Linux Command
- 入门
- 处理文件
- 查找文件单词
- 环境
- 联网
- Linux
- Linux目录配置标准：FHS
- Linux文件与目录管理
- Linux账号管理与ACL权限设置
- Linux系统资源查看
- 软件包管理
- Bash
- Daemon/Systemd
- ftp
- Apache
- MySQL
- Command
- Replication
- mysqld
- remote access
- remark
- 限制
- PHP
- String
- Array
- Function
- Class
- File
- JAVA
- Protocals
- http
- mqtt
- IDE
- phpDesigner
- eclipse
- vscode
- Notepad++
- WebAPI
- Javasript
- DOM
- BOM
- Event
- Class
- Module
- Ajax
- Fetch
- Promise
- async/await
- Statements and declarations
- Function
- Framwork
- jQurey
- Types
- Promise
- BootStrap
- v4
- ThinkPHP5
- install
- 定时任务
- CodeIgniter
- React.js
- node.js
- npm
- npm-commands
- npm-folder
- package.json
- Docker and private modules
- module
- webpack.js
- install
- configuration
- package.json
- entry
- modules
- plugins
- Code Splitting
- loaders
- libs
- API
- webpack-cli
- Vue.js
- install
- Compile
- VueAPI
- vuex
- vue-router
- vue-devtools
- vue-cli
- vue-loader
- VDOM
- vue-instance
- components
- template
- Single-File Components
- props
- data
- methods
- computed
- watch
- Event-handling
- Render Func
- remark
- 案例学习
- bootstrap-vue
- modal
- fontAwesome
- Hosting Font Awesome Yourself
- using with jquery
- using with Vue.js
- HTML
- CSS
- plugins
- Chart.js
- D3.js
- phpSpreadSheet
- Guzzle
- Cmder
- Git
- git命令
- git流程
- Postman
- Markdown
- Regular Expressions
- PowerDesigner
- 附录1-学习资源