设为首页收藏本站
天天打卡
切换到窄版

 找回密码
 立即注册
搜索
爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享»首页 › 其他交流 | 闲聊交流 › HTML/Xhtml › AmazeUI 网格的实现示例
12下一页
返回列表 发新帖
查看: 68|回复: 15

AmazeUI 网格的实现示例

[复制链接]
双子前尘

2

主题

97

回帖

238

积分

中级会员

积分
238
发表于 2024-4-20 10:31:47 | 显示全部楼层 |阅读模式
本文主要介绍了AmazeUI 网格的实现示例，分享给大家，也给自己留个笔记。具体如下：
  1. <!doctype html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>网格</title>
  10. <meta name="renderer" content="webkit">
  11. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  12. <link rel="icon" type="image/png" href="assets/i/favicon.png">
  13. <meta name="mobile-web-app-capable" content="yes">
  14. <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
  15. <meta name="apple-mobile-web-app-capable" content="yes">
  16. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  17. <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  18. <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  19. <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  20. <meta name="msapplication-TileColor" content="#0e90d2">
  21. <link rel="stylesheet" href="assets/css/amazeui.min.css">
  22. <style>
  23. div>div:nth-child(1){background-color: #06f;}
  24. div>div:nth-child(2){background-color: #0f6;}
  25. div>div:nth-child(3){background-color: #60f;}
  26. div>div:nth-child(4){background-color: #6f0;}
  27. div>div:nth-child(5){background-color: #f60;}
  28. div>div:nth-child(6){background-color: #f06;}
  29. </style>
  30. </head>
  31. <body>
  32. <h3>示例 1：一个基本的网格</h3>
  33. <div class="am-g">
  34.   <div class="am-u-sm-4">4</div>
  35.   <div class="am-u-sm-8">8</div>
  36. </div>

  38. <h3>示例 2：不同区间不同的划分比例</h3>
  39. <div class="am-g doc-am-g">
  40.   <div class="am-u-sm-6 am-u-md-4 am-u-lg-3">sm-6 md-4 lg-3</div>
  41.   <div class="am-u-sm-6 am-u-md-8 am-u-lg-9">sm-6 md-8 lg-9</div>
  42. </div>

  44. <h3>示例 3：限制宽度的网格</h3>
  45. <div class="am-g am-g-fixed">
  46.   <div class="am-u-sm-4">4</div>
  47.   <div class="am-u-sm-8">8</div>
  48. </div>

  50. <h4>示例 4：容器</h4>
  51. <div class="am-container">
  52.   <div class="am-g">
  53.     <div class="am-u-sm-6">.am-u-sm-6</div>
  54.     <div class="am-u-sm-6">.am-u-sm-6</div>
  55.   </div>
  56. </div>

  58. <h3>示例 5：不足 12 份的网格</h3>
  59. <!-- 未添加 .am-u-end 的情形 -->
  60. <div class="am-g">
  61.   <div class="am-u-sm-3">3</div>
  62.   <div class="am-u-sm-3">3</div>
  63.   <div class="am-u-sm-3">3</div>
  64. </div>
  65. <!-- 添加 .am-u-end 后 -->
  66. <div class="am-g">
  67.   <div class="am-u-sm-3">3</div>
  68.   <div class="am-u-sm-3">3</div>
  69.   <div class="am-u-sm-3 am-u-end">3</div>
  70. </div>

  72. <h3>示例 6：响应式辅助类控制元素显隐</h3>
  73. <div class="am-g">
  74.   <div class="am-u-sm-2 am-u-lg-4">
  75.     <span class="am-show-md-down">sm-2</span>
  76.     <span class="am-show-lg-only">lg-4</span>
  77.   </div>
  78.   <div class="am-u-sm-4 am-u-lg-4">sm4 lg4</div>
  79.   <div class="am-u-sm-6 am-u-lg-4">
  80.     <span class="am-show-md-down">sm-6</span>
  81.     <span class="am-show-lg-only">lg-4</span>
  82.   </div>
  83. </div>
  84. <div class="am-g">
  85.   <div class="am-u-lg-3">
  86.     <span class="am-show-md-down">sm-full</span>
  87.     <span class="am-show-lg-only">lg-3</span>
  88.   </div>
  89.   <div class="am-u-lg-6">
  90.     <span class="am-show-md-down">sm-full</span>
  91.     <span class="am-show-lg-only">lg-6</span>
  92.   </div>
  93.   <div class="am-u-lg-3">
  94.     <span class="am-show-md-down">sm-full</span>
  95.     <span class="am-show-lg-only">lg-3</span>
  96.   </div>
  97. </div>
  98. <div class="am-g">
  99.   <div class="am-u-sm-6 am-u-lg-2">
  100.     <span class="am-show-md-down">6</span>
  101.     <span class="am-hide-md-down">2</span>
  102.   </div>
  103.   <div class="am-u-sm-6 am-u-lg-8">
  104.     <span class="am-show-md-down">6</span>
  105.     <span class="am-hide-md-down">8</span>
  106.   </div>
  107.   <div class="am-u-sm-12 am-u-lg-2">
  108.     <span class="am-show-md-down">full</span>
  109.     <span class="am-hide-md-down">2</span>
  110.   </div>
  111. </div>
  112. <div class="am-g">
  113.   <div class="am-u-sm-3">3</div>
  114.   <div class="am-u-sm-9">9</div>
  115. </div>
  116. <div class="am-g">
  117.   <div class="am-u-lg-4">
  118.     <span class="am-show-md-down">full</span>
  119.     <span class="am-hide-md-down">4</span>
  120.   </div>
  121.   <div class="am-u-lg-8">
  122.     <span class="am-show-md-down">full</span>
  123.     <span class="am-hide-md-down">8</span>
  124.   </div>
  125. </div>
  126. <div class="am-g">
  127.   <div class="am-u-sm-6 am-u-lg-5">
  128.     <span class="am-show-md-down">6</span>
  129.     <span class="am-hide-md-down">5</span>
  130.   </div>
  131.   <div class="am-u-sm-6 am-u-lg-7">
  132.     <span class="am-show-md-down">6</span>
  133.     <span class="am-hide-md-down">7</span>
  134.   </div>
  135. </div>
  136. <div class="am-g">
  137.   <div class="am-u-lg-6">
  138.     <span class="am-show-md-down">full</span>
  139.     <span class="am-hide-md-down">6</span>
  140.   </div>
  141.   <div class="am-u-lg-6">
  142.     <span class="am-show-md-down">full</span>
  143.     <span class="am-hide-md-down">6</span>
  144.   </div>
  145. </div>

  147. <h3>示例 7：列边距啪啪啪</h3>
  148. <div class="am-g">
  149.   <div class="am-u-sm-1">1</div>
  150.   <div class="am-u-sm-11">11</div>
  151. </div>
  152. <div class="am-g">
  153.   <div class="am-u-sm-1">1</div>
  154.   <div class="am-u-sm-10 am-u-sm-offset-1">10, offset 1</div>
  155. </div>
  156. <div class="am-g">
  157.   <div class="am-u-sm-1">1</div>
  158.   <div class="am-u-sm-9 am-u-sm-offset-2">9, offset 2</div>
  159. </div>
  160. <div class="am-g">
  161.   <div class="am-u-sm-1">1</div>
  162.   <div class="am-u-sm-8 am-u-sm-offset-3">8, offset 3</div>
  163. </div>
  164. <div class="am-g">
  165.   <div class="am-u-sm-1">1</div>
  166.   <div class="am-u-sm-7 am-u-sm-offset-4">7, offset 4</div>
  167. </div>

  169. <h3>示例 8：居中， To be or not to be</h3>
  170. <!-- .am-u-sm-centered 始终居中 -->
  171. <div class="am-g">
  172.   <div class="am-u-sm-3 am-u-sm-centered">3 centered</div>
  173. </div>
  174. <!-- .am-u-lg-centered 大于 1024 时居中 -->
  175. <div class="am-g">
  176.   <div class="am-u-sm-6 am-u-lg-centered">6 centered</div>
  177. </div>
  178. <!-- 大于 1024 时不居中 -->
  179. <div class="am-g">
  180.   <div class="am-u-sm-9 am-u-sm-centered am-u-lg-uncentered">9 md-down-centered </div>
  181. </div>
  182. <!-- 始终居中 -->
  183. <div class="am-g">
  184.   <div class="am-u-sm-11 am-u-sm-centered">11 centered</div>
  185. </div>

  187. <h3>示例 9：结构与表现表里不一</h3>
  188. <!--
  189. 结构中 main 在前， sidebar 在后
  190. 通过 push/pull，在 medium 区间将 sidebar 显示到左侧，main 显示到右侧
  191. large 区间 reset 回结构排序
  192. -->
  193. <div class="am-g">
  194.   <div class="am-u-md-8 am-u-md-push-4 am-u-lg-reset-order">8 main</div>
  195.   <div class="am-u-md-4 am-u-md-pull-8 am-u-lg-reset-order">4 sidebar</div>
  196. </div>

  198. <h3>示例 10: 没有内边距的列</h3>
  199. <div class="am-g am-g-collapse">
  200.   <div class="am-u-sm-6">.am-u-sm-6</div>
  201.   <div class="am-u-sm-6">.am-u-sm-6</div>
  202. </div>
  203. <!--[if (gte IE 9)|!(IE)]><!-->
  204. <script src="assets/js/jquery.min.js"></script>
  205. <!--<![endif]-->
  206. <!--[if lte IE 8 ]>
  207. <script src="assets/ie8/jquery.min.js"></script>
  208. <script src="assets/ie8/modernizr.js"></script>
  209. <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
  210. <![endif]-->
  211. <script src="assets/js/amazeui.min.js"></script>
  212. </body>
  213. </html>
复制代码
效果图：

到此这篇关于AmazeUI 网格的实现示例的文章就介绍到这了,更多相关AmazeUI 网格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

鳄鱼同态

0

主题

92

回帖

183

积分

注册会员

积分
183
发表于 2024-4-23 22:33:53 | 显示全部楼层
友善的讨论氛围是非常重要的。
回复 支持 反对

使用道具 举报

心情如歌888

3

主题

87

回帖

217

积分

中级会员

积分
217
发表于 2024-5-6 12:41:10 | 显示全部楼层
能给个链接吗？我想深入了解一下。
回复 支持 反对

使用道具 举报

随风的叶

0

主题

75

回帖

151

积分

注册会员

积分
151
发表于 2024-5-13 00:09:52 | 显示全部楼层
6666666666
回复 支持 反对

使用道具 举报

攜手游人間ゼ

0

主题

121

回帖

239

积分

中级会员

积分
239
发表于 2024-5-14 22:45:22 | 显示全部楼层
说得太好了，完全同意！
回复 支持 反对

使用道具 举报

Henry

3

主题

102

回帖

269

积分

中级会员

积分
269
发表于 2024-5-30 00:40:14 | 显示全部楼层
友善的讨论氛围是非常重要的。
回复 支持 反对

使用道具 举报

李烨海

1

主题

88

回帖

192

积分

注册会员

积分
192
发表于 2024-6-16 23:29:35 | 显示全部楼层
每日一回
回复 支持 反对

使用道具 举报

二次元那些事

2

主题

65

回帖

174

积分

注册会员

积分
174
发表于 2024-9-4 15:52:37 | 显示全部楼层
太棒了！感谢分享这个信息！
回复 支持 反对

使用道具 举报

卖报纸的哈士奇

1

主题

80

回帖

182

积分

注册会员

积分
182
发表于 2024-11-17 22:48:28 | 显示全部楼层
非常感谢你的观点，让我受益良多！
回复 支持 反对

使用道具 举报

赏缸羡鱼

3

主题

121

回帖

308

积分

中级会员

积分
308
发表于 2024-12-29 16:45:08 | 显示全部楼层
非常感谢你的观点，让我受益良多！
回复 支持 反对

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2025-4-2 20:51 , Processed in 0.831602 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

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