一，效果图。

二，代码。index.html文件如下所示。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

</head>

<body>

    <!--默认情况下按钮显示样式为：display:inline-block-->

    <button class="button">Default</button>

    <button class="button button-light">button-light</button>

    <button class="button button-stable">button-stable</button>

    <button class="button button-positive">button-positive</button>

    <button class="button button-calm">button-calm</button>

    <button class="button button-balanced">button-balanced</button>

    <button class="button button-energized">button-energized</button>

    <button class="button button-assertive">button-assertive</button>

    <button class="button button-royal">button-royal</button>

    <button class="button button-dark">button-dark</button>

    <button class="button button-block button-positive">Block button</button>

    <button class="button button-full button-positive">Full width Block Button</button>

    <!--不同大小的按钮-->

    <button class="button button-small button-assertive">small button</button>

    <button class="button button-large button-positive">large button</button>

    <!--无背景按钮-->

    <button class="button button-outline button-positive">outlined Button</button>

    <!--无背景与边框按钮-->

    <button class="button button-clear button-positive">clear button</button>

    <!--图标按钮-->

    <button class="button">

        <i class="icon ion-loading-c"></i>loading---

    </button>

    <button class="button icon-left ion-home">Home</button>

    <button class="button icon-left ion-star button-positive">Favorites</button>

    <a class="button icon-right ion-chevron-right button-calm">learn more</a>

    <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

    <button class="button icon ion-gear-a"></button>

    <a class="button button-icon icon ion-settings"></a>

    <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

    <!--头部底部增加按钮-->

    <div class="bar bar-header">

        <button class="button icon ion-navicon"></button>

        <h1 class="title">Header Buttons</h1>

        <button class="button">Edit</button>

    </div>

    <div class="bar bar-header">

        <button class="button button-icon icon ion-navicon"></button>

        <div class="h1 title">Header Buttons</div>

        <button class="button button-clear button-positive">Edit</button>

    </div>

    <!--按钮栏-->

    <div class="button-bar">

        <a class="button">First</a>

        <a class="button">Second</a>

        <a class="button">Third</a>

    </div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-按钮的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  3. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  4. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  5. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  6. android中在java代码中设置Button按钮的背景颜色

    android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...

  7. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  8. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

  9. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  10. ionic-CSS：ionic 按钮

    ylbtech-ionic-CSS:ionic 按钮 1.返回顶部 1. onic 按钮 按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式. 默认情况下,按钮显示样式为:dis ...

随机推荐

  1. 项目Alpha冲刺（团队3/10）

    项目Alpha冲刺(团队3/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 221600412 ...

  2. [CocoaPods]Podfile文件

    Podfile是一个描述一个或多个Xcode项目的目标依赖项的规范.该文件应该只是命名Podfile.指南中的所有示例都基于CocoaPods 1.0及更高版本. Podfile可以非常简单,这会将A ...

  3. python编译生成的.pyc作用

    如果 Python 进程在机器上拥有写入权限,那么它将把程序的字节码保存为一个以 .pyc 为扩展名的文件( ".pyc" 就是编译过的 ".py" 源代码). ...

  4. [Umbraco] umbraco中如何分页

    分页功能应该说是web开发中最基本的功能了,常规的做法是通过查询sql语句进行分页数据显示.但在umbraco中却不是这样子的.而且通过xpath中的postion来定位.如下代码 <?xml ...

  5. Chainsql使用相关笔记

    安装 按照github上chainsql的安装过程,这里主要介绍区块网络搭建过程(4个验证节点,其中只有一个节点[10.11.6.120]配置了数据库): 1.根据官方文档上配置文件的案例,修改cha ...

  6. 函数调用的区别：_cdecl以及_stdcall

    一.概念1)_stdcall调用   _stdcall是Pascal程序的缺省调用方式,参数采用从右到左的压栈方式,由调用者完成压栈操作,被调函数自身在返回前清空堆栈.   WIN32 Api都采用_ ...

  7. Guava初识

    1. 是什么 开源Java库,提供了用于集合,缓存,支持原语,并发性,常见注解,字符串处理,I/O和验证的实用方法 2. 开发它的最初目的是什么? 方便编码,减少编码错误 3. 好处 标准化 - Gu ...

  8. 深度学习之PyTorch实战（2）——神经网络模型搭建和参数优化

    上一篇博客先搭建了基础环境,并熟悉了基础知识,本节基于此,再进行深一步的学习. 接下来看看如何基于PyTorch深度学习框架用简单快捷的方式搭建出复杂的神经网络模型,同时让模型参数的优化方法趋于高效. ...

  9. 自定义Fiddler插件二

    在之前博客自定义Fiddler插件一中主要是实现了IRequestInspector2接口,这个接口主要是针对单个请求的,在写接口测试案例的时候也是对一个接口进行处理,如果想批量进行操作,那就可以使用 ...

  10. Mybatis缓存（1）--------系统缓存及简单配置介绍

    前言 Mybatis的缓存主要有两种: 系统缓存,也就是我们一级缓存与二级缓存: 自定义的缓存,比如Redis.Enhance等,需要额外的单独配置与实现,具体日后主要学习介绍. 在这里主要记录系统缓 ...