Semantic UI初步使用

Semantic 这个样式感觉好用到了极点，同时也对Bootstrap也有了深入的理解。
这是个什么东西呢？简单说来，就是css的层叠样式集合，本来很掏粪的css在这里模块化成了比较简单的易用的集合！而且动态也变得异常简单，只需要调用函数既可。
当然，首先你得非常熟悉这些东西，起码得知道有什么，然后才能拿来用。写了个Pinterest的首页样式的练手
Semantic UI的安装&为何安装
Semantic官网
成果：

也就是一个导航栏和一些心情展示

做完以后觉得，这个东西真心不适合我。老实说，这个有点需要对整个网页的构架有比较深入的理解。比方导航栏上分解元素，首先要对每个元素都有一定的了解才能拼出来，很多都是照搬模板

简析几个元素：

• 卡片的构造
  一个‘card’容器，包含了“图片、正文、正文补充”三个平行元素，这个没什么要多说明的，就是明白一个card的构造就好

    

        

            
        
        

            Kristy
            

                Joined in 2013
            
            
Kristy is an art director living in New York.
        
        

             22 Friends 
            Joined in 2013 
        
    

其实，这个cards是从官网直接copy下来的，就能用了

-导航栏
这个导航栏其实是Semantic中的menu模块。首先先给其一个空间吧，然后fixed是用来固定住，使得导航栏一直在页面的上方不会随翻页消失。
后来发现，style属性是可以更改初始设置的，大小什么的。

    

        

             
        
        
        

            
        
    
    

        YOUR ACCOUNT
    
    

        
    

• 其他设置
  这个是为了card根据内容改变大小的东西

$('#contentor').masonry({
        //这个为的是所有的card根据其内容大小改变自身大小
        itemSelector: '.card',
        columnWidth: 10
    });

总结

这个掌握的不是特别好，还是得多用才能理解，而且对页面布局也要有很大的耐心，细心才能搞定