ionic-CSS:ionic 头部与底部
2024-09-06 06:48:48
ylbtech-ionic-CSS:ionic 头部与底部 |
1.返回顶部 |
1、
ionic 头部与底部
Header(头部)
Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。
ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。
bar-light
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
bar-stable
<div class="bar bar-header bar-stable">
<h1 class="title">bar-stable</h1>
</div>
bar-positive
<div class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</div>
bar-calm
<div class="bar bar-header bar-calm">
<h1 class="title">bar-calm</h1>
</div>
bar-balanced
<div class="bar bar-header bar-balanced">
<h1 class="title">bar-balanced</h1>
</div>
bar-energized
<div class="bar bar-header bar-energized">
<h1 class="title">bar-energized</h1>
</div>
bar-assertive
<div class="bar bar-header bar-assertive">
<h1 class="title">bar-assertive</h1>
</div>
bar-royal
<div class="bar bar-header bar-royal">
<h1 class="title">bar-royal</h1>
</div>
bar-dark
<div class="bar bar-header bar-dark">
<h1 class="title">bar-dark</h1>
</div>
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>
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>
2、
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
1、
2、
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
最新文章
- 搭建andiord sdk和安装eclipse adt插件的个人小体会
- 避免使用CSS表达式
- ping: unknown host www.baidu.com
- 基于theano的深度卷积神经网络
- 使用eclipse创建java程序可执行jar包
- HDU 4627 The Unsolvable Problem(简单题)
- 我用过的Linux命令--修改主机名
- 闲扯 Javascript 00
- windows phone 8环境搭建
- linux 压缩zip包
- 关于防止sql注入的几个知识点
- [JSOI2008]球形空间产生器sphere
- 数据库历险记(一) | MySQL这么好,为什么还有人用Oracle?
- Java11新特性!
- Java【第八篇】面向对象之高级类特性
- 工作随笔—integer对象比较
- PHP优化——从语言到业务
- [LeetCode] 596. Classes More Than 5 Students_Easy tag:SQL
- apiCloud 三方分享,微信好友分享,微信朋友圈分享,QQ分享,微博分享
- C#基础第七天-作业答案-利用面向对象的思想去实现名片-动态添加
热门文章
- Nginx配置PHP环境支持
- Shiro学习(24)在线回话管理
- AcWing 286. 选课 (树形依赖分组背包)打卡
- Chrome 调试跨域问题解决方案之插件篇
- error C2065: CoInitializeEx&#39; : undeclared identifier 解决方法
- dom读写xml
- vbs 之 excel 使用VBScript 操作excel
- 调试Bochs在Linux Mint下面symbol not found的问题
- 2019牛客多校第三场J-LRU management(map+双向链表)
- 拾遗:Git 常用操作回顾