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

• 此篇博客对应Bilibili教程链接
  https://www.bilibili.com/video/BV1EG411F7Cy/

用了一段时间bootstrap，虽然布局方便，但是始终感觉样式过于单一。最终发现了Semantic UI。真是前所未有的体验。放一个官网教程，大家可以欣赏下。https://1.semantic-ui.com/

1.Semantic UI介绍

Semantic UI—完全语义化的前端界面开发框架，跟 Bootstrap 和 Foundation 比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。

Semantic UI 特点：

• 文档和演示非常完善
• 易于学习和使用
• 配备网格布局
• 支持 Sass 和LESS 动态样式语言
• 有一些非常实用的附加配置，例如inverted类。
• 对于社区贡献来说是比较开放的。
• 有一个非常好的按钮实现，情态动词，和进度条。
• 在许多功能上使用图标字体。
  Semantic UI 对浏览器的支持：
• Last 2 Versions FF, Chrome, IE (aka 10+)
• Safari 6
• IE 9+ (Browser prefix only)
• Android 4
• Blackberry 10

2.使用教程。

（1）下载Semantic UI压缩包。

• 文件下载： 点击此处在本站下载压缩包

（2）解压Semantic UI压缩包。

（3）压缩包里面有例子。可以简单看下

（4）复制文件

只需要复制dist目录下面的 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>

（6）开始使用

button为例子

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

https://1.semantic-ui.com/

---