semantic ui要装什么才能使用

时间 2019-12-09

标签 semantic 什么才能使用繁體版

原文原文链接

做者：呆呆笨笨
连接：https://www.zhihu.com/question/32233356/answer/196799506
来源：知乎
著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

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

方式一：不用 npm

对于初学者来讲，node, npm, gulp 等工具会形成很多麻烦，即陷入所谓的“依赖地狱”(dependency hell)。若是你不想用这些工具，能够简单地将 Semantic-UI 预编译好的 CSS 和 JavaScript 文件加入到 HTML 的 <head> 元素中，就跟你将 jQuery.min.js 加进去同样。html

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>

如今页面看起来是这样的：node

2. 下载 CSS 和 JS 文件jquery

Semantic-UI 在 GitHub 上的代码仓库里，有准备好的 CSS 和 JS 文件供下载： https://github.com/Semantic-Org/Semantic-UI/tree/master/distgit

咱们目前须要的是 semantic.min.css 和 semantic.min.js 这两个文件，将它们加入到 HTML 的头部：github

<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 所须要的所有依赖。web

这里是一个 jQuery 的连接： https://code.jquery.com/jquery-3.1.1.min.jsnpm

3. 为 div 元素设定 ui 类json

<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>

而后去浏览器刷新一下，能够看到：

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

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

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

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

https://www.youtube.com/watch?v=JyBKcfLUabc

方式二：用 npm

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

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

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

npm install -g gulp

1. Npm 项目初始化

npm init

这一步很是重要，新手一般会漏掉，形成后面不少文件路径方面的麻烦。输入该命令后，它会提示你输入项目名称等信息，直接点肯定，使用默认值便可。结束以后会在当前目录建立一个 package.json 的文件。

2. 安装 Semantic-UI

npm install —-save semantic-ui

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

你能够查看一下 semantic/ 目录的详细状况：

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

cd semantic
gulp build

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

这样一切就准备就绪了：

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 等看看会有什么效果。

这个例子的视频长一些，是 7 分钟，中间有一些实际安装的步骤，暂时放在 YouTube 上 (英文)，感兴趣请点击： https://www.youtube.com/watch?v=F_iTE_j7erw

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

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

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

本文英文版地址：

Building websites with Semantic-UI from scratch

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

http://semantic-ui-forest.com

Happy coding!