EvaBootstrap无侵入的 Bootstrap 定制版
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源文件即可。