PhoneGap中文网

 找回密码
 立即注册
PhoneGap中文网 视频教程 ionic 教程 查看内容

ionic .bar 的位置属性.bar-header .bar-subheader

2015-4-8 12:37| 发布者: admin| 查看: 7935| 评论: 0

摘要: .bar : 位置ionic使用以下样式定义条块的位置:.bar-header- 置顶.bar-subheader- header之下置顶.bar-footer- 置底.bar-subfooter- footer之上置底在腾讯新闻App中,你可以看到,使用了三个条块:标题、副标题、页 ...

.bar : 位置

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

  • .bar-header - 置顶
  • .bar-subheader - header之下置顶
  • .bar-footer - 置底
  • .bar-subfooter - footer之上置底

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

sub-header



<!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>


头晕

难过

扯淡

不解

搞笑
1

支持

超赞

欠扁

刚表态过的朋友 (1 人)

相关阅读

最新评论

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-4-28 02:52 , Processed in 0.042892 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部