42.前端开发框架Semantic UI（一）

转载请注明原始出处：http://blog.csdn.net/a464057216/article/details/52493469

后续此博客不再更新，欢迎大家搜索关注微信公众号“测开之美”，测试开发工程师技术修炼小站，持续学习持续进步。

简介

网页开发中，CSS控制网页样式。作为测试开发工程师，我个人不太擅长手写CSS、样式微调、兼容浏览器等工作，所以我选择使用成熟的前端框架，可以快速开发出样式美观的网站，也解决了大部分浏览器兼容问题。前端框架百花齐放，我们公司的产品使用了Bootstrap，我个人使用的是Semantic UI。

安装Semantic UI

首先需要安装node、全局安装gulp（我使用的是Mac环境）：

• brew install node
• sudo npm install -g gulp

然后进入项目的静态文件目录，比如我的是/learnflask/static，执行npm install semantic-ui --save，进行一些Semantic UI的设置后，安装完成（我设置的Semantic UI目录是/learnflask/static/semantic)后cd到Semantic UI目录，执行gulp build命令。

使用Semantic UI

使用Semantic UI，只需要在HTML文件头部引入如下3个文件即可（使用了又拍云的jQuery的CDN）：

按钮

学习前端框架无非是学习其各个组件，我们先从按钮开始。

标准按钮

Click

样式如下：

除了标签外，

标签也可以创建按钮（样式同上）：

Click

优先级按钮

Primary Secondary

样式如下：

动画效果按钮

水平切换

    
下一步
    

        
    

样式如下：

垂直切换

    
购物车
    

        
    

样式如下：

淡入淡出

    
购买
    
¥12.9/月

样式如下：

空心按钮

     个人信息

样式如下：

阴性、阳性按钮

Positive
Negative

样式如下：

不同颜色的按钮

 Red
 Orange
 Yellow
 Olive
 Green
 Teal
 Blue
 Violet
 Purple
 Pink
 Brown
 Grey
 Black
 Red
 Orange
 Yellow
 Olive
 Green
 Teal
 Blue
 Violet
 Purple
 Pink
 Brown
 Grey
 Black

样式如下：

反转色按钮

 

     Standard
     Red
     Orange
     Yellow
     Olive
     Green
     Teal
     Blue
     Violet
     Purple
     Pink
     Brown
     Grey
     Black
 
 

     Basic
     Basic Red
     Basic Orange
     Basic Yellow
     Basic Olive
     Basic Green
     Basic Teal
     Basic Blue
     Basic Violet
     Basic Purple
     Basic Pink
     Basic Brown
     Basic Grey
     Basic Black
 

样式如下：

带图标的按钮

     云存储

样式如下：

表示状态的按钮

激活状态

Logged In

样式如下：

不可点击的按钮

Disabled

样式如下：

加载状态按钮

加载中...

样式如下：

表示状态切换的按钮

样式如下：

带标签的按钮

默认标签在右侧

    

        
        Like
    
    
        2,048
    

样式如下：

标签在左侧且带向右的箭头（蓝色实心）

    1,024
    

         Forks
    

样式如下：

标签为图标的按钮

     Pause


     Next

样式如下：

按钮分组

普通按钮分组

可以为组设置统一的颜色：

    One
    Two

样式如下：

还可以设置其他属性，比如按钮大小、是否空心等等。

垂直显示的分组

可以设置整个组为空心按钮：

    One
    Two

样式如下：

图标按钮分组

样式如下：

带标签的按钮分组

 

      暂停 
      播放 
      随机 
 

样式如下：

混合类型的分组

  

         前一首 
         停止 
         后一首  
    

样式如下：

成员等宽的分组

在分组的设置中指明包含几个成员，则这几个成员平分所能占据的宽度：

    One
    Two
    Three
    Four
    Five

样式如下：

成员颜色不同的分组

    One
    Two
    Three

样式如下：

表示文件操作的按钮组

样式如下：

包含条件的按钮

如果是中文，需要配合Semantic UI的data-text属性为中间的or添加本地文本：

    Register
    

    Login


    注册
    

    登录

样式如下：

不同大小的按钮

Mini 
Tiny 
Small 
Medium 
Large 
Big 
Huge 
Massive 

样式如下：

紧凑的按钮

    普通
    
      
    
     暂停

样式如下：

圆形按钮

样式如下：

不同位置的按钮

左右浮动的按钮

右浮动
左浮动

样式如下：

充满整个容器的按钮

Fluid

样式如下：

固定在顶部和底部的按钮

顶部按钮

    
这是一个段落。

底部按钮

样式如下：

固定在顶部和底部的多个按钮

    
左上角
    
右上角


    
这是一个段落。


    
左下角
    
右下角

样式如下：

固定在左右的按钮

 左
 右

样式如下：

如果觉得我的文章对您有帮助，欢迎关注我(CSDN:Mars Loo的博客)或者为这篇文章点赞，谢谢！