EvaBootstrap无侵入的 Bootstrap 定制版

联合创作 · 2023-09-24 02:20

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源文件即可。

浏览 8
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报