如何使用语义 UI CDN？答案

【问题标题】：How to use Semantic UI CDN?如何使用语义 UI CDN？
【发布时间】：2015-05-16 22:06:30
【问题描述】：

如何使用 CDN 将语义 UI 包含到 HTML 页面？ CDN链接是https://cdnjs.com/libraries/semantic-ui，但是怎么用呢？

【问题讨论】：

标签： cdn semantic-ui

【解决方案1】：

您只需复制要用于语义 UI 的文件的 URL，并将其作为“src”或“href”值放在脚本或链接标签下的标题中。

对于 Semantic UI，您需要三个通用文件：

semantic.min.css
jquery.min.js（来自 JQuery CDN）
semantic.min.js

例如：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Semantic UI CDN</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>
<body>
      <!-- Your Semantic UI Code -->
</body>
</html>

【讨论】：

注意：您不一定需要这三个文件。例如，如果您只是制作简单的表格，则 table.min.css 可以单独使用。
@ChristopherMarkieta 澄清一下，semantic.min.js 和 semantic.min.css 是否一起包含 everything，或者我是否必须为我想要的每个组件包含一个相应的文件使用？
@DavidTan 好问题。显然semantic.min.js 和semantic.min.css 包含所有内容。如果您查看他们的Table API 的来源，您会注意到他们只包括semantic.min.js 和semantic.min.css 而不是table.min.css，您可以在semantic.min.css 文件中找到它们的内容。
我明白了，所以table.min.css 和其他单独的组件文件只是 Semantic-UI 的独立部分，对于不想加载整个内容以使用其中一小部分的人来说?
这是我的理解，是的。

【解决方案2】：

针对当前版本 2.4.2 更新

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

要查看更新版本，请参阅JSDeliver CDN page。

【讨论】：

谢谢，但是如何知道哪个 jquery 版本应该与哪个语义 ui 版本一起使用？

【解决方案3】：

您可以在 dist 文件夹下的JSDeliver 上找到它。

【讨论】：

【解决方案4】：

我遇到了类似的问题，并尝试按照 @NitinJadhav 的答案进行操作，但无法让像 Accordion 这样的组件/模块真正具有交互性。它的样式正确，但不会像预期的那样打开或折叠。

我确实包含了 CDN，但我还必须添加一些额外的 JavaScript。我制作了一个 JS 文件 application.js 并在我的 HTML 文件中链接到它。

所以我的<head> 标签看起来像：

<head>
  ...
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
  <script src="/assets/application.js" ></script>
</head>

application.js 需要放在最后，因为我打算在文件中使用 jQuery 和 Semantic UI jQuery。

我回到 Accordion 的文档并单击“使用”选项卡以获取所需的 jQuery。

然后我把它转储到application.js，然后用$(document).ready包裹起来。

$(document).ready(function(){
  $('.ui.accordion').accordion();
});

这让它对我有用！

【讨论】：