如何用Bootstrap制作轮播图

1、 前端用到的编辑器有很多，本例通过选择Sublime Text3编辑器来实现Bootstrap简单布局的制作。第一步，打开电脑中安装的Sublime Text3，新建demo文件夹用来存放文件，在里面新建一个html文件，通过Tab快捷键迅速创建一个html模板，并命名标题。如图：

3、 第三步，添加轮播图片的容器。为了便于查看，在最外边添加一个“container”的div，再加一个子div，类名为carousel，并且给这个容器定义一个名为“slidershow”的ID，方便后面的data属性来声明触发。<div id="slidershow" class="carousel"></div>

5、 第五步，设计轮播图片的播放区域。这个区域主要用来放轮播的图片。加一个名为“carousel-inner”的类，并放置在carousel容器中，再加一个名为“item”的容器来放置每张轮播图片。代码如下： <div class="carousel-inner"> <div class="item active"> <img src="images/1.jpg" alt="" style="width:100%;" /> </div> </div>

7、 第七步，设计轮播图片的前后图标控制器。我们平时看到的轮播图会有一个向前播放和向后播放的控制器。在Carousel中加一个控制向前和一个控制向右的a标签，并添加名为“carousel-control”的类，以及left和right类。其中left表示向前播放，right表示向后播放。代码如下： <a href="#slidershow" data-slide="prev" class="left carousel-control" role="button"><span class="glyphicon glyphicon-chevron-left"></span></a> <a href="#slidershow" data-slide="next" class="right carousel-control" role="button"><span class="glyphicon glyphicon-chevron-right"></span></a>

9、 至此，完整的代码就完成了。我们检查代码无误后，右击文件，在浏览器中查看效果，效果如图所示（其实每写完一步代码就应该查看效果，即调试。）。 利用bootstrap框架，只通过简单的添加类样式，就完成了比较复杂的轮播图，是不是很强大呢？读者可以自行实践。 附：本经验关键词：怎样做轮播图、轮播图怎么做、轮播图实现原理、轮播图自动播放、图片轮播怎么做、怎样制作图片轮播、bootstrap如何制作图片轮播、bootstrap怎么制作轮播图、bootstrap轮播图、bootstrap制作轮播图。 附：可以在下面“添加经验引用”参考我的另一篇经验“JS制作轮播图” 更多与“bootstrap”相关经验请点击下面的“经验引用”或添加关注。