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>

 

 

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

7个优秀的国内外移动端web框架

淘宝SUI Mobile框架 官网地址:http://m.sui.taobao.org/ SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的C...
  • daimomo000
  • daimomo000
  • 2017年01月25日 11:03
  • 22605

最简单的混合APP开发框架——搭建你的第一个Ionic应用(一)

上次写了一篇关于Ionic3的文章,但是对于从来没有接触过Ionic的开发者来说,可能不是太友好。为了让更多的人了解这个非常好的混合应用开发框架,今天这篇文章主要介绍如何从零用最快的时间做一个Ioni...
  • liujiawei00
  • liujiawei00
  • 2017年08月03日 12:32
  • 2062

基于Web的APP开发 (Ionic初次尝试)

1、说明由于初次接触Ionic,Ionic是基于web开发移动设备的应用APP的开源框架。开发和构建APP比较快速,而且跨平台性能比较好。(这两点是在第一次尝试的时候的确有这样的感觉)。 在这里就...
  • u013869488
  • u013869488
  • 2016年11月10日 21:32
  • 2179

基于Html5的移动端(APP)开发框架的优缺点

1.框架:PhoneGap 官网:http://phonegap.com/ 简介: PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。...
  • sinat_14932597
  • sinat_14932597
  • 2015年07月29日 13:11
  • 4154

最简单的混合APP开发框架——搭建你的第一个Ionic应用(二)

现在我们可以在浏览器上看到自己的APP了,但是在浏览器上的APP说到底还只是一个单页应用,最有成就感的应该是我们自己做的APP在真正的手机上跑起来,right? 那么,就让我们继续吧。 如何将我们...
  • liujiawei00
  • liujiawei00
  • 2017年08月03日 14:02
  • 1397

快速开发app,这个快速开发框架,整合PC、移动端开发,让开发更畅快!

之前,有发过不少PC端快速开发的文章,但是现在越来越多的项目需要PC和移动端结合,所以,我给大家介绍一下之前快速开发平台的APP版本,希望大家能够体验一下,发表一下自己的看法。下载的话,在官网:www...
  • endless0709
  • endless0709
  • 2017年06月19日 11:05
  • 555

ionic 开发WebApp入门

在这个技术日新月异的情况下,学习是提高个人技术能录的唯一路径,下面就ionic 的入门做以下小结。私以为还是官网的资料最为准确。       部门学习资料如下:        菜鸟教程-ionic1 ...
  • ABC__D
  • ABC__D
  • 2017年07月05日 14:44
  • 405

基于Html5的移动端APP开发框架

快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP...
  • u013408979
  • u013408979
  • 2016年08月30日 15:56
  • 17034

移动端ionic App 多文件上传问题

第一篇博客,多多指教。 以实际项目为例,这是一个混合开发的App,功能很简单:拍照、录视频,填写表单,上传,查询。但是这里面也有坑在,就是我要说的-多文件的上传问题。 首先File Transfer ...
  • NaAlone
  • NaAlone
  • 2017年08月28日 15:11
  • 440

5大最流行手机webAPP框架之Ionic

https://my.oschina.net/u/2496664/blog/524295 摘要: 说实话,webApp这两年大有赶超原生app的势头,就webApp本身来讲还有很多缺点,执行效率...
  • kenkao
  • kenkao
  • 2016年10月28日 08:53
  • 2699
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ionic—基于web的移动端app开发框架(CSS篇1)
举报原因:
原因补充:

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