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 最后， 打开搜狗浏览器看看轮播图效果， 点击左右按钮可以滑动轮播图哦， 哈哈， 快去对照着指南练习吧 。
特别提示 【bootstrap怎样制作轮播图呢】jq要在bootstrapjs前面才有效哦， 不然轮播图不会滑动的 。
以上内容就是bootstrap怎样制作轮播图呢的内容啦， 希望对你有所帮助哦！
猜你喜欢
- 怎样用分部积分法求积分
- 怎样在京东里申请大学生认证？有什么好处？
- 怎样求有理函数的积分？
- 怎样认识不同茶类的品质
- 怎样使用当当App买书
- 一个漂亮的栅格背景的制作方法
- 使用ps制作云彩字的方法
- 怎样用电脑给手机杀毒？
- 怎么快速制作全国计算机等级考试报名照片
- 使用ps制作山峰背景的方法