SemanticUI
2019-09-03 10:05:32 0 举报AI智能生成
Semantic-UI前端框架知识结构图
作者其他创作
大纲/内容
元素-Elements
按钮-Button
基本样式
<button class="ui button">添加按钮</a>
button
icon
文字内容
<div class="ui button">添加按钮</a>
<a class="ui button">添加按钮</a>
<i class="ui button">添加按钮</i>
<span class="ui button">添加按钮</span>
修饰样式
图标：<button class="ui button icon" tabindex="0"><i class="icon users"></i> 用户群组</button>
Font Awesome 5.0.8
button icon：清除图标两边间距,图标在按钮区域居中
颜色：<button class="ui button red">添加按钮</button>
positive/negative：正负按钮
primary/secondary：主次按钮
red/orange/yellow/olive/green/teal/blue/violet/purple/pink/brown/grey/black：颜色
尺寸：<button class="ui button mini">添加按钮</button>
mini / tiny / small / medium / large / big / huge / massive
动画：
<div class="ui button animated">
<div class="visible content">Next</div>
<div class="hidden content"><i class="right arrow icon"></i></div>
</div>
<!-- ------------------------------------------------ -->
<button class="ui loading button">加载</button>
<!-- ------------------------------------------------ -->
<button class="ui button icon">
<i class="icon loading spinner"></i> 正在加载中...
</button>
<button class="ui button icon">
<i class="icon loading asterisk"></i> 正在加载中...
</button>
<button class="ui button icon">
<i class="icon loading circle notched"></i> 正在加载中...
</button>
<div class="ui button animated">
<div class="visible content">Next</div>
<div class="hidden content"><i class="right arrow icon"></i></div>
</div>
<!-- ------------------------------------------------ -->
<button class="ui loading button">加载</button>
<!-- ------------------------------------------------ -->
<button class="ui button icon">
<i class="icon loading spinner"></i> 正在加载中...
</button>
<button class="ui button icon">
<i class="icon loading asterisk"></i> 正在加载中...
</button>
<button class="ui button icon">
<i class="icon loading circle notched"></i> 正在加载中...
</button>
animated / vertial animated / fade animated
visible content：默认显示的内容
hidden content：鼠标放上去显示的内容
loading：显示加载状态图标
spinner
asterisk
circle notched
状态：
<button class="ui button active">激活按钮</button>
<button class="ui button disabled">禁用按钮</button>
<button class="ui button active">激活按钮</button>
<button class="ui button disabled">禁用按钮</button>
active： 激活
disabled： 禁止
按钮组：
<div class="ui buttons">
<button class="ui button primary">primary 按钮</button>
<button class="ui button secondary">secondary 按钮</button>
<button class="ui button active">active 按钮</button>
<button class="ui button disabled">disabled 按钮</button>
</div>
<!-- ----------------------------------------------------------------- -->
<i class="ui buttons">
<button class="ui button negative">取消</button>
<i class="or" data-text="和"></i>
<button class="ui button positive">确认</button>
</i>
<!-- ----------------------------------------------------------------- -->
<div class="ui buttons icon compact">
<button class="ui labeled icon button"><i class="left chevron icon"></i> Back </button>
<button class="ui button"><i class="stop icon"></i> Stop </button>
<button class="ui right labeled icon button">Forward <i class="right chevron icon"></i></button>
</div>
<!-- ----------------------------------------------------------------- -->
<div class="ui three buttons">
<button class="ui button active">One</button>
<button class="ui button">Two</button>
<button class="ui button">Three</button>
</div>
<div class="ui buttons">
<button class="ui button primary">primary 按钮</button>
<button class="ui button secondary">secondary 按钮</button>
<button class="ui button active">active 按钮</button>
<button class="ui button disabled">disabled 按钮</button>
</div>
<!-- ----------------------------------------------------------------- -->
<i class="ui buttons">
<button class="ui button negative">取消</button>
<i class="or" data-text="和"></i>
<button class="ui button positive">确认</button>
</i>
<!-- ----------------------------------------------------------------- -->
<div class="ui buttons icon compact">
<button class="ui labeled icon button"><i class="left chevron icon"></i> Back </button>
<button class="ui button"><i class="stop icon"></i> Stop </button>
<button class="ui right labeled icon button">Forward <i class="right chevron icon"></i></button>
</div>
<!-- ----------------------------------------------------------------- -->
<div class="ui three buttons">
<button class="ui button active">One</button>
<button class="ui button">Two</button>
<button class="ui button">Three</button>
</div>
compact：紧凑型
icon：清除图标周围边距
数字：平分指定个数的按钮
圆形按钮形状：<button class="ui button circular">长方形椭圆角</button>
带标签按钮：
<div class="ui button labeled">
<button class="ui button icon">
<i class="icon heart"></i> 喜欢
</button>
<a class="ui label basic left pointing">2048</a>
</div>
<!-- ----------------------------------------------- -->
<button class="ui button icon right labeled">
<i class="icon play right"></i> 播放
</button>
<!-- ----------------------------------------------- -->
<button class="ui button fluid">提交信息</button>
<!-- ----------------------------------------------- -->
<button class="ui button compact fluid">提交信息</button>
<div class="ui button labeled">
<button class="ui button icon">
<i class="icon heart"></i> 喜欢
</button>
<a class="ui label basic left pointing">2048</a>
</div>
<!-- ----------------------------------------------- -->
<button class="ui button icon right labeled">
<i class="icon play right"></i> 播放
</button>
<!-- ----------------------------------------------- -->
<button class="ui button fluid">提交信息</button>
<!-- ----------------------------------------------- -->
<button class="ui button compact fluid">提交信息</button>
basic: 基本按钮，即使按钮无修饰样式(空心按钮)
pointing: 标签箭头样式(方向分左left 和 right右, up上，down下四个方向)
fluid：使按钮占据整行
compact：紧凑型按钮
icon：图标在按钮区域居中
labeled：使按钮具有标签样式(right 显示在右边，默认显示在左边)
attached：附加元素(方向分左left 和 right右, top上，bottom下四个方向)
幽灵(反转颜色)按钮：<button class="ui button primary basic inverted">Primary</button>
inverted: 反转颜色
浮动按钮：
<div class="ui divider horizontal">浮动</div>
<button class="ui button left floated">Left 按钮</button>
<button class="ui button right floated">Right 按钮</button>
<div class="ui divider hidden clearing"></div>
<div class="ui divider horizontal">浮动</div>
<button class="ui button left floated">Left 按钮</button>
<button class="ui button right floated">Right 按钮</button>
<div class="ui divider hidden clearing"></div>
floated: left 左浮动 right 右浮动
clearing：清除左右浮动
以上样式可以组合在一起使用
容器-Container
基本样式
标准容器：<div class="ui container">...</div>
文本容器：<div class="ui container text">...</div>
流式容器：<div class="ui container fluid">...</div>
fluid：流式布局
修饰样式
文本对齐方式：
<div class="ui container right aligned">右对齐</div>
<div class="ui container right aligned">右对齐</div>
(left | center | right ｜ justified) aligned 默认left
适用范围：用于包裹grid网格和menu菜单及页面整体布局内容
分隔条-Divider
基本样式
<div class="ui divider"></div>
修饰样式
水平方向：<div class="ui divider horizontal">文本提示</div>
clearing 清除左右浮动
hidden 隐藏
block(section) 增大上下间距
fitted 清除上下间距
分隔条在指定的区域居中垂直显示：
<div class="ui segment raised placeholder">
<div class="ui divider vertical">垂直分隔条</div>
</div>
<!-- ------------------------------------------------ -->
<div class="ui segment raised placeholder">
<div class="ui grid two column center aligned">
<div class="column">第一列</div>
<div class="column">第二列</div>
</div>
<div class="ui divider vertical">VS</div>
</div>
<div class="ui segment raised placeholder">
<div class="ui divider vertical">垂直分隔条</div>
</div>
<!-- ------------------------------------------------ -->
<div class="ui segment raised placeholder">
<div class="ui grid two column center aligned">
<div class="column">第一列</div>
<div class="column">第二列</div>
</div>
<div class="ui divider vertical">VS</div>
</div>
grid布局若平分各个列
用数字来确定平分列数: <div class="ui grid three column">...</div>
用 equal width 来平分列数：<div class="ui grid equal width">...</div>
国旗-Flag
基本样式
<div class="flag 国家代码"></div>
国家代码(china或cn: 中国，germany或de: 德国, united states或us: 美国 等等)
修饰样式
Semantic 的默认主题使用图片精灵来实现，它提供了清爽的图标，但是没法调整大小
标题-Header
基本样式
页面标题：<h1 class="ui header">文本信息</h1>
H 标签索引从1到5
内容标题：<div class="ui header">文本信息</div>
div 标签
图标标题：
<div class="ui header icon segment raised">
<i class="icon users"></i>
<div class="content">
群组设置
<div class="sub header">管理你的团队成员</div>
</div>
</div>
<div class="ui header icon segment raised">
<i class="icon users"></i>
<div class="content">
群组设置
<div class="sub header">管理你的团队成员</div>
</div>
</div>
头部 header
图标/图片 icon / image
内容 content
文字信息
子标题 sub header
修饰样式
字体大小:<div class="ui header small">文本内容</div>
大小范围：tiny / small / medium / large / huge
文本对齐：
<div class="ui header icon center aligned">
<i class="icon users circular"></i>
用户群组
</div>
<div class="ui header icon center aligned">
<i class="icon users circular"></i>
用户群组
</div>
(left | center | right ｜ justified) aligned / centered(与 icon 组合无效) 默认left
副标题：<div class="ui sub header">副标题内容</div>
图文混排：
<div class="ui header tiny">
<img src="../images/patrick.png" class="ui image circular">
<div class="content">
关于我们
<div class="sub header">介绍公司相关信息</div>
</div>
</div>
<!-- -------------------------------------------------------- -->
<div class="ui header tiny">
<img src="../images/patrick.png" class="ui image circular">
<div class="content">
<div class="ui sub header">JackLau</div>
产品开发经理
</div>
</div>
<div class="ui header tiny">
<img src="../images/patrick.png" class="ui image circular">
<div class="content">
关于我们
<div class="sub header">介绍公司相关信息</div>
</div>
</div>
<!-- -------------------------------------------------------- -->
<div class="ui header tiny">
<img src="../images/patrick.png" class="ui image circular">
<div class="content">
<div class="ui sub header">JackLau</div>
产品开发经理
</div>
</div>
header
icon/image
content
文字内容
sub header
禁用状态：<div class="ui header disabled">禁用标题</div>
标题颜色：<div class="ui header blue">标题内容</div>
red/orange/yellow/olive/green/teal/blue/violet/purple/pink/brown/grey/black
标题底部分隔线：<div class="ui header dividing">标题内容</div>
dividing: 在标题底部显示边框
标题区块：<div class="ui header block">标题内容</div>
block: 头部背景颜色变为浅灰色
附属：
<h3 class="ui header top attached block centered">Top Attached </h3>
<div class="ui segment attached left aligned gray">
<p>attached segment</p>
</div>
<h3 class="ui header attached blue centered">附属 </h3>
<div class="ui segment attached">
<p>attached segment</p>
</div>
<h3 class="ui header bottom attached right aligned block">Bottom Attached </h3>
<h3 class="ui header top attached block centered">Top Attached </h3>
<div class="ui segment attached left aligned gray">
<p>attached segment</p>
</div>
<h3 class="ui header attached blue centered">附属 </h3>
<div class="ui segment attached">
<p>attached segment</p>
</div>
<h3 class="ui header bottom attached right aligned block">Bottom Attached </h3>
centered: 头部标题信息居中显示
attached: 附着作用，方向为top和bottom两个方向
aligned: 对齐(left / right / center)
block: 背景颜色变为浅灰色
标题浮动：
<div class="ui segment clearing">
<h3 class="ui header right floated">右浮动</h3>
<h3 class="ui header left floated">左浮动</h3>
</div>
<div class="ui segment clearing">
<h3 class="ui header right floated">右浮动</h3>
<h3 class="ui header left floated">左浮动</h3>
</div>
floated：left 左浮动 right 右浮动
以上样式可以组合在一起使用
图标-Icon
基本样式
<i class="icon users"></i>用户
修饰样式
图标颜色：
<i class="icon user red"></i>
<i class="icon user red inverted"></i>
<i class="icon user red"></i>
<i class="icon user red inverted"></i>
red/green/blue/orange/yellow/olive/teal/violet/purple/pink/brown/grey/black
inverted 幽灵(反转颜色)
图标大小：<i class="icon user small"></i>
mini / tiny / small / large / big / huge / massive
图标加载状态：
<i class="icon spinner loading"></i>
<i class="icon circle notched loading"></i>
<i class="icon asterisk loading"></i>
<i class="icon spinner loading"></i>
<i class="icon circle notched loading"></i>
<i class="icon asterisk loading"></i>
loading
spinner
circle notched
asterisk
图标反转和旋转：
<i class="icon question circle vertical flipped"></i>
<i class="icon question circle counterclockwise rotated"></i>
<i class="icon question circle vertical flipped"></i>
<i class="icon question circle counterclockwise rotated"></i>
flipped翻转： horizantal 水平 / vertical 垂直 ,默认水平
rotated 旋转：counterclockwise 逆时针旋转，默认顺时针旋转
图标状态：
<i class="icon users bordered"></i> 用户群体
<i class="icon users disabled"></i> 禁用个体户
<i class="icon users bordered"></i> 用户群体
<i class="icon users disabled"></i> 禁用个体户
bordered: 给图标添加边框
disabled：图标禁用
箭头图标加上黑色背景圆圈
<i class="icon arrow up"></i> 向上图标
<i class="icon arrow up circle"></i> 向上图标
<i class="icon arrow up"></i> 向上图标
<i class="icon arrow up circle"></i> 向上图标
circle：给图上黑色背景圆图标
清除图标左右两边间距：<i class="icon users blue fitted"></i>
fitted：清除左右边距
多个图标组合成一个图标：
<i class="icons large">
<i class="icon circle outline red big"></i>
<i class=" icon users"></i>
</i>
<i class="icons large">
<i class="icon circle outline red big"></i>
<i class=" icon users"></i>
</i>
icons：图标组合
圆形图标及链接样式:
<i class="icon user circular"></i>
<i class="icon upload link"></i>
<i class="icon user circular"></i>
<i class="icon upload link"></i>
link：超链接样式
以上样式可以组合在一起使用
图片-Image
基本样式
标准图片：<img src="images/person.jpg" class="ui image" />
包裹图片：
<div class="ui image">
<img src="images/person.jpg" />
</div>
<div class="ui image">
<img src="images/person.jpg" />
</div>
图片组：
<div class="ui images mini">
<img class="ui image rounded" src="../images/appleicon.png">
<img class="ui image bordered" src="../images/school.png">
<img class="ui image circular" src="../images/patrick.png">
</div>
<div class="ui images mini">
<img class="ui image rounded" src="../images/appleicon.png">
<img class="ui image bordered" src="../images/school.png">
<img class="ui image circular" src="../images/patrick.png">
</div>
rounded: 圆边角
bordered: 加边框
circular / avatar： 圆形图标(原始图片要求为正方形)
图片超链接：
<a href="#" class="ui image">
<img src="images/person.jpg" />
</a>
<a href="#" class="ui image">
<img src="images/person.jpg" />
</a>
修饰样式
图片尺寸：<image src="images/person.jpg" class="ui image small" />
mini/tiny/small/medium/large/big/huge/massive
人物图片：<img src="../images/ade.jpg" class="ui image avatar tiny" />Miss Jane
avatar：用户肖像图标(圆形)
加边框：<img src="../images/ade.jpg" class="ui image rounded" />
rounded 圆角边框 / circular 圆形边框 / bordered 白底或透明图片加边框
图片在容器中居中：<img src="../images/patrick.png" class="ui image centered">
centered: 图片在容器中居中显示
图片禁用状态：<img src="../images/patrick.png" class="ui image disabled">
增加图片两边间距：<img src="../images/patrick.png" class="ui image spaced">
spaced: 增加两边间距
图片左右浮动：<img src="../images/patrick.png" class="ui image left floated">
(left | rgiht) floated 左右浮动
图片与文字对齐方式：<img src="../images/patrick.png" class="ui image top aligned">
top 顶部 middle 中间 bottom 底部
图片流式布局：<img src="../images/patrick.png" class="ui image fluid">
图片组合(一组图片可被设置为统一尺寸大小)：
<div class="ui images mini">
<img class="ui image rounded" src="../images/appleicon.png">
<img class="ui image bordered" src="../images/school.png">
<img class="ui image circular" src="../images/patrick.png">
</div>
<div class="ui images mini">
<img class="ui image rounded" src="../images/appleicon.png">
<img class="ui image bordered" src="../images/school.png">
<img class="ui image circular" src="../images/patrick.png">
</div>
以上样式可以组合在一起使用
输入框-Input
基本样式
<div class="ui input"><inut type="text" placehoder="标准文本输入框" /></div>
<div class="ui input search icon"><input type="text" class="prompt" placeholder="搜索输入框" /><i class="icon search"></i></div>
search与prompt结合使用
修饰样式
图标输入框：
<div class="ui input right icon">
<input type="text" name="username" placeholder="默认右边图标输入框" />
<!--link 使图标激活点击效果-->
<i class="icon user link"></i>
</div>
<div class="ui input right icon">
<input type="text" name="username" placeholder="默认右边图标输入框" />
<!--link 使图标激活点击效果-->
<i class="icon user link"></i>
</div>
图标位置：left 左 right 右,默认为右
link：具有超链接样式
输入框状态：
<div class="ui input disabled"><input type="text" name="username" placeholder="禁止输入" /></div>
<div class="ui input left icon loading"><input type="text" placeholder="加载状态在左边" /><i class="icon users"></i>
<div class="ui input disabled"><input type="text" name="username" placeholder="禁止输入" /></div>
<div class="ui input left icon loading"><input type="text" placeholder="加载状态在左边" /><i class="icon users"></i>
foucs 聚焦
disabled 禁用
error 错误提示
loading 加载数据
transparent 透明效果
标签输入框：
<div class="ui input labeled">
<label class="ui label">http://</label>
<input type="text" placeholder="默认在输入框的左边" />
</div>
<!-- ----------------------------------------------------------- -->
<div class="ui input right labeled left icon">
<i class="icon tags"></i>
<input type="text" placeholder="输入搜索内容" />
<i class="ui label tag link">添加标签</i>
</div>
<!-- ----------------------------------------------------------- -->
<div class="ui input left corner labeled">
<input type="text" placeholder="输入关键词">
<div class="ui left corner label">
<i class="icon asterisk"></i>
</div>
</div>
<!-- ----------------------------------------------------------- -->
<div class="ui input right corner labeled">
<input type="text" placeholder="输入关键词">
<div class="ui right corner label">
<i class="icon asterisk"></i>
</div>
</div>
<div class="ui input labeled">
<label class="ui label">http://</label>
<input type="text" placeholder="默认在输入框的左边" />
</div>
<!-- ----------------------------------------------------------- -->
<div class="ui input right labeled left icon">
<i class="icon tags"></i>
<input type="text" placeholder="输入搜索内容" />
<i class="ui label tag link">添加标签</i>
</div>
<!-- ----------------------------------------------------------- -->
<div class="ui input left corner labeled">
<input type="text" placeholder="输入关键词">
<div class="ui left corner label">
<i class="icon asterisk"></i>
</div>
</div>
<!-- ----------------------------------------------------------- -->
<div class="ui input right corner labeled">
<input type="text" placeholder="输入关键词">
<div class="ui right corner label">
<i class="icon asterisk"></i>
</div>
</div>
labeled标签位置：left 左 right 右，默认为左
corner：文本框左left 右right 顶角图标
输入框大小：<div class="ui input mini"><input type="text" placeholder="mini 大小" /></div>
mini/small/large/big/huge/massive
操作行为：
<div class="ui input action"><input type="text" placeholder="输入内容..." /><i class="ui button">搜索</i></div>
<!-- -------------------------------------------------------------------------- -->
<div class="ui input action left icon">
<i class="icon search"></i>
<input type="text" placeholder="输入查询内容..." />
<select class="ui dropdown compact">
<option value="all">全部</option>
<option selected="true" value="articles">文章</option>
<option value="products">产品</option>
</select>
<button class="ui button teal compact"><i class="icon user"></i> 筛选</button>
</div>
<div class="ui input action"><input type="text" placeholder="输入内容..." /><i class="ui button">搜索</i></div>
<!-- -------------------------------------------------------------------------- -->
<div class="ui input action left icon">
<i class="icon search"></i>
<input type="text" placeholder="输入查询内容..." />
<select class="ui dropdown compact">
<option value="all">全部</option>
<option selected="true" value="articles">文章</option>
<option value="products">产品</option>
</select>
<button class="ui button teal compact"><i class="icon user"></i> 筛选</button>
</div>
action：将图标、文本框、按钮组合在一起
icon位置： left 文本框内部左边， right 文本框内部右边
compact：清除内容周边间距
流式布局：
<div class="ui input action left icon fluid">
<i class="icon asterisk"></i>
<input type="text" placeholder="输入要查询的条件..." />
<button class="ui button teal"><i class="icon search"></i>查询</button>
</div>
<div class="ui input action left icon fluid">
<i class="icon asterisk"></i>
<input type="text" placeholder="输入要查询的条件..." />
<button class="ui button teal"><i class="icon search"></i>查询</button>
</div>
fluid：流式布局
以上样式可以组合在一起使用
标签-Label
基本样式
标准标签：<div class="ui label"><i class="mail icon"></i> 23 </div>
标签组：
<div class="ui labels small">
<div class="ui label">
<i class="icon envelope"></i>256
</div>
<div class="ui label">
<i class="icon mail"></i>26
</div>
</div>
<div class="ui labels small">
<div class="ui label">
<i class="icon envelope"></i>256
</div>
<div class="ui label">
<i class="icon mail"></i>26
</div>
</div>
labels 共享标签的大小/颜色/tag/circular
修饰样式
基本标签：<div class="ui label basic">标签内容</div>
label属性：pointing 箭头指向 / 颜色 / 大小 / tag / image /floating浮动 / basic去除背景色
标签颜色：<div class="ui label red">标签内容</div>
red/green/blue/orange/yellow/olive/teal/violet/purple/pink/brown/grey/black
标签大小：<div class="ui label small">标签内容</div>
mini/tiny/small/medium/large/big/huge/massive
圆形标签：<div class="ui label circular">100<sup>+</sup></div>
标签嵌入图标和图片：
<div class="ui label"><i class="icon mail"></i>3</div>
<a href="#" class="ui label image"><img src="../images/ade.jpg">ade</a>
<div class="ui label"><i class="icon mail"></i>3</div>
<a href="#" class="ui label image"><img src="../images/ade.jpg">ade</a>
标签细节：
<a class="ui label teal image">
<img src="../images/christian.jpg">Jerry <i class="detail">朋友</i>
</a>
<a class="ui label teal image">
<img src="../images/christian.jpg">Jerry <i class="detail">朋友</i>
</a>
detail 对图片文字进一步的描述
标签指示：<i class="ui label pointing">请输入你的登录用户名(前头默认朝上)</i>
pointing箭头方向：top / right / below / left,默认为 top
标签角标：<a class="ui label left corner"><i class="icon red users"></i></a>
corner顶角位置：left 和 right, 默认为right
标签Tag：<a class="ui label tag red">new</a>
标签饰带Ribbon：<a class="ui label right ribbon">推荐</a>
ribbon方向：left 和 right, 默认为left
标签附属：
<div class="ui segment raised">
<div class="ui label top attached">位于区域顶部</div>
<p> ... ... </p>
</div>
<div class="ui segment raised">
<div class="ui label top attached">位于区域顶部</div>
<p> ... ... </p>
</div>
attached位置：top (left | right) / bottom (left | right)
标签内容呈水平方向展示：<div class="ui label horizontal">水果</div>金橘
标签浮动：
<div class="ui menu compact">
<div class="item link">
<i class="icon envelope"></i> 收件箱
<div class="ui label floating circular">20</div>
</div>
</div>
<div class="ui menu compact">
<div class="item link">
<i class="icon envelope"></i> 收件箱
<div class="ui label floating circular">20</div>
</div>
</div>
compact：清除周边的间距
floating：浮动至标签的右上角
circular：圆形
以上样式可以组合在一起使用
列表-List
基本样式
<div class="ui list"><div class="item"></div>...</div>
修饰样式
有序列表：<div class="ui list ordered">...</div>
ordered 有序列表 / bulleted 无序列表，默认无序列表
有序列表前面数字表现形式：
<div class="ui list ordered">
<div class="item" data-value="字符符号">列表项</div>
</div>
<!-- ---------------------------------------------------- -->
<ol class="ui list">
<li class="item" value="字符符号">列表项</li>
</ol>
<div class="ui list ordered">
<div class="item" data-value="字符符号">列表项</div>
</div>
<!-- ---------------------------------------------------- -->
<ol class="ui list">
<li class="item" value="字符符号">列表项</li>
</ol>
列表项li 用自带属性 value 指定数字字符
HTML标签div 用自定义 data-value 指定数字字符
列表包含图标：
<div class="item">
<i class="icon linkify"></i>
<div class="content">橘子</div>
</div>
<div class="item">
<i class="icon linkify"></i>
<div class="content">橘子</div>
</div>
列表包含图片：
<div class="item">
<img src="../images/ade.jpg" class="ui image avatar" />
<div class="content">橘子</div>比较甜哦
</div>
<div class="item">
<img src="../images/ade.jpg" class="ui image avatar" />
<div class="content">橘子</div>比较甜哦
</div>
列表选项添加超链接样式和标题及描述：
<div class="ui list">
<a href="#" class="item">
<i class="icon github large middle aligned"></i>
<div class="content">
<!--header 信息标题-->
<!--descriptions 信息描述-->
<div class="header">标题内容1</div>
<div class="description">这是一个新项目1的描述信息</div>
</div>
</a>
<a href="#" class="item">
<i class="icon github large middle aligned"></i>
<div class="content">
<div class="header">标题内容2</div>
<div class="description">这是一个新项目2的描述信息</div>
</div>
</a>
</div>
<div class="ui list">
<a href="#" class="item">
<i class="icon github large middle aligned"></i>
<div class="content">
<!--header 信息标题-->
<!--descriptions 信息描述-->
<div class="header">标题内容1</div>
<div class="description">这是一个新项目1的描述信息</div>
</div>
</a>
<a href="#" class="item">
<i class="icon github large middle aligned"></i>
<div class="content">
<div class="header">标题内容2</div>
<div class="description">这是一个新项目2的描述信息</div>
</div>
</a>
</div>
list
item
icon / image
content
header
description
item ...
列表特效：<div class="ui list selection">列表项</div>
selection 鼠标放上去显示背景颜色
divided 列表项分隔
celled 列表项单元格
animated 列表项动画
horizontal 列表项水平显示
relaxed 松散列表项
列表尺寸：<div class="ui list mini">列表项</div>
mini/tiny/small/large/big/huge/massive
列表项目中内容与图片对齐方式：
<div class="item">
<img class="ui image tiny" src="../images/square-image.png">
<div class="content top aligned">Top Aligned </div>
</div>
<div class="item">
<img class="ui image tiny" src="../images/square-image.png">
<div class="content top aligned">Top Aligned </div>
</div>
方向：top 顶部/middle 中间/bottom 底部，若整体对齐可在<div class="ui list middle aligned">...</div>标签中声明
列表内容浮动
<div class="ui list divided selection animated">
<div class="item">
<img class="ui image mini avatar" src="../images/ade.jpg" />
<div class="content">
<div class="header">这是标题信息</div>
<div class="description">这是描述信息</div>
</div>
<div class="content right floated">
<button class="ui button tiny purple"><i class="icon plus"></i> 更多</button>
</div>
</div>
</div>
<div class="ui list divided selection animated">
<div class="item">
<img class="ui image mini avatar" src="../images/ade.jpg" />
<div class="content">
<div class="header">这是标题信息</div>
<div class="description">这是描述信息</div>
</div>
<div class="content right floated">
<button class="ui button tiny purple"><i class="icon plus"></i> 更多</button>
</div>
</div>
</div>
（left|right) floated 左右浮动
列表项激活状态：<a href="#here" class="item active">第一部</a>
以上样式可以组合在一起使用
加载器-Loader
基本样式
<div class="ui loader"></div>
修饰样式
加载激活/禁用：
<div class="ui loader active"></div>
<div class="ui loader disabled"></div>
<div class="ui loader active"></div>
<div class="ui loader disabled"></div>
actvie 激活加载效果层
disabled 禁用或隐藏加载层
加载提示信息：<div class="ui loader active text">正在加载中...</div>
text 自定义加载提示信息
加载背景效果：
<div class="ui dimmer active">
<div class="ui loader text">正在加载中...</div>
</div>
<div class="ui dimmer active">
<div class="ui loader text">正在加载中...</div>
</div>
dimmer 加载效果外部包裹一个遮罩层
不确定加载时间效果：
<div class="ui dimmer active">
<div class="ui loader text indeterminate">正在加载中...</div>
</div>
<div class="ui dimmer active">
<div class="ui loader text indeterminate">正在加载中...</div>
</div>
indeterminate 不确定什么时候加载完成
加载在内容内部显示：
<div class="ui loader active centered inline text">正在加载文本内容...</div>
<div class="ui loader active centered inline text">正在加载文本内容...</div>
inline 内联显示
centered 加载内容居中显示
加载图标大小：<div class="ui loader active text mini>Mini</div>
Mini/Tiny/Small/Medium/Large/Big/Huge/Massive
以上样式可以组合在一起使用
预留空白-Placeholder
基本样式
标准结构：
<div class="ui placeholder">
<div class="image header">
<p class="line"></p>
<p class="line"></p>
</div>
<div class="paragraph">
<p class="line"></p>
<p class="line"></p>
<p class="line"></p>
</div>
</div>
<div class="ui placeholder">
<div class="image header">
<p class="line"></p>
<p class="line"></p>
</div>
<div class="paragraph">
<p class="line"></p>
<p class="line"></p>
<p class="line"></p>
</div>
</div>
image header 图片及头部新式
paragraph 段落内容样式
line 占位行标记
分段容器点位符：
<div class="ui segment">
<div class="ui placeholder">
<div class="image header">
<p class="line"></p>
<p class="line"></p>
</div>
<div class="paragraph">
<p class="line"></p>
<p class="line"></p>
<p class="line"></p>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui placeholder">
<div class="image header">
<p class="line"></p>
<p class="line"></p>
</div>
<div class="paragraph">
<p class="line"></p>
<p class="line"></p>
<p class="line"></p>
</div>
</div>
</div>
placeholder
image header
line
line ...
header
line
line ...
paragraph
line
line ...
修饰样式
头部占位符：<div class="header">...</div>
图片点位符：<div class="image">...</div>
段落占位符：<div class="paragraph">...</div>
行占位符长短：<div class="short line"></div>
full/short/very short/medium/long/very long
流式布局占位符：<div class="ui placeholder fluid">...</div>
fluid: 流式布局
轨道-Rail
基本样式
<div class="ui segment">
<div class="ui rail left">...</div>
</div>
<div class="ui rail left">...</div>
</div>
轨道位置: left 左边 right 右边, 轨道必须位于容器内部
修饰样式
内部轨道: <div class="ui rail internal left">...</div>
外部轨道分隔：<div class="ui rail dividing left">...</div>
内部附属轨道：<div class="ui rail internal attached left">...</div>
外部附属轨道：<div class="ui rail attached left">...</div>
外部轨道靠近容器边界：<div class="ui rail close left">...</div>
close：轨道靠近容器边界, very close: 在原有的基础上再靠近些
轨道内容尺寸：<div class="ui rail mini">...</div>
mini/tiny/small/large/big/huge/massive
揭示-Reveal
基本样式
<div class="ui reveal">
<div class="content visible">显示内容</div>
<div class="content hidden">隐藏内容</div>
</div>
<div class="content visible">显示内容</div>
<div class="content hidden">隐藏内容</div>
</div>
修饰样式
过渡与移动：
<div class="ui reveal fade">
<div class="content visible">显示内容</div>
<div class="content hidden">隐藏内容</div>
</div>
<div class="ui reveal fade">
<div class="content visible">显示内容</div>
<div class="content hidden">隐藏内容</div>
</div>
fade：渐隐渐现
move：up向上 down 向下 left 向左 right 向右，默认向左
旋转：
<div class="ui reveal image rotate small circular">
<img src="../images/square-image.png" class="content visible" />
<img src="../images/stevie_big.jpg" class="content hidden" />
</div>
<div class="ui reveal image rotate small circular">
<img src="../images/square-image.png" class="content visible" />
<img src="../images/stevie_big.jpg" class="content hidden" />
</div>
rotate：left 向左 right 向右 默认rgiht
instant 立即展示,没有过渡过程
直接显示隐藏内容：
<div class="ui reveal image rotate active small circular">
<img src="../images/square-image.png" class="content visible" />
<img src="../images/stevie_big.jpg" class="content hidden" />
</div>
<div class="ui reveal image rotate active small circular">
<img src="../images/square-image.png" class="content visible" />
<img src="../images/stevie_big.jpg" class="content hidden" />
</div>
active： 直接显示隐藏内容
disabled：禁用，禁用后将不会显示滑动动画
分块段-Segment
基本样式
<div class="ui segment">...</div>
<div class="ui segment basic">...</div>
basic: 清除分段周围边框
修饰样式
反转颜色：<div class="ui segment inverted">...</div>
文本对齐：<div class="ui segment center aligned">...</div>
(left | right| center) aligned, 默认left
凸出显示：<div class="ui segment raised">...</div>
占位标志符：<div class="ui segment placeholder">...</div>
分段加载：<div class="ui segment loading">...</div>
底部多个边框：<div class="ui segment stacked">...</div>
stacked: 两条横线 ， tall stacked: 三条横线， piled: 堆叠
垂直分段(适用多个)：<div class="ui segment vertical">...</div>
分段颜色：<div class="ui segment red">...</div>
red/orange/yellow/olive/green/teal/blue/violet/purple/pink/brown/grey/black
主次背景颜色： secondary / tertiary
圆形分段：<div class="ui segment circular">...</div>
分段组：
<div class="ui segments raised">
<div class="ui segment">....</div>
<div class="ui segment">...</div>
<div class="ui segment">...</div>
</div>
<div class="ui segments raised">
<div class="ui segment">....</div>
<div class="ui segment">...</div>
<div class="ui segment">...</div>
</div>
分段组方向: vertical 垂直，horizontal 水平, 默认为垂直
inverted: 分段组反色效果
raised: 分段组凸出显示
步骤-Step
基本样式
<div class="ui steps"><div class="step">...</div></div>
steps fluid：流式布局
steps tablet stackable：自动堆叠(unstackable 阻止堆叠)
steps ordered：有序列表
steps vertical：垂直显示，默认水平显示horizontal
尺寸：mini / tiny / small / large / big / huge / massive
修饰样式
状态：<div class="step active">...</div>
active: 聚焦显示当前所在步骤
completed: 完成状态
link: 链接样式
disabled： 禁用步骤
链接两种表达方式：
<a href="#" class="step">...</a>
<div class="step link">...</div>
<a href="#" class="step">...</a>
<div class="step link">...</div>
文字组合：
<div class="ui steps">
<div class="step link disabled">
<div class="title">这是标题</div>
<div class="description">这是描述标题信息</div>
</div>
</div>
<div class="ui steps">
<div class="step link disabled">
<div class="title">这是标题</div>
<div class="description">这是描述标题信息</div>
</div>
</div>
link：超链接样式效果
title: 标题
description: 描述信息
图文组合：
<div class="ui steps">
<div class="step link">
<i class="icon info circle"></i>
<div class="content">
<div class="title">这是标题</div>
<div class="description">这是描述标题信息</div>
</div>
</div>
</div>
<div class="ui steps">
<div class="step link">
<i class="icon info circle"></i>
<div class="content">
<div class="title">这是标题</div>
<div class="description">这是描述标题信息</div>
</div>
</div>
</div>
content： 主要内容
title: 标题
description: 描述信息
组合-Collections
面包屑导航-Breadcrumb
基本样式
<div class="ui breadcrumb">
<div class="section">...</div>
<div class="divider">/</div>
</div>
<div class="section">...</div>
<div class="divider">/</div>
</div>
section: 导航内容
divider: 分隔符号，默认为 "/" 符号
修饰样式
激活：<div class="section active">...</div>
自定义分隔符：<div class="divider icon right angle"></div>
导航标题：<div class="section">导航内容</div>
导航超链接：<a href="#" class="section">导航内容</a>
导航尺寸：<div class="ui breadcrumb tiny">...</div>
tiny/small/large/big/huge/massive
表单-Form
基本样式
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>我同意本条款和条件</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>我同意本条款和条件</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
修饰样式
文本框加上图标：
<div class="ui input left icon">
<i class="icon users"></i>
<input type="text" id="username" name="username" placeholder="请输入用户名" />
</div>
<div class="ui input left icon">
<i class="icon users"></i>
<input type="text" id="username" name="username" placeholder="请输入用户名" />
</div>
left icon：图标位于文本框的左边,默认为右边 right icon
复选框美化：
<div class="ui checkbox toggle">
<input type="checkbox" id="agree" tabindex="0" class="hidden" />
<label for="agree">我同意本条款和条件</label>
</div>
<div class="ui checkbox toggle">
<input type="checkbox" id="agree" tabindex="0" class="hidden" />
<label for="agree">我同意本条款和条件</label>
</div>
toggle: 来回切换, slider: 来回过渡
JS初始化：$('.ui.checkbox').checkbox();
按钮加上图标：<button class="ui button positive icon"><i class="icon map marker"></i> 我要登录</button>
表单域组合：
<form class="ui form segment attached">
<div class="field">
<label>用户姓名</label>
<div class="two fields">
<div class="field">
<input type="text" name="first_name" placeholder="输入用户名" />
</div>
<div class="field">
<input type="text" name="last_name" placeholder="输入用户姓" />
</div>
</div>
</div>
</form>
<!-- ------------------------------------------------------------------------------ -->
<form class="ui form segment attached">
<div class="field">
<label>用户姓名</label>
<div class="fields">
<div class="eight wide field">
<input type="text" name="first_name" placeholder="输入用户名" />
</div>
<div class="eight wide field">
<input type="text" name="last_name" placeholder="输入用户姓" />
</div>
</div>
</div>
</form>
<form class="ui form segment attached">
<div class="field">
<label>用户姓名</label>
<div class="two fields">
<div class="field">
<input type="text" name="first_name" placeholder="输入用户名" />
</div>
<div class="field">
<input type="text" name="last_name" placeholder="输入用户姓" />
</div>
</div>
</div>
</form>
<!-- ------------------------------------------------------------------------------ -->
<form class="ui form segment attached">
<div class="field">
<label>用户姓名</label>
<div class="fields">
<div class="eight wide field">
<input type="text" name="first_name" placeholder="输入用户名" />
</div>
<div class="eight wide field">
<input type="text" name="last_name" placeholder="输入用户姓" />
</div>
</div>
</div>
</form>
fields前面的【数字】指定域数，将平均分布在一行中
在field前加上【英文数字 wide】可以指定所占一行16列中的几列,英文数字之和为16
表单域可以嵌套
表单域添加 fluid 样式则自动适应列宽
表单域field添加 inline 样式则会在一行显示
表单域fields 添加 required 样式则在文字右边出现“*”符号
表单域radio checkbox 添加 grouped 样式则以垂直方式显示 ，inline则以水平方向显示，默认水平
多行文本：
<form class="ui form segment">
<div class="field">
<label>备注内容1</label>
<textarea placeholder="默认高度"></textarea>
</div>
<div class="field">
<label>备注内容2</label>
<textarea rows="2" placeholder="rows为 2"></textarea>
</div>
</form>
<form class="ui form segment">
<div class="field">
<label>备注内容1</label>
<textarea placeholder="默认高度"></textarea>
</div>
<div class="field">
<label>备注内容2</label>
<textarea rows="2" placeholder="rows为 2"></textarea>
</div>
</form>
rows：指定文本框的高度
单选框：
<form class="ui form segment">
<div class="fields grouped required">
<label>性别:</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" />
<label>男</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="1" class="hidden">
<label>女</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="2" class="hidden" checked="true">
<label>保密</label>
</div>
</div>
</div>
</form>
<form class="ui form segment">
<div class="fields grouped required">
<label>性别:</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="0" class="hidden" />
<label>男</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="1" class="hidden">
<label>女</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="gender" tabindex="2" class="hidden" checked="true">
<label>保密</label>
</div>
</div>
</div>
</form>
JS初始化：$('.ui.radio.checkbox').checkbox();
下拉菜单：
<form class="ui form segment">
<div class="inline field">
<label>性别</label>
<div class="ui dropdown selection search">
<input type="hidden" name="gender" />
<i class="icon dropdown"></i>
<div class="text default">Gender</div>
<div class="menu">
<div class="item" data-value="1"><i class="icon male"></i> 男</div>
<div class="item" data-value='0'><i class="icon female"></i> 女</div>
<div class="item" data-value='-1'><i class="icon key"></i> 保密</div>
</div>
</div>
</div>
</form>
<form class="ui form segment">
<div class="inline field">
<label>性别</label>
<div class="ui dropdown selection search">
<input type="hidden" name="gender" />
<i class="icon dropdown"></i>
<div class="text default">Gender</div>
<div class="menu">
<div class="item" data-value="1"><i class="icon male"></i> 男</div>
<div class="item" data-value='0'><i class="icon female"></i> 女</div>
<div class="item" data-value='-1'><i class="icon key"></i> 保密</div>
</div>
</div>
</div>
</form>
下拉菜单两种实现方式：DIV标签 和 Select标签
JS初始化：$(".dropdown").dropdown();
表单加载状态：<form class="ui form loading">...</div>
loading：信息未获取前显示加载图标
inverted：反转颜色
尺寸：mini/tiny/small/large/big/huge/massive
表单域错误：<div class="field error">...</div>
error：文本框背景为红色，提示有错误
disabled: 文本域禁用
网格-Grid
基本样式
基本结构(指定每列占居一行的宽度)：
<div class="ui grid">
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
</div>
<div class="ui grid">
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
<div class="four wide column"></div>
</div>
在列column中用 【英文数字 wide】 来指定列宽
基本结构(平均分配每列的宽度)：
<div class="ui grid eqaul width">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="ui grid eqaul width">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
在 grid 中用 【equal width】 来平分所有列宽度
基本结构(指定具体列数来平均分配每列的宽度)：
<div class="ui grid four column">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="ui grid four column">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
在 grid 中用 【英文数字 column 】来平分指定的列数宽度
按行来划分每一行包含的列数：
<div class="ui grid equal width">
<div class="row equal width">
<div class="column">...</div>
<div class="column">...</div>
</div>
<div class="row three column">
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
</div>
<div class="column">...</div>
<div class="column">...</div>
</div>
<div class="ui grid equal width">
<div class="row equal width">
<div class="column">...</div>
<div class="column">...</div>
</div>
<div class="row three column">
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
</div>
<div class="column">...</div>
<div class="column">...</div>
</div>
row中可以用【英文数字 column】或【equal width】来平均分配行中列宽度
修饰样式
网格周围加上边框：<div class="ui grid segment">...</div>
增加网格内边距：<div class="ui grid padded">...</div>
每行中每列加竖线进行分隔：<div class="ui grid divided">...</div>
必须：用row来包裹column
vertically divided: 行之间有一个水平分隔线
celled： 网格中的行可以划分成单元格
internal celled: 在网格内部行之间划分成单元格
centered：网格中的列对象居中对齐（并非内容）
center aligned：网格中的内容居中
每行中的内容等高：<div class="row stretched">...</div>
必须：用row来包裹column
响应式栅格：<div class="ui grid container">...</div>
增加网格槽宽：<div class="ui grid relaxed">...</div>
网格列column浮动：<div class="column left floated">...</div>
(left｜right) floated: 左右浮动
菜单-Menu
基本样式
<div class="ui menu">
<div class="item">菜单一</div>
<div class="item">菜单二</div>
<div class="item">菜单三</div>
<div class="item">菜单四</div>
</div>
<div class="item">菜单一</div>
<div class="item">菜单二</div>
<div class="item">菜单三</div>
<div class="item">菜单四</div>
</div>
修饰样式
menu
link：使菜单选项有超链接效果
text：文本形式
labeled：图文菜单(上面是图下面是文字)
icon：带有图标的菜单选项
vertical：竖向显示菜单选项
英文数字 item：平均分布指定的菜单选项（结合fluid使用）
compact：使菜单选项紧凑挨着
attached：附属，top/bottom 顶部或底部附属，若不加left或right,则附着在中间部位
fixed：固定位置,top/bottom
fluid：流式布局
secondary：清除周围边框
pointing：菜单选项底部有个小箭头
secondary pointing：菜单选项定位(底部会有加粗的底线框)
tabular：标签式选项
vertical tabular：垂直式标签选项,默认为水平
pagination：分页样式
pagination borderless：去除各分页之间的竖线条
stackable： 折叠菜单选项
Inverted：反转颜色
尺寸：mini/tiny/small/large/huge/massive
item
active： 激活当前菜单选项
disabled：禁用状态
fitted：去除元素内部（padding）
header：头部标题样式
link：使当前菜单选项有超链接效果
位置：left / right，默认为left
消息-Message
基本样式
标准结构：
<div class="ui message">
<div class="header">头部标题 </div>
<p>详细内容</p>
</div>
<div class="ui message">
<div class="header">头部标题 </div>
<p>详细内容</p>
</div>
message
icon
header
文字内容
列表结构：
<div class="ui message">
<div class="header">头部标题 </div>
<ul class="list">
<li>选 项1的内容</li>
<li>选 项2的内容</li>
</ul>
</div>
</div>
<div class="ui message">
<div class="header">头部标题 </div>
<ul class="list">
<li>选 项1的内容</li>
<li>选 项2的内容</li>
</ul>
</div>
</div>
message
header
list
li
li
...
图标消息：
<div class="ui icon message">
<i class="inbox icon"></i>
<div class="content">
<div class="header">头部标题 </div>
<p>详细内容...</p>
</div>
</div>
<div class="ui icon message">
<i class="inbox icon"></i>
<div class="content">
<div class="header">头部标题 </div>
<p>详细内容...</p>
</div>
</div>
message icon
icon
content
header
文字内容
修饰样式
可关闭消息框：
<div class="ui message">
<i class="icon close"></i>
<div class="header">标题信息</div>
<p>这是信息的详细内容...</p>
</div>
<div class="ui message">
<i class="icon close"></i>
<div class="header">标题信息</div>
<p>这是信息的详细内容...</p>
</div>
图标消息框：
<div class="ui message icon info">
<i class="icon close"></i>
<i class="icon inbox"></i>
<div class="content">
<div class="header">你听说过我们的邮件列表吗？ </div>
<div class="description">每天用email接受最好的信息</div>
</div>
</div>
<div class="ui message icon info">
<i class="icon close"></i>
<i class="icon inbox"></i>
<div class="content">
<div class="header">你听说过我们的邮件列表吗？ </div>
<div class="description">每天用email接受最好的信息</div>
</div>
</div>
浮动：<div class="ui message floating">...</div>
紧凑：<div class="ui message compact">...</div>
带有颜色的消息框：<div class="ui message info">...</div>
info/warning/positive|success/negative|error
彩色：<div class="ui message red">...</div>
red/pink/green/blue/orange/yellow/teal/violet/olive/purple/brown/black
附属：<div class="ui message top attached">...</div>
(top | bottom )attached：top 顶部 bottom 底部
表格-Table
- 基本样式
<table class="ui table">
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>James</td></tr>
</tbody>
</table>
<thead>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>James</td></tr>
</tbody>
</table>
修饰样式
table
celled：加上表格边框(一個表格可將每行分割成許多個別的小格)
striped：斑马线
selectable：可选表格行，鼠标放上去显示灰背景色
英文数字 column：声明几列并平均分配宽度
颜色(显示在表格顶部边框)：red/pink/green/blue/orange/yellow/teal/violet/olive/purple/brown/black
basic：去除标题背景色和单元格垂直边线
very basic：在basic的基础上去除表格外部边框线
padded：增大单元格内边距,very padded
collapsing：折叠，自适应列宽度
single line：单元格内容一行显示(超出部分用 ... 符号显示)
definition：自定义标题内容(表格行头及第一列的内容)
structured：表格结构化(制作复杂的表格结构，表头的设计)
fixed：固定表格布局(水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关)
compact：紧凑型表格,very compact
unstackable：禁止自适应布局
stackable：自适应布局
inverted：表格反转颜色
尺寸： small / large
tr
行背景颜色(要求基础表格 basic)：warning/positive/negative|error
active：激活当前行
disabled: 禁用当前行
center aligned：对齐方式(top|bottom|left|center|right)
td
center aligned：对齐方式(top|bottom|left|center|right)
collapsing：自适应宽度
single line：始终在一行(超出部分用 ... 符号显示)
背景颜色：warning/positive/negative|error
selectable：可选单元格，鼠标放到单元格上有背景颜色
英文数字 wide：自定义列宽(总和为16）
thead
center aligned：对齐方式(top|bottom|left|center|right)
full-width：补上表格单元格边框
tfoot
full-width：补上表格单元格边框
视图-Views
广告栏-Advertisement
基本样式
<div class="ui ad">广告内容链接</div>
修饰样式
尺寸：mobile / small / medium / large / half page
居中位置：centered
rectangle: 矩形
leaderboard：排行榜
banner：栏目版 (vertical | top | half) banner
vertical：垂直方向显示
square button：方形按钮形状
skyscraper：摩天大楼，wide skyscraper
billboard：广告牌
panorama：全景图
netboard：网络版
test：用于广告调试使用的模型
卡片-Card
基本样式
<div class="ui card">
<img src="../images/lena.png" class="ui image" />
<div class="content">
<div class="header">Lucy</div>
<div class="meta"><span class="date">2018年加入</span></div>
<div class="description">她是一位在线8年多的网络开发工程师.</div>
</div>
<div class="extra content"><i class="icon users"></i> 128个朋友</div>
<div class="ui button bottom attached blue"><i class="icon add"></i> 添加朋友</div>
</div>
<img src="../images/lena.png" class="ui image" />
<div class="content">
<div class="header">Lucy</div>
<div class="meta"><span class="date">2018年加入</span></div>
<div class="description">她是一位在线8年多的网络开发工程师.</div>
</div>
<div class="extra content"><i class="icon users"></i> 128个朋友</div>
<div class="ui button bottom attached blue"><i class="icon add"></i> 添加朋友</div>
</div>
card
image
img
文字内容
content
header
meta
description
extra content
<div class="ui cards">
<div class="ui card">
<a href="#" class="image"><img class="ui image" src="..." /></a>
<div class="content">
<div class="header">标题信息</div>
<div class="meta">附加说明</div>
<div class="description">描述信息</div>
</div>
<div class="extra content">额外内容</div>
</div>
... ...
</div>
<div class="ui card">
<a href="#" class="image"><img class="ui image" src="..." /></a>
<div class="content">
<div class="header">标题信息</div>
<div class="meta">附加说明</div>
<div class="description">描述信息</div>
</div>
<div class="extra content">额外内容</div>
</div>
... ...
</div>
cards
card
image
img
content
header
meta
description
extra content
extra
...
card
修饰样式
cards
英文数字 column：指定几个卡片并在一行中平分等宽(column总和为16)
英文数字：在一行中指定几个卡片平分等宽
link：添加链接样式
centered：卡片居中显示
raised：卡片凸出阴影效果
stackable：折叠效果
doubling：根据分辨率双倍放大
card
fluid：流式布局
centered：卡片居中显示
raised：卡片凸出阴影效果
颜色：red/pink/green/blue/orange/yellow/teal/violet/olive/purple/brown/black
评论-Comments
基本样式
<div class="ui comments">
<div class="ui header dividing">头标题内容</div>
<div class="comment">
<a class="avatar"><img src="../images/ade.jpg" /></a>
<div class="content">
<div class="author">用户昵称</div>
<div class="metadata">
<span class="meta">用户职位</span>
<span class="date">2019-08-26</span>
</div>
<div class="text">评论内容</div>
<div class="ui actions">
<a class="reply">回复</a>
<a class="save">保存</a>
<a class="share">分享</a>
<a class="hide">隐藏</a>
</div>
</div>
</div>
.... .... ....
</div>
<form class="ui form tiny">
<div class="field">
<textarea rows="4" placeholder="输入评论内容..."></textarea>
</div>
<div class="ui button icon primary tiny compact">
<i class="icon edit"></i> 添加评论
</div>
</form>
<div class="ui header dividing">头标题内容</div>
<div class="comment">
<a class="avatar"><img src="../images/ade.jpg" /></a>
<div class="content">
<div class="author">用户昵称</div>
<div class="metadata">
<span class="meta">用户职位</span>
<span class="date">2019-08-26</span>
</div>
<div class="text">评论内容</div>
<div class="ui actions">
<a class="reply">回复</a>
<a class="save">保存</a>
<a class="share">分享</a>
<a class="hide">隐藏</a>
</div>
</div>
</div>
.... .... ....
</div>
<form class="ui form tiny">
<div class="field">
<textarea rows="4" placeholder="输入评论内容..."></textarea>
</div>
<div class="ui button icon primary tiny compact">
<i class="icon edit"></i> 添加评论
</div>
</form>
comments
header dividing
comment
avatar
img
文字内容
content
author
metadata
meta
date
time
text
actions
reply
save
share
delete
form
field
textarea
button
修饰样式
comments
minimal：鼠标放到评论区域后显示 actions 选项
尺寸：mini/tiny/small/large/big/huge/massive
collapsed：评论可以在视图中折叠或隐藏
threaded：螺纹(显示评论之间的关系,上一个评论要有回复信息)
comment
collapsed：评论可以在视图中折叠或隐藏
动态-Feed
基本样式
<div class="ui feed">
<div class="ui header dividing">头部标题内容</div>
<div class="event">
<div class="label"><img src="../images/ade.jpg" /></div>
<div class="content">
<div class="summary">
<!--<a class="author">Miss Joe</a> 已注册 <span class="date">2019-08-26</span>-->
<a class="user">Miss Joe</a> 已注册 <span class="date">2019-08-26</span>
</div>
<div class="extra images">
<div class="ui image mini"><img src="../images/square-image.png" /></div>
</div>
<div class="extra text">这是主体内容</div>
<div class="meta">
<a href="#"><i class="icon favorite"></i> 23</a>
<a href="#"><i class="icon users"></i> 3</a>
</div>
</div>
</div>
</div>
<div class="ui header dividing">头部标题内容</div>
<div class="event">
<div class="label"><img src="../images/ade.jpg" /></div>
<div class="content">
<div class="summary">
<!--<a class="author">Miss Joe</a> 已注册 <span class="date">2019-08-26</span>-->
<a class="user">Miss Joe</a> 已注册 <span class="date">2019-08-26</span>
</div>
<div class="extra images">
<div class="ui image mini"><img src="../images/square-image.png" /></div>
</div>
<div class="extra text">这是主体内容</div>
<div class="meta">
<a href="#"><i class="icon favorite"></i> 23</a>
<a href="#"><i class="icon users"></i> 3</a>
</div>
</div>
</div>
</div>
fee
header dividing
event
label
img
文字内容
content
summary
user
date
time
文字内容
author
date
time
文字内容
date
time
文字内容
meta
icon
... ...
extra images
image
... ...
extra text
... ...
event
修饰样式
feed
尺寸：mini/tiny/small/large/big/huge/massive
列表项-Item
基本样式
<div class="ui items">
<div class="ui item">
<div class="image"><img src="../images/eve.png" />图片说明</div>
<div class="content">
<div class="header">头部标题信息</div>
<div class="meta">元数据信息</div>
<div class="description">描述信息</div>
<div class="extra">额外内容信息</div>
</div>
</div>
</div>
<div class="ui item">
<div class="image"><img src="../images/eve.png" />图片说明</div>
<div class="content">
<div class="header">头部标题信息</div>
<div class="meta">元数据信息</div>
<div class="description">描述信息</div>
<div class="extra">额外内容信息</div>
</div>
</div>
</div>
items
item
image
img
文字内容
content
header
meta
description
extra
... ...
item
修饰样式
items
unstackable：列表项不随分辨率改变
divided：列表项之间分隔线
relaxed：松散列表 very relaxed
link：给列表项增加链接效果
segment：给列表项加上边框
item
统计-Statistic
基本样式
<div class="ui statistic">
<div class="label">标签值</div>
<div class="value">20%</div>
</div>
<div class="label">标签值</div>
<div class="value">20%</div>
</div>
statistic
label
value
<div class="ui statistics three">
<div class="statistic red">
<div class="value">78%</div>
<div class="label">合格率</div>
</div>
<div class="statistic green">
<div class="value">79%</div>
<div class="label">达标率</div>
</div>
</div>
<div class="statistic red">
<div class="value">78%</div>
<div class="label">合格率</div>
</div>
<div class="statistic green">
<div class="value">79%</div>
<div class="label">达标率</div>
</div>
</div>
statistics
statistic
label
value
image
icon
数字或文字信息
... ...
statistic
修饰样式
statistics
英文数字：平分指定的统计项
尺寸：mini/tiny/small/large/huge
horizontal：垂直结构
statistic
尺寸：mini/tiny/small/large/huge
颜色：red/pink/green/blue/orange/yellow/teal/violet/olive/purple/brown/black
模块-Modules
折叠菜单-Accordion
基本样式
<div class="ui accordion">
<div class="title"><i class="icon dropdown"></i> 标题信息</div>
<div class="content">内容详细信息</div>
... ...
</div>
<div class="title"><i class="icon dropdown"></i> 标题信息</div>
<div class="content">内容详细信息</div>
... ...
</div>
初始化：$('.ui.accordion').accordion();
修饰样式
accordion
styled：格式化，加上四面边框
fluid：流式布局
Inverted：反转颜色
vertical：垂直折叠菜单
复选框-Checkbox
基本样式
<div class="ui checkbox">
<input type="checkbox" name="fav" id="fav" class="hidden" />
<label for="fav">文字</label>
</div>
<input type="checkbox" name="fav" id="fav" class="hidden" />
<label for="fav">文字</label>
</div>
<div class="ui radio checkbox">
<input type="radio" name="fav" id="fav" class="hidden" />
<label for="fav">文字</label>
</div>
<input type="radio" name="fav" id="fav" class="hidden" />
<label for="fav">文字</label>
</div>
修饰样式
checkbox
disabld: 禁用
slider/toggle：复选框样式
radio checkbox
disabld: 禁用
遮罩层-Dimmer
基本样式
<div class="ui dimmer">...</div>
显示：$(".ui.dimmer").dimmer('show');
隐藏：$(".ui.dimmer").dimmer('hide');
<div class="ui dimmer">
<div class="content">...</div>
</div>
<div class="content">...</div>
</div>
修饰样式
inverted：反转背景颜色
active：激活当前遮罩层
disabled：禁用当前遮罩层
page：页面遮罩层
遮罩层内容对齐方式：(top|middle|bottom) aligned, 默认为居中
内容区域模糊效果：blurring
下拉菜单-Dropdown
基本样式
<div class="ui dropdown">
<div class="default text">请选择...</div>
<i class="icon dropdown"></i>
<div class="menu">
<div data-value="month" class="item">
<span class="description">Ctrl + M</span>
<i class="icon users"></i> 按月份分类
</div>
<div class="divider"></div>
<div data-value="year" class="item">
<span class="description">Ctrl + Y</span>
<i class="icon users"></i>按年份分类
</div>
</div>
</div>
<div class="default text">请选择...</div>
<i class="icon dropdown"></i>
<div class="menu">
<div data-value="month" class="item">
<span class="description">Ctrl + M</span>
<i class="icon users"></i> 按月份分类
</div>
<div class="divider"></div>
<div data-value="year" class="item">
<span class="description">Ctrl + Y</span>
<i class="icon users"></i>按年份分类
</div>
</div>
</div>
dropdown
text
icon
menu
item
description
icon
文字内容
divider
触发：$('.ui.dropdown').dropdown({on: 'hover',clearable: true});
修饰样式
search：带有搜索功能
multiple：支持多选
selection：具有选择下拉列表样式
fluid：流式布局，充满一行
嵌入工具-Embed
基本样式
<div
class="ui embed"
data-source=""
data-id=""
data-placeholder="../images/image-16by9.png">
</div>
class="ui embed"
data-source=""
data-id=""
data-placeholder="../images/image-16by9.png">
</div>
初始化：$('.ui.embed').embed();
修饰样式
4:3 嵌入内容按4:3比例进行显示
弹出层-Modal
基本样式
<div class="ui modal" id="msg">
<i class="icon close"></i>
<div class="header dividing"><i class="icon info circle"></i>对话框头部标题</div>
<div class="content scrolling ">
<div class="description">
<div class="ui header">标题内容</div>
<p>对话框的主要区域内容...</p>
</div>
</div>
<div class="actions text-center">
<div class="ui buttons">
<div class="ui button negative">取消</div>
<div class="or" data-text="或"></div>
<div class="ui button positive">确定</div>
</div>
</div>
</div>
<i class="icon close"></i>
<div class="header dividing"><i class="icon info circle"></i>对话框头部标题</div>
<div class="content scrolling ">
<div class="description">
<div class="ui header">标题内容</div>
<p>对话框的主要区域内容...</p>
</div>
</div>
<div class="actions text-center">
<div class="ui buttons">
<div class="ui button negative">取消</div>
<div class="or" data-text="或"></div>
<div class="ui button positive">确定</div>
</div>
</div>
</div>
modal
header
content
description
文字内容
image content
image
description
actions
修饰样式
active：激活对话框
transition：动画效果(horizontal flip / vertical flip / fade / scale)
提示框-Popup
基本样式
<div class="ui button icon"
data-title='标题信息'
data-html="添加一条<b>加粗</b>信息"
>
<i class="icon add"></i></div>
data-title='标题信息'
data-html="添加一条<b>加粗</b>信息"
>
<i class="icon add"></i></div>
属性：data-title ="标题信息"
属性：data-content="主体内容(不支持转义)"
属性：data-html ="主体内容(支持转义)"
属性：data-variation="mini | basic|wide" (尺寸,basic,宽度)
属性：data-inverted="true" 反转颜色
<div class="ui popup">
<div class="header">系统提示</div>
<div class="content">这是弹出层显示的主体内容</div>
</div>
<div class="header">系统提示</div>
<div class="content">这是弹出层显示的主体内容</div>
</div>
fluid：流式布局
位置：top (left｜right), bottom (left|right), (left|right) center
transition：动画效果
flowing：自适应
hidden：隐藏
初始化：$('.activating.element').popup();
修饰样式
进度条-Progress
基本样式
<div class="ui progress indicating" data-value="2" data-total="100">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">文字说明</div>
</div>
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">文字说明</div>
</div>
progress
bar
progress
label
初始化：$(".ui.progress").progress();
修饰样式
progress
indicating：动态指示动画效果
颜色：red/green/blue/teal/purple/pink/brown/olive/black
active：激活
disabled：禁用
属性 data-value="40" 当前进度
属性 data-total="100" 总进度
状态：success/error/warning
inverted：反转颜色
附着：(top|bottom) attached
尺寸：mini/tiny/small/large/big/huge/massive
评分-Rating
基本样式
<div class="ui rating" data-rating="4", data-max-rating="5"></div>
属性 data-rating 当前所得星数
属性 data-max-rating 最大星星数
初始化：$(".ui.rating").rating({interactive: true});
修饰样式
rating
heart：爱心形状
star：星形
尺寸：mini/tiny/small/large/huge/massive
搜索-Search
基本样式
<div class="ui search">
<div class="ui input icon">
<input type="text" class="prompt" placeholder="输入查询内容..." />
<i class="icon search link"></i>
</div>
<div class="results"></div>
</div>
<div class="ui input icon">
<input type="text" class="prompt" placeholder="输入查询内容..." />
<i class="icon search link"></i>
</div>
<div class="results"></div>
</div>
初始化：$('.ui.search').search();
修饰样式
search
loading：加载状态
disabled：禁用
fluid：流式布局
对齐：(left|right) aligned
形状-Shape
基本样式
<div class="ui shape">
<div class="side">
<div class="content">
<div class="center">主体内容</div>
</div>
</div>
... ... ...
</div>
<div class="side">
<div class="content">
<div class="center">主体内容</div>
</div>
</div>
... ... ...
</div>
shape
side
content
center
文字内容
segment
card
... ...
side
初始化：$('.shape').shape('flip up');
特效：flip (up|down|left|right|over|back)
修饰样式
shape
text：文本效果
cube：立体效果
边栏-Sidebar
基本样式
<div class="ui sidebar left menu vertical inverted compact">
<a class="item">内容1</a>
<a class="item">内容2</a>
</div>
<a class="item">内容1</a>
<a class="item">内容2</a>
</div>
初始化：$('.ui.sidebar').sidebar();
修饰样式
sidebar
位置：left 左边 right 右边
visible：显示边栏
方向：top / bootom / left / right
宽度： (very) thin / (very) wide
显示特效：overlay 浮动层 / scale down 缩放 / push 推箱子
粘性的-Sticky
基本样式
<div class="ui rail right">
<div class="ui sticky">
<div class="ui header">头部标题</div>
<img src="../images/image.png" class="ui image" />
</div>
</div>
<div class="ui sticky">
<div class="ui header">头部标题</div>
<img src="../images/image.png" class="ui image" />
</div>
</div>
初始化：$('.ui.sticky').sticky({context: '#example2',pushing: true});
修饰样式
标签页-Tab
基本样式
<div class="ui tabular top attached menu">
<a class="item active" data-tab="one">标签一</a>
<a class="item" data-tab="two">标签二</a>
... ....
</div>
<div class="ui segment tab bottom attached active" data-tab="one">
<p>第一个标签的内容</p>
</div>
<a class="item active" data-tab="one">标签一</a>
<a class="item" data-tab="two">标签二</a>
... ....
</div>
<div class="ui segment tab bottom attached active" data-tab="one">
<p>第一个标签的内容</p>
</div>
... ... ...
tabular menu
item
... ...
item
tab
content
container
文字内容
初始化：$('.tabular.menu .item').tab();
修饰样式
tabular
附属：(top) attached
item
active：激活
过渡-Transition
基本样式
<div class="ui image small circular people">
<img src="../images/image.png" />
</div>
<img src="../images/image.png" />
</div>
初始化：$('.people').transition('fade up');
修饰样式
特效：scale/zoom/fade/fadeup(down|left|right)/(horizontal|vertical)flip/drop/flyleft(right|left|up|down)/shake/flash/jiggle/tada
行为Behaviors
应用程序接口-API
表单验证-Form Validation
内容交互-Visibility
知识点总结
分组元素
segments
buttons
icons
images
labels
fields
columns
流式布局 fluid
container
button
input
placehoder
image
附着 attached
button
label (附着区域内部)
segment
header
menu
message
progress
居中 centered
header
image
边距
fitted
spaced
padded
relaxed
0 条评论
下一页
为你推荐
查看更多
抱歉，暂无相关内容 
