AmazeUI 列表的实现示例
导读:收集整理的这篇文章主要介绍了AmazeUI 列表的实现示例,觉得挺不错的,现在分享给大家,也给大家做个参考。 最近在学习amazeUI 框架的一些用法,本文主要介绍了AmazeUI 列表,分享给大家,也给自己留个笔记<!do...
收集整理的这篇文章主要介绍了AmazeUI 列表的实现示例,觉得挺不错的,现在分享给大家,也给大家做个参考。 最近在学习amazeUI 框架的一些用法,本文主要介绍了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"> /head> body style="margin: 10px; "> !--链接列表--> ul class="am-list"> li> a href="#"> 链接列表/a> /li> li> a href="#"> 链接列表/a> /li> /ul> !--文字超出截断为「...」--> ul class="am-list"> li> a href="#" class="am-text-truncate"> 文字超出截断文字超出截断文字超出截断文字超出截断/a> /li> /ul> !--纯文字列表--> ul class="am-list am-list-static"> li> a href="#"> 纯文字列表/a> /li> li> a href="#"> 纯文字列表/a> /li> /ul> !--列表边框--> ul class="am-list am-list-static am-list-border"> li> a href="#"> 列表边框/a> /li> li> a href="#"> 列表边框/a> /li> /ul> ul class="am-list am-list-border"> li> a href="#"> 列表边框/a> /li> li> a href="#"> 列表边框/a> /li> /ul> !--斑马纹--> ul class="am-list am-list-static am-list-border am-list-striped"> li> a href="#"> 斑马纹/a> /li> li> a href="#"> 斑马纹/a> /li> /ul> !--组合使用--> ul class="am-list am-list-static am-list-border"> li> span class="am-badge am-badge-success"> YES/span> span class="am-badge am-badge-danger"> NO/span> 组合使用 /li> /ul> !--添加 ICON--> ul class="am-list am-list-static am-list-border"> li> i class="am-icon-home am-icon-fw"> /i> 添加 ICON-/li> li> i class="am-icon-Book am-icon-fw"> /i> 添加 ICON-/li> li> i class="am-icon-pencil am-icon-fw"> /i> 添加 ICON-/li> /ul> ul class="am-list am-list-border"> li> a href="#"> i class="am-icon-home am-icon-fw"> /i> 添加 ICON-/a> /li> li> a href="#"> i class="am-icon-book am-icon-fw"> /i> 添加 ICON-/a> /li> li> a href="#"> i class="am-icon-pencil am-icon-fw"> /i> 添加 ICON-/a> /li> /ul> !--[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 列表内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: AmazeUI 列表的实现示例
本文地址: https://pptw.com/jishu/586202.html