前端框架之Semantic UI

 前记    

       今天，又一轮的实训开始了。意味着最后一个暑假结束了。马上就步入大四了，搭上了大学的最后一班车。开学后意味着新挑战，有许多技术等着自己去学习。今天，老师教了我们一个前端新框架---------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

 搭建  Semantic UI 环境：

      第一步、下载文档

             访问  Semantic UI 主页，网址为:http://www.semantic-ui.cn/,点击Get Started按钮。

  然后点击Download Zip文档

         第二步、解压文档，如图所示：

第三步、新建包，js包、css包、HTML文件

      js包下导入semantic.css和themes，js包中导入semantic.js和jquery.js。然后在HTML代码中将js、css引入其中。

第四步、选择你想要的标签，引入HTML中

      这是所有的标签，选择你适合的标签吧！

   第五步、点击你的HTML文件，查看酷炫的页面吧！

这是小编的微信公众号，欢迎大家扫码关注;