一、Gulp中安装BootStrap插件

二、示例

1.安装bootstrap和jquery包（注意：因为bootstrap是依赖于jquery的）

安装命令：cnpm i bootstrap@3.4.1 jquery -S （因为我们上线需要该包，所以要写-S上线模式）这里我们默认安装的包是最新版本的，我们的Bootstrap3和4版本还是有一定的去别的，如果我们学习的是3版本，那么我们安装的时候可以加入@3.4.1这样指定版本的格式进行书写安装，即可实现我们想要的版本的包哦！

2.安装好以后，我们可以再node_modules目录下找到bootstrap目录，该目录下有css和js文件，我们可以进行引入

3.引入bootstrap

我们通过我们以前引入bootstrap的方式，进行引入，发现报错了，打开浏览器后提示Cannot GET /node_modules/bootstrap/dist/css/bootstrap.min.css，说不能找到bootstrap文件，那么我们如何处理呢？这里再gulp中使用bootstrap还需要我们指定路由哦！
//声明服务发布任务
const serve = () => {bs.init({notify: false, //将浏览器右上角的弹窗去除server: {baseDir: './dist', //指定服务启动的目录routes: {//指定路由'/node_modules': 'node_modules'}}})
}
4.使用bootstrap制作一个轮播图效果

轮播图插件地址：https://v3.bootcss.com/javascript/#carousel

粘贴官网的轮播图的代码，我们直接更改图片路径即可。
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="./images/1.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="./images/2.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="./images/3.jpg" alt="..."><div class="carousel-caption">...</div></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
我们刚才明明引入成功了bootstrap呀，为什么使用里面的代码还会报错呢？报错原因说我们没有引入Jquery，所以我们需要注意这一点，必须先引入jquery才能引入bootstrap使用哦！

引入Jquery文件
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
引入Jquery文件后执行，控制台就不会出现报错啦，我们的效果也实现啦！

（40）Gulp中使用BootStrap相关推荐

laravel mysql视图,在 Laravel 视图文件中引入 bootstrap
如何在 Laravel 视图文件中引入 bootstrap?对于从来没有接触过 PHP 开发框架的菜鸟来说,这确实是个问题. 在我们这些菜鸟传统的认知里,要在一个 html/php 文件里引入一个外部 ...
bootstrap 点击按钮刷新_Spring Cloud 中的 Bootstrap 上下文
学习目标复习 Spring 事件/监听器模式(ApplicationEvent / ApplicationListener) 理解 Bootstrap 上下文理解 Spring Boot / Sp ...
angular6 中使用bootstrap
npm install jquery --save npm install popper.js --save npm install bootstrap --save 然后在node_mo ...
vue-cli+webpack在生成的项目中使用bootstrap的方法
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行.那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
3不生效 bootstrap_Minitab学习 | 统计学中的Bootstrap方法
什么是Bootstrap 抽样分布描述从总体的随机样本中获取统计量的每个可能值的可能性:换句话说,该大小的所有随机样本中有多大比率将得到该值.Bootstrap是一种通过抽取多个样本来估计抽样分布的方 ...
统计学中的Bootstrap方法（Bootstrap抽样）用来训练bagging算法，如果随机森林Random Forests
统计学中的Bootstrap方法(Bootstrap抽样)用来训练bagging算法,如果随机森林Random Forests 提示:系列被面试官问的问题,我自己当时不会,所以下来自己复盘一下,认真学 ...
第87节：Java中的Bootstrap基础与SQL入门
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ? : write less do more 写更少的代码,做更多的事找出所有兄弟: $("div" ...
在Gulp中使用BrowserSync
博客已迁移至http://zlwis.me. 很早就听说过BrowserSync,也看过一些相关文章,可就是没用过.之前一直在用Gulp开发项目,每次编写完Sass后还要用按F5刷新页面看效果,想想也 ...

（40）Gulp中使用BootStrap

一、Gulp中安装BootStrap插件

二、示例

1.安装bootstrap和jquery包（注意：因为bootstrap是依赖于jquery的）

3.引入bootstrap

4.使用bootstrap制作一个轮播图效果

（40）Gulp中使用BootStrap相关推荐

最新文章

热门文章

（40）Gulp中使用BootStrap

一、Gulp中安装BootStrap插件

二、 示例

1.安装bootstrap和jquery包（注意：因为bootstrap是依赖于jquery的）

3.引入bootstrap

4.使用bootstrap制作一个轮播图效果

（40）Gulp中使用BootStrap相关推荐

最新文章

热门文章

二、示例