工具/材料
Sublime Text
操作方式
- 01
首先我们需要新建一个HTML5的文档,然后在文档中导入Bootstrap的样式文件,这个文件中包含了轮播图所有的样式界说,如下图所示
- 02
接下来我们需要导入剧本文件,注重先导入Jquery文件,然后导入bootstrap的剧本文件,挨次必然不克不及倒置,如下图所示
- 03
然后在body标签里界说轮播图的容器,容器的大小需要和图片的大小一样,不然会呈现轮播图错位,结果如下图所示
- 04
接下来我们就正式的添加轮播图了,这里先添加三张图,如下图所示,注重让哪种轮播图显示直接挪用Bootstrap的active样式即可
- 05
轮播图片添加完毕今后,就可以添加轮播图核心了。在Bootstrap中运用li列表界说轮播图核心,注重核心的数目和图片的数目要一样,如下图所示
- 06
轮播图中还有一个必不成少的元素就是摆布箭头,经由过程Bootstrap的carousel-control样式添加轮播图箭头,如下图所示
- 07
最后我们运行法式今后,在页面中你就可以看到如下图所示的轮播图结果了。可以看到我们上面说的轮播图核心和摆布箭头都在页面上显示出来了,如下图所示
- End