

首页  思维导图  详情



SemanticUI

2019-09-03 10:05:32   0  举报





AI智能生成

Semantic-UI前端框架知识结构图

SemanticUI

前端框架

模版推荐

作者其他创作

大纲/内容

元素-Elements

按钮-Button

基本样式

button

icon

文字内容

修饰样式

图标：<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><br>

mini / tiny / small / medium / large / big / huge / massive

动画：<br><div class="ui button animated"><br>    <div class="visible content">Next</div><br>    <div class="hidden content"><i class="right arrow icon"></i></div><br></div><br><br><button class="ui loading button">加载</button><br><br><button class="ui button icon"><br>    <i class="icon loading spinner"></i> 正在加载中...<br> </button><br> <button class="ui button icon"><br>    <i class="icon loading asterisk"></i> 正在加载中...<br> </button><br> <button class="ui button icon"><br>    <i class="icon loading circle notched"></i> 正在加载中...<br> </button><br>

animated / vertial animated / fade animated

visible content：默认显示的内容

hidden content：鼠标放上去显示的内容

loading：显示加载状态图标

spinner

asterisk

circle notched

状态：<br><button class="ui button active">激活按钮</button><br><button class="ui button disabled">禁用按钮</button>

active：激活 

disabled：禁止

按钮组：<br><div class="ui buttons"><br>    <button class="ui button primary">primary 按钮</button><br>    <button class="ui button secondary">secondary 按钮</button><br>    <button class="ui button active">active 按钮</button><br>    <button class="ui button disabled">disabled 按钮</button><br></div><br><br><i class="ui buttons"><br>    <button class="ui button negative">取消</button><br>    <i class="or" data-text="和"></i><br>    <button class="ui button positive">确认</button><br> </i><br><br><div class="ui buttons icon compact"><br>    <button class="ui labeled icon button"><i class="left chevron icon"></i> Back </button><br>    <button class="ui button"><i class="stop icon"></i> Stop </button><br>    <button class="ui right labeled icon button">Forward <i class="right chevron icon"></i></button><br> </div><br><br><div class="ui three buttons"><br>    <button class="ui button active">One</button><br>    <button class="ui button">Two</button><br>    <button class="ui button">Three</button><br> </div><br>

compact：紧凑型

icon：清除图标周围边距

数字：平分指定个数的按钮

圆形按钮形状：<button class="ui button circular">长方形椭圆角</button>

带标签按钮：<br><div class="ui button labeled"><br>    <button class="ui button icon"><br>        <i class="icon heart"></i> 喜欢<br>    </button><br>    <a class="ui label basic left pointing">2048</a><br> </div><br><br><button class="ui button icon right labeled"><br>    <i class="icon play right"></i> 播放<br> </button><br><br><button class="ui button fluid">提交信息</button><br><br><button class="ui button compact fluid">提交信息</button><br>

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: 反转颜色

浮动按钮：<br><div class="ui divider horizontal">浮动</div><br> <button class="ui button left floated">Left 按钮</button><br> <button class="ui button right floated">Right 按钮</button><br> <div class="ui divider hidden clearing"></div><br><br>

floated: left 左浮动 right 右浮动

clearing：清除左右浮动

以上样式可以组合在一起使用

容器-Container

基本样式

标准容器：<div class="ui container">...</div>

文本容器：<div class="ui container text">...</div>

流式容器：<div class="ui container fluid">...</div>

fluid：流式布局

修饰样式

文本对齐方式：<br><div class="ui container right aligned">右对齐</div><br>

(left | center | right ｜ justified) aligned 默认left

适用范围：用于包裹grid网格和menu菜单及页面整体布局内容

分隔条-Divider

基本样式<br>

修饰样式

水平方向：<div class="ui divider horizontal">文本提示</div>

clearing 清除左右浮动

hidden 隐藏 

block(section) 增大上下间距 

fitted 清除上下间距

分隔条在指定的区域居中垂直显示：<br><div class="ui segment raised placeholder"><br>    <div class="ui divider vertical">垂直分隔条</div><br> </div> <br><br> <div class="ui segment raised placeholder"><br>    <div class="ui grid two column center aligned"><br>        <div class="column">第一列</div><br>        <div class="column">第二列</div><br>    </div><br>    <div class="ui divider vertical">VS</div><br> </div><br>

grid布局若平分各个列

用数字来确定平分列数: <div class="ui grid three column">...</div>

用 equal width 来平分列数：<div class="ui grid equal width">...</div>

国旗-Flag

基本样式

国家代码(china或cn: 中国，germany或de: 德国, united states或us: 美国等等)

修饰样式

Semantic 的默认主题使用图片精灵来实现，它提供了清爽的图标，但是没法调整大小

标题-Header

基本样式

页面标题：<h1 class="ui header">文本信息</h1>

H 标签索引从1到5

内容标题：<div class="ui header">文本信息</div>

div 标签

图标标题：<br><div class="ui header icon segment raised"><br>    <i class="icon users"></i><br>    <div class="content"><br>        群组设置<br>        <div class="sub header">管理你的团队成员</div><br>    </div><br> </div><br>

头部 header

图标/图片 icon / image

内容 content

文字信息

子标题 sub header

修饰样式

字体大小:<div class="ui header small">文本内容</div>

大小范围：tiny / small / medium / large / huge

文本对齐：<br><div class="ui header icon center aligned"><br>    <i class="icon users circular"></i><br>    用户群组<br></div><br>

(left | center | right ｜ justified) aligned / centered(与 icon 组合无效)  默认left

副标题：<div class="ui sub header">副标题内容</div>

图文混排：<br><div class="ui header tiny"><br>    <img src="../images/patrick.png" class="ui image circular"><br>    <div class="content"><br>         关于我们<br>        <div class="sub header">介绍公司相关信息</div><br>    </div> <br> </div><br><br><div class="ui header tiny"><br>    <img src="../images/patrick.png" class="ui image circular"><br>    <div class="content"><br>         <div class="ui sub header">JackLau</div><br>         产品开发经理<br>    </div> <br></div><br>

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: 头部背景颜色变为浅灰色

附属：<br><h3 class="ui header top attached block centered">Top Attached </h3><br> <div class="ui segment attached left aligned gray"><br>    <p>attached segment</p><br> </div><br> <h3 class="ui header attached blue centered">附属 </h3><br> <div class="ui segment attached"><br>    <p>attached segment</p><br> </div><br> <h3 class="ui header bottom attached right aligned block">Bottom Attached </h3><br>

centered: 头部标题信息居中显示

attached: 附着作用，方向为top和bottom两个方向

aligned: 对齐(left / right / center)

block: 背景颜色变为浅灰色

标题浮动：<br><div class="ui segment clearing"><br>    <h3 class="ui header right floated">右浮动</h3><br>    <h3 class="ui header left floated">左浮动</h3><br> </div><br>

floated：left 左浮动 right 右浮动

以上样式可以组合在一起使用

图标-Icon

基本样式

<i class="icon users"></i>用户

修饰样式

图标颜色：<br><i class="icon user red"></i><br><i class="icon user red inverted"></i><br>

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

图标加载状态：<br><i class="icon spinner loading"></i><br> <i class="icon circle notched loading"></i><br> <i class="icon asterisk loading"></i><br>

spinner

circle notched

asterisk

图标反转和旋转：<br><i class="icon question circle vertical flipped"></i><br><i class="icon question circle counterclockwise rotated"></i><br>

flipped翻转： horizantal 水平 / vertical 垂直 ,默认水平

rotated 旋转：counterclockwise 逆时针旋转，默认顺时针旋转

图标状态：<br><i class="icon users bordered"></i> 用户群体<br> <i class="icon users disabled"></i> 禁用个体户<br>

bordered: 给图标添加边框

disabled：图标禁用

箭头图标加上黑色背景圆圈<br><i class="icon arrow up"></i> 向上图标<br> <i class="icon arrow up circle"></i> 向上图标<br>

circle：给图上黑色背景圆图标

清除图标左右两边间距：<i class="icon users blue fitted"></i>

fitted：清除左右边距

多个图标组合成一个图标：<br><i class="icons large"><br>    <i class="icon circle outline red big"></i><br>    <i class=" icon users"></i> <br> </i><br>

icons：图标组合

圆形图标及链接样式:<br><i class="icon user circular"></i><br><i class="icon upload link"></i><br>

link：超链接样式

以上样式可以组合在一起使用

图片-Image

基本样式

标准图片：<img src="images/person.jpg" class="ui image" />

包裹图片：<br><div class="ui image"><br>   <img src="images/person.jpg" /><br></div><br>

图片组：<br><div class="ui images mini"><br>    <img class="ui image rounded" src="../images/appleicon.png"><br>    <img class="ui image bordered" src="../images/school.png"><br>    <img class="ui image circular" src="../images/patrick.png"><br> </div><br>

rounded: 圆边角

bordered: 加边框

circular / avatar：圆形图标(原始图片要求为正方形)

图片超链接：<br><a href="#"  class="ui image"><br>    <img src="images/person.jpg" /><br></a><br>

修饰样式

图片尺寸：<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">

图片组合(一组图片可被设置为统一尺寸大小)：<br><div class="ui images mini"><br>    <img class="ui image rounded" src="../images/appleicon.png"><br>    <img class="ui image bordered" src="../images/school.png"><br>    <img class="ui image circular" src="../images/patrick.png"><br> </div><br>

以上样式可以组合在一起使用

输入框-Input

基本样式

search与prompt结合使用

修饰样式

图标输入框：<br><div class="ui input right icon"><br>    <input type="text" name="username" placeholder="默认右边图标输入框" /><br>    <br>    <i class="icon user link"></i><br> </div><br>

图标位置：left 左 right 右,默认为右

link：具有超链接样式

输入框状态：<br><div class="ui input disabled"><input type="text" name="username" placeholder="禁止输入" /></div><br><div class="ui input left icon loading"><input type="text" placeholder="加载状态在左边" /><i class="icon users"></i><br>

foucs 聚焦 

disabled 禁用 

error 错误提示 

loading 加载数据

transparent 透明效果

标签输入框：<br><div class="ui input labeled"><br>    <label class="ui label">http://</label><br>    <input type="text" placeholder="默认在输入框的左边" /><br> </div><br><br><div class="ui input right labeled left icon"><br>    <i class="icon tags"></i><br>    <input type="text" placeholder="输入搜索内容" /><br>    <i class="ui label tag link">添加标签</i><br> </div><br><br><div class="ui input left corner labeled"><br>    <input type="text" placeholder="输入关键词"><br>    <div class="ui left corner label"><br>        <i class="icon asterisk"></i><br>    </div><br> </div><br><br><div class="ui input right corner labeled"><br>    <input type="text" placeholder="输入关键词"><br>    <div class="ui right corner label"><br>        <i class="icon asterisk"></i><br>    </div><br></div><br>

labeled标签位置：left 左 right 右，默认为左

corner：文本框左left 右right 顶角图标

输入框大小：<div class="ui input mini"><input type="text" placeholder="mini 大小" /></div>

mini/small/large/big/huge/massive

操作行为：<br><div class="ui input action"><input type="text" placeholder="输入内容..." /><i class="ui button">搜索</i></div><br><br><div class="ui input action left icon"><br>    <i class="icon search"></i><br>    <input type="text" placeholder="输入查询内容..." /><br>    <select class="ui dropdown compact"><br>        <option value="all">全部</option><br>        <option selected="true" value="articles">文章</option><br>        <option value="products">产品</option><br>    </select><br>    <button class="ui button teal compact"><i class="icon user"></i> 筛选</button><br> </div><br>

action：将图标、文本框、按钮组合在一起

icon位置： left 文本框内部左边， right 文本框内部右边

compact：清除内容周边间距

流式布局：<br><div class="ui input action left icon fluid"><br>    <i class="icon asterisk"></i><br>    <input type="text" placeholder="输入要查询的条件..." /><br>    <button class="ui button teal"><i class="icon search"></i>查询</button><br> </div><br>

fluid：流式布局

以上样式可以组合在一起使用

标签-Label

基本样式

标准标签：<div class="ui label"><i class="mail icon"></i> 23 </div>

标签组：<br><div class="ui labels small"><br>    <div class="ui label"><br>        <i class="icon envelope"></i>256<br>    </div><br>    <div class="ui label"><br>        <i class="icon mail"></i>26<br>    </div><br> </div><br>

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>

标签嵌入图标和图片：<br><div class="ui label"><i class="icon mail"></i>3</div><br> <a href="#" class="ui label image"><img src="../images/ade.jpg">ade</a><br>

标签细节：<br><a class="ui label teal image"><br>    <img src="../images/christian.jpg">Jerry <i class="detail">朋友</i><br> </a><br>

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

标签附属：<br><div class="ui segment raised"><br>    <div class="ui label top attached">位于区域顶部</div><br>    <p> ... ... </p><br> </div><br>

attached位置：top (left | right) / bottom  (left | right)

标签内容呈水平方向展示：<div class="ui label horizontal">水果</div>金橘

标签浮动：<br><div class="ui menu compact"><br>    <div class="item link"><br>        <i class="icon envelope"></i> 收件箱<br>        <div class="ui label floating circular">20</div><br>    </div><br></div><br>

compact：清除周边的间距

floating：浮动至标签的右上角

circular：圆形

以上样式可以组合在一起使用

列表-List

基本样式

修饰样式

有序列表：<div class="ui list ordered">...</div>

ordered 有序列表 / bulleted 无序列表，默认无序列表

有序列表前面数字表现形式：<br><div class="ui list ordered"><br>    <div class="item" data-value="字符符号">列表项</div><br></div><br><br><ol class="ui list"><br>    <li class="item" value="字符符号">列表项</li><br></ol><br>

列表项li 用自带属性 value 指定数字字符

HTML标签div 用自定义 data-value 指定数字字符

列表包含图标：<br><div class="item"><br>    <i class="icon linkify"></i><br>    <div class="content">橘子</div><br> </div><br>

列表包含图片：<br><div class="item"><br>    <img src="../images/ade.jpg" class="ui image avatar" /><br>    <div class="content">橘子</div>比较甜哦<br></div>

列表选项添加超链接样式和标题及描述：<br><div class="ui list"><br>    <a href="#" class="item"><br>        <i class="icon github large middle aligned"></i><br>        <div class="content"><br>        <br>        <br>            <div class="header">标题内容1</div><br>            <div class="description">这是一个新项目1的描述信息</div><br>        </div><br>    </a><br>    <a href="#" class="item"><br>        <i class="icon github large middle aligned"></i><br>        <div class="content"><br>            <div class="header">标题内容2</div><br>            <div class="description">这是一个新项目2的描述信息</div><br>        </div><br>    </a><br> </div><br>

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

列表项目中内容与图片对齐方式：<br><div class="item"><br>    <img class="ui image tiny" src="../images/square-image.png"><br>    <div class="content top aligned">Top Aligned </div><br> </div><br>

方向：top 顶部/middle 中间/bottom 底部，若整体对齐可在<div class="ui list middle aligned">...</div>标签中声明

列表内容浮动<br><div class="ui list divided selection animated"><br>    <div class="item"><br>        <img class="ui image mini avatar" src="../images/ade.jpg" /><br>        <div class="content"><br>            <div class="header">这是标题信息</div><br>            <div class="description">这是描述信息</div><br>        </div><br>        <div class="content right floated"><br>            <button class="ui button tiny purple"><i class="icon plus"></i> 更多</button><br>         </div><br>    </div><br> </div><br>

（left|right) floated 左右浮动

列表项激活状态：<a href="#here" class="item active">第一部</a>

以上样式可以组合在一起使用

加载器-Loader

基本样式

修饰样式

加载激活/禁用：<br><div class="ui loader active"></div><br><div class="ui loader disabled"></div><br>

actvie 激活加载效果层

disabled 禁用或隐藏加载层

加载提示信息：<div class="ui loader active text">正在加载中...</div>

text 自定义加载提示信息

加载背景效果：<br><div class="ui dimmer active"><br>    <div class="ui loader text">正在加载中...</div><br> </div><br>

dimmer 加载效果外部包裹一个遮罩层

不确定加载时间效果：<br><div class="ui dimmer active"><br>     <div class="ui loader text indeterminate">正在加载中...</div><br></div><br>

indeterminate 不确定什么时候加载完成

加载在内容内部显示：<br><div class="ui loader active centered inline text">正在加载文本内容...</div><br>

inline 内联显示

centered 加载内容居中显示

加载图标大小：<div class="ui loader active text mini>Mini</div>

Mini/Tiny/Small/Medium/Large/Big/Huge/Massive

以上样式可以组合在一起使用

预留空白-Placeholder

基本样式

标准结构：<br><div class="ui placeholder"><br>    <div class="image header"><br>        <p class="line"></p><br>        <p class="line"></p><br>    </div><br>    <div class="paragraph"><br>         <p class="line"></p><br>         <p class="line"></p><br>         <p class="line"></p><br>    </div><br> </div><br>

image header 图片及头部新式

paragraph 段落内容样式

line 占位行标记

分段容器点位符：<br><div class="ui segment"><br>    <div class="ui placeholder"><br>        <div class="image header"><br>               <p class="line"></p><br>               <p class="line"></p><br>        </div><br>        <div class="paragraph"><br>             <p class="line"></p><br>             <p class="line"></p><br>             <p class="line"></p><br>        </div><br>     </div><br> </div><br>

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

基本样式

轨道位置: 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

基本样式

修饰样式

过渡与移动：<br><div class="ui reveal fade"><br>    <div class="content visible">显示内容</div><br>    <div class="content hidden">隐藏内容</div><br></div><br>

fade：渐隐渐现

move：up向上 down 向下 left 向左 right 向右，默认向左

旋转：<br><div class="ui reveal image rotate small circular"><br>    <img src="../images/square-image.png" class="content visible" /><br>    <img src="../images/stevie_big.jpg" class="content hidden" /><br></div><br>

rotate：left 向左 right 向右默认rgiht

instant 立即展示,没有过渡过程

直接显示隐藏内容：<br><div class="ui reveal image rotate active small circular"><br>    <img src="../images/square-image.png" class="content visible" /><br>    <img src="../images/stevie_big.jpg" class="content hidden" /><br></div><br>

active： 直接显示隐藏内容

disabled：禁用，禁用后将不会显示滑动动画

分块段-Segment

基本样式

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>

分段组：<br><div class="ui segments raised"><br>    <div class="ui segment">....</div><br>    <div class="ui segment">...</div><br>    <div class="ui segment">...</div><br></div>

分段组方向: vertical 垂直，horizontal 水平, 默认为垂直

inverted: 分段组反色效果

raised: 分段组凸出显示

步骤-Step

基本样式

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：禁用步骤

链接两种表达方式：<br><a href="#" class="step">...</a><br><div class="step link">...</div>

文字组合：<br><div class="ui steps"><br>    <div class="step link disabled"><br>        <div class="title">这是标题</div><br>        <div class="description">这是描述标题信息</div><br>    </div><br></div><br>

link：超链接样式效果

title: 标题

description: 描述信息

图文组合：<br><div class="ui steps"><br>    <div class="step link"><br>        <i class="icon info circle"></i><br>        <div class="content"><br>            <div class="title">这是标题</div><br>           <div class="description">这是描述标题信息</div><br>        </div><br>    </div><br> </div><br>

content：主要内容

title: 标题

description: 描述信息

组合-Collections

面包屑导航-Breadcrumb

基本样式

section: 导航内容

divider: 分隔符号，默认为 "/" 符号

修饰样式

激活：<div class="section active">...</div>

自定义分隔符：<div class="divider icon right angle"></div>

导航标题：<div class="section">导航内容</div><br>

导航超链接：<a href="#" class="section">导航内容</a>

导航尺寸：<div class="ui breadcrumb tiny">...</div>

tiny/small/large/big/huge/massive

表单-Form

基本样式

<form class="ui form"><br>    <div class="field"><br>        <label>First Name</label><br>        <input type="text" name="first-name" placeholder="First Name"><br>    </div><br>    <div class="field"><br>        <div class="ui checkbox"><br>            <input type="checkbox" tabindex="0" class="hidden"><br>            <label>我同意本条款和条件</label><br>        </div><br>     </div><br>     <button class="ui button" type="submit">Submit</button><br> </form>

修饰样式

文本框加上图标：<br><div class="ui input left icon"><br>    <i class="icon users"></i><br>    <input type="text" id="username" name="username" placeholder="请输入用户名" /><br> </div><br>

left icon：图标位于文本框的左边,默认为右边 right icon

复选框美化：<br><div class="ui checkbox toggle"><br>    <input type="checkbox" id="agree" tabindex="0" class="hidden" /><br>    <label for="agree">我同意本条款和条件</label><br> </div><br>

toggle: 来回切换, slider: 来回过渡

JS初始化：$('.ui.checkbox').checkbox();

按钮加上图标：<button class="ui button positive icon"><i class="icon map marker"></i> 我要登录</button><br>

表单域组合：<br><form class="ui form segment attached"><br>    <div class="field"><br>        <label>用户姓名</label><br>        <div class="two fields"><br>            <div class="field"><br>               <input type="text" name="first_name" placeholder="输入用户名" /><br>            </div><br>            <div class="field"><br>                <input type="text" name="last_name" placeholder="输入用户姓" /><br>            </div><br>        </div><br>    </div><br> </form><br><br><form class="ui form segment attached"><br>     <div class="field"><br>         <label>用户姓名</label><br>         <div class="fields"><br>             <div class="eight wide field"><br>                 <input type="text" name="first_name" placeholder="输入用户名" /><br>             </div><br>             <div class="eight wide field"><br>                <input type="text" name="last_name" placeholder="输入用户姓" /><br>            </div><br>         </div><br>    </div><br></form><br>

fields前面的【数字】指定域数，将平均分布在一行中

在field前加上【英文数字 wide】可以指定所占一行16列中的几列,英文数字之和为16

表单域可以嵌套

表单域添加 fluid 样式则自动适应列宽

表单域field添加 inline 样式则会在一行显示

表单域fields 添加 required 样式则在文字右边出现“*”符号 

表单域radio checkbox 添加 grouped 样式则以垂直方式显示，inline则以水平方向显示，默认水平

多行文本：<br><form class="ui form segment"><br>    <div class="field"><br>         <label>备注内容1</label><br>        <textarea placeholder="默认高度"></textarea><br>    </div><br>    <div class="field"><br>         <label>备注内容2</label><br>         <textarea rows="2" placeholder="rows为 2"></textarea><br>    </div><br> </form><br>

rows：指定文本框的高度

单选框：<br><form class="ui form segment"><br>    <div class="fields grouped required"><br>        <label>性别:</label><br>        <div class="field"><br>            <div class="ui radio checkbox"><br>                 <input type="radio" name="gender" tabindex="0" class="hidden" /><br>                 <label>男</label><br>            </div><br>         </div><br>         <div class="field"><br>             <div class="ui radio checkbox"><br>                 <input type="radio" name="gender" tabindex="1" class="hidden"><br>                 <label>女</label><br>             </div><br>          </div><br>          <div class="field"><br>              <div class="ui radio checkbox"><br>                 <input type="radio" name="gender" tabindex="2" class="hidden" checked="true"><br>                 <label>保密</label><br>              </div><br>           </div><br>    </div><br></form><br>

JS初始化：$('.ui.radio.checkbox').checkbox();

下拉菜单：<br><form class="ui form segment"><br>    <div class="inline field"><br>        <label>性别</label><br>        <div class="ui dropdown selection search"><br>            <input type="hidden" name="gender" /><br>            <i class="icon dropdown"></i><br>            <div class="text default">Gender</div><br>            <div class="menu"><br>                <div class="item" data-value="1"><i class="icon male"></i> 男</div><br>                <div class="item" data-value='0'><i class="icon female"></i> 女</div><br>                <div class="item" data-value='-1'><i class="icon key"></i> 保密</div><br>            </div><br>        </div><br>    </div><br> </form><br>

下拉菜单两种实现方式：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

基本样式

基本结构(指定每列占居一行的宽度)：<br><div class="ui grid"><br>    <div class="four wide column"></div><br>    <div class="four wide column"></div><br>    <div class="four wide column"></div><br>    <div class="four wide column"></div><br></div><br>

在列column中用【英文数字 wide】来指定列宽

基本结构(平均分配每列的宽度)：<br><div class="ui grid eqaul width"><br>    <div class="column"></div><br>    <div class="column"></div><br>    <div class="column"></div><br>    <div class="column"></div><br></div><br>

在 grid 中用【equal width】来平分所有列宽度

基本结构(指定具体列数来平均分配每列的宽度)：<br><div class="ui grid four column"><br> <div class="column"></div><br> <div class="column"></div><br> <div class="column"></div><br> <div class="column"></div><br></div>

在 grid 中用【英文数字 column 】来平分指定的列数宽度<br>

按行来划分每一行包含的列数：<br><div class="ui grid equal width"><br>    <div class="row equal width"><br>        <div class="column">...</div><br>        <div class="column">...</div><br>    </div><br>    <div class="row three column"><br>        <div class="column">...</div><br>        <div class="column">...</div><br>        <div class="column">...</div><br>    </div><br>    <div class="column">...</div><br>    <div class="column">...</div><br></div><br>

row中可以用【英文数字 column】或【equal width】来平均分配行中列宽度

修饰样式

网格周围加上边框：<div class="ui grid segment">...</div><br>

增加网格内边距：<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

基本样式

修饰样式

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

基本样式

标准结构：<br><div class="ui message"><br>    <div class="header">头部标题 </div><br>    <p>详细内容</p><br></div><br>

message

icon

header

文字内容

列表结构：<br><div class="ui message"><br>    <div class="header">头部标题 </div><br>         <ul class="list"><br>             <li>选项1的内容</li><br>             <li>选项2的内容</li><br>         </ul><br>    </div><br></div><br>

message

header

list

...

图标消息：<br><div class="ui icon message"><br>    <i class="inbox icon"></i><br>    <div class="content"><br>        <div class="header">头部标题 </div><br>        <p>详细内容...</p><br>    </div><br></div>

message icon

icon

content

header

文字内容

修饰样式

可关闭消息框：<br><div class="ui message"><br>     <i class="icon close"></i><br>     <div class="header">标题信息</div><br>     <p>这是信息的详细内容...</p><br></div> <br>

图标消息框：<br><div class="ui message icon info"><br>    <i class="icon close"></i><br>    <i class="icon inbox"></i><br>    <div class="content"><br>        <div class="header">你听说过我们的邮件列表吗？ </div><br>        <div class="description">每天用email接受最好的信息</div><br>    </div><br> </div><br>

浮动：<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"><br>    <thead><br>        <tr><th>Name</th></tr><br>    </thead><br>    <tbody><br>        <tr><td>James</td></tr><br>    </tbody><br></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

行背景颜色(要求基础表格 basic)：warning/positive/negative|error

active：激活当前行

disabled: 禁用当前行

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"><br>    <img src="../images/lena.png" class="ui image" /><br>    <div class="content"><br>        <div class="header">Lucy</div><br>        <div class="meta"><span class="date">2018年加入</span></div><br>        <div class="description">她是一位在线8年多的网络开发工程师.</div><br>    </div><br>    <div class="extra content"><i class="icon users"></i> 128个朋友</div><br>    <div class="ui button bottom attached blue"><i class="icon add"></i> 添加朋友</div><br></div><br>

card

image

img

文字内容

content

header

meta

description

extra content

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"><br>    <div class="ui header dividing">头标题内容</div><br>    <div class="comment">        <br>        <a class="avatar"><img src="../images/ade.jpg" /></a><br>        <div class="content"><br>             <div class="author">用户昵称</div><br>             <div class="metadata"><br>                 <span class="meta">用户职位</span><br>                 <span class="date">2019-08-26</span><br>             </div><br>             <div class="text">评论内容</div><br>             <div class="ui actions"><br>                  <a class="reply">回复</a><br>                  <a class="save">保存</a><br>                   <a class="share">分享</a><br>                   <a class="hide">隐藏</a><br>             </div><br>        </div><br>    </div><br>    .... .... ....<br> </div><br><form class="ui form tiny"><br>    <div class="field"><br>        <textarea rows="4" placeholder="输入评论内容..."></textarea><br>    </div><br>    <div class="ui button icon primary tiny compact"><br>        <i class="icon edit"></i> 添加评论<br>    </div><br> </form><br>

comments

header dividing

comment

avatar

img

文字内容

content

author

metadata

meta

date

time

text

actions

save

delete

form

field

textarea

button

修饰样式

comments

minimal：鼠标放到评论区域后显示 actions 选项

尺寸：mini/tiny/small/large/big/huge/massive

collapsed：评论可以在视图中折叠或隐藏

threaded：螺纹(显示评论之间的关系,上一个评论要有回复信息)

comment

collapsed：评论可以在视图中折叠或隐藏

动态-Feed

基本样式

<div class="ui feed"><br>    <div class="ui header dividing">头部标题内容</div><br>    <div class="event"><br>        <div class="label"><img src="../images/ade.jpg" /></div><br>        <div class="content"><br>            <div class="summary"><br>                <br>                <a class="user">Miss Joe</a> 已注册 <span class="date">2019-08-26</span> <br>           </div><br>        <div class="extra images"><br>            <div class="ui image mini"><img src="../images/square-image.png" /></div><br>        </div><br>        <div class="extra text">这是主体内容</div><br>        <div class="meta"><br>            <a href="#"><i class="icon favorite"></i> 23</a><br>            <a href="#"><i class="icon users"></i> 3</a><br>        </div><br>     </div><br>     </div><br></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"><br>    <div class="ui item"><br>        <div class="image"><img src="../images/eve.png" />图片说明</div><br>        <div class="content"><br>            <div class="header">头部标题信息</div><br>            <div class="meta">元数据信息</div><br>            <div class="description">描述信息</div><br>            <div class="extra">额外内容信息</div><br>        </div><br>    </div><br> </div> 

items

item

image

img

文字内容

content

header

meta

description

extra

... ...

item

修饰样式

items

unstackable：列表项不随分辨率改变

divided：列表项之间分隔线

relaxed：松散列表 very relaxed

link：给列表项增加链接效果

segment：给列表项加上边框

item

统计-Statistic

基本样式

statistic

label

value

statistics

statistic

label

value

image

icon

数字或文字信息

... ...

statistic

修饰样式

statistics

英文数字：平分指定的统计项

尺寸：mini/tiny/small/large/huge

horizontal：垂直结构

statistic

尺寸：mini/tiny/small/large/huge<br>

颜色：red/pink/green/blue/orange/yellow/teal/violet/olive/purple/brown/black

模块-Modules

折叠菜单-Accordion

基本样式

<div class="ui accordion"><br>     <div class="title"><i class="icon dropdown"></i> 标题信息</div><br>     <div class="content">内容详细信息</div><br>     ... ...<br> </div><br>

初始化：$('.ui.accordion').accordion();

修饰样式

accordion

styled：格式化，加上四面边框

fluid：流式布局

Inverted：反转颜色

vertical：垂直折叠菜单

复选框-Checkbox

基本样式

修饰样式

checkbox

disabld: 禁用

slider/toggle：复选框样式

radio checkbox

disabld: 禁用

遮罩层-Dimmer

基本样式

显示：$(".ui.dimmer").dimmer('show');

隐藏：$(".ui.dimmer").dimmer('hide');

修饰样式

inverted：反转背景颜色

active：激活当前遮罩层

disabled：禁用当前遮罩层

page：页面遮罩层

遮罩层内容对齐方式：(top|middle|bottom) aligned, 默认为居中

内容区域模糊效果：blurring

下拉菜单-Dropdown 

基本样式

<div class="ui dropdown"><br>    <div class="default text">请选择...</div><br>    <i class="icon dropdown"></i><br>    <div class="menu"><br>        <div data-value="month" class="item"> <br>             <span class="description">Ctrl + M</span><br>             <i class="icon users"></i> 按月份分类<br>        </div><br>        <div class="divider"></div><br>        <div data-value="year" class="item"> <br>             <span class="description">Ctrl + Y</span><br>             <i class="icon users"></i>按年份分类<br>        </div><br>    </div><br> </div>

dropdown

text

icon

item

description

icon

文字内容

divider

触发：$('.ui.dropdown').dropdown({on: 'hover',clearable: true});

修饰样式

search：带有搜索功能

multiple：支持多选

selection：具有选择下拉列表样式

fluid：流式布局，充满一行

嵌入工具-Embed

基本样式

<div <br> class="ui embed" <br> data-source="" <br> data-id="" <br> data-placeholder="../images/image-16by9.png"><br> </div>

初始化：$('.ui.embed').embed();

修饰样式

4:3  嵌入内容按4:3比例进行显示

弹出层-Modal

基本样式

<div class="ui modal" id="msg"><br>    <i class="icon close"></i><br>    <div class="header dividing"><i class="icon info circle"></i>对话框头部标题</div><br>    <div class="content scrolling "><br>        <div class="description"><br>            <div class="ui header">标题内容</div><br>           <p>对话框的主要区域内容...</p><br>         </div><br>    </div><br>    <div class="actions text-center"><br>         <div class="ui buttons"><br>              <div class="ui button negative">取消</div><br>              <div class="or" data-text="或"></div><br>              <div class="ui button positive">确定</div><br>         </div><br>    </div><br> </div>

modal

header

content

description

文字内容

image content 

image

description

actions

修饰样式

active：激活对话框

transition：动画效果(horizontal flip / vertical flip / fade / scale)

提示框-Popup

基本样式

<div class="ui button icon" <br>data-title='标题信息' <br>data-html="添加一条<b>加粗</b>信息"<br>><br><i class="icon add"></i></div><br>

属性：data-title ="标题信息"

属性：data-content="主体内容(不支持转义)"

属性：data-html ="主体内容(支持转义)"

属性：data-variation="mini | basic|wide" (尺寸,basic,宽度)

属性：data-inverted="true" 反转颜色

<div class="ui popup"><br>    <div class="header">系统提示</div><br>    <div class="content">这是弹出层显示的主体内容</div><br> </div>

fluid：流式布局

位置：top (left｜right), bottom (left|right),  (left|right) center

transition：动画效果

flowing：自适应

hidden：隐藏

初始化：$('.activating.element').popup();

修饰样式

进度条-Progress

基本样式

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

基本样式

属性 data-rating 当前所得星数

属性 data-max-rating 最大星星数

初始化：$(".ui.rating").rating({interactive: true});

修饰样式

rating

heart：爱心形状

star：星形

尺寸：mini/tiny/small/large/huge/massive

搜索-Search

基本样式

初始化：$('.ui.search').search();

修饰样式

loading：加载状态

disabled：禁用

fluid：流式布局

对齐：(left|right) aligned

形状-Shape

 基本样式

shape

side

content

center

文字内容

segment

card

... ...

side

初始化：$('.shape').shape('flip up');

修饰样式

shape

text：文本效果

cube：立体效果

边栏-Sidebar

基本样式

初始化：$('.ui.sidebar').sidebar();

修饰样式

sidebar

位置：left 左边 right 右边

visible：显示边栏

方向：top / bootom / left / right

宽度： (very) thin / (very) wide

显示特效：overlay 浮动层 / scale down 缩放 / push 推箱子

粘性的-Sticky

基本样式

初始化：$('.ui.sticky').sticky({context: '#example2',pushing: true});

修饰样式

标签页-Tab

基本样式

<div class="ui tabular top attached menu"><br>    <a class="item active" data-tab="one">标签一</a><br>     <font color="#666666"><a class="item" data-tab="two">标签二</a></font><br>    ... ....<br></div><br><div class="ui segment tab bottom attached active" data-tab="one"><br>     <p>第一个标签的内容</p><br></div><br><div class="ui segment tab bottom attached active" data-tab="one">... ... ...</div>

tabular menu

item

... ...

item

tab

content

container

文字内容

初始化：$('.tabular.menu .item').tab();

修饰样式

tabular

附属：(top) attached