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

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

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

简析几个元素：

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

    <div class="ui card" style="width:236px">
        <div class="image">
            <img src="images/p1.jpg">
        </div>
        <div class="content">
            <a class="header">Kristy</a>
            <div class="meta">
                <span class="date">Joined in 2013</span>
            </div>
            <div class="description">Kristy is an art director living in New York.</div>
        </div>
        <div class="extra content">
            <a><i class="user icon"></i> 22 Friends </a>
            <span class="right floated">Joined in 2013 </span>
        </div>
    </div>

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

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

<div class="ui fixed menu" style="height:54px;padding:10px 0px 10px 10px">
    <div class="ui right labeled input">
        <div class="ui basic label" style="padding:2px 0 2px 5px">
            <i class="red big pinterest icon"> </i>
        </div>
        <input type="text" placeholder="Search..." style="min-width: 356px">
        <div class="ui basic label">
            <i class="search icon"></i>
        </div>
    </div>
    <div class="ui left attached basic button" style="margin:0 0 0 10px">
        <i class="red pin icon"></i>YOUR ACCOUNT
    </div>
    <div class="right attached ui basic button">
        <i class="right setting icon"></i>
    </div>
</div>

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

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

总结

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