什么是Semantic UI框架？

Semantic UI是一个用户友好度爆表的响应式前端框架，具备3000多个主题变量和50多个UI组件，可以快速搭建漂亮的网页。Semantic UI还集成了许多第三方资源库，包括React，Angular，Meteor，Ember等等，给开发人员带来了更多便捷。

Semantic UI官方一直大力宣传他们的最大亮点——“human-friendly HTML”，也就是说，开发人员可以使用通用语言来直观展示分类和命名，因此几乎没有任何门槛就可以读懂代码。

此外，相比Boostrap的很多类似的UI界面或Foundation需要自定义操作的UI界面，Semantic UI 可以默认创建更加美观的界面和布局。

使用方法

引入js与css文件:

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

常用组件

1、按钮，图标，标签

按钮可设置大小、颜色、形状等；

图标有多种分类，按正常英文都能搜到对应icon;

标签 可设置颜色、形状、固定位置等;

2、list,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)。

更多web前端自学知识，请查阅 HTML中文网 ！！