Semantic UI术语
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术语相关推荐
- php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统,后端基于CodeIgniter,前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来 羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
- Semantic UI 之 图标 icon
第一步:创建项目 添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...
- semantic ui html5,Semantic UI :安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
- Semantic UI入门
安装Semantic UI semantic UI可以有两种方式安装: 直接下载压缩包,解压后调用就可以使用了 用gulp进行安装 用gulp安装的优点是可以自己修改sementic ui中的样式,这 ...
- semantic.css,CSS框架:Semantic UI的优缺点
Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...
- semantic ui html5,css中什么是Semantic UI框架?
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
- Semantic Ui 之 容器 container
第一步:创建项目 添加JQuery和Semantic UI包.创建container.html页面: 第二步:container.html页面 <!DOCTYPE html> <ht ...
- Semantic UI入门示例
1.下载Semantic UI包引入相关文件遇到各种各样的问题,比如icon找不到.无动效等问题,所以通过链接的方式引入文件. 2.在页面引入文件(按照顺序) 引入文件内容如下: <li ...
- 【项目实战】个人博客(SpringBoot,SSM,thymeleaf,Semantic UI)——从设计思路到部署一站式教学
一.前言 1.项目背景 此项目并非原创,项目原型是李仁密老师的作品,具体的教学视频来自b站https://www.bilibili.com/video/BV1nE411r7TF,不过up主貌似也是搬运 ...
最新文章
- 计算机网络基础知识第二章要点
- 浅谈UML的概念和模型之UML九种图
- 缓存和数据库一致性问题,看这篇就够了
- 日志查看技巧_10种Git技巧,让你省时省力又省心!
- HTML浅学入门---基础知识 (1)基本规则
- python环境变量是什么意思_python设置环境变量有什么用
- 华哥讲堂:解析智能电视语音控制功能
- 全新定义!免费开源ERP平台如何玩转工业互联网
- leetcode剑指offer合集+题解
- 「Java代码审计」Java代码审计基础知识「一」
- 登陆界面万能密码绕过
- python 读写西门子PLC例子
- 软件工程课程设计项目总结与项目报告
- HTMLCSS仿京东详情页静态页面制作总结
- ftp工具,ftp工具专业版
- Viz-artist常用脚本操作
- 解决lo: flags=73<UP,LOOPBACK,RUNNING> mtu 65536 网络连接不通
- SAP所有模块用户出口(User Exits) 二
- 哈工大硕士生实现 11 种数据降维算法,代码已开源!
- FFmpeg+OpenGL ES+OpenSL ES打造Android视频播放器课程总结
热门文章
- 华为云计算机玩游戏,华为云电脑能不能玩游戏?实测告诉你:不仅能玩,还很流畅...
- 强大的javascript
- flask_sqlachemy查询字段区分大小写
- bes2300之电源管理(六)
- 30-60万+奖金 | 顶尖量化私募微观博易招募 Python 工程师
- 在统信uos v20 专业版(1030) 64位上 安装g++
- maven-自定义插件
- 杭州网站建设公司有哪些
- 解决安装Adobe Acrobat 8.0提示验证原版序列号的问题
- 深度学习踩坑系列之一 Error: module 'pandas' has no attribute 'core'