UI是Web的灵魂！Semantic UI是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。

弃用有歧义的表述

Semantic是围绕自然交流语言而架构的，这使得开发更加直观（易于理解）。

Semantic让你可以使用任何HTML标签来表现UI控件。

Semantic

<main class="ui three column grid">
    <aside class="column">1</aside>
    <section class="column">2</section>
    <section class="column">3</section>
</main>

Bootstrap

<div class="row">
    <div class="col-lg-4">1</div>
    <div class="col-lg-4">2</div>
    <div class="col-lg-4">3</div>
</div>

Semantic

<nav class="ui menu">
    <h3 class="header item">Title</h3>
    <a class="active item">Home</a>
    <a class="item">Link</a>
    <a class="item">Link</a>
    <span class="right floated text item">
        Signed in as <a href="#">user</a>
    </span>
</nav>

Bootstrap

<div class="navbar">
    <a class="navbar-brand" href="#">Title</a>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">User</a></p>
    </ul>
</div>

Senmatic

<button class="large ui button">
    <i class="heart icon"></i>
    Like it
</button>

Bootstrap

<button type="button" class="btn btn-primary btn-lg">
    <span class="glyphicon glyphicon-heart"></span>
    Like
</button>

与你的组件代码交流

Semantic的UI组件为你提供了实时的调试输出，让你的代码告诉你它是什么做的。

打开你的Web调试窗口

Semantic提供了Javascript的跟踪调试，意味着你的组件能告诉你它在做什么以及它正在做什么。

$('.kitten.image')
.transition('scale in')
.transition('tada', '800ms')
;

组件

UI 元素

• Reveal
• 分隔条
• 加载控件
• 图像控件
• 图标
• 按扭
• 标签
• 标题头控件
• 步骤控件
• 片断控件
• 输入控件
• 进度条控件

UI 集合

• 消息控件
• 网格（栅格）系统
• 菜单
• 表单
• 表格
• 面包屑/导航条

UI 视图

• Feed
• Item（元素列表）
• 列表
• 评论控件

UI 模块

• Shape
• 下拉列表模块
• 复选框模块
• 弹出框模块
• 手风琴模块
• 模态对话框
• 评分模块
• 调光器（遮罩层）
• 边栏
• 过渡（动画）效果
• 验证表单

---

项目主页
GitHub