Semantic UI 的基本使用：下载与引入

最新推荐文章于 2025-03-11 13:47:30 发布

静水流深之鑫

最新推荐文章于 2025-03-11 13:47:30 发布

阅读量4.1k

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

64 篇文章

订阅专栏

本文介绍Semantic UI相较于Bootstrap的优势，提供详细的使用步骤，并附带官方教程链接。Semantic UI提供了丰富的组件和样式，使得开发者能够轻松创建美观且响应式的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、用了一段时间bootstrap，虽然布局方便，但是始终感觉样式过于单一。最终发现了Semantic UI。真是前所未有的体验。放一个官网教程，大家可以欣赏下。http://semantic-ui.cn/introduction/getting-started.html
2、使用教程。
（1）、下载Semantic UI压缩包。
（2）、解压Semantic UI压缩包。
（3）、压缩包里面有例子。可以简单看下
（4）、只需要复制semantic.min.css和semantic.min.js和jquery.min.js文件到项目文件下。(3个文件)
（5）、引用（注意引用顺序）

<link rel="stylesheet" href="semantic.min.css">
<script src="jquery-1.10.1.js"></script>
<script src="semantic.min.js"></script>

 
 1
2
3
4

（6）、开始使用。（button为例子）

<button class="ui primary button">Login</button>
 
 1

（7）、更多教程参考这个。http://semantic-ui.cn/introduction/getting-started.html