语义UI

介绍

语义UI是一个前端开发框架,类似于为主题设计的bootstrap。它包含预先构建的语义组件,可帮助使用人性化的HTML创建美观且响应迅速的布局。

根据Semantic UI网站,该框架利用简洁的HTML,直观的JavaScript和简化的调试,使前端开发成为一种有趣和愉快的体验。它与React,Angular,Meteor,Ember和许多其他框架集成,以帮助组织UI层和应用程序逻辑。

版本历史

第一个预发布版本于2013年9月在github上出现,由Jack Lukic创建。

Semantic UI 1.x于2014年11月首次发布,对以前的预发行版进行了重大更改。

Semantic UI 2.x于2015年6月首次发布,并引入了新的ui,一些错误修复,增强功能和默认主题改进。

浏览器支持

当前版本2.2.x支持以下浏览器

  • 最新的2个版本FF,Chrome,Safari Mac
  • IE 11+
  • Android 4.4及更高版本,适用于Android 44+的Chrome
  • iOS Safari 7+
  • Microsoft Edge 12+

安装

有几种方法可以安装Semantic UI,其中一些最简单的方法如下:

  1. 通过内容分发网络(CDN)

对于初学者来说,它是迄今为止最容易的。创建一个HTML文件,如下所示

<!DOCTYPE html> 
 <html> 
  <head> 
    <title>Semantic UI</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css"> 
    <!-- Add custom stylesheet here --> 
  </head> 
  <body> 
 
    <!-- Write your html code here --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script> 
  </body> 
 </html> 

NOTE:第5行上面的CDN链接将包含Semantic UI中的所有可用组件。如果要安装特定组件, 请单击此处以查看其各自的CDN链接。

  1. 使用构建工具

这将假设您正在使用安装了nodenpm Ubuntu Linux操作系统,对于其他操作系统, 请单击此处

在项目目录中,使用npm全局安装gulp

npm install -g gulp 

安装语义UI

npm install semantic-ui --save 
 cd semantic/ 
 gulp build 

包含在HTML中

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> 
 <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 <script src="semantic/dist/semantic.min.js"></script> 

通过npm更新

npm update 
  1. 与其他框架集成

您可以将Semantic UI与其他前端开发框架(如React,Angular,Ember或Meteor)集成。 单击此处获取更多信息和集成说明。

更多信息

语义用户界面拥有完整且组织良好的文档,可以立即启动并运行。以下链接将有助于您的语义UI之旅。


Contributing to the Guide

This open source guide is curated by thousands of contributors. You can help by researching, writing and updating these articles. It is an easy and fun way to get started with contributing to open source.