semantic ui要装什么才能使用

 

作者：呆呆笨笨
链接：https://www.zhihu.com/question/32233356/answer/196799506
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

本答案将以两种方式讲解如何从零开始使用 Semantic-UI，其中第一种方式仅要求读者理解最基本的 HTML 语法。

 

方式一：不用 npm

对于初学者来说，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>

现在页面看起来是这样的：

&amp;lt;img src="https://pic3.zhimg.com/50/v2-14dc8f536f48ca251a135e764ba7afc6_hd.jpg" data-rawwidth="2870" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic3.zhimg.com/v2-14dc8f536f48ca251a135e764ba7afc6_r.jpg"&amp;gt;

2. 下载 CSS 和 JS 文件

Semantic-UI 在 GitHub 上的代码仓库里，有准备好的 CSS 和 JS 文件供下载：

&amp;lt;img src="https://pic3.zhimg.com/50/v2-b8dbfe23e25777a9f9a8a84196a7531b_hd.jpg" data-rawwidth="1954" data-rawheight="544" class="origin_image zh-lightbox-thumb" width="1954" data-original="https://pic3.zhimg.com/v2-b8dbfe23e25777a9f9a8a84196a7531b_r.jpg"&amp;gt;

我们目前需要的是 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 的链接：

 

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>

然后去浏览器刷新一下，可以看到：

&amp;lt;img src="https://pic4.zhimg.com/50/v2-246a6f0c1b6db999da0c2d21b913cf2e_hd.jpg" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic4.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_r.jpg"&amp;gt;

聪明的你会发现，”ui button” 就代表一个按钮，而“ui menu” 是一个菜单，以此类推，”ui label” 是标签，”ui input” 是输入框，等等。所以使用 Semantic-UI 时，最重要的魔法关键词就是 “ui”。

现在的目录结构(文件夹)也十分直观，易于理解：

&amp;lt;img src="https://pic3.zhimg.com/50/v2-9aafa6b8d62d040afd9e6037236aa083_hd.jpg" data-rawwidth="2864" data-rawheight="258" class="origin_image zh-lightbox-thumb" width="2864" data-original="https://pic3.zhimg.com/v2-9aafa6b8d62d040afd9e6037236aa083_r.jpg"&amp;gt;

 

这一个例子展示了如何从零开始使用 Semantic-UI，包括目录结构，HTML 的结构。除了按钮，菜单，Semantic-UI 目前支持 50 多种网站中常见的 UI 组件，详细文档请打开官网查阅：https://semantic-ui.com

 

录制了一个简单的视频，暂时放在 YouTube 上 (英文)，感兴趣的话请点击：

 

方式二：用 npm

如果你已经有一些前端开发的经验，至少对 npm 感到不陌生， 并听说过 gulp，那么在你的项目中使用 Semantic-UI 将变得更加便捷。

为了简单举例，仍旧只使用一个基本的 index.html：

&amp;lt;img src="https://pic1.zhimg.com/50/v2-81854e211271d58eec43ab31f9ca5a77_hd.jpg" data-rawwidth="2862" data-rawheight="268" class="origin_image zh-lightbox-thumb" width="2862" data-original="https://pic1.zhimg.com/v2-81854e211271d58eec43ab31f9ca5a77_r.jpg"&amp;gt;

如果你没有安装过 gulp，那请用这条命令安装它：

npm install -g gulp

 

1. Npm 项目初始化

npm init

这一步非常重要，新手通常会漏掉，造成后面很多文件路径方面的麻烦。输入该命令后，它会提示你输入项目名称等信息，直接点确定，使用默认值即可。结束之后会在当前目录创建一个 package.json 的文件。

&amp;lt;img src="https://pic2.zhimg.com/50/v2-c7cb39329ca88b1ba20d09762be67910_hd.jpg" data-rawwidth="2864" data-rawheight="242" class="origin_image zh-lightbox-thumb" width="2864" data-original="https://pic2.zhimg.com/v2-c7cb39329ca88b1ba20d09762be67910_r.jpg"&amp;gt;

 

2. 安装 Semantic-UI

npm install —-save semantic-ui

根据网速情况，可能会花几分钟到十几分钟不等。安装完成后，当前目录会多出 3 个条目：

&amp;lt;img src="https://pic4.zhimg.com/50/v2-fdbd914e716ecd4c1b64b137268ffa55_hd.jpg" data-rawwidth="2862" data-rawheight="320" class="origin_image zh-lightbox-thumb" width="2862" data-original="https://pic4.zhimg.com/v2-fdbd914e716ecd4c1b64b137268ffa55_r.jpg"&amp;gt;

你可以查看一下 semantic/ 目录的详细情况：

&amp;lt;img src="https://pic4.zhimg.com/50/v2-a7b9eb6a498804f492d1dfcac5230de3_hd.jpg" data-rawwidth="2858" data-rawheight="1692" class="origin_image zh-lightbox-thumb" width="2858" data-original="https://pic4.zhimg.com/v2-a7b9eb6a498804f492d1dfcac5230de3_r.jpg"&amp;gt;

 

3. 编译 Semantic-UI 的 CSS 和 JS 文件

cd semantic
gulp build

如果你安装的 gulp 没有任何问题，在一台配置不错的电脑上，这一步会花费大约 20 秒的时间，有时会稍长一些。

这样一切就准备就绪了：

&amp;lt;img src="https://pic3.zhimg.com/50/v2-108d6913c825f64a0ebfd794e5f5e0e7_hd.jpg" data-rawwidth="2844" data-rawheight="508" class="origin_image zh-lightbox-thumb" width="2844" data-original="https://pic3.zhimg.com/v2-108d6913c825f64a0ebfd794e5f5e0e7_r.jpg"&amp;gt;

 

4. 将编译好的 CSS 和 JS 加到 HTML 头部

<head><link href="./semantic/dist/semantic.min.css" rel="stylesheet" type="text/css"><script src="./jquery.min.js"></script><script src="./semantic/dist/semantic.min.js"></script>
</head>

与第一个例子相比，只是修改了 semantic.min.css 和 semantic.min.js 的文件路径。这里是为了说明方便，如果是实际使用，<script> 标签最好放到 <body> 标签的末尾，你肯定知道这一点了。

简单的页面就写好了，在浏览器里可以打开查看。你可以自己在 “ui” 后加一些词语，label, input 等看看会有什么效果。

&amp;lt;img src="https://pic4.zhimg.com/50/v2-246a6f0c1b6db999da0c2d21b913cf2e_hd.jpg" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original="https://pic4.zhimg.com/v2-246a6f0c1b6db999da0c2d21b913cf2e_r.jpg"&amp;gt;

 

这个例子的视频长一些，是 7 分钟，中间有一些实际安装的步骤，暂时放在 YouTube 上 (英文)，感兴趣请点击：

 

----------------------------------------

本文中文版原地址(知乎专栏):

从零开始用 Semantic-UI 搭建网页 - 知乎专栏

本文英文版地址：

Building websites with Semantic-UI from scratch

更多 Semantic-UI 的模版，主题和教程请访问：

http://semantic-ui-forest.com

 

 

Happy coding!

转载于:https://www.cnblogs.com/sysnap/p/8966986.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/280463.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

用户帐户控制设置_创建快捷方式以避免用户帐户控制弹出式快捷方式

用户帐户控制设置_创建快捷方式以避免用户帐户控制弹出式快捷方式

用户帐户控制设置There are numerous applications which, when launched, result in a UAC (User Account Control) warning being displayed. There are reasons why this security measure is a good idea, but it can also be extremely irritating. ElevatedShortcut lets…
阅读更多...
Java Observer Pattern(观察者模式)

Java Observer Pattern(观察者模式)

当对象间存在一对多关系时&#xff0c;则使用观察者模式&#xff08;Observer Pattern&#xff09;。比如&#xff0c;当一个对象被修改时&#xff0c;则会自动通知它的依赖对象。观察者模式属于行为型模式。 关键代码&#xff1a;在抽象类里有一个 ArrayList 存放观察者们。 优…
阅读更多...
rest_framework01：前后端分离\规范\简单例子（查询某本书）

rest_framework01：前后端分离\规范\简单例子（查询某本书）

web 开发模式 RESTful规范 1 数据的安全保障 url链接一般都采用https协议进行传输 注&#xff1a;采用https协议&#xff0c;可以提高数据交互过程中的安全性 2 接口特征表现 用api关键字标识接口url&#xff1a; https://api.baidu.comhttps://www.baidu.com/api注&#xff…
阅读更多...
.NET Core如何通过SSL访问MongoDB？

.NET Core如何通过SSL访问MongoDB？

【.NET Core】| 总结/Edison Zhou大家好&#xff0c;我是Edison。最近有一个ASP.NET Core通过SSL证书访问MongoDB的需求&#xff0c;但是在网上发现资料很少&#xff0c;于是调查了一番&#xff0c;做了如下的笔记&#xff0c;希望对你有用。背景在实际场景中&#xff0c;开发环…
阅读更多...
SQA

SQA

一、长大一条龙SQA计划 SQA计划需要包含软件工程质量保证、质量控制、数据收集和统计报告这四方面内容&#xff0c;计划以时间为线索&#xff0c;小组内成员为对象&#xff0c;以下为我组的工作计划&#xff1a; 时间 任务 需完成的情况 2017年10月 用户登录注册后台实现 …
阅读更多...
在pom.xml中配置nexus上传地址

在pom.xml中配置nexus上传地址

2019独角兽企业重金招聘Python工程师标准>>> <distributionManagement> <repository> <id>thirdparty</id> <url>http://&#xff5b;nexusIP地址&#xff5d;:8081/nexus/content/repositories/thi…
阅读更多...
网页背景平铺_在大约十秒钟内为网页创建无缝平铺背景

网页背景平铺_在大约十秒钟内为网页创建无缝平铺背景

网页背景平铺Creating a background image for your webpage (or desktop background) isn’t challenging at all. In fact, even a newbie Photoshop user can bash one out in about ten seconds. Here’s the simplest of simple methods with surprising, great results. …
阅读更多...
9月11日学习内容整理：正则表达式，re模块

9月11日学习内容整理：正则表达式，re模块

一、正则表达式&#xff1a;正则是很大的一个知识点&#xff0c;不会仅仅是下面这些东西 1、概念&#xff1a;正则表达式就是一种对字符串匹配的规则&#xff0c;注意是只对字符串&#xff0c;正则表达式和python没啥关系&#xff0c; 2、表达式&#xff1a; &#xff08;1&…
阅读更多...
rest_framework02：修改数据/校验钩子/read_only和write_only

rest_framework02：修改数据/校验钩子/read_only和write_only

修改数据 1.传入数据&#xff0c;选中data&#xff0c;以及修改data book_ser BookSerializer(instancebook, datarequest.data) 2.校验&#xff0c;通过则保存。 if book_ser.is_valid(): # 返回True 表示验证通过book_ser.save() # 不是book.save() rest_framework…
阅读更多...
MongoDB的安装与使用

MongoDB的安装与使用

MongoDB是一款NoSql数据库。NoSql数据库叫非关系型数据库&#xff0c;NoSql的全名Not only sql。是为了解决高并发、高可用、高可扩展&#xff0c;以及大数据存储等一系列问题而产生的数据库解决方案。NoSql&#xff0c;它不能替代关系型数据库&#xff0c;只能作为关系型数据库…
阅读更多...
linux 基准测试_如何对Linux系统进行基准测试：3个开源基准测试工具

linux 基准测试_如何对Linux系统进行基准测试：3个开源基准测试工具

linux 基准测试Linux’s command-line utilities can do anything, including perform benchmarks – but using a dedicated benchmarking program is a simpler and more foolproof process. These utilities allow you to perform reproducible tests across different syst…
阅读更多...
.NET 7 新增的 IParsable 接口介绍

.NET 7 新增的 IParsable 接口介绍

.NET 7 是一个新版本的 .NET&#xff0c;它新增了一个名为 IParsable 的接口。这个接口可以帮助开发人员更容易地在代码中解析字符串。IParsable 接口包含两个方法&#xff1a;Parse 和 TryParse。Parse 方法用于将一个字符串解析为指定类型的值。如果解析失败&#xff0c;则会…
阅读更多...
CentOS 7安装nginx+php+mysql环境

CentOS 7安装nginx+php+mysql环境

0x01 安装php 1、首先得安装第三方软件库 yum install epel-release 复制代码2、安装依赖包 yum install gcc gcc-c glibc libmcrypt-devel mhash-devel libxslt-devel libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-de…
阅读更多...
spring+springMvc+struts的SSH框架整合

spring+springMvc+struts的SSH框架整合

1.建立一个web项目 2.导入SSH框架所需jar包 3.配置web.xml文件 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns"http://java.sun.com/xml/ns/javaee" xsi:sc…
阅读更多...
听说这个语言认知服务又出新功能了？

听说这个语言认知服务又出新功能了？

点击上方蓝字关注我们&#xff08;本文阅读时间&#xff1a;7分钟)语言是人类智能发展的基石。鉴于语言拥有普遍性&#xff0c;几乎没有特定的技术或 AI 技术得以颠覆整个社会。微软的使命是赋能地球上的每个人和每个组织&#xff0c;帮助他们取得更多成就。立足于该使命&#…
阅读更多...
强大的XML

强大的XML

2018-04-23 20:29:26 XML&#xff1a;Extensible Markup Language&#xff0c;也就是可扩展标记语言。XML和HTML格式是古老的标记通用语言SGML的衍生语言。 XML文件是可以用来作为配置文件的&#xff0c;相比于其他配置文件的规范&#xff0c;XML的好处在于通过自定义的标记&am…
阅读更多...
rest_framework03：查询所有/新增数据/删除一个数据/封装Response/序列化与反序列化

rest_framework03：查询所有/新增数据/删除一个数据/封装Response/序列化与反序列化

查询所有 1.创建新clase和url&#xff0c;避免与查询一个功能逻辑混乱。 2.增加manyTrue&#xff0c; book_serBookSerializer(books,manyTrue) urls.py: path(books/,views.BooksView.as_view()) views.py class BooksView(APIView):def get(self,request):response_msg …
阅读更多...
如何对DevOps数据库进行源代码控制

如何对DevOps数据库进行源代码控制

提纲&#xff1a; 包括索引在内的数据库模式需要进行源代码控制诸如查询表这类用于控制业务逻辑的数据需要进行源代码控制开发人员需要一种能够便捷地创建本地数据库的方法共享数据库的更新只能通过构建服务器完成 健壮的DevOps环境需要对系统的每个组件进行持续集成。但是&…
阅读更多...
自定义异常最佳实践_播放，自定义和组织媒体的最佳文章

自定义异常最佳实践_播放，自定义和组织媒体的最佳文章

自定义异常最佳实践Computers today are used for much more than generating documents, writing and receiving email, and surfing the web. We also use them to listen to music, watch movies and TV shows, and to transfer media to and from mobile devices. 如今&…
阅读更多...
CSS中的路径裁剪样式clip-path

CSS中的路径裁剪样式clip-path

前面的话 CSS借鉴了SVG裁剪的概念&#xff0c;设置了clip-path样式&#xff0c;本文将详细介绍路径裁剪clip-path 概述 clip-path属性可以防止部分元素通过定义的剪切区域来显示&#xff0c;仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg&#xff0c;或…
阅读更多...
最新文章

Copyright @ 2022~2023