bootstrap怎样制作轮播图呢
bootstrap制作轮播图非常方便，今天咪咪我就来给大家讲解一下bootstrap怎样制作轮播图。
操作方法
- 01
打开Hbuilder，新建一个轮播图的项目，如图，轮播图用到有图片，哈哈，这里我就只用一张图片进行轮播，如果喜欢多图轮播就准备好多张图片，还有把bootstrap以及jQuery插件放进去。
- 02
然后搜狗搜索bootstrap，去bootstrap那里找到JavaScript插件，点击它。
- 03
然后在右边找到这个选项（carousel）,这个选项就是bootstrap中用来制作轮播图的代码。
- 04
如图，点击carousel之后，就会跳转到轮播图源代码处，这里有一个轮播图的例子，下面有一些轮播图的代码，我们直接点击“copy”即可。
- 05
然后我们把复制到的代码粘贴到之前的html文件里面，代码放在body标签里面哦。
- 06
然后找到carousel-inner，它下面有img标签，这个img标签就是放置我们的轮播图片的。
- 07
如图，我把图片的路径给设置好就可以了，这里我就设置成三个图片进行轮播。
- 08
如图，这里有三个div，表示三张轮播图片，如果要多图，可以多复制几个，然后修改图片即可。
- 09
当然了，还要引入bootstrap的css和JS文件哦，jq也不要忘了引入进来哦。
- 10
最后，打开搜狗浏览器看看轮播图效果，点击左右按钮可以滑动轮播图哦，哈哈，快去对照着指南练习吧。
赞 (0)