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入门八:头部与底部的更多相关文章

  1. ionic-CSS:ionic 头部与底部

    ylbtech-ionic-CSS:ionic 头部与底部 1.返回顶部 1. ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ion ...

  2. 网络编程懒人入门(八):手把手教你写基于TCP的Socket长连接

    本文原作者:“水晶虾饺”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.引言 好多小白初次接触即时通讯(比如:IM或者消息推送应用)时,总是不 ...

  3. 利用ajax 引入静态页公共的头部与底部

    利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件,对于新入门的前端来说是很实用的方法,自己也是新手菜鸟一枚,折腾了好久,实现的方法有很多种,这是我个人觉得比较简单方便的 首先得把公用的 ...

  4. html 如何引入一个公共的头部和底部

    2016-01-08 作者案:尽己之力,用心打造一个商城!当你有十二分力气时,发现用了十分力气依旧没什么进展,请不要放弃希望:或许你想得到的东西正在十二分力气的地方等你:假若你用尽了十二分力气,还是没 ...

  5. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  6. vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  7. Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...

  8. Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...

  9. Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技 ...

随机推荐

  1. CF&&CC百套计划1 Codeforces Round #449 C. Willem, Chtholly and Seniorious (Old Driver Tree)

    http://codeforces.com/problemset/problem/896/C 题意: 对于一个随机序列,执行以下操作: 区间赋值 区间加 区间求第k小 区间求k次幂的和 对于随机序列, ...

  2. Spring MVC处理响应的 header

    我们经常需要在HttpResponse中设置一些headers,我们使用Spring MVC框架的时候我们如何给Response设置Header呢? So easy, 看下面的代码: @Request ...

  3. Android SDK更新失败对策

    Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xml Failed to fetch URL https:// ...

  4. Java并发编程原理与实战三:多线程与多进程的联系以及上下文切换所导致资源浪费问题

    一.进程 考虑一个场景:浏览器,网易云音乐以及notepad++ 三个软件只能顺序执行是怎样一种场景呢?另外,假如有两个程序A和B,程序A在执行到一半的过程中,需要读取大量的数据输入(I/O操作),而 ...

  5. Javascript Ajax异步读取RSS文档

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...

  6. 20155316 2016-2017-2 《Java程序设计》第7周学习总结

    教材学习内容总结 1. 时间与日期 1.1 时间的度量 GMT -> UT -> TAI -> UTC 英文 缩写 Greenwich Mean Time GMT Universal ...

  7. 20155235 2016-2017-2 《Java程序设计》第5周学习总结

    20155235 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章知识点 语法与继承结构 使用try.catch 异常继承结构 要抓还是要抛 贴心还是造 ...

  8. 微信小程序开发教程(六)配置——app.json、page.json详解

    全局配置:app.json 微信小程序的全局配置保存在app.json文件中.开发者通过使用app.json来配置页面文件(pages)的路径.窗口(window)表现.设定网络超时时间值(netwo ...

  9. 关于数据区间变换及numpy数组转图片数据的python实现

    python实现区间转换.numpy图片数据转换 需求: 客户的需求是永无止境的,这不?前几天,用户提出了一个需求,需要将一组数据从一个区间缩放到另一区间? 思路: 先将数据归一化,再乘以对应区间的差 ...

  10. 字符串hash&&对字符串hash的理解

     对字符串hash的一些总结: 1,首先,我们在转化的时候,取底的时候一般是取131这些数,因为要避免不同的字符串对应相同的hash值这种情况的出现.如果卡精度的时候,我们可以采取双模数的方式尽量减少 ...