semantic ui
簡介
顧名思義 這是一款語義化的UI框架踩叭，代碼可讀性與可理解性很強(qiáng)，界面簡潔美觀灾螃，與bootstrap風(fēng)格接近饱溢，基于jquery，適用響應(yīng)式布局驼卖，提供一些基本模板民假，兼容Firefox嚎研、Chrome蝌蹂、safari,IE 10+等瀏覽器噩斟。
使用方法
引入js與css文件:
<script src="/js/semantic.min.js"></script>
<link href="/css/semantic.min.css">
使用:給元素添加對(duì)應(yīng)class即可使用相關(guān)組件，若需使用相關(guān)組件的動(dòng)態(tài)效果 如tab切換孤个，下拉等剃允，使用相關(guān)元素調(diào)用對(duì)應(yīng)的js即可；semantic組件調(diào)用方法中都包含各類callback和相關(guān)配置項(xiàng),根據(jù)需要可進(jìn)行調(diào)用
常用組件
1按鈕齐鲤，圖標(biāo)斥废，標(biāo)簽
按鈕可設(shè)置大小、顏色给郊、形狀等牡肉；
圖標(biāo)有多種分類，按正常英文都能搜到對(duì)應(yīng)icon;
標(biāo)簽 可設(shè)置顏色淆九、形狀统锤、固定位置等;
2list,item,card(image,content,header,description,meta,extra )
列表類：list中的item默認(rèn)為垂直排列（vertical），可水平（horizontal）炭庙，可帶無序圓點(diǎn)（bulleted）,可帶有序序數(shù)(ordered)饲窿；list可嵌套、可帶分割線焕蹄，item可帶圖標(biāo)逾雄，item內(nèi)容可左右浮動(dòng)；
卡片相關(guān)：可成組嵌套在 cards中腻脏，content包含header鸦泳、meta、description;可增加extra content永品、 bottom attached buttons等做鹰；
3 grid與table
semantic默認(rèn)網(wǎng)格數(shù)為16，可直接嵌入column鼎姐，也可中間嵌入row;column可按比例拆分誊垢；
值得注意的一點(diǎn)是 semantic的grid自帶-14的margin值,寫css踩過的坑...
table? 包含thead,tbody,tfoot支持各種樣式（celled 、stripped症见、warning、active殃饿、single line谋作、selectable），th/td可像網(wǎng)格那樣按比例分配乎芳；
4表單相關(guān)input,filed
calss為form的元素 的子元素 fields可包含field遵蚜，可按網(wǎng)格比例分配帖池，支持行間樣式 inline class；input有多種類型吭净，支持搜索睡汹、下拉選項(xiàng)、可自帶標(biāo)簽等寂殉，可通過class設(shè)置大星舭汀；另外semantic的 form表單還支持各種類型的單選按鈕友扰、復(fù)選框彤叉、開關(guān)等，使用時(shí)添加對(duì)應(yīng)class并調(diào)用相關(guān)js即可村怪；
5 模態(tài)框秽浇，下拉菜單，tab切換與手風(fēng)琴效果
modal框:結(jié)構(gòu)分為header甚负、content柬焕、actions(底部，一般放操作按鈕) 部分梭域， 調(diào)用方法不能直接用show()或hide()斑举，semantic的調(diào)用方式為 $('.ui.modal').modal('show') / $('.ui.modal').modal('show');
下拉菜單：有文本下拉菜單（dropdown -> menu -> item）和輸入框下拉菜單（option），可帶搜索碰辅，選項(xiàng)內(nèi)容方向自適應(yīng)懂昂，內(nèi)容可多選（multiple）可單選；
tab切換：tab項(xiàng)一般為menu中的item没宾，data-tab屬性與對(duì)應(yīng) tab內(nèi)容中的data-tab屬性要一致凌彬；tab可多級(jí)嵌套，多層tab調(diào)用時(shí)需指明context屬性,data-tab屬性值也需與多層結(jié)構(gòu)一致循衰；
手風(fēng)琴：list的一種铲敛，結(jié)構(gòu)包含title和content,點(diǎn)擊title時(shí)content會(huì)展開或者收縮；可多層嵌套会钝；調(diào)用：$('.ui.accordion')? .accordion();
常用class
fluid:自適應(yīng)伐蒋，設(shè)置時(shí)元素充滿父級(jí)容器；——適用于圖片迁酸、卡片等
centered 內(nèi)部元素水平居中先鱼；——適用于卡片、網(wǎng)格等
center aligned 元素文字居中奸鬓；——適用于卡片
middlel aligned(top aligned,bottom aligned) 當(dāng)前元素相對(duì)父級(jí)容器垂直居中焙畔；——適用于list中的item
left floated,right floated ——適用于button、content串远、image等
left attached,top right attached ——適用于button宏多、label等
大卸埂：huge(巨大)、large(大)伸但、 medium（中肾请、一般默認(rèn)為該值）、small(小)更胖、tiny(微小)铛铁、mini(超小)；——適用于image函喉、button避归、label、list等
horizontal管呵、vertical —— 用于list梳毙、buttons等group類組件
英文數(shù)字（one，two,……捐下，sixteen +'wide'）——適用于網(wǎng)格類（grid的column账锹、fields的field、table的th或td）坷襟。
