mui栅格布局的两种方式（grid和list，宫格和列表）

效果截图示下：

代码示下：

<!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="statics/plugin/mui/mui.min.css">
<link rel="stylesheet" type="text/css" href="statics/css/css_ybtz/reset.css"/>
<!--App自定义的css-->
</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">9宫格默认样式</h1>
</header>
<div class="mui-content"><div class="mui-row"><div class="mui-col-sm-8 mui-col-xs-8"><li class="mui-table-view-cell"><a class="">Item 1   <!--mui-navigate-right--></a></li></div><div class="mui-col-sm-4 mui-col-xs-4"><li class="mui-table-view-cell"><a class="">Item 1</a></li></div></div><div class="mui-row"><div class="mui-col-sm-6 mui-col-xs-6"><li class="mui-table-view-cell"><a class="">Item 1    </a></li></div><div class="mui-col-sm-6 mui-col-xs-6"><li class="mui-table-view-cell"><a class="">Item 1</a></li></div></div><ul class="mui-table-view mui-grid-view mui-grid-9"><li class="mui-table-view-cell mui-media mui-col-xs-8 mui-col-sm-8"><a href="#"><span class="mui-icon mui-icon-home"></span><div class="mui-media-body">Home</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#"><span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span><div class="mui-media-body">Email</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#"><span class="mui-icon mui-icon-chatbubble"></span><div class="mui-media-body">Chat</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6"><a href="#"><span class="mui-icon mui-icon-location"></span><div class="mui-media-body">location</div></a></li></ul>
</div>
</body>
<script src="statics/plugin/mui/mui.min.js"></script>
<script>
mui.init({swipeBack:true //启用右滑关闭功能
});
</script>
</html>

以上就是关于“mui栅格布局的两种方式（grid和list，宫格和列表）”的全部内容。

mui栅格布局的两种方式（grid和list，宫格和列表）相关推荐

android动态居中布局,Android动态添加布局的两种方式
释放双眼,带上耳机,听听看~! 前言大多数时候我们布局都是用xml来布局的,但有些时候也是会用到动态布局的,尤其是在一些大项目中,动态布局更是体现的淋漓尽致. 所以今天我们就来学习一些动态加添布局的 ...
android动态改变布局,Android 动态添加布局的两种方式
前言大多数时候我们布局都是用xml来布局的,但有些时候也是会用到动态布局的,尤其是在一些大项目中,动态布局更是体现的淋漓尽致. 所以今天我们就来学习一些动态加添布局的两种方式,分别是动态添加xml ...
【JetPack】视图绑定 ( ViewBinding ) 各种应用 ( 视图绑定两种方式 | Activity 布局 | 对话框布局 | 自定义组件布局 | RecyclerView 列表布局 )
文章目录 I . 视图绑定 ( ViewBinding ) 界面的两种方式 II . Activity 界面中应用视图绑定 ( ViewBinding ) III . Dialog 对话框界面中 ...
两种方式实现圣杯布局
圣杯布局又被称为双飞布局,比较简单,今天我给大家分享一下,如何用两种方式来实现双飞布局.那什么是双飞布局呢,其实就是两侧宽度固定,中间宽度自适应的三栏布局. 1.第一种相对来说比较容易想到,就是利用定 ...
android布局密码,Android中EditText显示明文与密码的两种方式
效果图如下所述: 布局 xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="h ...
Qt开发应用程序的两种方式
目录案例:计算圆面积(两种方式实现) 方式一:设计器 Qt Designer实现 (20201015) 方案A:触发按钮事件(_clicked()) 方案B:触发输入编辑框事件(_textCha ...
android asynctask源码分析,Android通过Handler与AsyncTask两种方式动态更新ListView(附源码)...
本文实例讲述了Android通过Handler与AsyncTask两种方式动态更新ListView的方法.分享给大家供大家参考,具体如下: 有时候我们需要修改已经生成的列表,添加或者修改数据,noti ...
内存分配的原理__进程分配内存有两种方式，分别由两个系统调用完成：brk和mmap（不考虑共享内存）
如何查看进程发生缺页中断的次数? 用ps -o majflt,minflt -C program命令查看. majflt代表major fault,中文名叫大错误,minflt代表minor faul ...
java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...

mui栅格布局的两种方式（grid和list，宫格和列表）

文章目录

mui栅格布局的两种方式（grid和list，宫格和列表）

效果截图示下：

代码示下：

mui栅格布局的两种方式（grid和list，宫格和列表）相关推荐

最新文章

热门文章