请选择 进入手机版 | 继续访问电脑版
点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
查看: 79|回复: 50

AmazeUI网格实现示例

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-2-23 22:13:10 | 显示全部楼层 |阅读模式
这篇文章主要介绍了AmazeUI网格实现示例。这篇文章是通过样品代码介绍的非常详细的,对大家的学习或工作有参考学习价值,根据需要的朋友们,与篇一起学习

本文主要介绍AmazeUI网格的实现示例,与大家分享,留下笔记。具体如下:

!Doctype  html

Html类=' no-js  '

头(电影)

meta  charset=' utf-8 '

meta  http-equiv=' x-ua-compatible  ' content=' ie=edge  '

元名称='说明'内容=' '

元名称='关键字'内容=' '

元名称=' viewport  ' content=' width=device-width,initial-scale=1 '

标题网格/标题

元名称=' renderer' content=' WebKit  '

meta  http-equiv=' cache-control  ' content=' no-site  app  '/

link  rel=' icon  ' type=' image/png  ' href=' assets/I/favicon  . png  '

元名称=' mobile-we  B- app-capable  ' content=' yes  '

link  rel=' icon  ' sizes=' 192 x192 ' href=' assets/I/app-icon  72 x72 @ 2x  . png  '

元名称=' apple-mobile-we  B- app-capable  ' content=' yes  '

元名称=' apple-mobile-we  B- app-status-bar-style  ' content=' black  '

元名称=' apple-mobile-we  B- app-title  ' content=' amaze  ui  '/

link  rel=' apple-touch-icon-precomposed  ' href=' assets/I/app-icon  72x  72 @ 2x  . png  '

meta  name=' ms  application-tile  image  ' content=' assets/I/app-icon  72x  72 @ 2x  . png  '

元名称=' ms  application-tile  color  ' content=' # 0e90d  2 '

link  rel=' style  sheet  ' href=' assets/CSS/amazeui  . min  . CSS  '

风格(音乐)

DIV  DIV  : NTH-Child(1){ Background-color  : # 06F;}

DIV  DIV  : NTH-Child(2){ Background-color  : # 0 F6;}

DIV  DIV  : NTH-Child(3){ Background-color  : # 60F;}

DIV  DIV  3360 NTH-Child(4){ Background-color  : # 6 F0;}

DIV  DIV  : NTH-Child(5){ Background-color  : # F60;}

DIV  DIV  : NTH-Child(6){ Background-color  : # F06;}

/style

/head

菩提

H3示例1:1个基本网格/h3

Div类=' am-g  '

Div类=' am-u-sm-4' 4/div

Div类=' am-u-sm-8' 8/div

/div

H3范例2:不同间隔的分割比例/h3

Div类=' am-g  doc-am-g  '

Div类=' AM-U-SM-6AM-U-MD-4AM-U-LG-3 ' SM-6MD-4 LG-3/DIV

Div类=' AM-U-SM-6AM-U-MD-8AM-U-LG-9 ' SM-6 MD-8 LG-9/DIV

/div

H3示例3:限制宽度的网格/h3g
t;
4
8

示例 4:容器

.am-u-sm-6
.am-u-sm-6


示例 5:不足 12 份的网格

3
3
3

3
3
3

示例 6:响应式辅助类控制元素显隐

sm-2
lg-4

sm4 lg4

sm-6
lg-4



sm-full
lg-3


sm-full
lg-6


sm-full
lg-3



6
2


6
8


full
2


3
9


full
4


full
8



6
5


6
7



full
6


full
6


示例 7:列边距啪啪啪
1
11

1
10, offset 1

1
9, offset 2

1
8, offset 3

1
7, offset 4

示例 8:居中, To be or not to be

3 centered

6 centered

9 md-down-centered

11 centered

示例 9:结构与表现表里不一

8 main
4 sidebar

示例 10: 没有内边距的列
.am-u-sm-6
.am-u-sm-6







效果图:



到此这篇关于AmazeUI 网格的实现示例的文章就介绍到这了,更多相关AmazeUI 网格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
来源:脚本之家
链接:https://www.jb51.net/html5/740409.html
回复

使用道具 举报

1

主题

114

帖子

117

积分

注册会员

Rank: 2

积分
117
发表于 2021-2-23 22:18:00 | 显示全部楼层
不错
回复

使用道具 举报

1

主题

121

帖子

95

积分

注册会员

Rank: 2

积分
95
发表于 2021-2-23 22:38:48 | 显示全部楼层
好好 学习了 确实不错
回复

使用道具 举报

2

主题

126

帖子

136

积分

注册会员

Rank: 2

积分
136
发表于 2021-2-23 23:06:46 | 显示全部楼层
看帖回帖是美德!
回复

使用道具 举报

1

主题

104

帖子

103

积分

注册会员

Rank: 2

积分
103
发表于 2021-2-23 23:26:52 | 显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

1

主题

121

帖子

95

积分

注册会员

Rank: 2

积分
95
发表于 2021-2-23 23:50:38 | 显示全部楼层
写的真的很不错
回复

使用道具 举报

1

主题

102

帖子

72

积分

注册会员

Rank: 2

积分
72
发表于 2021-2-24 06:09:05 | 显示全部楼层
LZ真是人才
回复

使用道具 举报

1

主题

109

帖子

98

积分

注册会员

Rank: 2

积分
98
发表于 2021-2-24 06:31:47 | 显示全部楼层
学习了,谢谢分享、、、
回复

使用道具 举报

1

主题

121

帖子

104

积分

注册会员

Rank: 2

积分
104
发表于 2021-2-24 06:54:33 | 显示全部楼层
有竞争才有进步嘛
回复

使用道具 举报

0

主题

107

帖子

106

积分

注册会员

Rank: 2

积分
106
发表于 2021-2-24 07:15:54 | 显示全部楼层
帮你顶下哈!!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|汕头@IT精英团

Powered by Discuz! X3.4 © 2020 Comsenz Inc.

GMT+8, 2021-3-9 17:45 , Processed in 0.095921 second(s), 19 queries .

快速回复 返回顶部 返回列表