自行测试使用。
单文字
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鸟教程(runoob.com)</title>
<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
</head>
<body>
<div class="bar bar-header">
<div class="h1 title">卡片</div>
</div>
<div class="content has-header">
<div class="card">
<div class="item item-text-wrap">
基本卡片，包含了文本信息。
</div>
</div>
</div>
</body>
</html>带图片的
< ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鸟教程(runoob.com)</title>
<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
</head>
<body>
<div class="bar bar-header">
<div class="h1 title">卡片</div>
</div>
<div class="content has-header">
<div class="list card">
<div class="item item-avatar">
<img src="http://www.runoob.com/try/demo_source/mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" style="height:20%; width:100%" src="http://www.runoob.com/try/demo_source/delorean.jpg">
<p>
菜鸟教程 -- 学的不仅是技术，更是梦想！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！<br>菜鸟教程 -- 学的不仅是技术，更是梦想！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！
</p>
<p>
<a href="#" class="subdued">1 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
喜欢
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
评论
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
分享
</a>
</div>
</div>
</div>
</body>
</html>版权说明：文章[非商业性质]，有大量文章来源网络各处，本站只做收集，侵权联系删除。