1. ionic css基本布局
2. ionic css色彩、图标和边距
3. ionic css界面组件列表
4. ionic css界面组件按钮
5. ionic css界面组件 表单输入
6. ionic css界面组件选项卡
7. ionic css定制布局 Grid布局
第十三讲免费视频教程下载地址:http://bbs.phonegap100.com/thread-2047-1-1.html
1. 基本布局
1.布局模式
基本布局:标题/header、内容/content和页脚/footer。
标题区总是位于屏幕顶部,页脚区总是位于屏幕底部,而内容区占据剩余的空间。 ionic使用以下CSS类声明对应区域:
• .bar.bar-header - 声明元素为标题区
• .bar.bar-footer - 声明元素为底部
• .content . scroll-content- 声明元素为内容区
2. .bar位置以及颜详解
样式.bar将元素声明为屏幕上绝对定位的块状区域,具有 固定的高度(44px):
使用方式:
1. <any class="bar">...</any>
3. .bar : 位置
ionic使用以下样式定义条块的位置:
• .bar-header - 置顶
• .bar-subheader - header之下置顶
• .bar-footer - 置底
• .bar-subfooter - footer之上置底
下面例子,使用了三个条块:标题、副标题、页脚:
4. .bar : 嵌入子元素
在ionic中,有三种.bar子元素的样式是预定义的:
• 标题文字 - 对包含标题文字的元素应用.title样式,通常使用h1元素:
<any class="bar">
<any class="title">...</any>
</any>
• 按钮 - 对用作按钮的元素,应用.button样式,通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案:
<any class="bar">
<any class="button">...</any>
</any>
• 工具栏 - 工具栏包含一组按钮。对用作工具栏的元素,应用.button-bar样式,通常 使用div元素作为工具栏:
<any class="bar">
<any class="button-bar">...</any>
</any>
5. bar : 嵌入input
一种常见的UI模式是在标题栏中嵌入搜索栏,比如美团:
在.bar元素中嵌入input元素,需要注意两点:
1. 在条块元素上应用.item-input-inset样式
2. 将input包裹在应用.item-input-wrapper样式的元素内
这是因为,在ionic的实现中,.bar中的.input 样式定义如下:
.bar.item-input-inset{
.item-input-wrapper{
.input{
...
}
}
}
6. 内容:.content和.scroll-content
ionic预定义了两个内容容器样式:
• .content – 相对定位
• .scroll-content - 绝对定位,内容元素占满整个屏幕
• 这两种样式都可以使用以下样式进一步确定位置及范围:
2. Ionic 色彩、图标和边距
1.ionic定义了九种前景/背景/边框的色彩样式
2.ionic 中的图标
ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式,有超过500个图标可供选择。
使用图标很简单,在元素上声明以下两个CSS类即可:
• .icon - 将元素声明为图标
• .ion-{icon-name} - 声明要使用的具体图标
通常使用i元素定义图标,例如下面声明了元素显示ion-home图标:
<i class="icon ion-home"></i>
要了解有哪些图标及具体名称ÿ
2. ionic css色彩、图标和边距
3. ionic css界面组件列表
4. ionic css界面组件按钮
5. ionic css界面组件 表单输入
6. ionic css界面组件选项卡
7. ionic css定制布局 Grid布局
第十三讲免费视频教程下载地址:http://bbs.phonegap100.com/thread-2047-1-1.html
1. 基本布局
1.布局模式
基本布局:标题/header、内容/content和页脚/footer。
标题区总是位于屏幕顶部,页脚区总是位于屏幕底部,而内容区占据剩余的空间。 ionic使用以下CSS类声明对应区域:
• .bar.bar-header - 声明元素为标题区
• .bar.bar-footer - 声明元素为底部
• .content . scroll-content- 声明元素为内容区
2. .bar位置以及颜详解
样式.bar将元素声明为屏幕上绝对定位的块状区域,具有 固定的高度(44px):
使用方式:
1. <any class="bar">...</any>
3. .bar : 位置
ionic使用以下样式定义条块的位置:
• .bar-header - 置顶
• .bar-subheader - header之下置顶
• .bar-footer - 置底
• .bar-subfooter - footer之上置底
下面例子,使用了三个条块:标题、副标题、页脚:
4. .bar : 嵌入子元素
在ionic中,有三种.bar子元素的样式是预定义的:
• 标题文字 - 对包含标题文字的元素应用.title样式,通常使用h1元素:
<any class="bar">
<any class="title">...</any>
</any>
• 按钮 - 对用作按钮的元素,应用.button样式,通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案:
<any class="bar">
<any class="button">...</any>
</any>
• 工具栏 - 工具栏包含一组按钮。对用作工具栏的元素,应用.button-bar样式,通常 使用div元素作为工具栏:
<any class="bar">
<any class="button-bar">...</any>
</any>
5. bar : 嵌入input
一种常见的UI模式是在标题栏中嵌入搜索栏,比如美团:
在.bar元素中嵌入input元素,需要注意两点:
1. 在条块元素上应用.item-input-inset样式
2. 将input包裹在应用.item-input-wrapper样式的元素内
这是因为,在ionic的实现中,.bar中的.input 样式定义如下:
.bar.item-input-inset{
.item-input-wrapper{
.input{
...
}
}
}
6. 内容:.content和.scroll-content
ionic预定义了两个内容容器样式:
• .content – 相对定位
• .scroll-content - 绝对定位,内容元素占满整个屏幕
• 这两种样式都可以使用以下样式进一步确定位置及范围:
2. Ionic 色彩、图标和边距
1.ionic定义了九种前景/背景/边框的色彩样式
2.ionic 中的图标
ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式,有超过500个图标可供选择。
使用图标很简单,在元素上声明以下两个CSS类即可:
• .icon - 将元素声明为图标
• .ion-{icon-name} - 声明要使用的具体图标
通常使用i元素定义图标,例如下面声明了元素显示ion-home图标:
<i class="icon ion-home"></i>
要了解有哪些图标及具体名称ÿ