码迷,mamicode.com
首页 > 其他好文 > 详细

前端框架之Semantic UI

时间:2016-08-19 23:46:48      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:

 前记    

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

 

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

技术分享

 

前端框架之Semantic UI

标签:

原文地址:http://www.cnblogs.com/gmgyr/p/5789224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!