ionic: HTML5 mobile development framework
ionic简介
Hybrid vs. Others
ionic
CSS框架
基本布局
布局模式
定高条块:.bar
.bar : 位置
.bar : 嵌入子元素
.bar : 嵌入input
内容:.content和.scroll-content
色彩、图标和边距
色彩
图标
内边距
界面组件:列表
列表 : .list
成员容器 : .item
.item : 嵌入文本
.item : 嵌入图标
.item : 嵌入头像
.item : 嵌入缩略图
.item : 嵌入大图
界面组件:按钮
按钮 : .button
.button : 嵌入图标
在列表中使用按钮
界面组件:表单输入
输入组件容器 : .item-input
文本输入 : input[type="text"]
文本输入:使用占位符做标签
文本输入:堆叠式标签
开关 : .toggle input[type="checkbox"]
复选按钮 : .checkbox input[type="checkbox"]
单选按钮 : .item-radio input[type="radio"]
滑动条 : .range input[type="range"]
选择框 : .item-select select
界面组件:选项卡
选项卡 : .tabs
.tab-item : 使用图标
.tab-item : 使用徽章
.tabs : 顶部选项卡
.tab-striped .tabs : 条带风格选项卡
定制布局:栅格系统
栅格系统
.col : 默认的定宽列
.col-{width-percent} : 指定列宽
.col-{width-percent} : metro风格
.col-offset-{width-percent} : 指定列偏移
.col-{align} : 列纵向对齐
30:00
有问题?问助教!