无侵入的Bootstrap定制版 EvaBootstrap
本文导语: EvaBootstrap是一个基于Twitter Bootstrap（下简称TB）的修改定制版，主要解决了TB的侵入性问题，能使TB更好的与其他前端项目并存。简言之，EvaBootstrap提供TB的所有特性，并且不会修改你的CSS默认样式。 EvaBootstrap将作为EvaEngine项目...
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中:
This line of text is meant to be treated as fine print.
在EvaBootstrap中:
表单This line of text is meant to be treated as fine print.
对于希望采用TB样式的表单，增加一个class .form
在Twitter Bootstrap中:
...
在EvaBootstrap中:
...移除TB font-face图标
TB的图标略显简陋，索性完全移除。如果想要使用图标，推荐更全更精致的Font Awesome，可以对应绝大多数项目需求。
新功能 中文排版通过引入typo.css项目，提供更好的中文排版支持。
对于需要采用中文排版的元素，加上class .typocn
高级别CSS ResetTB的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源文件即可。
意见反馈您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。