Ionic css组成（三）

Ionic css组成（三）

Ionic css组成（三）

三.、界面组件类
1.列表
使用.list定义列表容器，使用.item定义列表成员：
...
...
...
...
2.成员项
列表的样式定制主要发生在.item元素上。
3.按钮
ionic使用.button样式定义按钮元素
4.开关
开关通常用来设置两种状态- 开启和关闭
iMessage
5.复选
复选框通常用来在一组列表中选中部分成员
6.单选
f支付宝客户端支付
单选按钮通常不单独使用，将他们放入一个列表中
...
...
...

ionic icon(图标)

ionic 也默认提供了许多的图标，大概有 700 多个，针对 Android 和 iOS 有不同的样式。
Ionic icons 官网: http://ionicons.com/
国内图标样式 CDN 地址：https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css。
用法也非常的简单，由一个 icon 类及指定图标类组成，如：
实例
<i></i><iclass = "icon ion-happy-outline"></i><iclass = "icon ion-ios-analytics"></i><iclass = "icon ion-ios-eye"></i>
尝试一下 ?
我们可以通过 font-size 来设置图片的大小：
实例
.icon{font-size:50px;}

默认图标按钮：
代码图标<i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i>iOS 风格图标
代码图标<i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i>gt;<i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i>Android 风格图标
CodeResult<i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i><i ></i>