如何用Bootstrap制作轮播图
轮播图是每个网站中必不可少的元素，制作一个轮播图通常需要页面和脚本方法搭配。如今，随着bootstrap的兴起，制作轮播图变得非常的简单。因为Bootstrap中已经包含了轮播图的成熟方案，我们只需要学会应用即可。下面小编就教大家如何用Bootstrap制作轮播图。
东西/材料
Sublime Text
操作方式
-
01
起首我们需要新建一个HTML5的文档，然后在文档中导入Bootstrap的样式文件，这个文件中包含了轮播图所有的样式界说，如下图所示
-
02
接下来我们需要导入剧本文件，注重先导入Jquery文件，然后导入bootstrap的剧本文件，挨次必然不克不及倒置，如下图所示
-
03
然后在body标签里界说轮播图的容器，容器的巨细需要和图片的巨细一样，不然会呈现轮播图错位，结果如下图所示
-
04
接下来我们就正式的添加轮播图了，这里先添加三张图，如下图所示，注重让哪种轮播图显示直接挪用Bootstrap的active样式即可
-
05
轮播图片添加完毕今后，就可以添加轮播图核心了。在Bootstrap中运用li列表界说轮播图核心，注重核心的数目和图片的数目要一样，如下图所示
-
06
轮播图中还有一个必不成少的元素就是摆布箭头，经由过程Bootstrap的carousel-control样式添加轮播图箭头，如下图所示
-
07
最后我们运行法式今后，在页面中你就可以看到如下图所示的轮播图结果了。可以看到我们上面说的轮播图核心和摆布箭头都在页面上显示出来了，如下图所示
- End
- 发表于 2018-03-01 00:00
- 阅读 ( 748 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章