首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

AmazeUI 网格的实现示例

Posted in HTML / CSS onAugust 13, 2020

本文主要介绍了AmazeUI 网格的实现示例，分享给大家，也给自己留个笔记。具体如下：

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网格</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<style>
div>div:nth-child(1){background-color: #06f;}
div>div:nth-child(2){background-color: #0f6;}
div>div:nth-child(3){background-color: #60f;}
div>div:nth-child(4){background-color: #6f0;}
div>div:nth-child(5){background-color: #f60;}
div>div:nth-child(6){background-color: #f06;}
</style>
</head>
<body>
<h3>示例 1：一个基本的网格</h3>
<div class="am-g">
  <div class="am-u-sm-4">4</div>
  <div class="am-u-sm-8">8</div>
</div>

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

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

<h4>示例 4：容器</h4>
<div class="am-container">
  <div class="am-g">
    <div class="am-u-sm-6">.am-u-sm-6</div>
    <div class="am-u-sm-6">.am-u-sm-6</div>
  </div>
</div>

<h3>示例 5：不足 12 份的网格</h3>
<!-- 未添加 .am-u-end 的情形 -->
<div class="am-g">
  <div class="am-u-sm-3">3</div>
  <div class="am-u-sm-3">3</div>
  <div class="am-u-sm-3">3</div>
</div>
<!-- 添加 .am-u-end 后 -->
<div class="am-g">
  <div class="am-u-sm-3">3</div>
  <div class="am-u-sm-3">3</div>
  <div class="am-u-sm-3 am-u-end">3</div>
</div>

<h3>示例 6：响应式辅助类控制元素显隐</h3>
<div class="am-g">
  <div class="am-u-sm-2 am-u-lg-4">
    <span class="am-show-md-down">sm-2</span>
    <span class="am-show-lg-only">lg-4</span>
  </div>
  <div class="am-u-sm-4 am-u-lg-4">sm4 lg4</div>
  <div class="am-u-sm-6 am-u-lg-4">
    <span class="am-show-md-down">sm-6</span>
    <span class="am-show-lg-only">lg-4</span>
  </div>
</div>
<div class="am-g">
  <div class="am-u-lg-3">
    <span class="am-show-md-down">sm-full</span>
    <span class="am-show-lg-only">lg-3</span>
  </div>
  <div class="am-u-lg-6">
    <span class="am-show-md-down">sm-full</span>
    <span class="am-show-lg-only">lg-6</span>
  </div>
  <div class="am-u-lg-3">
    <span class="am-show-md-down">sm-full</span>
    <span class="am-show-lg-only">lg-3</span>
  </div>
</div>
<div class="am-g">
  <div class="am-u-sm-6 am-u-lg-2">
    <span class="am-show-md-down">6</span>
    <span class="am-hide-md-down">2</span>
  </div>
  <div class="am-u-sm-6 am-u-lg-8">
    <span class="am-show-md-down">6</span>
    <span class="am-hide-md-down">8</span>
  </div>
  <div class="am-u-sm-12 am-u-lg-2">
    <span class="am-show-md-down">full</span>
    <span class="am-hide-md-down">2</span>
  </div>
</div>
<div class="am-g">
  <div class="am-u-sm-3">3</div>
  <div class="am-u-sm-9">9</div>
</div>
<div class="am-g">
  <div class="am-u-lg-4">
    <span class="am-show-md-down">full</span>
    <span class="am-hide-md-down">4</span>
  </div>
  <div class="am-u-lg-8">
    <span class="am-show-md-down">full</span>
    <span class="am-hide-md-down">8</span>
  </div>
</div>
<div class="am-g">
  <div class="am-u-sm-6 am-u-lg-5">
    <span class="am-show-md-down">6</span>
    <span class="am-hide-md-down">5</span>
  </div>
  <div class="am-u-sm-6 am-u-lg-7">
    <span class="am-show-md-down">6</span>
    <span class="am-hide-md-down">7</span>
  </div>
</div>
<div class="am-g">
  <div class="am-u-lg-6">
    <span class="am-show-md-down">full</span>
    <span class="am-hide-md-down">6</span>
  </div>
  <div class="am-u-lg-6">
    <span class="am-show-md-down">full</span>
    <span class="am-hide-md-down">6</span>
  </div>
</div>

<h3>示例 7：列边距啪啪啪</h3>
<div class="am-g">
  <div class="am-u-sm-1">1</div>
  <div class="am-u-sm-11">11</div>
</div>
<div class="am-g">
  <div class="am-u-sm-1">1</div>
  <div class="am-u-sm-10 am-u-sm-offset-1">10, offset 1</div>
</div>
<div class="am-g">
  <div class="am-u-sm-1">1</div>
  <div class="am-u-sm-9 am-u-sm-offset-2">9, offset 2</div>
</div>
<div class="am-g">
  <div class="am-u-sm-1">1</div>
  <div class="am-u-sm-8 am-u-sm-offset-3">8, offset 3</div>
</div>
<div class="am-g">
  <div class="am-u-sm-1">1</div>
  <div class="am-u-sm-7 am-u-sm-offset-4">7, offset 4</div>
</div>

<h3>示例 8：居中， To be or not to be</h3>
<!-- .am-u-sm-centered 始终居中 -->
<div class="am-g">
  <div class="am-u-sm-3 am-u-sm-centered">3 centered</div>
</div>
<!-- .am-u-lg-centered 大于 1024 时居中 -->
<div class="am-g">
  <div class="am-u-sm-6 am-u-lg-centered">6 centered</div>
</div>
<!-- 大于 1024 时不居中 -->
<div class="am-g">
  <div class="am-u-sm-9 am-u-sm-centered am-u-lg-uncentered">9 md-down-centered </div>
</div>
<!-- 始终居中 -->
<div class="am-g">
  <div class="am-u-sm-11 am-u-sm-centered">11 centered</div>
</div>

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

<h3>示例 10: 没有内边距的列</h3>
<div class="am-g am-g-collapse">
  <div class="am-u-sm-6">.am-u-sm-6</div>
  <div class="am-u-sm-6">.am-u-sm-6</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</body>
</html>

效果图：

AmazeUI 网格的实现示例

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

AmazeUI 网格的实现示例

- Author -

iteye_17658

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 #HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 #HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 #HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 #HTML / CSS
在html页面中取得session中的值的方法
Aug 11 #HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 #HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 #HTML / CSS
TypeScript(2) 复合索引(1) zabbix(9) location(2) keeplive_timeout(1) http_stub_status_module(1) BufferPool(1) 缓存机制(1) text-shadow(1) RTMP(1)
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数（去除注释及空行）
2011/01/17 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
JS实现密码框效果
2020/09/10 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python计算一个序列的平均值的方法
2015/07/11 Python
python实现发送邮件功能代码
2017/12/14 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python处理excel绘制雷达图
2019/10/18 Python
java字符串格式化输出实例讲解
2021/01/06 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
求两个数的乘积和商数，该作用由宏定义来实现
2013/03/13 面试题
钳工实习自我鉴定
2013/09/19 职场文书
编辑个人求职信范文
2013/09/21 职场文书
室内设计实习自我鉴定
2013/09/25 职场文书
财务主管的岗位职责
2013/12/30 职场文书
公司口号大全
2014/06/11 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
工作检讨书怎么写
2015/01/23 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫