UI 组件库 - Semantic

UI组件库-Semantic

简介

Semantic UI 是一款完全语义化的前端界面开发框架，代码可读性与可理解性很强，界面简洁美观，与 BootStrap 风格接近，基于 JQuery，适用响应式布局，提供一些基本模板，兼容 Firefox、Chrome、safari,IE 10+ 等浏览器

环境搭建

本地安装（可能会有问题）

• 安装 Node

  Semantic UI 在本地安装时，需要使用 Node，所以需要先将 Node 安装到本地。

• 安装 gulp

  Semantic UI使用Gulp提供的命令行工具，对组件库进行构建。

  安装命令 npm install -g gulp

• 安装 Semantic UI

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

• 引用文件

  <link href="semantic/dist/semantic.min.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="semantic/dist/semantic.min.js"></script>
  

本地引用

可以将 Semantic UI 安装包下载到地址，解压后将构建好的文件复制到项目文件夹中，然后在项目中引用 。

• 下载地址:

  https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip

• 引用文件

  <link href="semantic/dist/semantic.min.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="semantic/dist/semantic.min.js"></script>
  

在线引用

可以在项目的 head 标签中，直接在线引用 Semantic UI 的 CDN 地址。

• 引用地址

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
  

注意

在使用 Semantic UI 的 js 文件之前，需要先引用 JQuery 的文件，因为 Semantic UI 依赖 JQuery 运行。

网络请求封装实现

提取基础信息

封装请求方法

挂载全局实例

组件中应用

总结