版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_22903531/article/details/78424223
Bootstrap开发案例中的小问题细节注意
本文主要是结合自己开发适合遇到的问题整合一下。小编很爱实用BS框架很简单。目前小编在自己写一个项目遇到很多的小问题拿出来分享一下。
一、nav导航条固定之后下面显示20px的空白
解决方法:使用了navbar-fixed-top之后会有20px的空白解决如下:
body{
padding-top: 70px;
}
二、Bootstrap—解决引入本地Bootstrap文件字体图标无法显示问题
问题如图:
解决方法:这是因为没有把bootstrap中没有引入font文件导致,正常引进即可。
三、发现了一款很好用的插件
有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。
WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。
使用方法
1、引入文件
<link rel="stylesheet" href="css/animate.min.css">
2、HTML
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
3、JavaScript
new WOW().init();
如果需要自定义配置,可如下使用:
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();