java中的接口是类吗
421
2023-07-02
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、以下是网页的全代码,下面一部分一部分进行说明:
图片轮播Carousel
img0
我是img0的图片说明
img10
我是img10的图片说明
img2
我是img2的图片说明
(1)
(2)
先声明一个容器container,这个容器能使网页的所有元素自动归于网页中央,之后在这个容器中编写元素。
首先编写页头,声明一个页头,之后其里面写入一段文本。
图片轮播Carousel
之后定义一个未命名的图层div,主要是用来规范图片轮播组件用的。tIYUYxbuyWbootstrap的图片轮播组件大小不能对其里面的元素,加入width与height参数进行规定。这样图片轮播组件会失真。同时这个组件要居中,必须在div的style属性中使用margin-right: auto; margin-left: auto;来约束,额外加入align="center"是根本一点效果都没有。
最后是图片组件各部分的详细说明:
img0
我是img0的图片说明
img10
我是img10的图片说明
img2
我是img2的图片说明
精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap Table使用教程
Bootstrap插件使用教程
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~