Semantic UI 的特定术语

  • 术语类型
    • 一、组件类型 (Types of Components)
    • 二、工程术语 (Project Terminology)
    • 三、定义术语 (Definition Terminology)
    • 四、一般术语 (General Terms)

术语类型

你好!这是一篇关于semantic ui 有关的术语的简介。

一、组件类型 (Types of Components)

Semantic UI 根据其特性将组件分成不同的类型,以下每一种都使用唯一的定义格式

第一列 第二列
Globals 全局是适用于整个网站风格。这些包括诸如整个完网站的CSS重置(reset)、字体、链接和大小默认值。全局包括整个网站的主题变量,其他组件可以对其进行继承和修改。
Element UI 是具有单一功能的页面元素。它们可以单独存在或以多元形式共享元素。比如,一组 按钮 可以使用 ui red buttons 作为一组单独 ui button 的子元素。
Collection 集合(Collections)是通常放在一起使用的组件,他们出现在一定的背景下。它们可以包括和扩展其他UI元素以用于某些上下文。例如 表单 可以扩展出 下拉框 或者 输入框。
Views 视图(view)是呈现特定类型的内容,通常在网站上保持一致。这些内容包括评论、动态 或者 卡片。
Modules 模块是一个组件,包括它们如何出现的定义以及它们的行为方式。这些包括 折叠菜单,下拉框和提示框等。
Behaviors 行为是描述页面元素应该如何动作的独立JavaScript组件,但并不是它们应该如何出现的方式。行为包括表单验证、状态管理和API请求路由。

二、工程术语 (Project Terminology)

Semantic UI 将组件分类成单独的定义组

第一列 第二列
Component 组件是用来分配用户元素接口的包的通用术语。
Definition 定义是一组CSS和JavaScript以描述组件的基本属性。定义使用变量来表示组件外观部分,以便它们可以随主题更改。
ui ui 是一个特殊的类名,用来区分组件的各个部分。比如, 列表 会接收 ui list 因为它有一个相应的定义,但列表项就只会接收 item。UI类名称帮助封装CSS,确保所有组件的部分在上下文中定义为“完整(whole)”组件。它也有助于更简单的发现未定义代码。只要发现 ui,是在找某一个组件

三、定义术语 (Definition Terminology)

Semantic UI 定义时,定义的这些部分是一致的,并且是描述组件的常用模式。

第一列 第二列
Component 组件(Component)是用来分配用户元素接口的包的通用术语。
Definition 定义(Definition)是一组CSS和JavaScript以描述组件的基本属性。定义使用变量来表示组件外观部分,以便它们可以随主题更改。
Types 类型(Types)是修改元素标准外观的元素的版本。能在同一元素上同时使用类型。例如,“猫”和“狗”是动物的类型,但它们是不同的存在。
Variations 变量(Variations)可以修改元素的属性,比如尺寸,颜色。变量是相互包容的,可以一起修改元素。
Content 内容(Content)是只有在组件上下文中才有意义的。内容使用名称来描述预期内容的类型,比如标题、描述、菜单,或者项(item)。集合中的内容或视图通常包括其他组件的根版本。例如卡片让你使用图像内容,它可以通过使用ui image variations来扩展。
States 状态(States)是用来修改一个元素,帮助表明启示(affordances)的变化。常见的状态包括加载(loading)、禁用(disabled)和激活(active)。
Behaviors 行为是组件的动作。行为是简单的短语,如“设置值(set value")”或“增量(increment)”,可以在JavaScript中调用。在调用时,行为会自动从小写短语转换为内部JavaScript方法。

四、一般术语 (General Terms)

这些术语是通用编程术语

第一列 第二列
Namespace 元素的名称,用来明确声明包含应用程序的目的。 在Semantic UI中,组件被赋予类名称 UI ,以帮助区分代码中的部分元素,并提供限定定义CSS规则范围的命名空间。
Gulp Gulp 是自动命令行任务的工具 Gulpjs.com
NPM NPM 是一种用于下载 Node JS 的包管理工具。
Node JS Node 是一种事件驱动的编程语言,常用来为前端开发运行命令行工具。 nodejs.org

Semantic UI术语相关推荐

  1. php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统,后端基于CodeIgniter,前端基于Semantic UI 2.2.10...

    羽翼后台管理平台(博客系统) 羽翼的由来 羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...

  2. Semantic UI 之 图标 icon

    第一步:创建项目 添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...

  3. semantic ui html5,Semantic UI :安装 Semantic UI

    对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...

  4. Semantic UI入门

    安装Semantic UI semantic UI可以有两种方式安装: 直接下载压缩包,解压后调用就可以使用了 用gulp进行安装 用gulp安装的优点是可以自己修改sementic ui中的样式,这 ...

  5. semantic.css,CSS框架:Semantic UI的优缺点

    Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...

  6. semantic ui html5,css中什么是Semantic UI框架?

    什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...

  7. Semantic Ui 之 容器 container

    第一步:创建项目 添加JQuery和Semantic UI包.创建container.html页面: 第二步:container.html页面 <!DOCTYPE html> <ht ...

  8. Semantic UI入门示例

    1.下载Semantic UI包引入相关文件遇到各种各样的问题,比如icon找不到.无动效等问题,所以通过链接的方式引入文件. 2.在页面引入文件(按照顺序) 引入文件内容如下:     <li ...

  9. 【项目实战】个人博客(SpringBoot,SSM,thymeleaf,Semantic UI)——从设计思路到部署一站式教学

    一.前言 1.项目背景 此项目并非原创,项目原型是李仁密老师的作品,具体的教学视频来自b站https://www.bilibili.com/video/BV1nE411r7TF,不过up主貌似也是搬运 ...

最新文章

  1. 计算机网络基础知识第二章要点
  2. 浅谈UML的概念和模型之UML九种图
  3. 缓存和数据库一致性问题,看这篇就够了
  4. 日志查看技巧_10种Git技巧,让你省时省力又省心!
  5. HTML浅学入门---基础知识 (1)基本规则
  6. python环境变量是什么意思_python设置环境变量有什么用
  7. 华哥讲堂:解析智能电视语音控制功能
  8. 全新定义!免费开源ERP平台如何玩转工业互联网
  9. leetcode剑指offer合集+题解
  10. 「Java代码审计」Java代码审计基础知识「一」
  11. 登陆界面万能密码绕过
  12. python 读写西门子PLC例子
  13. 软件工程课程设计项目总结与项目报告
  14. HTMLCSS仿京东详情页静态页面制作总结
  15. ftp工具,ftp工具专业版
  16. Viz-artist常用脚本操作
  17. 解决lo: flags=73<UP,LOOPBACK,RUNNING> mtu 65536 网络连接不通
  18. SAP所有模块用户出口(User Exits) 二
  19. 哈工大硕士生实现 11 种数据降维算法,代码已开源!
  20. FFmpeg+OpenGL ES+OpenSL ES打造Android视频播放器课程总结

热门文章

  1. 华为云计算机玩游戏,华为云电脑能不能玩游戏?实测告诉你:不仅能玩,还很流畅...
  2. 强大的javascript
  3. flask_sqlachemy查询字段区分大小写
  4. bes2300之电源管理(六)
  5. 30-60万+奖金 | 顶尖量化私募微观博易招募 Python 工程师
  6. 在统信uos v20 专业版(1030) 64位上 安装g++
  7. maven-自定义插件
  8. 杭州网站建设公司有哪些
  9. 解决安装Adobe Acrobat 8.0提示验证原版序列号的问题
  10. 深度学习踩坑系列之一 Error: module 'pandas' has no attribute 'core'