ionic css的样式操作 详细介绍

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>
要了解有哪些图标及具体名称ÿ