快速入门

相关源文件

• .browserlistrc
• CONTRIBUTING.md
• README.md
• package.json
• tasks/build.js
• tasks/build/assets.js
• tasks/build/css.js
• tasks/build/javascript.js
• tasks/check-install.js
• tasks/clean.js
• tasks/collections/internal.js
• tasks/config/defaults.js
• tasks/config/docs.js
• tasks/config/project/config.js
• tasks/config/project/install.js
• tasks/config/project/release.js
• tasks/config/tasks.js
• tasks/config/user.js
• tasks/docs/build.js
• tasks/docs/metadata.js
• tasks/docs/serve.js
• tasks/install.js
• tasks/rtl/build.js
• tasks/rtl/watch.js
• tasks/version.js
• tasks/watch.js

本指南将帮助您为项目安装和设置 Semantic UI。它涵盖了安装选项、设置过程、项目结构、构建命令以及框架的基本用法。

有关 Semantic UI 及其架构的更广泛概述，请参阅 Semantic UI 概述。

安装选项

推荐的安装方式

这将触发一个交互式安装程序，帮助您设置项目。Semantic UI 包含一个安装程序，它将为您的项目创建必要的文件和配置。

其他安装方式

Semantic UI 提供多种安装选项以适应不同的项目需求

环境	Install 命令	描述
仅 CSS	npm install semantic-ui-css	仅编译的 CSS/JS
仅 LESS	npm install semantic-ui-less	仅源 LESS 文件
LESS 插件	npm install less-plugin-semantic-ui	LESS 插件
EmberJS	ember install:addon semantic-ui-ember	Ember 集成
Meteor - LESS	meteor add semantic:ui	Meteor (使用 LESS)
Meteor - CSS	meteor add semantic:ui-css	Meteor (使用 CSS)
Bower	bower install semantic-ui	Bower 包

来源：README.md30-52

安装过程

When you install Semantic UI using npm, the interactive installer guides you through configuring your project. This process is managed by the code in tasks/install.js.

安装流程图

来源：tasks/install.js59-468 tasks/config/project/install.js78-757

安装类型

1. 自动：使用默认位置并包含所有组件

   • 在项目中创建 semantic/ 文件夹
   • 使用所有文件的标准路径

2. Express：允许您选择组件和输出文件夹

   • 选择要包含的 UI 组件
   • 指定编译文件的输出目录

3. 自定义：自定义所有源文件和分发值

   • 完全控制文件路径和结构
   • 指定站点文件夹、打包输出以及压缩/未压缩的输出位置

来源：tasks/config/project/install.js329-347

组件选择

在 Express 或 Custom 安装期间，您可以选择要包含的组件

• Elements：基本 UI 构建块（按钮、输入框、图标等）
• Collections：元素组（表单、网格、菜单等）
• Modules：交互式组件（下拉菜单、模态框、提示框等）
• Views：内容显示格式（卡片、动态消息、列表项等）
• Behaviors：JavaScript 行为（API、状态、可见性等）

来源：tasks/config/project/install.js350-406

项目结构

安装完成后，Semantic UI 会在您的项目中创建以下结构

项目结构图

来源：tasks/config/project/install.js239-275 tasks/config/defaults.js19-41

配置文件

semantic.json

该 semantic.json 文件存储了您的项目配置，构建系统会使用它来定位源文件和输出目录。

示例 semantic.json

来源：tasks/config/project/install.js165-224 tasks/config/defaults.js5-118

theme.config

该 theme.config 文件决定了每个组件应使用哪个主题。此强大功能允许您混合搭配不同组件的主题。

来源：tasks/install.js352-380

构建系统

Semantic UI 使用 Gulp 作为其构建系统。安装完成后，您需要构建框架以生成 CSS 和 JavaScript 文件。

构建命令

来源：tasks/build.js1-48 tasks/watch.js1-268 tasks/clean.js1-25

构建流程图

来源：tasks/build.js1-48 tasks/build/css.js1-123 tasks/build/javascript.js1-87 tasks/build/assets.js1-46 tasks/collections/internal.js1-228

将 Semantic UI 包含在您的项目中

构建完成后，您可以将 Semantic UI 包含到您的项目中

完整框架

包含完整的 CSS 和 JavaScript

独立组件

您也可以只包含特定的组件

来源：package.json92

基本用法

Semantic UI 使用语义化的类名来描述其功能。以下是一些基本示例

UI元素

UI 集合

UI 模块

来源：README.md11-18 tasks/config/defaults.js44-107

浏览器支持

Semantic UI 支持

• Firefox、Chrome、Safari Mac 的最新 2 个版本
• IE 11+
• Android 4.4+，Chrome for Android 44+
• iOS Safari 7+
• Microsoft Edge 12+

注意：某些组件在 IE9 中可能无法正确显示，特别是网格和其他 flexbox 组件。

来源：README.md56-64

下一步

现在您已经安装并设置好了 Semantic UI，可以探索该框架的更多方面

1. 详细了解 框架架构
2. 探索 核心 UI 组件
3. 深入了解 CSS 样式系统
4. 使用 主题系统 进行自定义

来源：README.md17-18 tasks/config/defaults.js44-107