Bootstrap图片轮播组件Carousel使用方法详解

前端之家收集整理的这篇文章主要介绍了Bootstrap图片轮播组件Carousel使用方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

图片轮播组件是一个在网页中很常见的技术,但是如果直接编写的话,需要很长的JavaScript编码,同时也不好控制大小。

如果使用Bootstrap来编写图片轮播组件Carousel,则能够节约很多时间。

同时说一下,Carousel这个词的本义是回旋木马。

一、基本目标

在网页编写多张图片的轮播组件Carousel,鼠标放在上面自带悬停效果,并且在每张图片下面配有图片说明。

由于笔者的电脑视频录制软件比较渣,也觉得没必要画太多时间在这上面,觉得只要能说明问题就行,所以下面的GIF失色比较严重,但是基本的效果还算是展示出来了。

这个Bootstrap的图片轮播组件Carousel,不兼容IE6与7,需要IE6支持的话,要去网站中下载Bootstrap的IE6组件支持)。同时,在Google Chrome中图片文件说明会渗有一点小黑色,不过不影响浏览:

在不同浏览器中的展示情况是不同的。IE8的话是这样的效果:

二、基本思想

见下图网页布局:

三、制作过程

1、同之前《【JavaScript】使用Bootstrap来编写一个在当前网页弹出的对话框,可以关闭,不用跳转,非弹窗》的第一步

因为需要使用Bootstrap,所以先在官网组件即可,用于生产环境的Bootstrap版本,Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3。本文也是根据Bootstrap3制作。同时,Bootstrap3所提供的JavaScript效果需要到jQuery1.11支持,可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11(),而不是不兼容旧浏览器IE6的jQuery2。下载完之后,配置好站点目录。把Bootstrap3直接解压到站点目录,而把jquery-1.11.1.js放到js目录,也就是与bootstrap.js同一目录,站点文件夹的结构大致如下:

2、以下是网页的全代码,下面一部分一部分进行说明:

猜你在找的Bootstrap相关文章