semantic ui要装什么才能使用
发布网友
发布时间：2022-04-22 02:35
共2个回答
热心网友
时间：2022-04-21 10:27
对于初学者来说，node, npm, gulp 等工具会造成不少麻烦，即陷入所谓的“依赖地狱”(dependency hell)。如果你不想用这些工具，可以简单地将 Semantic-UI 预编译好的 CSS 和 JavaScript 文件加入到 HTML 的 <head> 元素中，就跟你将 jQuery.min.js 加进去一样。
1. 创建 index.html
<html>
<head>
</head>
<body>
<div>
Default
</div>
<div>
<div>
Item A
</div>
<div>
Item B
</div>
<div>
Item C
</div>
</div>
</body>
</html>
现在页面看起来是这样的：
<img src="https://pic3.mg.com/v2-14dc8f536f48ca251a135e7ba7afc6_b.png" data-rawwidth="2870" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.mg.com/v2-14dc8f536f48ca251a135e7ba7afc6_r.png">
2. 下载 CSS 和 JS 文件
Semantic-UI 在 GitHub 上的代码仓库里，有准备好的 CSS 和 JS 文件供下载： https://github.com/Semantic-Org/Semantic-UI/tree/master/dist
<img src="https://pic4.mg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_b.png" data-rawwidth="1954" data-rawheight="544" class="origin_image zh-lightbox-thumb" width="1954" data-original="https://pic4.mg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_r.png">
我们目前需要的是 semantic.min.css 和 semantic.min.js 这两个文件，将它们加入到 HTML 的头部：
<head>
<link href="./semantic.min.css" rel="stylesheet" type="text/css">
<script src="./jquery.min.js"></script>
<script src="./semantic.min.js"></script>
</head>
你会发现中间多了一个 jquery.min.js，没错，如果你要使用 Semantic-UI 涉及 JavaScript 的高级功能，比如 tab, progress, sticky, API 等，就必须加上 jQuery 库，这是 Semantic-UI 所需要的全部依赖。
这里是一个 jQuery 的链接： https://code.jquery.com/jquery-3.1.1.min.js
3. 为 div 元素设定 ui 类
<body>
<div class="ui button">
Default
</div>
<div class="ui menu">
<div class="item">
Item A
</div>
<div class="item">
Item B
</div>
<div class="item">
Item C
</div>
</div>
</body>
然后去浏览器刷新一下，可以看到：
<img src="https://pic3.mg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_b.png" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.mg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_r.png">
聪明的你会发现，”ui button” 就代表一个按钮，而“ui menu” 是一个菜单，以此类推，”ui label” 是标签，”ui input” 是输入框，等等。所以使用 Semantic-UI 时，最重要的魔法关键词就是 “ui”。
现在的目录结构(文件夹)也十分直观，易于理解：
<img src="https://pic4.mg.com/v2-9aafa6b8d62d040afd9e6037236aa083_b.png" data-rawwidth="28" data-rawheight="258" class="origin_image zh-lightbox-thumb" width="28" data-original="https://pic4.mg.com/v2-9aafa6b8d62d040afd9e6037236aa083_r.png">
这一个例子展示了如何从零开始使用 Semantic-UI，包括目录结构，HTML 的结构。除了按钮，菜单，Semantic-UI 目前支持 50 多种网站中常见的 UI 组件，详细文档请打开官网查阅：https://semantic-ui.com
录制了一个简单的视频，暂时放在 * 上 (英文)，感兴趣的话请点击：
https://www.*.com/watch?v=JyBKcfLUabc
热心网友
时间：2022-04-21 11:45
准备工具
你需要使用命令行去安装，Windows 用 Powershell ，Mac 使用终端。然后确定你已经安装好了 npm 与 gulp 。
安装 Semantic UI
先为项目创建一个目录，然后进入到这个目录的下面，比如我在自己的桌面上去为项目创建一个目录：
cd ~/desktop
mkdir ninghao-semantic
cd ninghao-semantic
使用 npm 去安装一下 Semantic UI：
npm install semantic-ui
过一会儿会出现设置 Semantic UI 的提示，按上下箭头可以选择：
❯ Automatic (Use defaults locations and all components)
Express (Set components and output folder)
Custom (Customize all src/dist values)
Automatic：自动配置，一切都用默认的设置。
Express：快速设置，只需要设置组件还有输出的目录。
Custom：自定义，完全自己去定义 src/dist 目录。
选择默认的 Automatic ，回车执行，又会提示：
[?] We detected you are using NPM. Nice!
Is this your project folder?
/Users/xiaoxue/Desktop/ninghao-semantic (Use arrow keys)
❯ Yes
No, let me specify。
