Semantic UI 记忆

Posted 2020-09-14

CSS框架

What:
简单地说，就是一些事先写好的css集合，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。

Why:
简单、快速、方便、避免CSS中的各种坑。

Which:
Semantic UI是一款语义化的前端开发框架，Semantic是围绕自然交流语言而架构的，这使得开发更加直观、易于理解。

Semantic UI 框架特色

Semantic UI把词语和类看成一个个可以任意组合的概念，使用如：名词/修饰语，文字序列以及诸多的自然语法来定义类名。

常见用法

?

code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<code>- 名词：具体的元素 ui segment ui button ui image ui container ui divider ui header ui label   - 形容词： very padded：文字的间距靠里 vertical：去掉边框的圆角、阴影和缝隙 inverted：颜色需要反选填充 basic: 处理黑边问题 fixed: 固定位置 Mini Tiny Small Medium Large Big Huge Massive：大小 circular：圆形   - 图标名称： share icon wifi icon </code>

两种引用方式

本地引用

1.把 Semantic CSS 的文件放到 CSS 文件夹中，记得themes中的fonts和images也要拷贝进来。
2.在 html文件的head部分的link中写上：href="css/semantic.css"
如：

在线引用

#大圆，内嵌红色

?

code

1 2 3 4 5 6

<code><div class="ui circular segment">        #中圆，内嵌白色                                 <div class="ui inverted red circular segment"> #小圆，内嵌红色                       <i class="circular inverted blue big star icon"></i> # 中心圆，圆中嵌有五角星，五角星与圆之间用蓝色填充，星内部白色填充         </div>     </div> </code>

 

 

Semantic UI网格系统

ui grid是Semantic框架中用来进行页面动态布局的工具。
主要用法分为两种：定宽网格和定栏网格

定宽网格：页面一共16栏，明确知道每一块横跨宽度

?

code

1 2 3 4

<code>-- ui grid   -- ten wide column   -- six wide column </code>

定栏网格：要分为几栏，一般为奇数，偶数可转化为定宽

?

code

1 2 3 4 5

<code>--ui three column grid     -- column     -- column     -- column </code>

嵌套

?

code

1 2 3 4 5 6 7 8

<code>    -- ui three column grid container         -- column             -- ui two column grid             -- column             -- column         -- column         -- column </code>

其他补充 ATOM使用技巧

semantic.css打开的话就可以自动联想内部的组件。

左上角蓝色点表示没有保存。

安装browser-plus插件能够直接在编辑器里面看到显示效果，点击闪电标签实时同步修改的效果。

输入lorem会自动生成被打乱顺序的拉丁字母用于填充。

setting中修改show indent guide可以显示atom的对齐线。