AI编程助手
AI免费问答

Bootstrap图片轮播效果实现方法

PHPz   2018-05-29 17:42   2968浏览 原创

本文主要为大家详细介绍了bootstrap图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

导言

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

【相关视频推荐:Bootstrap教程

示例

下面演示图片的轮播,使用bootstrap中的Carousel显示循环播放元素插件。

<p>
 <!-- Indicators -->
 </p><ol>
  <li>
  <li>
  <li>
 </ol>

 <!-- Wrapper for slides -->
 <p>
  </p><p>
   @@##@@
   </p><p>
    ...
   </p>
  
  <p>
   @@##@@
   </p><p>
    ...
   </p>
  
  ...
 

 <!-- Controls -->
 <a>
  <span></span>
  <span>Previous</span>
 </a>
 <a>
  <span></span>
  <span>Next</span>
 </a>

在src中插入图片已为图片设置大小

还可以为其加上标题

<p>
 @@##@@
 </p><p>
 </p><h3>...</h3>
 <p>...</p>
 

相关推荐:

使用JS实现图片轮播的实例

图片轮播效果实现方法

使用JQuery实现图片轮播效果

enter image description here
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。