提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

BootStrap在Vue中的安装使用详细教程

BootstrapVue安装教程 详细 使用
2023-09-14 09:07:25 时间

文章目录

bootstrap的安装依赖jquery、需要提前安装jquery

1、安装jquery(Bootstrap依赖jquery)

npm install jquery --save

2、引入BootStrap

npm install bootstrap -- save

3、下载BootStrap包，并将文件放入src/assets目录下

在这里插入图片描述
在这里插入图片描述

4、配置使用jQuery

在build/webpack.base.conf.js中添加如下配置

在这里插入图片描述

4.1 添加Webpack

const webpack=require("webpack")

在这里插入图片描述

4.2 添加插件配置

// 配置全局使用 jquery
plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery"
})]

在这里插入图片描述

5、在main.js中引入

//引入jquery
import $ from "jquery"
//引入bootstrap
import "./assets/bootstrap-3.4.1-dist/css/bootstrap.css"
import "./assets/bootstrap-3.4.1-dist/js/bootstrap.js"

6、测试

 <div class="container" style="background-color: pink;">
		<div class="row">
			<div class="col-md-6" style="background-color: pink;">6列</div>
			<div class="col-md-6" style="background-color: yellow;">6列</div>
		</div>

		<div class="row">
			<div class="col-md-4" style="background-color: red;">4列</div>
			<div class="col-md-8" style="background-color: deeppink;">8列</div>
		</div>

	</div>

7、测试效果

在这里插入图片描述

相关文章