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

原创 2015年11月17日 23:20:12

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>

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Vonic—基于Vue.js和ionic样式的移动端UI框架

演示: https://wangdahoo.github.io/vonic/docs/ 源码:https://github.com/wangdahoo/vonic

移动app之ionic框架css布局

声明:本文转自汇智网,转载只为传播更多信息,版权归原作者所有。Ionic简介ionic是一个强大的_混合式/hybrid_HTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScrip...
  • xyphf
  • xyphf
  • 2016年12月12日 13:22
  • 1298

Hybird HTML5 App(移动应用开发)之:了解Ionic框架

Ionic并不是一个入门级的框架,它是一个专注于用web开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和SASS。这个框架的目的是从web的角度开发手机应用...
  • flyonok
  • flyonok
  • 2016年01月14日 13:43
  • 861

Ionic:一款用web技术开发类似原生App的神乎其技的html5框架

Ionic:一款用web技术开发类似原生App的神乎其技的html5框架 一、Ionic框架简介   Ionic是一个专注于用web开发技术,基于HTML5创建类似于手机平...

使用jQuery Mobile框架开发移动端Web App的入门教程

jQuery Mobile是移动端的基于jQuery的Web前端开发框架,移动设备上的浏览器对HTML5的支持普遍较强,因而jQuery Mobile的UI设计主要针对HTML5,下面就来详细看一下使...

搭建移动端框架Ionic+Genymotion开发环境

安装Ionic npm install -g cordova ionic 创建Ionic项目 ionic start app tabs #项目名称是app 添加Android平台 ...

angular JS 基于ionic框架 开发移动端项目 实现进入前台 判断用户权限 控制项目UI布局和tab的部门显示和隐藏

angularjs基于ionic框架开发移动端项目,怎么实现进去前台之前判断用户权限? 首先参考https://my.oschina.net/blogsh...这篇博客,再结合个人开发项目进行修改 ...

HTML5开发Web移动端APP技巧笔记——入门篇

一、以配置移动开发环境的方法 很多初学者都因为不知道怎么才能将自己在电脑上写的页面放到手机中测试,其实很简单,只要有以下几个原材料就可以了: 1、XAMMP或其他集成环境 2、自己能用电脑开一个WiF...
  • fareise
  • fareise
  • 2015年10月26日 08:38
  • 1050

2016超实用HTML5+CSS3移动web开发、手机网站源码(Mobile Web App微商城)、webApp企业微站

移动端web网站(移动端web开发/APP开发)、移动端App模版、手机网站模版、HTML5+CSS3网站,使用的HTML5、CSS3、zepto(jquery)+iScroll+swipe进行手机网...

HTML5开发移动web应用—JQuery Mobile(1)

JQuery Mobile是一个简单易用的web移动app开发框架。使用它就像使用jQuery一样,引入必要的文件即可。 最基础的jQuery Mobile文件的结构代码如下: 在此...
  • fareise
  • fareise
  • 2016年03月06日 18:11
  • 1690
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic—基于web的移动端app开发框架(CSS篇1)
举报原因:
原因补充:

(最多只允许输入30个字)