如何使用语义UI CDN？

Question

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

Answer 1

您只需要复制要用于语义 UI 的文件的 URL，然后将其放入脚本或 link 下的 header标记为 "src" 或 "href" 值。

对于语义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>

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

Answer 3

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

Answer 4

我遇到了类似的问题，并尝试按照@NitinJadhav 的回答进行操作，但无法让 components/modules 像 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和语义UIjQuery。

我回到 Accordion 的文档并单击 "Usage" 选项卡以获取所需的 jQuery。

然后我将它转储到 application.js 中，并将它包裹在 $(document).ready 中。

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

这对我有用！

如何使用语义UI CDN？

How to use Semantic UI CDN?

cdn

semantic-ui