系统分析大作业系列博客三

系统分析大作业系列博客三：semantic-ui使用深入

系分项目博客三：semantic-ui框架深入使用

上次只是简要使用semantic-ui框架，这次对semantic-ui框架的使用进行进一步的深入。

上次主要简述semantic-ui框架的语义化样式与网格布局。

以下为深入探索

semantic-ui框架的组件变化总结

以button为示例，semantic-ui组件主要有以下变化：

尺寸变化：

代码

<button class="mini ui button">
  Mini
</button>
<button class="tiny ui button">
  Tiny
</button>
<button class="small ui button">
  Small
</button>
<button class="medium ui button">
  Medium
</button>
<button class="large ui button">
  Large
</button>
<button class="big ui button">
  Big
</button>
<button class="huge ui button">
  Huge
</button>
<button class="massive ui button">
  Massive
</button>

效果

浮动：

代码：

<button class="ui right floated button">Right Floated</button>
<button class="ui left floated button">Left Floated</button>

效果：

颜色：

代码：

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

效果：

形状变化：

代码：

<button class="circular ui icon button">
  <i class="icon settings"></i>
</button>

效果：

组合：

代码：

<div class="ui large buttons">
  <button class="ui button">One</button>
  <div class="or"></div>
  <button class="ui button">Two</button>
</div>

效果：

组件特定变化

这里不作展示，不同组件的特定变化不一致。

semantic ui在vue.js中的使用

semantic-ui官网开发了semantic-ui与semantic-ui-vue这两个包，这两个都可以在vue.js的开发中进行使用以引入相应semantic-ui组件。

具体案例，见我们组前端仓库：

https://github.com/sysu620/client