semantic ui要装啥才能使用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了semantic ui要装啥才能使用相关的知识,希望对你有一定的参考价值。
对于初学者来说,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.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_b.png" data-rawwidth="2870" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_r.png">
2. 下载 CSS 和 JS 文件
Semantic-UI 在 GitHub 上的代码仓库里,有准备好的 CSS 和 JS 文件供下载: https://github.com/Semantic-Org/Semantic-UI/tree/master/dist
<img src="https://pic4.zhimg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_b.png" data-rawwidth="1954" data-rawheight="544" class="origin_image zh-lightbox-thumb" width="1954" data-original="https://pic4.zhimg.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.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_b.png" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_r.png">
聪明的你会发现,”ui button” 就代表一个按钮,而“ui menu” 是一个菜单,以此类推,”ui label” 是标签,”ui input” 是输入框,等等。所以使用 Semantic-UI 时,最重要的魔法关键词就是 “ui”。
现在的目录结构(文件夹)也十分直观,易于理解:
<img src="https://pic4.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_b.png" data-rawwidth="2864" data-rawheight="258" class="origin_image zh-lightbox-thumb" width="2864" data-original="https://pic4.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_r.png">
这一个例子展示了如何从零开始使用 Semantic-UI,包括目录结构,HTML 的结构。除了按钮,菜单,Semantic-UI 目前支持 50 多种网站中常见的 UI 组件,详细文档请打开官网查阅:https://semantic-ui.com
录制了一个简单的视频,暂时放在 YouTube 上 (英文),感兴趣的话请点击:
https://www.youtube.com/watch?v=JyBKcfLUabc 参考技术A 准备工具
你需要使用命令行去安装,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。
以上是关于semantic ui要装啥才能使用的主要内容,如果未能解决你的问题,请参考以下文章
fanuc 0i怎样可以通过PC监测加工情况?pc上要装啥软件?怎样连接cnc与pc?
fanuc 0i怎样可以通过PC监测加工情况?pc上要装啥软件?怎样连接cnc与pc?
我应该在我的 MS SQL 服务器中安装啥 Oracle 驱动程序才能使用 DTS 将数据从 Oracle 服务器复制到 MS SQL 服务器?