vue中引入bootstrap
Vue引入bootstrap主要有两种方法
方法一：在main.js中引入，此方法导入的bootstrap中对于html，body的一些预设置的css样式可能无效。
一。引入jQuery
在当前项目的目录下（就是package.json），运行命令 cnpm install jquery --save-dev
若是运行报错，则运行cnpm install jquery （cnpm和npm都可以）这样就将jquery安装到了这个项目中。
然后修改webpack.base.conf.js(在build文件下)两个地方：
var webpack=require('webpack');
2在module.exports的里面加入
webpack.optimize.CommonsChunkPlugin('common.js'),
webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
最后在main.js中加入import $ form 'jquery',完成jquery的引入
二、引入 bootstrap.css文件：
修改webpack.base.conf.js
　　extensions: ['.js', '.vue', '.json'],
　　alias: {
　　'vue$': 'vue/dist/vue.esm.js',
　　'@': resolve('src'),
　　'bootstrap':resolve('src/assets/bootstrap'),
在main.js中import引入
import'bootstrap/js/bootstrap.min.js'
import'bootstrap/css/bootstrap.min.css'
方法二：在index.html中引入，一般建议使用此方法引入bootstrap。
在index.html文件中引入bootstrap时，注意加入&meta&标签实现响应式，未加此标签时，可能会出现手机模式时，响应式无法实现。
&meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&
&meta http-equiv="X-UA-Compatible" content="ie=edge"&
（1）本地引用：
先在static目录下放所需加载的bootstrap文件
然后在index.html中引入
目录路径为你所放位置的路径。
（2）远程引入：
直接加载远程的bootstrap文件
没有更多推荐了，VUE和Bootstrap使用Table的一个问题
[问题点数：100分]
本版专家分：0
结帖率 98.46%
CSDN今日推荐
本版专家分：0
结帖率 98.46%
本版专家分：0
本版专家分：0
匿名用户不能发表回复！|
CSDN今日推荐发布于 02/06 15:12
Bootstrap-Vue是一个ui组件库，遵循vue的组件化开发方式，使用Bootstrap样式控制组件外观，摒弃了对jquery的依赖。让我们在使用Vue.js的同时依然能够继续享有bootstrap样式的便利。
本文尝试对各个组件进行试用，为了尽量减少其他因素干扰，仍然使用访问cdn的方式。如果你喜欢使用模块化打包工具，如webpack，官网有详细的文档可供参考。
1、Alerts（警告框）:&主要的使用场景为，针对用户的行为给出反馈。
应该总是使用show属性控制组件的可见性。
给组件添加属性dismissible可以显示一个关闭按钮，它应该总是与dismissed事件一起使用，在dismissed事件中重置vm中控制alert显示属性的数据状态
可以通过variant属性（primary,secondary,success,danger,warining,info）产生不同语义下的alert
&dismiss-count-down属性接受一个函数 ，可以帮助我们实现定时自动关闭的alert & & & &
2、badge(徽章)：允许我们为某些内容添加补充信息。
徽章会依据直接父元素的字号调节本身的字号大小，它使用em单位。
通过variant属性可以定义徽章的语义样式。（default, primary, success, warning, info,danger）
添加pill属性可以定义胶囊式的徽章（增强的圆角）
通过href属性可以为徽章添加行为（跳转）
如果需要圆形的徽章，参照 & & && & & &&
3、Breadcrumb(面包屑)：展示当前页的导航路径，告诉我们当前所在位置
路径的分隔符是通过指定伪元素::before的content属性，由css自动添加。
items即路径上的各导航项，通过一个对象数组指定。可以给一个对象指定active属性，使其处于激活状态
如果没有明确指定哪一项为激活状态，则认会为最后一项为默认激活状态。
为导航项指定href或to属性可以添加导航行为。
4、Button：基本的控件元素，用于触发行为。
通过variant属性可以定义按钮的语义样式。（default,&primary,&success,&warning,&info,danger）
通过size属性定义按钮的大小（sm,lg）,不指定会有默认的样式。& & & &
依然可以使用type属性（submit，reset，button）。
通过disabled添加禁用状态。
添加href或者to属性会生成button样式的a标签。
添加pressed属性控制按钮是否处于已点击的状态。使用sync修饰符可以将按钮的状态与vm中的数据进行同步。
5、Button group（按钮组）：将一组按钮放在一行或者一列，可帮助我们实现顶部导航栏或者tab切换效果。
默认是水平按钮组，可以添加vertical属性生成垂直按钮组。
通过size控制按钮组中按钮的大小。
6、Button toolbar（按钮工具栏）：用于将按钮组和输入框组放置在一行。
可以在工具条中将输入框组，下拉菜单和按钮组自由的组合在一起。还可以使用工具类对间距进行调整。
为工具栏添加justify属性，可以使工具占据整个父容器空间，并且会自动调整各项之间的间距。
为工具栏添加key-nav属性，可以开启工具栏的键盘导航功能。详情请参照官方文档
7、Cards（卡片）：卡片是一个可以灵活配置，扩展性良好的组件。是一种移动端友好的呈现方式。它可以设置头部，脚步，躯干部分可以使用其他的组件。最棒的是，如果设置了主题色，则它的内容会自动应用这个主题色。还有非常多属性项可以对组件呈现进行配置。
&b-card&的宽度默认是填满父容器的。当然你可以使用bootstrap-v4的样式类进行自定义。
组件默认的根节点标记是div，为组建指定tag属性，可以进行自定义。
通过title属性设置标题，sub-title属性设置子标题。
如果想在card组件中使用链接，可以使用b-link组件或其他标签,只需为标签指定样式类card-link。
可以在卡片中添加图片，添加img-src指向图片地址，img-alt图片替换文本,img-top/img-bottom 图片在顶部还是底部，默认是顶部。如果还添加overlay属性，则图片会作为卡片的背景图。
可以通过header和footer属性指定卡片头部，脚步的文本，复杂点的情况可以使用具名插槽。&
躯干部分具有样式类.card-body，为卡片组件提供了一个具有内边距的区域。卡片组件的内容默认是放到躯干部分的。
可以为卡片组件设置no-body,来让躯干部分不被.card-body样式类修饰。此时，对卡片组件设置title和sub-title将不会呈现。
通过card-text,card-body,card-link这些类名，对卡片组件中的内容进行样式自定义。
还能通过bg-variant,border-variant设置各种变体色。更细致可以设置各个部分的遍体色，详情参照官网文档。
b-card-group可以将一组card放置在一行,默认是没有间距的。添加deck属性可以添加间距，通过columns属性可以实现瀑布流布局，详情参照官网文档。
8、Carousel（轮播图）:用于循环展示一系列内容。可以支持图片，文本和自定义的标记。还可以添加上一个/下一个的操作按钮和指示器。
轮播图不会自动标准化轮播项的尺寸，可以使用工具类或者自定义样式来调整内容的尺寸。如果全部使用图片，请确保图片都有一样的尺寸，至少要保证图片的长宽比例一致。
如果对于b-carousel-slide使用了img-src或者img-blank属性，我们在轮播图中通过img-width,img-height定义的尺寸会自动运用到每一项。
图片是响应式的，会自动缩放来填充父容器。
在b-carousel-slide内部，使用了b-img组件来展示图片。
通过interval属性设置轮播的时间间隔
controls属性设置轮播控件，indicators属性设置指示器，他们是我相互独立的
如果需要自定义元素的样式，请为carousel添加样式类，来形成命名空间，然后通过选择器的优先级来覆盖默认样式。
对组件使用v-model，它会绑定当前轮播项的索引（从0来时计数）
为啥我无法插入iframe呢
& 著作权归作者所有
人打赏支持
码字总数 13763
一般vue都是结合elementui 、mint-ui等使用，但是自己还是想结合bootstrap来使用，在使用的过程中遇到一些报错 使用bootstrap 要结合jQuery来使用的，首先要安装依赖 npm install jquery --s...
杏sunshine ? 05/16 ?
vue简介： Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，V...
挑战者666888 ? 05/22 ?
阅读Vue的源码，或者阅读一个框架的源码，了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。 Vue各目录简介 Vue源码各个目录的详细介绍 熟悉每个模块具体的功能，对之后深...
淼淼真人 ? 05/14 ?
Web前端开发工程师是一个很新的职业，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行...
web前端小辰 ? 06/04 ?
Vue常用经典开源项目汇总参考-海量 　　Vue是什么？ 　　Vue.js（读音 /vju/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。...
　　Vue是什么？ 　　Vue.js（读音/vju/,类似于view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易...
前言 一年一度紧张刺激的高考开始了，与此同时，我也没闲着，奔走在各大公司的前端面试环节，不断积累着经验，一路升级打怪。 最近两年，太原作为一个准二线城市，各大互联网公司的技术栈也在...
闰土大叔 ? 06/08 ?
使用vue-cli 如果是使用国内网络安装，官方建议使用淘宝或者cnpmjs的镜像。我感觉淘宝的镜像速度不如cnpmjs的快，因为我使用的cnpmjs镜像。 npm --registry http://r.cnpmjs.org install --g...
bxst ? 06/26 ?
Web前端开发工程师是一个很新的职业，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行...
web前端小辰 ? 06/04 ?
一.简介 Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换...
fenerchen ? 06/12 ?
没有更多内容
加载失败，请刷新页面
因为目前项目中用的JDK是1.7版本的，而ElasticSearch5.x版本需要使用JDK1.8版本，所以以下的代码都是基于ElasticSearch 2.4.6版本的，以下的代码是从项目中提取出来的，所以有些跟业务相关的...
zchuanzhao ? 17分钟前 ?
笔者linux版本centos6.5 一、首先准备要安装的软件 安装PIP是依赖与setuptools，安装setuptools又依赖于zlib，安装完zlib，python3也需要重新安装。 所以安装如下顺序安装，括号内是笔者的版...
cainiaoJAVA ? 21分钟前 ?
问题1(org.apache.commons.lang.ClassUtils.getClass) ? Caused by: org.springframework.beans.factory.BeanCreationException: **Error creating bean with name 'dorado.dataParser'** de......
lqlm ? 22分钟前 ?
需求：有一天产品MM高高兴兴的走过来，兴奋的和我分享她想出来的一个新的idea。 产品MM：你看这个（她指了指她的手机），一脸兴奋 那是一张带着二维码的图片，内容如下： 她接着说：如果我们...
任臻 ? 24分钟前 ?
大飞老师带你再看Java线程(二)
微小宝 ? 27分钟前 ?
19.7 主动模式和被动模式 19.8 添加监控主机 19.9 添加自定义模板 19.10 处理图形中的乱码 19.11 自动发现
影夜Linux ? 29分钟前 ?
1、安装 $ yum install -y gcc tcl #装 gcc 编译器和 redis 测试使用到的 tcl 库$ wget http://download.redis.io/releases/redis-4.0.10.tar.gz$ tar xzf redis-4.0.10.tar.gz$ cd r......
xixingzhe ? 30分钟前 ?
&?xml version="1.0" encoding="UTF-8"?&&configuration&
&!--定义日志文件的存储地址 勿在 LogBack 的配置中使用相对路径--&
&property name="LOG_HOME" value="${LOG_PATH}"/......
安小乐 ? 33分钟前 ?
##springboot、mysql实现读写分离 ###1、首先在springcloud config中配置读写数据库 mysql:
datasource:
readSize: 1
type: com.alibaba.druid.pool.DruidDataSo......
lipengHeke ? 33分钟前 ?
1. 下载地址： http://www.my97.net/down.asp 2.使用： 将下载的压缩包加压到当前文件夹，加压后的文件复制到项目的webapp下的js中，最后在相应页面引入WdatePicker.js即可。(注意：是将解压...
静以修身2025 ? 36分钟前 ?
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
就比如下面这个系统一样，用bootstrap来做UI，但是公司想用vuejs来实现前后端分离，这样用bs的话会不会有影响啊？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有个叫vue-strap的
也有个叫bootstrap-vue的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不会，样式方面而已,我记得有个 Bootstrap + Vue
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
就比如下面这个系统一样，用bootstrap来做UI，但是公司想用vuejs来实现前后端分离，这样用bs的话会不会有影响啊？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
bootstrap 全部文件分为2部分
作为一个UI样式框架
基于jquery.js + bootstrap.js 的动态特效部分
如果你想使用 vue 作为数据绑定和dom操作处理, 然后使用 bootstrap 作为样式框架, 那个只需要你加载 bootstrap 的样式部分 和 vue.js 部分就可以.
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。