layui mobile样例
时间: 2023-08-08 07:10:03 浏览: 36
以下是一个简单的 Layui Mobile 样例,展示了一个基本的页面布局和一些常用组件的使用:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Layui Mobile Demo</title>
<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.css" />
<link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.mobile.css" />
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">Layui Mobile Demo</div>
<div class="layui-card-body">
<p>Hello, world!</p>
<button class="layui-btn layui-btn-primary">Primary Button</button>
<button class="layui-btn">Default Button</button>
<button class="layui-btn layui-btn-normal">Normal Button</button>
<button class="layui-btn layui-btn-warm">Warm Button</button>
<button class="layui-btn layui-btn-danger">Danger Button</button>
<br>
<br>
<div class="layui-progress layui-progress-big" lay-showPercent="true">
<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.js"></script>
</body>
</html>
```
该样例使用了 Layui Mobile 提供的容器(`layui-container`)、行(`layui-row`)和列(`layui-col-md12`)来实现页面布局,同时使用了卡片(`layui-card`)和卡片头部(`layui-card-header`)来展示页面标题,使用了卡片主体(`layui-card-body`)来放置内容。
该样例还使用了几个常用的组件,包括按钮(`layui-btn`)、进度条(`layui-progress`)等。其中,按钮组件提供了不同的样式和颜色,可以根据实际需要进行选择;进度条组件可以用来展示某个任务的进度或者百分比。