semantic ui
简介

顾名思义 这是一款语义化的UI框架，代码可读性与可理解性很强，界面简洁美观，与bootstrap风格接近，基于jquery，适用响应式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE 10+等浏览器。

使用方法

引入js与css文件:
<script src="/js/semantic.min.js"></script>
<link href="/css/semantic.min.css">

使用:给元素添加对应class即可使用相关组件，若需使用相关组件的动态效果 如tab切换，下拉等，使用相关元素调用对应的js即可；semantic组件调用方法中都包含各类callback和相关配置项,根据需要可进行调用

常用组件

1按钮，图标，标签

按钮可设置大小、颜色、形状等；
图标有多种分类，按正常英文都能搜到对应icon;
标签 可设置颜色、形状、固定位置等;

2list,item,card(image,content,header,description,meta,extra )

列表类：list中的item默认为垂直排列（vertical），可水平（horizontal），可带无序圆点（bulleted）,可带有序序数(ordered)；list可嵌套、可带分割线，item可带图标，item内容可左右浮动；
卡片相关：可成组嵌套在 cards中，content包含header、meta、description;可增加extra content、 bottom attached buttons等；

3 grid与table

semantic默认网格数为16，可直接嵌入column，也可中间嵌入row;column可按比例拆分；
值得注意的一点是 semantic的grid自带-14的margin值,写css踩过的坑...
table  包含thead,tbody,tfoot支持各种样式（celled 、stripped、warning、active、single line、selectable），th/td可像网格那样按比例分配；

4表单相关input,filed

calss为form的元素 的子元素 fields可包含field，可按网格比例分配，支持行间样式 inline class；input有多种类型，支持搜索、下拉选项、可自带标签等，可通过class设置大小；另外semantic的 form表单还支持各种类型的单选按钮、复选框、开关等，使用时添加对应class并调用相关js即可；

5 模态框，下拉菜单，tab切换与手风琴效果

modal框:结构分为header、content、actions(底部，一般放操作按钮) 部分， 调用方法不能直接用show()或hide()，semantic的调用方式为 $('.ui.modal').modal('show') / $('.ui.modal').modal('show');
下拉菜单：有文本下拉菜单（dropdown -> menu -> item）和输入框下拉菜单（option），可带搜索，选项内容方向自适应，内容可多选（multiple）可单选；
tab切换：tab项一般为menu中的item，data-tab属性与对应 tab内容中的data-tab属性要一致；tab可多级嵌套，多层tab调用时需指明context属性,data-tab属性值也需与多层结构一致；
手风琴：list的一种，结构包含title和content,点击title时content会展开或者收缩；可多层嵌套；调用：$('.ui.accordion')  .accordion();

常用class

fluid:自适应，设置时元素充满父级容器；——适用于图片、卡片等
centered 内部元素水平居中；——适用于卡片、网格等
center aligned 元素文字居中；——适用于卡片
middlel aligned(top aligned,bottom aligned) 当前元素相对父级容器垂直居中；——适用于list中的item
left floated,right floated ——适用于button、content、image等
left attached,top right attached ——适用于button、label等
大小：huge(巨大)、large(大)、 medium（中、一般默认为该值）、small(小)、tiny(微小)、mini(超小)；——适用于image、button、label、list等
horizontal、vertical —— 用于list、buttons等group类组件
英文数字（one，two,……，sixteen +'wide'）——适用于网格类（grid的column、fields的field、table的th或td）。