admin管理员组

文章数量:1794759

MUI

MUI

本文主要介绍grid（栅格），超小屏xs和小屏幕sm的应用。

MUI 提供了非常简单实用的12列（是12列！！！依次为基数）响应式栅格系统。使用时只需在外围容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]即可。

尺寸超小屏幕(<400px)(Extrasmall)小屏幕(≥400px) Small
类前缀.mui-col-xs-[1-12].mui-col-sm-[1-12]
可嵌套是

 超小屏幕(<400px)(Extrasmall)和小屏幕(≥400px) Small，单独设置列数时，在约束条件内都有效。

1、当列数=12时，垂直排列

2、当列数<12时，水平排列，但不会撑满整个.mui-row容器

3、当列数>12时，水平排列，包含多余列（column）的元素将作为一个整体单元被另起一行排列

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!--标准mui.css--><link rel="stylesheet" href="css/mui.min.css"><!--App自定义的css--><!--<link rel="stylesheet" type="text/css" href="../css/app.css" />--><style></style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">Grid栅格</h1></header><div class="mui-content"><div class="mui-content"><h5 class="mui-content-padded">第一种：常规示例，默认12列</h5><div class="mui-row"><div class="mui-col-xs-12" style="padding-right: 0px;"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li></div><div class="mui-col-xs-12"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li></div></div><h5 class="mui-content-padded">第二种：列数<12</h5><div class="mui-row"><div class="mui-col-xs-4" style="padding-right: 0px;"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li></div><div class="mui-col-xs-4"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li></div></div><h5 class="mui-content-padded">第三种：列数>12</h5><div class="mui-row"><div class="mui-col-xs-4" style="padding-right: 0px;"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li></div><div class="mui-col-xs-10"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li></div></div></div></div><script src="js/mui.min.js"></script><script type="text/javascript" charset="utf-8">//mui初始化mui.init({swipeBack: true //启用右滑关闭功能});</script></body></html>

4、如果对列设置了mui-col-xs-[1-12]，当屏幕 >400时，仍按照超小屏幕显示；

但，如果对列设置了mui-col-sm-[1-12]，当屏幕 <400时，则忽略原设置，全部水平排列，如下图：

若想超小屏幕实现自定义，需要在列上增加mui-col-xs-[1-12]，效果如下：

 

本文标签： MUI

版权声明：本文标题：MUI 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1692677812a164042.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。