首先上效果图效果图不上也可以,大家直接看我博客就看到效果了,每三秒钟轮播一次。自定义博客园很简单。因为博客园支持我们加载js,所以我们怎么玩都可以。申请开通js权限首先第一步是申请开通js权限,在这里我不得不说园子的管理效率也太高了。本来以为至少要等一天才能开通权限,结果我24分 ...
首先上效果图
效果图不上也可以,大家直接看我博客就看到效果了,每三秒钟轮播一次。自定义博客园很简单。因为博客园支持我们加载js,所以我们怎么玩都可以。
申请开通js权限
首先第一步是申请开通js权限,在这里我不得不说园子的管理效率也太高了。本来以为至少要等一天才能开通权限,结果我24分发邮件,27分就回复我权限已经开通了。
引入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>
这儿注意博客园也引入了jquery ,按理说我们不用引入,但是因为,园子的jquery版本太低,使用Bootstrap会报错。所以我们再次引入jquery。这儿注意jquery多次引用可能在某些特殊情况下会带来一些特殊问题。如果jquery版本里处理过可能能避免这种情况。一般项目中我们都会使用最新的jquery,所以这儿关于多次引用jquery的问题不在这儿讨论。
我的博客园使用的模板是
//这一句代码隐藏了我博客模板里面的一个背景图片$(".day").css("background-image", "url('')"); //将模板的右侧div设置距离顶端250px;$("#leftcontent").css("top","250px");//设置轮播时间为3秒$('.carousel').carousel({ interval: 3000});
原标题:使用Bootstrap为你的博客园自定义轮播图片
关键词:图片
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。