试玩 css 框架 Semantic UI

LMS
折腾
3.2K+ 7

玩 BootStrap 总觉得太呆板、千篇一律、丑，所以上周问了度娘有没有类似 BootStrap 的框架，于是找到了 Semantic UI。

Semantic UI 有中英文网站，英文站：semantic-ui.com，中文站：semantic-ui.cn，有兴趣的可以去瞄一下。

可能 BootStrap 看多了，所以对 Semantic UI 第一印象不错，可用组件也比 BootStrap 多，基本上现在网站上经常看到的功能都能包括到，颜色也丰富多彩，于是下了全套压缩包。

下压缩包的时候就能立马体验到为什么 Semantic UI 为什么功能丰富了，因为压缩包大啊，下载的 zip 文件 1.45M，全部功能的 semantic.min.js 文件 271.9KB，semantic.min.css 文件 235.3KB，而最新版本 3.3.7 的 bootstrap 全部 zip 压缩包才 362KB，全套的 bootstrap.min.js 文件是 36.2KB，bootstrap.min.css 文件 118.4KB，感觉完全是两个重量级的选手一般。

然后接着折腾实际运用，准备用 Semantic UI 做一套 WordPress 主题，然后照着原来折腾 BootStrap 的时候的思路来玩这个 Semantic UI 居然一脸懵逼，入门就差点把我踢出门外了。

BootStrap 的基本框架是 container row col 只要按层次在 DIV 上洒上对应的 class 出来的页面就像国庆阅兵的方阵一样整齐有序，手机下也自动自适应。而 Semantic UI 完全两码事，到现在我都没折腾出规律出来，比如就一个简单的居中显示，BootStrap 下一个 text-center 就能搞定，而 Semantic UI 下我愣是折腾不出来，最后无法只好自己加了个 class 然后再对这个 class 自己写 css 定义居中。同样的左右浮动也一样，Bootstrap 下也是一个 class 搞定，而 Semantic UI 愣是要来个 left right floated 可能还得加个 ui 3 个 class 才能搞定。

Semantic UI 的 grid 系统也很蛋疼，BootStrap 下的 grid 系统是按 12 份来分的，Semantic UI 下是 16 份，这倒不是大问题，最大的问题 Semantic UI 下的 grid 系统居然不能自动自适应，如果要自适应得在父元素申明一个
stackable 的 class，但是在设备的变化上没有自己操作的余地，简直有点傻。

JS 下，Bootstrap 给我的印象也是全自动的，只要加载了 js，然后设置对于 id 或 class 大部分 js 效果就自动加载了，但 Semantic UI 貌似不是这样（目前用到的不多），除了要特定的 class 或 ID 外，还需要自己再对其定义 js，而且 js 还是一种没见过的简写形式，没有大括号 {} 感觉很不顺眼。

目前正在用 Semantic UI 折腾一个 WordPress 主题，看看到时候效果如何。

THE END

评论 7

  1. Yan
    🏆🏆🏅

    想不到搜Semantic.min.css也能搜到兄台的博客。
    这货tm最蛋疼的是开头就是一句话：
    @import (https://fonts.googleapis.com....）
    关键我的虚机DA后台默认加载了semantic.min.css而且还没法改。

  2. BootStrap呆板是因为用了默认的样式，很多网站都会重写样式覆盖自带的样式

    1. 自带样式会设计才行,不然越改越丑.

    1. 对于博客来说，框架里能用到的不多，所以就特别臃肿了。

  4. 所谓bootstrap框架，是不是就是那些看着没什么用的header，footer，article什么的？
    门外汉完全体会不到框架的作用。

    1. 你说的应该是html5标签，所谓框架就是通用css样式有加js特效什么的，按它框架的格式填写div的class，网页就自动出来了。

发表评论

Submit