ionic .bar 的位置属性.bar-header .bar-subheader
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
.bar : 位置
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>