bootstrap怎样制作轮播图呢
bootstrap制作轮播图非常方便，今天咪咪我就来给大家讲解一下bootstrap怎样制作轮播图。
工具/材料
电脑
Hbuilder
bootstrap
jQuery
操作方法
-
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
最后，打开搜狗浏览器看看轮播图效果，点击左右按钮可以滑动轮播图哦，哈哈，快去对照着指南练习吧。
- End
特别提示
jq要在bootstrapjs前面才有效哦，不然轮播图不会滑动的。
- 发表于 2017-09-28 00:00
- 阅读 ( 846 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章