对semantic的部分总结

semantic：
ui：
ui 是一个特殊的类名，用来区分组件的各个部分。比如， 列表 会接收 ui list 因为它有一个 相应的定义，但列表项就只会接收 item。
它的意思是不同组件有不同的规定，如果是list就需要加ui这个class，如果是item就不需要加，言下之意就是如果是segment（表示下面包裹的是一组相关的内容），就要加ui
segments:
一组分段(segment)可以在一起使用
horizontal：
让segment变成水平的
segment：
段用来创建一组相关内容
inverted:
一个段segment可以以很强的反色对比显示
attached:
段落可以附加到页面中的其他内容上
可以和top bottom header [warning message]配合使用，或者不加表示两边（应该是上和下）
vertical:
使分段贴在一起，跟attached有点像
padded:
类似盒子内边距，可以加的样式是very
compact:
一个段可能只占用必要的空间(不会占用一整行)
aligned：
分段可以使其内容居左中右：left、right、center
basic：
目前用得最多的是让一个组件显示边线
button：
里面有一个特殊样式left，用于和标签连接时去掉连接处的圆角
fluid：
按钮可以占用其容器(他爹)的宽度
attached：
用法跟segment的一样，但是有四个样式：top、bottom、left、right
container：(人家用媒体查询写好的，自动改变大小)
容器是一个元素，其目的是根据用户屏幕的大小将页面元素包含到合理的最大宽度。容器与其他元素一起使用会很有用，比如和 grid 或者 menu 一起使用，能将其宽度限制为合理尺寸。
link：
让元素变成链接，样式不会变成蓝色，只对鼠标有反应
list：
列表，与item一起使用
horizontal加在包含list的元素可以是item水平
relaxed
列表可放宽内边距以提供额外空白
divided
列表可以在内容间显示分割线
aligned
列表内的元素可以垂直对齐：top、middle、bottom
field：
表示一种表单元素
fields：
多组域集合在一起出现
menu：
用来展示操作,比如导航
stackable:
菜单在移动设备下会堆叠起来
fitted：
可移除菜单里面的item水平间距或者垂直间距：horizontally fitted或vertically fitted

grid：
	column:
  	  semantic默认16个column与bootstrap的12不一样
	row:
	  行
	relaxed:
	  与grid搭配使用会增大列之间的间距
	stackable:
	  将自动将行堆叠到移动设备上的单个列
ps：semantic里面的尺寸：Mini  Tiny  Small  Medium  Large  Big  Huge  Massive 

下图是练手的实例：