原创syui css样式 class类名使用说明

设计/VI/UI 792 0 2023-03-01

syui css样式 class类名使用说明
类名 描述
syui-circle 圆形
syui-lh 行距,即line-height:2;
syui-bold 加粗
syui-nobold 不加粗
syui-wrap 自动换行
syui-nowrap 不换行
syui-clear 清除浮动
syui-img-fluid 图片宽最大100%,高自动
syui-overflow-hidden 超出隐藏
syui-disabled 禁用标示,即鼠标滑过显示禁止标识
syui-center div居中显示,但需要设置宽度
syui-float-left 左浮
syui-float-right 右浮
syui-block 显示块
syui-none 隐藏块
syui-table 块级表格
syui-inline 显示内联元素,无换行符
syui-inline-block 行内块元素
syui-relative 相对位置
syui-absolute 绝对位置
syui-fixed 固定位置
syui-flex-horizontal 左|右固定布局
syui-flex-vertical 上|下固定布局
syui-flex-grow 配合左|右或上|下固定布局使用,实例:<div class="syui-flex-horizontal"><div>导航</div><div class="syui-flex-grow">内容</div></div>
syui-row
syui-col-x 列,配合行使用,其中:x=1~12,手机上宽度自动100%
syui-col-eq-x 等分列,配合行使用,其中:x=1~10,手机上宽度自动100%
syui-w-x 宽度%,x=0~100、auto,5为步长,即:0、5、10、……、auto
syui-h-x 高度%,x=0~100、auto,5为步长,即:0、5、10、……、auto
syui-text-left 文本居左
syui-text-right 文本居右
syui-text-center 文本居中
syui-text-center-vertical 文本垂直居中
syui-text-hide 文本隐藏,一般用于只显示背景不显示文字
syui-text-shadow 文本阴影
syui-text-indent 文本缩进2个字符
syui-text-cap 首字母大写
syui-text-upper 文本大写
syui-text-lower 文本小写
syui-ellipsis 文本单行显示,超出显示省略号
syui-ellipsis-x 文本多行显示,超出显示省略号,x=2~5
syui-font-x 字体大小,x=8~50,2为步长,即:8、10、12、14、……、50
syui-pd-x 内边距,x=0~10,10~50步长为5,即:1、2、3、……、9、10、15、20、……、50
配合内边距使用,x=left|right|top|bottom|left-right|top-bottom,即只显示相应边距
syui-mg-x 外边距,x=0~10,10~50步长为5,即:1、2、3、……、9、10、15、20、……、50
配合外边距使用,x=left|right|top|bottom|left-right|top-bottom,即只显示相应边距
syui-top-x 绝对上边距,x=0~10,10~50步长为5,即:1、2、3、……、9、10、15、20、……、50
syui-bottom-x 绝对下边距,x=0~10,10~50步长为5,即:1、2、3、……、9、10、15、20、……、50
syui-left-x 绝对左边距,x=0~10,10~50步长为5,即:1、2、3、……、9、10、15、20、……、50
syui-right-x 绝对右边距,x=0~10,10~50步长为5,即:1、2、3、……、9、10、15、20、……、50
syui-border-x 边框,x=1~10,默认1,颜色灰色
边框方向和线条,x=top|bottom|left|right和dashed|double|dotted
边框颜色,x=red|orange|yellow|olive|green|teal|blue|violet|purple|pink|brown|grey|gray|black|white
syui-radius-x 圆角,x=0~100,步长为2,即:0、2、4、……、100
圆角方向,x=top|bottom|left|right|top-left|top-right|bottom-left|bottom-right
syui-color-x 内容颜色,x=red|orange|yellow|olive|green|teal|blue|violet|purple|pink|brown|grey|gray|black|white
syui-bg-x 背景颜色,x=red|orange|yellow|olive|green|teal|blue|violet|purple|pink|brown|grey|gray|black|white

上一篇:fomantic-ui日历控件的使用和配置

下一篇:Fomantic-ui modal模态框/弹出窗口(alert, confirm, prompt)使用实例

讨论数量:0

请先登录再发表讨论。 2024-12-05

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链