Question

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

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

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

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

Answer 4

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

我确实包含了CDN，但是我也必须添加一些额外的JavaScript。我制作了一个application.js 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和语义UI jQuery。

我返回到手风琴的文档，然后单击“用法”选项卡以获取所需的jQuery。

然后我将其丢弃在application.js中，并包裹在$(document).ready中。

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

这对我有用！

如何使用语义UI CDN？

4 个答案: