Semantic UI 语义化Web语言开发框架

发布于 2017-09-26 15:30:56 字数 2720 浏览 2304 评论 0

Semantic UI 是一款语义化Web语言开发框架,注重标签代码的语义化和可理解性,帮助我们更快地设计赏心悦目的网站,Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。

框架特点

简洁的 HTML

Semantic UI中词语和类(css clases)是可以相互替换的概念直观的使用自然语言中的语法,词汇和语序等来定义一个类(css class)。取BEM 和 SMACSS 的精华,同时使之更易于使用。

<div class="ui three buttons">
  <button class="ui active button">One</button>
  <button class="ui button">Two</button>
  <button class="ui button">Three</button>
</div>

直观明了的 Javascript

Semantic 使用被叫做 behaviors 的简单短语来触发功能,开发者可以更改任何组件中的配置来设置该组件中的某一设置。

$('select.dropdown').dropdown('set selected', ['meteor', 'ember']);
<select name="skills" multiple="" class="ui fluid dropdown">
  <option value="">Skills</option>
  <option value="angular">Angular</option>
  <option value="css">CSS</option>
  <option value="ember">Ember</option>
  <option value="html">HTML</option>
  <option value="javascript">Javascript</option>
  <option value="meteor">Meteor</option>
  <option value="node">NodeJS</option>
</select>

化繁为简的调试

记录日志使您很方便的追踪到性能瓶颈,而不必去堆栈轨迹中发掘问题所在。

$('.sequenced.images .image')
  .transition({
    debug     : true,
    animation : 'jiggle',
    duration  : 500,
    interval  : 200
  })
;

难以置信的主题

Semantic 自带简约的可继承系统,以及高级主题变量,使您可以自由的完成各式各样的设计,只需开发一次UI,您就可以在各处部署相同的代码。

众多的UI组件

定义不止局限于按钮。Semantic的组件接受多种不同的定义:元素、集合、视图、模块和行为。这些囊括了界面设计的所有内容。

支持响应式设计

Semantic是完全为em标签设计使响应式标准成为轻而易举的事。设计变量作为元素允许你选择如何使内容更好地适应平板和移动设备。

你喜欢的伙伴和资料库

Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。

帮助你的开发

企业已经准备好了,编译工具,性能日志,自定义支持,多层级主题继承——开发者梦寐以求的大事。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。