您的位置：首页 > 移动开发

.bar : 位置

2016-04-06 16:03 274 查看

ionic使用以下样式定义条块的位置：

.bar-header - 置顶

.bar-subheader - header之下置顶

.bar-footer - 置底

.bar-subfooter - footer之上置底

在腾讯新闻App中，你可以看到，使用了三个条块：标题、副标题、页脚：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body class="stable-bg">
<div class="bar bar-header bar-positive">
<h1 class="title">腾讯新闻</h1>
<a class="button button-clear icon ion-ios-gear"></a>
</div>
<div class="bar bar-subheader bar-stable">
<div class="button-bar">
<a class="button button-balanced">要闻</a>
<a class="button button-clear">财经</a>
<a class="button button-clear">娱乐</a>
<a class="button button-clear">体育</a>
<a class="button button-clear">科技</a>
</div>
</div>
<div class="bar bar-footer bar-dark">
<div class="button-bar">
<a class="button button-clear icon ion-document-text">新闻</a>
<a class="button button-clear icon ion-images">图片</a>
<a class="button button-clear icon ion-chatbox-working">话题</a>
<a class="button button-clear icon ion-radio-waves">热点</a>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： app

相关文章推荐

新的分享

章节导航