(已解决)bootstrap录播图切换按钮出不来(变成矩形)解决方案 ...还有彩蛋哦

前戏

前端时间,笔者被前端框架虐的体无完肤,不过说真的,我的UI确实菜的抠脚,所以今天想在传说中bootstrap挽回一点面子,它不是吹自己是最简单最牛逼的框架吗, 遇到我这样的人才,它也只能笑笑不敢说话.

---

正题

好了进入正题, 今天兴致冲冲的想要练习一下轮播图 所谓复制一时爽, 事后火葬场,无疑 我被bootstrap秀了一脸;于是乎有了今天这篇文章:

注意

• 我是基于bootstrap3模仿的轮播图

先来看看我实现的效果,我基本完全复制过来 轮播效果,甚至切换都没有问题 ,唯一美中不足的就是切换按钮变成这个奇丑无比的方框原本应该是个箭头

---

惊鸿

我本能的反应是,一定是我自己的锅, 于是我就一个个查看自己的代码,甚至都没注意控制台已经提示的错误:

到这我开始有点明白了 仔细查看发现: 访问页面时我的项目里并没有fonts文件夹以及里面的文件, 而且我看官方实例代码也没有提到这个, 后来查阅一下资料发现 当我们想要引用bootstrap3的图标 必须引入fonts文件夹 真的想骂娘 官方只管放demo却也不提示一下

于是乎我只好下载一个完整的bootstrap
我这里使用npm下载:

	npm install boostrap@xxx         //xxx具体的版本

找到fonts文件夹后 复制到项目里于是完美解决:

---

总结

为啥我在开头特意强调boostrap的版本 这都是boostrap3搞出来的b事, boostrap4就很良心了,你一路复制没什么毛病,而且也简化了. 要不是初入前端的我没啥经验,死活也不会用第三版 大家多使用第四版哈

---

彩蛋

其实还有一种偷懒的办法 哈哈哈又来了 没办法会偷懒的人总让人嫉妒要 嘿嘿

 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">&lsaquo;</span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">&rsaquo;</span>
     <span class="sr-only">Previous</span>
    </a>

如果你的图标出不来 就仅仅需要在<span>标签里加个内置参数 ** &lsaquo 和 &rsaquo ** 效果差不多
就是小一点