码迷,mamicode.com
首页 > 其他好文 > 详细

Semantic UI 记忆

时间:2017-04-28 23:31:46      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:grid   toolbar   mini   安装   ring   show   拉丁字母   number   语言   

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的对齐线。

 

Semantic UI 记忆

标签:grid   toolbar   mini   安装   ring   show   拉丁字母   number   语言   

原文地址:http://www.cnblogs.com/hanlu5016/p/6783572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!