ionic—基于web的移动端app开发框架(CSS篇1)

ionic是一款可以利用html5+css3+javascript搭建移动原生应用的一个工具。

ionic CSS(1)

1、header部分:

1.1基本语法

<div class=”bar bar-header”><h1 class=”title”>header</h1></div>

class添加不同的属性可以定义不同的颜色:

bar-light bar-stable bar-positive bar-calm bar-balanced bar-energized bar-assertive

bar-royal bar-dark

2.2补充:头部代码示例

<ion-view>

  <ion-content class=”no-header”>

    <div class=”bar bar-header bar-royal”>

<a href=”#” class=”button button-icon icon ion-gear-a”></a>//设定左侧按钮及图标

<h1 class=”title”>header</h1>

` <a href=”#” class=”button button-icon icon ion-heart></a>//ionic自动将最后一个图标放在最右侧,其他图标从左向右一次排列

</div>

  </ion-content>

</ion-view>

2、sub header部分:

<div class=”bar bar-header”><h1 class=”title”>header</h1></div>

<div class=”bar bar-subheader”><h2 class=”title”>header</h1></div>

3、footer部分:

<div class=”bar bar-footer”></div>

footer可以使用和header相同的颜色样式

4、button部分

4.1基本语法:<button class=”button”>button</button>

button可以与header颜色使用相同颜色默认样式

添加button-full 使button占满父元素宽度

button-smallbutton-largeionic中内置的大小设置

添加button-outline,只显示框线的button

4.1制作带iconbutton

<button class=”button”>

<i class=”icon ion-loading-c”></i>Loading...

</button>

4.3button组:<div class=”button-bar”><a class=”button”>first</a>......</div>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值