顧名思義 這是一款語義化的UI框架，代碼可讀性與可理解性很強，界面簡潔美觀，與bootstrap風(fēng)格接近，基于jquery，適用響應(yīng)式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE 10+等瀏覽器。

使用方法

引入js與css文件:

使用:給元素添加對應(yīng)class即可使用相關(guān)組件，若需使用相關(guān)組件的動態(tài)效果 如tab切換，下拉等，使用相關(guān)元素調(diào)用對應(yīng)的js即可；semantic組件調(diào)用方法中都包含各類callback和相關(guān)配置項,根據(jù)需要可進行調(diào)用

常用組件

1按鈕，圖標(biāo)，標(biāo)簽

按鈕可設(shè)置大小、顏色、形狀等；

圖標(biāo)有多種分類，按正常英文都能搜到對應(yīng)icon;

標(biāo)簽 可設(shè)置顏色、形狀、固定位置等;

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

列表類：list中的item默認(rèn)為垂直排列(vertical)，可水平(horizontal)，可帶無序圓點(bulleted),可帶有序序數(shù)(ordered)；list可嵌套、可帶分割線，item可帶圖標(biāo)，item內(nèi)容可左右浮動；

卡片相關(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可按比例拆分；

值得注意的一點是 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有多種類型，支持搜索、下拉選項、可自帶標(biāo)簽等，可通過class設(shè)置大小；另外semantic的 form表單還支持各種類型的單選按鈕、復(fù)選框、開關(guān)等，使用時添加對應(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)，可帶搜索，選項內(nèi)容方向自適應(yīng)，內(nèi)容可多選(multiple)可單選；

tab切換：tab項一般為menu中的item，data-tab屬性與對應(yīng) tab內(nèi)容中的data-tab屬性要一致；tab可多級嵌套，多層tab調(diào)用時需指明context屬性,data-tab屬性值也需與多層結(jié)構(gòu)一致；

手風(fēng)琴：list的一種，結(jié)構(gòu)包含title和content,點擊title時content會展開或者收縮；可多層嵌套；調(diào)用：$('.ui.accordion')? .accordion();

常用class

fluid:自適應(yīng)，設(shè)置時元素充滿父級容器；——適用于圖片、卡片等

centered 內(nèi)部元素水平居中；——適用于卡片、網(wǎng)格等

center aligned 元素文字居中；——適用于卡片

middlel aligned(top aligned,bottom aligned) 當(dāng)前元素相對父級容器垂直居中；——適用于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)。

總結(jié)

以上是生活随笔為你收集整理的pc css框架,PC端框架—semantic ui的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。