你的位置:首页 > 软件开发 > Java > 使用Bootstrap为你的博客园自定义轮播图片

使用Bootstrap为你的博客园自定义轮播图片

发布时间:2015-04-08 04:00:43
首先上效果图效果图不上也可以,大家直接看我博客就看到效果了,每三秒钟轮播一次。自定义博客园很简单。因为博客园支持我们加载js,所以我们怎么玩都可以。申请开通js权限首先第一步是申请开通js权限,在这里我不得不说园子的管理效率也太高了。本来以为至少要等一天才能开通权限,结果我24分 ...

使用Bootstrap为你的博客园自定义轮播图片

  首先上效果图

使用Bootstrap为你的博客园自定义轮播图片

效果图不上也可以,大家直接看我博客就看到效果了,每三秒钟轮播一次。自定义博客园很简单。因为博客园支持我们加载js,所以我们怎么玩都可以。

申请开通js权限

首先第一步是申请开通js权限,在这里我不得不说园子的管理效率也太高了。本来以为至少要等一天才能开通权限,结果我24分发邮件,27分就回复我权限已经开通了。

使用Bootstrap为你的博客园自定义轮播图片

使用Bootstrap为你的博客园自定义轮播图片

引入Bootstrap css和js 文件

要使用Bootstrap我们首先要引入Bootstrap的js和css文件,为了提高效率,也为了给园子服务器减少压力(☺☺☺☺估计也没几个浏览量),我们使用CDN引入

页首引入<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">。

页脚引入<script src='/images/loading.gif' data-original="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script src='/images/loading.gif' data-original="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

使用Bootstrap为你的博客园自定义轮播图片

使用Bootstrap为你的博客园自定义轮播图片

这儿注意博客园也引入了jquery ,按理说我们不用引入,但是因为,园子的jquery版本太低,使用Bootstrap会报错。所以我们再次引入jquery。这儿注意jquery多次引用可能在某些特殊情况下会带来一些特殊问题。如果jquery版本里处理过可能能避免这种情况。一般项目中我们都会使用最新的jquery,所以这儿关于多次引用jquery的问题不在这儿讨论。

我的博客园使用的模板是

使用Bootstrap为你的博客园自定义轮播图片

//这一句代码隐藏了我博客模板里面的一个背景图片$(".day").css("background-image", "url('')"); //将模板的右侧div设置距离顶端250px;$("#leftcontent").css("top","250px");//设置轮播时间为3秒$('.carousel').carousel({ interval: 3000});

原标题:使用Bootstrap为你的博客园自定义轮播图片

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。