bootstrap-vue组件呈现为注释
bootstrap-vue是一个基于Bootstrap框架的Vue.js组件库，它提供了一系列易于使用且高度可定制的UI组件，可以帮助开发者快速构建现代化的Web应用程序。
bootstrap-vue的主要特点包括：
- 基于Vue.js：bootstrap-vue完全兼容Vue.js框架，可以与Vue.js无缝集成，提供了一套丰富的Vue组件。
- 响应式布局：bootstrap-vue的组件都是响应式的，可以根据不同的屏幕尺寸自动调整布局，适配各种设备。
- 高度可定制：bootstrap-vue提供了丰富的配置选项和样式变量，可以根据项目需求进行灵活的定制。
- 组件丰富：bootstrap-vue包含了大量常用的UI组件，如按钮、表单、导航栏、模态框、轮播图等，可以满足各种常见的页面需求。
- 社区活跃：bootstrap-vue拥有庞大的开发者社区，提供了大量的文档、示例和支持，可以帮助开发者快速上手和解决问题。
bootstrap-vue的应用场景非常广泛，适用于各种类型的Web应用程序开发，特别是那些需要快速构建美观、响应式的界面的项目。
以下是一些推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：腾讯云提供的弹性计算服务，可根据实际需求弹性调整计算资源。产品介绍链接
- 云数据库MySQL版（CDB）：腾讯云提供的高性能、可扩展的关系型数据库服务。产品介绍链接
- 云存储（COS）：腾讯云提供的安全可靠、高扩展性的对象存储服务。产品介绍链接
- 人工智能平台（AI Lab）：腾讯云提供的一站式人工智能开发平台，包括图像识别、语音识别、自然语言处理等功能。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据项目需求和实际情况进行评估。
相关·内容
我创建了两个Vuejs项目。第一个main.js看起来是这样的：
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.config.productionTip = false
new Vue
浏览 0提问于2019-02-01得票数 2
回答已采纳
我想要大大减少标签噪音和减少长标签名称的短名称在引导-vue。这就是我在main.js中vue-cli生成的项目中所做的：
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import bformGroup from 'bootstrap-vue/es/components/form-group/form-group'
import bformInput from 'bootstrap-vue/es/compon
浏览 0提问于2018-03-23得票数 0
回答已采纳
使用bootstrap时，当我需要根据设备更改标签/输入的布局时，我使用next代码：
<fieldset class="bordered text-muted p-0 m-0 mb-4">
<legend class="bordered">Filters</legend>
<dl class="block_2columns_md m-0 p-2">
<dt class="key_values_rows_label_13">
浏览 15提问于2020-02-13得票数 0
回答已采纳
我正在开发一个chrome扩展，并在我的Vue文件上使用Bootstrap-Vue。目前，我将bootstrap/bootstrap-vue导入到我的js文件中，但这会导致样式在全局级别上发生。理想情况下，我希望有一种方法使bootstrap只作用于我插入的文件。有没有办法在Vue文件的部分做到这一点？ //在.js文件中 import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'; //我在Vue文件中尝试过，但没有显示任何效果 <style scoped sr
浏览 25提问于2019-05-24得票数 3
根据bootstrap-vue文档，创建的按钮如下所示：
<b-button variant="success" >Button</b-button>
但是标准的bootstrap语法也以相同的方式工作和呈现：
<button type="button" class="btn btn-success">Button</button>
在我看来，第二种方法更好，因为没有bootstrap-vue特定的语法，因此如果需要的话，以后更容易更改，那么，有什么理由不使用'‘而不使用'’呢？
浏览 16提问于2021-02-16得票数 0
回答已采纳
1回答
我只想在需要的时候动态导入单个引导组件。
Bellow语法实际上可以做到这一点，但它确实导入了所有组件。
因此，最终的模块包是1.4MB (完整的引导库)。
BNavbar: () => import('bootstrap-vue').then(module => module.BNavbar),
如何将其更改为只导入navbar，使其等效于
import { BNavbarPlugin } from 'bootstrap-vue'
Vue.use(BNavbarPlugin)
浏览 8提问于2022-02-15得票数 0
第一次尝试使用，但在编译资产时遇到了问题。当我运行npm run watch时，我得到了一个错误，如下所示。
Module parse failed: C:\projects\portfolio\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
|
浏览 0提问于2017-08-17得票数 0
1回答
在此处输入图像描述 未捕获原型:无法读取模块../TypeError处未定义的eval (config.js?228e:6)的属性“prototype” _ modules/bootstrap-vue/esm/utils/config.js (chunk-vendors.js:6778) webpack _ 要求 (app.js:849)位于fn (app.js:151)，位于eval (props.js?cf75:1)，位于模块../node _ modules/bootstrap-vue/esm/utils/pros.js (chunk-vendors.js:7054) webpack
浏览 88提问于2021-03-02得票数 0
回答已采纳
我正在探索延迟加载功能，并尝试将其用于Bootstrap-Vue组件，但它不起作用。 如果我“正常”导入b-card，它将被正确渲染： import { BCard } from 'bootstrap-vue';
export default {
components: {
BCard
}
}; 但是当我尝试使用“lazy-load”语法时，它不起作用： export default {
components: {
BCard: () => import('bootstrap-vue'
浏览 16提问于2020-04-19得票数 2
回答已采纳
有没有办法在bootstrap-vue中从另一个模式打开一个新模式？
<div>
<b-btn v-b-modal.modal1>Launch demo modal</b-btn>
<b-modal id="modal1" title="Bootstrap-Vue">
<b-btn v-b-modal.modal2>Launch another modal</b-btn>
<b-modal id="modal2" title="Boots
浏览 5提问于2018-10-12得票数 1
2回答
我正在查看一个旧的VB6 ActiveX .dll，它有无人参与的执行，并保留在内存检查框中，呈灰色显示。我发现，当表单附加到项目时，就会发生这种情况。我删除了表单，但框仍然是灰色的。
我必须做什么才能使它们可点击？
浏览 7提问于2011-04-19得票数 0
回答已采纳
使用bootstrap-vue，我有一个使用b-tab和它的其他一些组件的工作示例。
但是，在一个页面(.vue)上，当我尝试将块包装在标记中时，页面总是将该卡片及其内容呈现为“未定义”，我使用的是中的示例。
如果没有V卡，我会看到：
有了它，我明白了：
代码从字面上遵循上面页面中引用的示例，在我的main.ts中，我有以下内容
import {Card} from 'bootstrap-vue/es/components'
import { Button } from 'bootstrap-vue/es/components';
impor
浏览 0提问于2018-05-02得票数 4
Webpack包分析器显示，引导-vue软件包的图标大小为535 in。
我不想在一个项目中使用它们，所以我一直试图用webpack的IgnorePlugin来排除这个包。
根据中的示例，我尝试过这样写：
new webpack.IgnorePlugin({
resourceRegExp: /^icons(.*)$/,
contextRegExp: /^bootstrap-vue(.*)$/
})
但是它没有t work. The only thing I was able to reproduce, is to completely exclude b
浏览 1提问于2020-07-13得票数 3
回答已采纳
我在Vue Js应用程序中使用FontAwese5图标时出错：
误差
找不到一个或多个图标
这是我的package.json依赖关系：
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.9",
"@fortawesome/free-solid-svg-icons": "^5.6.0",
"@fortawesome/vue-fontawesome": "^0.1.3",
"bootstrap-vue"
浏览 0提问于2018-12-12得票数 1
如果使用UI框架(如Bootstrap、ElementUI或Vuetify等)在我们的Vuejs应用程序中，可以从node_modeules (或应用程序入口点)中导入整个UI框架组件&样式表，或者根据需要导入特定ui组件(特别是Vue文件/组件)。
这两种方法的演示如下：
为景物1
在App.vue中
import BootstrapVue from 'bootstrap-vue'
风景2
在任何特定的.vue文件中
import {BContainer} from 'bootstrap-vue'
因此，在第一种情况下，当UI框架中的所有组件都在为每次
浏览 4提问于2020-05-09得票数 4
回答已采纳
我对bootstrap vue .I是个新手，我的整个应用程序都使用了bootstrap-vue 1.4，我的表使用了b-table，但表头在滚动时也会移动，我想让它们变得粘滞或不可滚动。我发现在新的bootstrap-vue 2.0中有一个粘滞标题选项，但我不能使用它，因为我可能会破坏我的应用程序。有什么方法可以使用bootstrap-vue 1.4使表头变得粘滞吗？
浏览 67提问于2019-09-05得票数 0
回答已采纳
我如何在Laravel上使用bootstrap-vue，使用Laravel 8，Jetstream和InertiaJS？
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue
浏览 1提问于2021-03-22得票数 2
2回答
我在nuxt.js中使用Vuetify。如何仅在仪表板布局中使用？在nuxt.config.js中
modules: [
//['nuxt-leaflet', { /* module options */}],
'bootstrap-vue/nuxt',
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxtjs/auth',
'@nuxtjs/toast',
[&
浏览 12提问于2020-12-05得票数 3
回答已采纳
如何添加TextToSpeech.talk("hi")；何时选择/按下按钮。
TextToSpeech.talk("Hello Beautiful World!");
当用户单击按钮时，应生成声音。
TTS Github
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
impo
浏览 0提问于2018-12-10得票数 0
回答已采纳
我知道Javalin支持Vue，我使用它没有任何问题。它很容易设置，我只需要调用config.enableWebjars()，并且使用Vue非常开箱即用。但是，我想使用其他工具，这些工具并没有与Javalin深度集成。也就是说，我想将bootstrap-vue用于高级组件。通常，当我通过npm和手动配置使用它时，向Vue添加支持也很简单：
import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
浏览 2提问于2020-10-11得票数 0
我正在尝试在我的(新鲜)Vue项目中包含Bootstrap。我使用过Bootstrap 3插件(vue add bootstrap-vue).使用npm run serve启动应用程序会导致以下错误：
Failed to compile.
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!.
浏览 2提问于2021-09-11得票数 0
回答已采纳
1回答
在我的app.js上，在laravel上，我导入了一个库，它使用Bootstra4
app.js
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css' //Bootstrap 4.3.1
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
const files = require.context('./', true, /\.vue
浏览 0提问于2019-05-27得票数 1
3回答
我想创建一个带有自定义数据呈现(模板)的bootstrap-vue表的父组件。
现在，这看起来像这样：
<b-table
:items="result"
:fields="fields"
:current-page="currentPage"
:per-page="perPage">
<template slot="Index" slot-scope="data">
{{ data.index + 1 }}
浏览 2提问于2018-06-26得票数 1
1回答
我正在尝试使用嵌套的单个文件组件，但它不起作用。这是我的main.js文件：
import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"
Vue.use(BootstrapVue);
new Vue({
e
浏览 1提问于2018-03-04得票数 3
回答已采纳
Bootstrap-vue 返回 与格式相同 ..。我需要它的返回值为 '，但我找不到任何方法来改变它。 有没有办法将返回值格式改为 什么？如果有，请帮忙。
浏览 37提问于2021-03-01得票数 2
回答已采纳
3回答
我试图将bootstrap 4 (bootstrap-vue)与Nuxt关联起来。
虽然我添加了style-resources-module，但在页面或组件中使用混入和变量有困难。
下面是nuxt.config.js的摘录
/*
** Global CSS
*/
css: ["~/scss/vars.scss"],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vu
浏览 0提问于2019-08-23得票数 5
回答已采纳
1回答
我想使用引导-vue中的工具提示。当我加上
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
要获得工具提示样式，则我的应用程序的整个视图正在发生变化。是否可以只将css导入我的工具提示？
浏览 0提问于2018-10-18得票数 7
回答已采纳
链接到我的网站： https://inspiring-curran-a31177.netlify.com/ 它使用的是Gridsome，Vue的静态站点生成器。 当你在手机上点击Bootstrap Hamburger菜单时，它不会打开。 我已经按照Gridsome文档中的说明安装了BootstrapVue：https://gridsome.org/docs/assets-css/ 控制台中没有Javascript错误。 /src/main.js中的代码： // This is the main.js file. Import global CSS and scripts here.
// T
浏览 69提问于2019-03-24得票数 1
我用的是vue.js、webpack、npm和jQuery。现在我想在我的项目中包含框架bootstrap-vue。我通过npm遵循了https://bootstrap-vue.js.org/docs的指南，并包含了bootstrap-vue。在启动npm的构建过程时，我收到了太多使用babel运行时的错误，比如： ERROR in ./node_modules/bootstrap-vue/es/utils/popover.class.js
Module not found: Error: Can't resolve '@babel/runtime/helpers/typeo
浏览 26提问于2019-02-18得票数 3
回答已采纳
我们在我们的项目中使用引导-Vue，但是我们有一些文件扩展了基本的引导组件，例如<form-group>，而不是Bootstrap-vue提供的<b-form-group>。
我希望确保用户只使用<form-group>元素，并且我不想通过读取PRs来查看他们是否意外地忘记了。是否可以创建ES规则，标记为用户应该使用<form-group>而不是<b-form-group>？
提前感谢！
浏览 3提问于2022-05-19得票数 0
我使用的是WebStorm 2017.2.4和webpack Vue.js项目。我已经将添加到我的项目中，并希望看到有关它和组件支持的提示。
但是我得到了“未知的html标签”的警告。
顺便说一句: bootstrap-vue在运行项目时按预期工作。
你有什么建议如何让它工作吗？
浏览 1提问于2017-09-15得票数 25
1回答
我用的是vue-cli + bootstrap-vue。尽管我像这样导入了引导程序(在我的main.js中)，但我还是搞不清楚为什么和如何引导混合器不能工作。
import 'bootstrap/scss/bootstrap-grid.scss'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue);
并试图在组件中使用一些混合器。
<style lang="scss" scoped>
.xxx {
@include me
浏览 0提问于2018-09-11得票数 3
回答已采纳
8回答
我使用npm install axios命令安装了axios -这是我的package.json依赖项
"dependencies": {
"axios": "^0.18.0",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
我在我的main.js文件中注册了axios。
import Vue from
浏览 3提问于2018-07-17得票数 30
回答已采纳
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import {Vuetify} from 'vuetify';
import { store } from './store/store';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstr
浏览 6提问于2020-11-17得票数 0
1回答
在Vue中找不到导入和重新导出
、、、、
我正在遵循YouTube上关于Vue的教程，在我安装Bootstrap Vue并运行npm run serve之前，一切都运行得很好，我一直收到这个错误：
98% after emitting CopyPlugin
WARNING Compiled with 2 warnings 2:21:24 AM
warning in ./src/main.js
"export 'default'
浏览 1提问于2021-01-01得票数 0
5回答
Vue中的作用域引导Css
、、、、
我正在尝试在Vue组件中使用Bootstrap，并且我希望所有CSS都是作用域。我尝试了这样的东西：
<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>
但它似乎不是css的作用域。有没有办法做到这一点？
浏览 3提问于2018-04-04得票数 17
我使用bootstrap作为我的设计框架，并且一直在使用bootstrap-vue。现在，我想实现一些测试来配合我的组件。我正在编写一个非常简单的测试，以确保模式是打开的。我在vue-test-utils中使用什么来打开bootstrap-vue模式？
我使用的是Laravel、bootstrap-vue、vue-test-utils、mocha和mocha-mocha附带的基础知识。
我正试着用wrapper.find('#modal-1').trigger('click')打开模式。我尝试过使用我尝试使用的事件<b-button @click="
浏览 2提问于2019-05-21得票数 8
请原谅我在这里的无知，我对Vue是超级新手。我正在寻找一种方法来利用bootstrap-Vue从CDN (点击浏览器在右导航)。我不知道如何调用组件。使用webpack / CLI版本，没有问题，但是CDN，我不知道如何使用这个。
我放了一个简单的codepen.io来测试它。我已经根据文档添加了CSS和js文件。
//do I need this?
Vue.use(BootstrapVue);
//try individual components.
import { Card } from 'bootstrap-vue/es/components';
Vue.use(C
浏览 0提问于2018-07-26得票数 0
回答已采纳
1回答
我无法理解如何在nuxt.js中选择引导vue.js模块。
nuxt.config.js中的以下代码正在提取整个库(不包括css)，但如上所述，如何包含所需的模块。
modules: [
['bootstrap-vue/nuxt', { css: false }]
]
我指的是这里的医生：
请检查Individual components and directives部分。
上面的文档中描述的东西正从我的脑海中掠过:)请帮助，谢谢。
浏览 1提问于2018-11-01得票数 3
回答已采纳
用几个开发人员启动一个大型应用程序。使用webpack和bootstrap-vue。如何为(和其他组件)默认样式。换句话说，我可以默认：
<b-card>
等同于：
<b-card style="max-width: 40rem;" header-bg-variant="primary" header-text-variant="white">
以确保我们在整个应用程序中保持一致的外观。
浏览 3提问于2018-07-27得票数 0
我想在Vue 3中使用Bootstrap 5。因为Bootstrap 5使用的是普通的JS (没有JQuery)，所以我可以在Vue 3项目中直接使用Bootstrap 5(不使用Bootstrap-Vue)吗？有人能指导我如何在Vue 3中使用Bootstrap 5吗？
浏览 1提问于2021-01-03得票数 43
回答已采纳
2回答
我正在尝试使用Jest测试以下标签： <label class="no-content-label" v-if="products.length===0 && !isTableBusy">No Content To Show</label> 使用以下测试： it('Test No Content To Show When table is not empty', async () => {
const wrapper = mount(productTable, {
浏览 116提问于2021-08-02得票数 0
回答已采纳
自定义Vue零部件中的BootstrapVue b模式零部件可在浏览器中正确加载。但是，当使用mocha+mochapack进行测试时，它会生成一个Vue警告，指出b-modal元素未注册。测试使用的是注册了BootstrapVue的localVue对象。所有其他引导程序自定义元素似乎都正确加载，并且不会生成任何警告。 我尝试了各种方法，包括从'bootstrap-vue‘导入BModal并将其直接注册为组件，但仍然收到相同的错误。 import {mount, createLocalVue} from "@vue/test-utils"
import MyCusto
浏览 53提问于2019-06-08得票数 0
我正在尝试使用vue js启动一个新项目。我认为我有通过终端所需的所有依赖项。我安装了npm，vue，vue引导程序和vue路由器.错误来自router.js，Vue.use(VueRouter)上的第7行。
这是我的main.js代码
import Vue from "vue"
import App from "./App.vue"
import router from "./router.js"
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dis
浏览 19提问于2021-12-06得票数 2
回答已采纳
我的应用程序已经两次拒绝了这个问题。
有时(很少)，测试人员无法登录Facebook。有关更多信息，请参阅附呈的屏幕截图。
复制的步骤是(很少有一段时间)：
启动应用程序
点击Facebook
使用Facebook凭据登录
页面变成白色，不再发生进一步的操作。
请帮我看看这个。谢谢
浏览 4提问于2016-06-09得票数 0
我有一个Vue项目，当我查看文件index.html时，我得到一个空白页面，当我转到浏览器控制台时，我看到错误
GET file:///dist/build.js net::ERR_FILE_NOT_FOUND
这是在我的main.js中
import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
import 'bootstrap/dist/css/bootstrap.
浏览 0提问于2019-05-19得票数 2
那里。
我的项目有一个奇怪的疑难解答。昨天工作还不错。所有呈现的页面。在我决定只从Bootstrap进口组件之前没有问题，因为当我从生产中建造它时，Webpack说，“这个项目太重了，性能可能会慢下来。”然后，所有该死的项目都停止工作(如果您转到localhost:8080，您将看到一个空白页，没有关于正在发生的事情的信息)。我去了解更多信息，找到了这段代码，然后粘贴到vue.config.js中。
module.exports = {
configureWebpack: {
resolve:{
alias: {
'bootstrap-vue$
浏览 1提问于2020-05-07得票数 0
4回答
默认情况下，bootstrap-vue将为我的数据创建一个标题行。是否有任何方法隐藏<b-table>的标题行，以便只呈现数据项？
浏览 2提问于2018-04-15得票数 18
回答已采纳
1回答
Jest快照测试忽略了子样式
、、、、
我正在尝试为一个非常、非常简单的react-native组件编写一个简单的快照测试。但是，Jest使用的快照不包含组件的单个子级的任何样式或内容信息。 该组件是一个来自原生库的按钮，其中有一个图标。来源： import React, { Component } from 'react';
import { Button, Icon } from 'native-base';
export default class AddButton extends Component {
render() {
return (
<Button
浏览 21提问于2019-01-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
