入门 · BootstrapVue

全局变量概要

为了满足跨浏览器支持和最大化符合HTML5规范以及w3c标准，Bootstrap v4 CSS使用了一系列重要的全局样式和设置，使用时需要注意，下面各小节将详细讲述。

HTML5 doctype规范

Bootstrap 是基于 HTML5 规范的，u 脱离它则不能获得完整有效的样式呈与功能呈现，并带来不可预期的困扰，下面是一个标准的HTML5网页头部规范（译者将原英文头部lang标签改为中文，以符合中文读者）：

<!doctype html > < html lang = "zh-CN" > </ html >

响应式meta标记

Bootstrap 强调移动优先策略，所以需要针对设备进行meta头部定义，并支持CSS媒体查询，为了保证所有设备都能正确渲染、满足移动触屏幕的缩放要求，请在 网页头部 <head> 区增加相关定义，如下所示：

< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >

CSS box-sizing属性

为了支持在CSS中能调整大小，我们将 box-sizing 中的 content-box 属性替换为 border-box ，这样可以确保填充 padding 不会影响到元素的最终宽度计算，但会导致某些第三方软件（如 Google Maps 、 Google Custom Search Engine）出现问题。

少数情况下你需要覆盖它，请使用下面的CSS指导操作：

.selector-for-some-widget { box-sizing : content-box;

使用上面的代码版断，嵌套元素，（包括通过 ::before 、 ::after — 都能接受继承，从而指定 box-sizing 元素在 .selector-for-some-widget 类上的表现。

你可以通过css-tricks网站查看 box model and sizing属性知识。

为改善和统一在各个浏览中的表现， Bootstrap v4.4 使用 Reboot样式重置（即根元素重置）来纠正各个浏览器和设备间的差异，同时为常见的 HTML 元素提供更多的私有扩展和重置规范。

基于模块化

你可以使用 Webpack 、 Parcel 、 rollup.js 等方法引入到项目中，通过 yarn 或者 npm 来获取安装Vue.js、 BootstrapVue 和 Bootstrap v4:

# With npm npm install vue bootstrap-vue bootstrap # With yarn yarn add vue bootstrap-vue bootstrap

然后在你的应用程序入口点注BootstrapVue：

// app.js import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin)

然后引入 Bootstrap 和BootstrapVue的 css 文件：

// app.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'

或者引入 Bootstrap 和 BootstrapVue的 scss 文件用于驱动SCSS混合:

// custom.scss @import 'node_modules/bootstrap/scss/bootstrap' ; @import 'node_modules/bootstrap-vue/src/index.scss' ;

最后在程序的入口文件引入 custom.scss ：

// app.js import './custom.scss'

在包含之前，请务必使用 @import 定义你的变量值，同时包含 Bootstrap SCSS ( bootstrap.scss )、BootstrapVue SCSS ( bootstrap-vue.scss ) 以确保正确的变量。

将所有的SCSS @import 在一个SCSS 文件中，然后将该单文件引入（这是scss的基本方法，默认情况下，单个SCSSS导入项目，不会在文件之间共享变量和函数（从而避免变量与函数冲突）。

当从scss文件导入时，Webpack和Parcel支持在scss模块前面加上波浪号（〜）：

// Webpack example @import '~bootstrap' ; @import '~bootstrap-vue' ; // Parcel example @import '~bootstrap/scss/bootstrap' ; @import '~bootstrap-vue/src/index.scss' ;

有关如何配置装载以及如何解决模块的更多详细信息，敬请查阅下方模块捆绑文档：

Webpack configuration to load CSS files ( 官方指南 )

Webpack Loader for SASS/SCSS files ( 官方指南 )

Parcel CSS ( 官方指南 )

Parcel SCSS ( 官方指南 )

有关BoostrapVue主题引导程序的信息，请查看主题参考部分。

在 Vue中灵活引用

BootstrapVue 和 PortalVue 需要访问 Vue 全局类实现引用 (通过 import Vue from 'vue' 来实现)。

如果您使用的是特定版本的Vue（例如，仅运行时与VS编译器运行），则需要在捆绑程序配置中为“ vue”设置别名，以确保您的项目，BootstrapVue和PortalVue都在使用相同版本的Vue。如果看到


    "$attr and $listeners is readonly"

、


    "Multiple instances of Vue detected"

等错误时，您则需要设置一个别名。

例子: Vue 在 webpack.config.js中的别名处置

module .exports = { // ... resolve : { alias : { // If using the runtime only build vue$ : 'vue/dist/vue.runtime.esm.js' // 'vue/dist/vue.runtime.common.js' for webpack 1 // Or if using full build of Vue (runtime + compiler) // vue$: 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

提示: 如果您的项目具有多个webpack配置文件 (例如 webpack.config.js 、 webpack.renderer.config.js 、 webpack.vendor.config.js 、 webpack.server.config.js 、 webpack.client.config.js 等等)，则需要在这些配置中中设置适当的别名。

点击浏览 Vue.js 中关于 webpack 、 rollup.js 、 Parcel 等配置的详细文档。

使用模块捆绑时，可以选择仅导入特定的组件（插件）、指令，注意这仅迁于JavaScript代码，不适用于CSS/SCSS.

提示: 仅当 webpack 4 在 production 模式并助启用了最小化设置，才有效。

以嵌套组件和指令方式作用于vue插件

Y您可以通过从导入将组件组和指令作为Vue插件导入 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. i.e.
When importing <b-nav>, all the <nav-*> sub components are also included, as well all dropdown
sub components. Component shorthand aliases (if any) are also included in the plugin. Refer to the
component and directive documentation for details.
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.
BVToastPlugin - provides the injection $bvToast for generating on demand toasts.
When importing multiple component group and/or directive group plugins, include all imports in a
single import statement for optimal tree shaking.
        各个组件和指令

        如果您只想引入一个特定的组件或一组组件，则可以通过直接导入这些组件来实现。
        要挑选一个组件/指令，请先将其导入使用文件中：
        // Place all imports from 'bootstrap-vue' in a single import
        // statement for optimal bundle sizes
        import { BModal, VBModal } from 'bootstrap-vue'
        然后将其添加到您的组件定义中：
        Vue.component('my-component', {
          components: {
            'b-modal': BModal
          directives: {
            // Note that Vue automatically prefixes directive names with `v-`
            'b-modal': VBModal
          // ...
        或在全局注册:
        Vue.component('b-modal', BModal)
        // Note that Vue automatically prefixes directive names with `v-`
        Vue.directive('b-modal', VBModal)
        Vue在这里允许使用各种组件和指令名称语法，因此可以随意使用 kebab-casing（如图所示），camelCasing，PascalCasing 和/或 object 属性速记（仅限组件）。
        将BootstrapVue源代码用于较小的捆绑软件

        使用模块捆绑程序时，它们通常将默认使用 esm/ 模块化构建，该构建已由 Babel 预编译为  supported browsers (支持的浏览器) 。
        您可以通过别名化'bootstrap-vue'以使用 BootstrapVue 源文件来覆盖 esm/ build 的使用，并在模块捆绑程序配置中将 node_modules/bootstrap-vue/src/* 列入白名单以在构建过程中进行编译。 允许您为目标浏览器/环境转换BootstrapVue，并可能减小捆绑包的大小（并且仅包含babel helper utils一次），但会花费更长的构建时间。
        用于 Babel 移植的示例 webpack.config.js：
        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']
        您可能需要安装 babel-core, babel-loader ,和 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
        有关更多详细信息，请参见：
        Webpack resolve.alias
        Webpack rule
        rollup.js
        Parcel
        Nuxt.js模块

        BootstrapVue 提供了一个 Nuxt.js 模块，可以轻松地将 BootstrapVue（或BootstrapVue的一部分）导入到Nuxt.js应用程序中。
        Nuxt.js入门

        建议使用 Nuxt.js 2.11.0 版（或更高版本）
        安装依赖:
        # With npm
        npm install bootstrap-vue
        # With yarn
        yarn add bootstrap-vue
        将 bootstrap-vue/nuxt 添加到 nuxt.config.js 文件的 modules 部分。
        这将包括 bootstrap.css 和 bootstrap-vue.css 默认的预编译CSS。
        module.exports = {
          modules: ['bootstrap-vue/nuxt']
        请注意，这 不会 安装 Icons 组件。要查看如何通过 Nuxt.js 模块包括图标，请参阅下面的 Icons section 部分。
        使用自定义 Bootstrap SCSS

        如果使用自定义的 Bootstrap SCSS，则可以通过将以下选项设置为 false 来禁用自动包含 Bootstrap 和 BootstrapVue 预编译的CSS文件。
        module.exports = {
          modules: ['bootstrap-vue/nuxt'],
          bootstrapVue: {
            bootstrapCSS: false, // Or `css: false`
            bootstrapVueCSS: false // Or `bvCSS: false`
        BootstrapVue 的自定义 SCSS 依赖于 Bootstrap SCSS 变量和 mixins，以及您可能设置的任何变量覆盖。您可以在项目的自定义 SCSS 文件中包括 Bootstrap 和 BootstrapVue SCSS：
        // custom.scss
        // Custom Bootstrap variable overrides go first
        $grid-breakpoints: (
          xs: 0,
          sm: 480px,
          md: 640px,
          lg: 992px,
          xl: 1300px
        $enable-rounded: false;
        // Then include the following
        @import 'bootstrap/scss/bootstrap.scss';
        @import 'bootstrap-vue/src/index.scss';
        // And define any of your custom or additional CSS/SCSS here,
        // or via an @import
        在应用程序的主入口中，包括 单个 自定义SCSS文件（使用 sass-loader 时）：
        // app.js
        import 'custom.scss'
         使用 Nuxt.js 的 transformAssetUrls 

        BootstrapVue Nuxt 插件模块将为您自动添加特定于 BootstrapVue 的 transformAssetUrls 图像 src 属性配置。  image  prop configuration for you.
        用 Nuxt.js 握手

        如果由于只使用可用的 BootstrapVue 插件的一部分而希望减小生产包的大小，则可以配置要全局安装在 Nuxt.js 项目中的 BootstrapVue componentPlugins 或 directivePlugins 的列表。JavaScript 代码，而不是 CSS / SCSS。
        module.exports = {
          modules: ['bootstrap-vue/nuxt'],
          bootstrapVue: {
            componentPlugins: [
              'LayoutPlugin',
              'FormPlugin',
              'FormCheckboxPlugin',
              'FormInputPlugin',
              'FormRadioPlugin',
              'ToastPlugin',
              'ModalPlugin'
            directivePlugins: ['VBPopoverPlugin', 'VBTooltipPlugin', 'VBScrollspyPlugin']
        在 componentPlugins 选项中提供了两个附加的帮助程序插件，用于提供 $bvModal 和 $bvToast 注入（如果您未使用 ModalPlugin 或 ToastPlugin 插件）：
        BVModalPlugin - 提供注入 $bvModal 以生成 message boxes【消息框】。
        BVToastPlugin - 提供注入 $bvToast 以生成 on demand toasts【按需吐司】。
        您还可以通过配置要全局安装在 Nuxt.js 项目中的 BootstrapVue 组件或指令的列表，有选择地导入单个 components【组件】和/或 directives【指令】。
        module.exports = {
          modules: ['bootstrap-vue/nuxt'],
          bootstrapVue: {
            components: ['BContainer', 'BRow', 'BCol', 'BFormInput', 'BButton', 'BTable', 'BModal'],
            directives: ['VBModal', 'VBPopover'




    
, 'VBTooltip', 'VBScrollspy']
        随意将插件导入与单个组件和指令导入混合和匹配。
        请参阅每个 component【组件】和 directive【指令】文档底部的参考部分，以获取有关可用插件名称（以及每个插件中包含哪些组件和指令）以及组件和/或指令导入名称的详细信息。
        请注意，导入单个组件时，任何组件别名都将 不可用。
        注意：只有当您的Nuxt.js应用程序处于 production【生产】模式时，最佳摇晃树才能发挥作用。在 not in production 非生产模式（即 dev【开发】模式）下，您可能会注意到捆绑包尺寸更大。
        如果要将单个 BootstrapVue 组件导入到 特定 页面 和/或 Nuxt 应用程序的组件中，则可能要绕过 Nuxt.js 模块，而是遵循上述 module bundlers 【模块捆绑器】和 Tree shaking with module bundlers【用模块捆绑器一起进行的握手】。
        另外，您可能只想在 Nuxt.js 模块配置中导入一些插件（例如 LayoutPlugin ），然后在需要的页面中导入其他组件或插件。
        Icons 图标

        使用 Nuxt.js 模块时，icons 插件 不会 自动安装。您必须显式启用 IconsPlugin 或指定要导入的图标组件。
        所有 icons 图标：
        module.exports = {
          modules: ['bootstrap-vue/nuxt'],
          bootstrapVue: {
            icons: true // Install the IconsPlugin (in addition to BootStrapVue plugin
        具体 icons 图标：
        module.exports = {
          modules: ['bootstrap-vue/nuxt'],
          bootstrapVue: {
            // Add the desired icon components to the `components` array
            components: ['BIcon', 'BIconAlertFill', 'BIconCalendar', 'BIconGears']
        Icons 图标插件：
        module.exports = {
          modules: ['bootstrap-vue/nuxt'],
          bootstrapVue: {
            // Add the icon plugin to the `componentsPlugins` array
            componentPlugins: ['IconsPlugin']
        通过 Nuxt.js 传递自定义 BootstrapVue 配置

        如果您需要传递自定义的 BootstrapVue 配置 ，可以通过在 nuxt.config.js 中设置 config 属性来实现：
        module.exports = {
          modules: ['bootstrap-vue/nuxt'],
          bootstrapVue: {
            config: {
              // Custom config options here
        对 Nuxt.js 使用 BootstrapVue 的预编译版本

        Nuxt.js 模块使用 BootstrapVue 的预编译版本来加快开发构建，并使用BootstrapVue的源（ src/ ）来获得更高质量和更小批量生产。
        您可以使用 usePretranspiled 选项覆盖此选项。设置为 true 总是使用预编译版本，而将其设置为 false 则始终使用 src/ 默认情况下，usePretranspiled 仅在开发模式下启用。默认值是性能最佳的。
        Vue CLI 3

        与 V2 不同，Vue CLI 3不使用模板。
        在目录 my-project 中创建一个新项目：
        npx @vue/cli create my-project
        输入 my-project 目录并安装 bootstrap-vue ：
        npm install bootstrap-vue
        在后台，Vue CLI 使用 webpack，因此我们可以按照 webpack 的说明注册 BootstrapVue 插件。
        import Vue from 'vue'
        import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
        import 'bootstrap/dist/css/bootstrap.css'
        import 'bootstrap-vue/dist/bootstrap-vue.css'
        Vue.use(BootstrapVue)
        Vue.use(BootstrapVueIcons)
        有关在各种 BootstrapVue 组件上将项目相对路径用于image src 属性的 Vue CLI 3的其他配置，请参阅 Image Src Resolving 参考页面的 Vue CLI 3部分。
        Vue CLI 3 插件

        或者，您可以使用 Bootstrap-Vue Vue CLI 3 插件 来帮助您配置应用程序。
        vue create my-app
        cd my-app
        vue add bootstrap-vue
        这将创建一个具有基本 BootstrapVue 设置的新应用，以启动您的项目。
        将来，该插件将提供更多高级配置和模板的选项。
        对于图标支持，您可能需要编辑生成的配置文件。
        如果未使用模块捆绑程序或编译过程，则可以在 HTML <head> 部分中添加 Bootstrap 和 BootstrapVue CSS URL，然后添加所需的 JavaScript 文件。
        在支持较旧的浏览器时（请参见下面的 Browser Support【浏览器支持】），在加载 Vue 和 BootstrapVue JavaScript 文件之前，您需要包括一个 polyfill 以处理现代 JavaScript 功能。
        <!-- Add this to <head> -->
        <!-- Load required Bootstrap and BootstrapVue CSS -->
        <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
        <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
        <!-- Load polyfills to support older browsers -->
        <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
        <!-- Load Vue followed by BootstrapVue -->
        <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
        <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
        <!-- Load the following for BootstrapVueIcons support -->
        <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
        为您的构建环境/打包器选择最佳变体有助于减小捆绑包的大小。如果捆绑包支持 esm 模块，它将自动优先于 commonjs 。
        请注意，UMD（浏览器）变体不包含BootstrapVue icons 图标支持，上面列出的所有其他变体 都包含  BootstrapVueIcons（IconsPlugin）插件（请注意，Icons usage【图标插件】 不会 自动安装，必须通过 Vue.use() 进行显式安装。图标使用情况部分，以了解更多详细信息。
        仅图标模块：
        webpack 1 / ...
        dist/bootstrap-vue-icons.common.js or dist/bootstrap-vue-icons.common.min.js
        Browser
        dist/bootstrap-vue-icons.js or dist/bootstrap-vue-icons.min.js
        ESM 模块的构建和 ESM 捆绑包（单个文件）是 tree-shakeable【可握手】的，但是 与 ESM 捆绑包相比，使用 ESM 模块时，最终捆绑包的尺寸会更小。
        上面列出的所有构建变量均已针对 BootstrapVue 支持的 浏览器 进行了预编译，但是，如果仅针对现代浏览器，则可能要从 src/index.js 导入 BootstrapVue（通过将 bootstrap-vue 别名为 bootstrap-vue/src/index.js ）并将 bootstrap-vue/src 列入白名单以通过您自己的项目进行移植，这有可能减小最终项目包的大小。有关更多详细信息，请参见上面的 将BootstrapVue源代码用于较小的捆绑软件 。
        BootstrapVue 依赖于 Popper.js（用于 Tooltip ，Popover 和 Dropdown 定位），PortalVue（用于吐司）和 vue-functional-data-merge（由我们的功能组件使用）这三个依赖项都包含在 BootstrapVue UMD 捆绑包中，而 仅 UMD（浏览器）图标包包含 vue-functional-data-merge 。
        已使用 Bootstrap 迁移项目

        如果您已经在使用 Bootstrap v4，则可能需要对项目进行一些调整：
        从页面脚本或构建管道中删除 bootstrap.js 文件  file from your page scripts or build pipeline
        如果 Bootstrap 是唯一依赖 jQuery 的东西，则可以安全地删除它-BootstrapVue 不依赖 jQuery
        将您的本机 Bootstrap HTML 标记转换为简化的 BootstrapVue 自定义组件标记 
        首先仅转换需要 Bootstrap javascript 的交互式控件。
        浏览器支持

        BootstrapVue与Bootstrap v4.4 CSS / SCSS一起使用。 有关Bootstrap v4当前支持的浏览器的更多信息，请参见 Browsers and devices【浏览器和设备】。
        BootstrapVue 用 Vue.js编写！因此，支持哪种浏览器取决于您的项目和捆绑软件。
        BootstrapVue使用以下功能和API：
        ES6 (即 Array.from(), Array.isArray(), Object.assign(), Object.is(), 等)
        Promise
        MutationObserver
        IntersectionObserver (可选的)
        如果要支持较旧的 IE ，Android 和 iOS 设备 Web 浏览器，则可能要使用 core-js 和 intersection-observer【交集观察器】：
        npm install core-js regenerator-runtime intersection-observer
        然后将 polyfills 导入应用主入口：
        import 'core-js/stable'
        import 'regenerator-runtime/runtime'
        import 'intersection-observer' // Optional
        import Vue from 'vue'
        import BootstrapVue from 'bootstrap-vue'
        如果使用已弃用的 @babel/polyfill：
        npm install @babel/polyfill intersection-observer
        然后将 polyfills 导入应用主入口：
        import '@babel/polyfill'
        import 'intersection-observer' // Optional
        import Vue from 'vue'
        import BootstrapVue from 'bootstrap-vue'
        或者，使用 Polyfill.io 通过 HTML <head> 部分中的 <script> 标记动态提供浏览器特定的polyfill。 有关示例，请参见上面的 Browser【浏览器	】部分。
        BootstrapVue 提供了其他帮助程序文件，可在流行的 IDE 编辑器中自动完成。
        VS Code + Vetur

        如果您使用 VS Code 作为文本编辑器，则BootstrapVue具有Intellisense自动补全功能，可通过 dist/vetur-tags.json 和 dist/vetur-attributes.json 文件使用组件属性和指令。
        JetBrains WebStorm (兼容)

        对于 WebStorm 编辑器（或与Web类型兼容），BootstrapVue提供文件 dist/web-types.json 用于组件属性和指令自动完成。