freeCodeCamp

3.4 KiB

Raw Blame History

title	localeTitle
Semantic UI	语义UI

语义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，其中一些最简单的方法如下：

通过内容分发网络（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链接。

使用构建工具

这将假设您正在使用安装了node和npm 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

与其他框架集成

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

3.4 KiB Raw Blame History Unescape Escape

语义UI

介绍

版本历史

浏览器支持

安装

更多信息

3.4 KiB

Raw Blame History