css中什么是Semantic UI框架?

什么是Semantic UI框架?

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

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

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

1.jpg

使用方法

引入js与css文件:

<script src="/js/semantic.min.js"></script>
<link href="/css/semantic.min.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中文网 !!

以上就是css中什么是Semantic UI框架?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏