SDK.CN

Ionic框架之CSS

来源:汇智网
时间:多个视屏
难度:初级
播放:144

视频简介

Ionic是一个出色的基于AngularJS的移动开发框架。本课程通过简明易懂的小实例来讲解Ionic框架的CSS接口,适用于具备基础CSS知识的学习者。

章节介绍

 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} : 列纵向对齐
相关工具
SDK.CN

Ionic

The beautiful,...

相关视频

推荐工具 意见反馈