（40）Gulp中使用BootStrap

一、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">
    <!-- Indicators -->
    <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>
  
    <!-- Wrapper for slides -->
    <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>
  
    <!-- Controls -->
    <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文件后执行，控制台就不会出现报错啦，我们的效果也实现啦！