EvaBootstrap 文本排版表单移除TB font-face图标中文排版高级别CSS Reset新的LESS文件结构与函数百分比Grid布局三栏式布局 介绍
EvaBootstrap是一个基于Twitter
Bootstrap(下简称TB)的修改定制版,主要解决了TB的侵入性问题,能使TB更好的与其他前端项目并存。简言之,EvaBootstrap提供TB的所有特性,并且不会修改你的CSS默认样式。
EvaBootstrap将作为EvaEngine项目的前端核心框架开源发布,协议采用New BSD License。
目前EvaBootstrap基于Twitter Bootstrap v 2.2.1修改。
与Twitter Bootstrap的不同
技术上来讲,EvaBootstrap的实现原理就是在TB有侵入性的代码上加入了一些CSS Class命名空间,所以使用时会与TB有细微的差别:
文本排版
对于需要文本排版的元素,需要增加一个class .typo:
在Twitter Bootstrap中:
<p><small>This line of text is meant to be treated as fine print.</small></p>
在EvaBootstrap中:
<div class="typo"> <p><small>This line of text is meant to be treated as fine print.</small></p> </div>
表单
对于希望采用TB样式的表单,增加一个class .form
在Twitter Bootstrap中:
<form> <fieldset> ... </fieldset> </form>
在EvaBootstrap中:
<form class="form"> <fieldset> ... </fieldset> </form>
移除TB font-face图标
TB的图标略显简陋,索性完全移除。如果想要使用图标,推荐更全更精致的Font
Awesome,可以对应绝大多数项目需求。
新功能
中文排版
通过引入typo.css项目,提供更好的中文排版支持。
对于需要采用中文排版的元素,加上class .typocn
高级别CSS Reset
TB的CSS Reset采用的是normalize.css,这种Reset以修复浏览器缺陷为主要目的,在实际项目中往往统一元素的初始状态,所以CSS
Reset部分采用了更“高”的Reset,包括了元素样式级别的处理。
整个Reset部分可以选择加载,所以如果你的项目中已经有了Reset,只需引入evabootstrap-core即可。
新的LESS文件结构与函数
将TB的less源文件按功能分类存放,方便查找。同时加入了一些TB中没有包含的便捷LESS函数。
百分比Grid布局
作为TB Grid布局的一个补充,引入了一个非常小巧的百分比Grid布局
三栏式布局
如何使用
在页面中根据需求引入对应的CSS即可
- evabootstrap-core.css EvaBootstrap的核心CSS,不包含Reset,不包含Responsive Layout,无任何侵入性
- evabootstrap-fixed.css 在evabootstrap-core的基础上增加了Reset
- evabootstrap-full.css 在evabootstrap-fixed.css的基础上增加了Responsive Layout
更多情况可以直接采用LESS编写,按需求引入LESS源文件即可。
意见反馈
EvaBootstrap 文本排版表单移除TB font-face图标中文排版高级别CSS Reset新的LESS文件结构与函数百分比Grid布局三栏式布局 官网
https://github.com/AlloVince/EvaBootstrap
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。