共享语义 unix语义_语义UI指南

最新推荐文章于 2024-10-01 18:51:18 发布

cumian8165

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量232

点赞数

文章标签： java python javascript html go ViewUI

原文链接：https://www.freecodecamp.org/news/semantic-ui-guide/

版权

共享语义 unix语义

什么是语义UI？ (What is Semantic UI? )

Semantic UI is a front-end development framework similar to bootstrap designed for theming. It contains pre-built semantic components that helps create beautiful and responsive layouts using human-friendly HTML.

语义UI是类似于为主题设计的引导程序的前端开发框架。它包含预构建的语义组件，这些组件有助于使用人性化HTML创建美观且响应Swift的布局。

According to the Semantic UI website, the framework utilizes concise HTML, intuitive JavaScript, and simplified debugging to make a front-end development a fun and delightful experience.

根据Semantic UI网站的说法，该框架利用简洁HTML，直观JavaScript和简化的调试使前端开发变得有趣而令人愉快。

And it integrates with React, Angular, Meteor, Ember and many other frameworks to help organize UI layer alongside application logic.

它与React，Angular，Meteor，Ember和许多其他框架集成在一起，以帮助组织UI层和应用程序逻辑。

语义UI版本历史 (Semantic UI Version History)

The first pre-release appear on github on September 2013, created by Jack Lukic.

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

Semantic UI 1.x was first released in November 2014 with breaking changes to previous pre-releases.

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

Semantic UI 2.x was first released in June 2015 and introduced new ui, several bug fixes, enhancements, and default theme improvements.

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

语义UI浏览器支持 (Semantic UI Browser Support)

The current version 2.2.x support the following browsers

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

Last 2 Versions FF, Chrome, Safari Mac
FF，Chrome，Safari Mac的最后2个版本
IE 11+
IE 11+
Android 4.4+, Chrome for Android 44+
Android 4.4以上版本，Chrome for Android 44以上版本
iOS Safari 7+
iOS Safari 7+
Microsoft Edge 12+
微软Edge 12+

如何安装语义UI (How to Install Semantic UI)

There are several ways of installing Semantic UI, some of the simplest ways are as follows:

有几种安装语义UI的方法，其中一些最简单的方法如下：

通过内容分发网络(CDN) (Via Content Delivery Network (CDN))

It is by far the easiest for beginners. Create an HTML file as below

到目前为止，对于初学者来说，这是最容易的。创建如下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: The above CDN link on line 5, will include all the available components in Semantic UI. If you want to install a specific component, click here to see its respective CDN link.

NOTE:上面的第5行CDN链接将包含语义UI中的所有可用组件。如果要安装特定组件，请单击此处查看其相应的CDN链接。

使用构建工具 (Using Build Tools)

This will assume you’re using Ubuntu Linux OS with node and npm installed, for other operating systems click here

这将假定您使用的是装有node和npm Ubuntu Linux操作系统，对于其他操作系统，请单击此处。

In your project directory, install gulp globally using npm

在您的项目目录中，使用npm全局安装gulp

npm install -g gulp

Install Semantic UI

安装语义UI

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

Include in HTML

包含在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>

Update Via npm

通过npm更新

npm update

与其他框架集成 (Integrating with other Frameworks)

You can integrate Semantic UI with other Front-end development frameworks like React, Angular, Ember or Meteor. Click here for more informations and integration instructions.

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

有关语义UI的更多信息： (More Information about Semantic UI:)

Semantic UI has thorough and very well organized documentation that will gets you up and running in no time. The following links will be helpful in your Semantic UI journey.

语义UI具有详尽且井井有条的文档，可让您立即启动并运行。以下链接将对您的语义UI之旅有所帮助。