【程序猿心得】Bootstrap开发案例中的小细节注意
来源:互联网 发布:知乎怎么解除绑定手机 编辑:程序博客网 时间:2024/04/29 16:56
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();
阅读全文
0 0
- 【程序猿心得】Bootstrap开发案例中的小细节注意
- 开发中的小细节
- 小程序 开发注意
- 注意编码工作中的小细节
- 注意编码工作中的小细节
- 开发时应该注意的小细节
- (教训)编程之难--难在大片程序中的小细节-注意变量类型和范围
- Web开发中的小细节
- 开发中的一些小细节
- bootstrap小细节
- 注意细节—开发中的重中之重
- 【Android拾遗】Android开发中的注意细节
- mySQLSQL注意小细节
- Cocos2d-x程序中的一些小细节
- 程序中的小细节&易错点 汇总
- (教训少占鱼)编程之难--难在大片程序中的小细节-注意变量类型和范围
- IOS Xib中的storyboard要注意的小细节
- Servlet学习笔记---开发中的小细节
- JavaScript停止冒泡和阻止浏览器默认行为
- mysql 经纬度计算离一点的距离
- 【机器学习PAI实践十二】机器学习实现双十一购物清单的自动商品标签归类
- freemarker教程
- Struts2——No result defined for action and result input
- 【程序猿心得】Bootstrap开发案例中的小细节注意
- 非常可乐(HDU-1495)
- h5中zoom与text-indent属性
- java正则 Pattern和Matcher
- uboot中增加命令
- 数字电路学习笔记
- Python中的切片
- java关于jar包里面路径的相关问题
- 利用typedef定义函数指针