前端一直忽视的框架??其实很好用！！

前端开发框架Semantic UI

*前面时候在学习写项目的时候，学习到了这个前端开发框架Semantic UI,个人觉得比起Bootstrap来，使用起来更加语义化，更容易上手，也更好看。打开 Semantic UI 的文档，我们就会发现许多和 36kr 里类似的组件，把这些组件整合拼装起来，就可以做出一个页面。

推荐网站:https://semantic-ui.com

使用教程。
（1）、下载Semantic UI压缩包。
（2）、解压Semantic UI压缩包。
（3）、压缩包里面有例子。可以简单看下
（4）、只需要复制semantic.min.css和semantic.min.js和jquery.min.js文件到项目文件下。(3个文件)
（5）、引用（注意引用顺序）

<link rel="stylesheet" href="semantic.min.css">
<script src="jquery-1.10.1.js"></script>
<script src="semantic.min.js"></script>

按钮

学习前端框架无非是学习其各个组件，我们先从按钮开始。
标准按钮
<button type="button" class="ui button">Click</button>
样式如下：

除了<button>标签外，<div>标签也可以创建按钮（样式同上）：

<div class="ui button" tabindex="0">Click</div>

优先级按钮

<button type="button" class="ui primary button">Primary</button>
 <button type="button" class="ui secondary button">Secondary</button>

样式如下：

动画效果按钮
水平切换

<div class="ui animated button" tabindex="0">
    <div class="visible content">下一步</div>
    <div class="hidden content">
        <i class="right arrow icon"></i>
    </div>
</div>

样式如下：

垂直切换

<div class="ui vertical animated button" tabindex="0">
    <div class="visible content">购物车</div>
    <div class="hidden content">
        <i class="shop icon"></i>
    </div>
</div>

淡入淡出

<div class="ui fade animated button">
    <div class="visible content">购买</div>
    <div class="hidden content">&yen;12.9/月</div>
</div>

空心按钮

<button class="ui basic button">
    <i class="user icon"></i> 个人信息
</button>

反转色按钮

 <div class="ui inverted segment">
     <button class="ui inverted button">Standard</button>
     <button class="ui inverted red button">Red</button>
     <button class="ui inverted orange button">Orange</button>
     <button class="ui inverted yellow button">Yellow</button>
     <button class="ui inverted olive button">Olive</button>
     <button class="ui inverted green button">Green</button>
     <button class="ui inverted teal button">Teal</button>
     <button class="ui inverted blue button">Blue</button>
     <button class="ui inverted violet button">Violet</button>
     <button class="ui inverted purple button">Purple</button>
     <button class="ui inverted pink button">Pink</button>
     <button class="ui inverted brown button">Brown</button>
     <button class="ui inverted grey button">Grey</button>
     <button class="ui inverted black button">Black</button>
 </div>
 <div class="ui inverted segment">
     <button class="ui inverted basic button">Basic</button>
     <button class="ui inverted red basic button">Basic Red</button>
     <button class="ui inverted orange basic button">Basic Orange</button>
     <button class="ui inverted yellow basic button">Basic Yellow</button>
     <button class="ui inverted olive basic button">Basic Olive</button>
     <button class="ui inverted green basic button">Basic Green</button>
     <button class="ui inverted teal basic button">Basic Teal</button>
     <button class="ui inverted blue basic button">Basic Blue</button>
     <button class="ui inverted violet basic button">Basic Violet</button>
     <button class="ui inverted purple basic button">Basic Purple</button>
     <button class="ui inverted pink basic button">Basic Pink</button>
     <button class="ui inverted brown basic button">Basic Brown</button>
     <button class="ui inverted grey basic button">Basic Grey</button>
     <button class="ui inverted black basic button">Basic Black</button>
 </div>

带图标的按钮

<div class="ui icon button">
    <i class="cloud icon"></i> 云存储
</div>

不可点击的按钮

<button class="ui disabled button"><i class="user icon"></i>Disabled</button>

带标签的按钮 (默认标签在右侧)

<div class="ui labeled button" tabindex="0">
    <div class="ui button">
        <i class="heart icon"></i>
        Like
    </div>
    <a class="ui basic label">
        2,048
    </a>
</div>

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

<div class="ui left labeled button" tabindex="0">
    <a class="ui blue right pointing basic label">1,024</a>
    <div class="ui blue icon button">
        <i class="fork icon"></i> Forks
    </div>
</div>

成员颜色不同的分组

<div class="ui buttons">
    <button class="ui red basic button">One</button>
    <button class="ui blue basic button">Two</button>
    <button class="ui green basic button">Three</button>
</div>

*还有很多按钮功能，可以去官方或者文档查看。