Ionic入门八:头部与底部
1.Header(头部)
Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。
ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
<div class="bar bar-header bar-stable">
<h1 class="title">bar-stable</h1>
</div>
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
<div class="bar bar-header bar-calm">
<h1 class="title">bar-calm</h1>
</div>
<div class="bar bar-header bar-balanced">
<h1 class="title">bar-balanced</h1>
</div>
<div class="bar bar-header bar-energized">
<h1 class="title">bar-energized</h1>
</div>
<div class="bar bar-header bar-assertive">
<h1 class="title">bar-assertive</h1>
</div>
<div class="bar bar-header bar-royal">
<h1 class="title">bar-royal</h1>
</div>
<div class="bar bar-header bar-dark">
<h1 class="title">bar-dark</h1>
</div>









2.Sub Header(副标题)
Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header 。
<div class="bar bar-header">
<h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
</div>

3.Footer(底部)
Footer 是在屏幕的最下方,可以包含多种内容类型。
<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>
</div>

Footer 同上面的 Header,只是把样式名 bar-header 换做 bar-footer 。
<div class="bar bar-footer">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</div>

此外,如果底部没有标题,但是又需要右边的按钮,你需要在右侧按钮添加 pull-right如:
<div class="bar bar-footer">
<button class="button button-clear pull-right">Right</button>
</div>

Ionic入门八:头部与底部的更多相关文章
- ionic-CSS:ionic 头部与底部
ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...
- 网络编程懒人入门(八):手把手教你写基于TCP的Socket长连接
本文原作者:“水晶虾饺”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.引言 好多小白初次接触即时通讯(比如:IM或者消息推送应用)时,总是不 ...
- 利用ajax 引入静态页公共的头部与底部
利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的 首先得把公用的 ...
- html 如何引入一个公共的头部和底部
2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...
- HTML5 开发APP(头部和底部选项卡)
我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...
- vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...
- Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...
- Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...
- Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技 ...
随机推荐
- LintCode 35: Reverse Linked List
LintCode 35: Reverse Linked List 题目描述 翻转一个链表. 样例 给出一个链表1->2->3->null,这个翻转后的链表为3->2->1 ...
- 天梯赛 L2-022. (数组模拟链表) 重排链表
题目链接 题目描述 给定一个单链表 L1→L2→...→Ln-1→Ln,请编写程序将链表重新排列为 Ln→L1→Ln-1→L2→....例如:给定L为1→2→3→4→5→6,则输出应该为6→1→5→2 ...
- sql server 查询本年的每个月的数据
一.以一行数据的形式,显示本年的12月的数据,本示例以2017年为例,根据CreateDate字段判断,计算总和,查询语句如下: end) as '1月', end) as '2月', end) as ...
- java保存json格式数据,保存字符串和读取字符串
1.java保存json格式数据,保存字符串和读取字符串 import java.io.*; class RWJson { public void wiite(String s, String toS ...
- jQuery文档处理(追加删除)——(三)
1.追加内容
- Strusts2笔记9--防止表单重复提交和注解开发
防止表单重复提交: 用户可能由于各种原因,对表单进行重复提交.Struts2中使用令牌机制防止表单自动提交.以下引用自北京动力节点:
- Red Hat Enterprise Linux 7.2下使用RPM包安装SQL Server vNext
1.下载安装包 mssql-server:https://packages.microsoft.com/rhel/7/mssql-server/ mssql-tools:https://package ...
- Linux下如何在进程中获取虚拟地址对应的物理地址【转】
转自:http://blog.csdn.net/kongkongkkk/article/details/74366200 如果让你编写一个程序,来获取虚拟地址对应的物理地址..你会试着操作MMU吗.. ...
- 打包egg
scrapyd-deploy -p chahao -v 1.0 --build-egg chahao.egg
- Java项目打war包的方法
我们可以运用DOS命令来手工打war包: 首先,打开DOS命令行,敲入“jar”,我们发现它提示不是内部或外部的命令这样的错误,这时八成是你的JAVA环境没有配置好,我们可以用JAVA_HOME方式或 ...