如何使用语义UI CDN?

Adi*_*Adi 36 cdn semantic-ui

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

MTr*_*ran 67

您只需要复制要用于语义UI的文件的URL,并将其作为"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>
Run Code Online (Sandbox Code Playgroud)

  • @DavidTan好问题.显然,`semantic.min.js`和`semantic.min.css`包含所有内容.如果你查看他们的[Table API](http://semantic-ui.com/collections/table.html)的来源,你会发现他们只包括`semantic.min.js`和`semantic.min .css`而不是`table.min.css`你可以找到`semantic.min.css`文件里面的内容. (3认同)
  • @ChristopherMarkieta为了澄清,`semantic.min.js`和`semantic.min.css`一起包含*everything*,还是我必须为我想要使用的每个组件包含一个相应的文件? (2认同)

Nit*_*hav 10

更新为当前版本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>
Run Code Online (Sandbox Code Playgroud)

有关检查更新版本,请参见JSDeliver CDN页面