第十三讲 ionic css布局介绍

http://www.phonegap100.com/article-452-1.html

摘要: 学习要点： 1. ionic css基本布局 2. ionic css色彩、图标和边距3. ionic css界面组件列表4. ionic css界面组件按钮5. ionic css界面组件 表单输入6. ionic css界面组件选项卡7. ionic css定制布局 Grid布局第十三讲 ...

学习要点：    

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>
要了解有哪些图标及具体名称，需要访问ionics.com。 点击某个图标即可查看其CSS类名称。
可以在任何元素中插入图标，使用元素的font-size样式指定图标的大小：
<any style="font-size:100px;">    
    <i class="icon ion-search"></i>
</any>


3.Ionic 内边距

ionic定义了常用的内边距样式：
 
样式名很直白，边距统一为10px。可以在任何元素上应用这些样式。


3．    ionic界面组件列表

1.    列表 : .list
列表非常适合于手机屏幕上的信息的显示。使用.list定义列表容器， 使用.item定义列表成员：
<any class="list">
<any class="item">...</any>
<any class="item">...</any>
<any class="item">...</any>
<any class="item">...</any>
</any>
对列表外观的定制化主要集中在.item元素上，.list元素仅有 少数的几个样式定义：
 

2.    成员容器 : .item 

列表的样式定制主要发生在.item元素上。在.item元素内， 可以插入文本、徽章、图标、图像（头像、缩略图或大图）、按钮等各种 样式的元素：
 

3.    .item : 嵌入文本

列表成员中经常需要显示不同规格的文本，比如新闻列表：
   
.item元素可以使用h1~h6/p标签插入不同规格的文本。

4.    .item : 嵌入图标

列表成员的内容中插入图标，比单纯的文字更加生动：
 
要插入图标，需要满足两个条件：
1.    在.item元素上声明图标位置。图标可以位于列表的左侧或右侧， 分别使用.item-icon-left和.item-icon-right声明
2.    在.item元素内插入图标 list-inset。

5.    .item : 嵌入头像

很多社交App中，一个相当固定的UI模式是包含用户头像的信息列表：
      
在ionic中，头像被设置为40x40固定大小。和插入图标类似，向.item 中插入头像需要满足两个条件：
1.    在.item元素上声明头像位置。头像可以位于列表的左侧或右侧， 分别使用.item-avatar-left和.item-avatar-right声明
2.    在.item元素内使用img标签插入头像。
6.    .item : 嵌入缩略图

回到今日头条的新闻列表，我们给它加上两张新闻图片：
 

在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片。 和插入头像类似，向.item中插入缩略图需要满足两个条件：
1.    在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧， 分别使用.item-thumbnail-left和.item-thumbnail-right声明
2.    在.item元素内使用img标签插入头像。
注意：将img标签放到.item内容的开头！

7.    .item : 嵌入大图  item-image
   

8.    .item  card
 
要插入图标，需要满足两个条件：
1.    . card 可以让list和左右有一些边距
2.    在. item-divider元素定义list的头和尾

<div class="list card">
</div>
<div class="card">
            <div class="item item-divider">
                I'm a Header in a Card!
            </div>
            <div class="item item-text-wrap">
                This is a basic Card with some text.
            </div>
            <div class="item item-divider">
                I'm a Footer in a Card!
            </div>
        </div>    



4．    ionic界面组件按钮

1.    按钮 : .button
ionic使用.button样式定义按钮元素：
<any class="button">...</any>
一旦元素应用了.button样式，就可以继续选用两类预定义样式来进一步 声明元素及其内容的外观：
1.    同级样式 - 同级样式与.button应用在同一元素上，声明元素的位置、配色等。
2.    下级样式 - 下级样式只能应用在.button的子元素上，声明子元素的大小等特征。
 

2.  .button : 嵌入图标
使用内置的Ionicons样式，图标可以很容易地加入到.button中：
<a class="button">
    <i class="icon ion-home"></i>Home
</a>
但是更简洁的办法是：直接在.button上设置样式，这样可以有效减少元素的数目：
<a class="button icon-left ion-home">...</a>
•    .icon-left - 将图标置于按钮左侧
•    .icon-right - 将图标置于按钮右侧

3. 在列表中使用按钮

和插入图标类似，向.item中插入按钮需要满足两个条件：
1.    在.item元素上声明按钮位置。按钮可以位于列表的左侧或右侧， 分别使用.item-button-left和.item-button-right声明
2.    在.item元素内插入按钮。

4. button-block
button显示成块元素
<button class="button button-calm button-block">button-light</button>

5．    ionic界面组件 表单输入

1.输入组件容器 : .item-input

在ionic中，各种输入组件被定义成不同的HTML模板，以便将描述标签和输入元素 打包在一起。在这个模板的根元素上，需要声明.item-input样式：
<any class="item-input">...</any>
不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：
<div class="item-input">
   <label class="input-label">用户名</label>
   <input placeholder="请输入你的用户账号" type="text">
</div>
ionic预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用 输入组件的样式：

2. 文本输入 : input[type="text"]

文本输入通常包含一个文本input元素和一个描述型标签：
 
在ionic中，使用以下HTML模板建立一个带有文本标签的输入框：
<any class="item-input">
    <span class="input-label">...</span>
    <input placeholder="..." type="text">
</any>
 
对于多个输入组件，可以将它们放到一个列表中，让表单更加整齐：
<any class="list">
    <any class="item item-input">...</any>
    <any class="item item-input">...</any>
    ...
</any>

3. 文本输入：使用占位符做标签

有时可以将描述标签省略，这样可以获得一种简洁的效果：
 
这是input元素原生的功能，设置其placeholder属性 即可实现：
<label class="item item-input">
                <i class="icon ion-ios-unlocked-outline positive"></i>
                <input type="password" placeholder="请输入您的密码">
        </label>

4. 文本输入：堆叠式标签

堆叠式标签意味着将描述性标签占据单独的一行：
 
使用.item-stacked-label样式声明堆叠式标签：
<label class="item item-input item-stacked-label">
                <span class="input-label">Email</span>
                <input type="text" placeholder="[e-mail]">
</label>

5.浮动标签  . item-floating-label
 

使用. item-floating-label样式声明堆叠式标签：
<label class="item item-input item-floating-label">
                <span class="input-label">Email</span>
                <input type="text" placeholder="[e-mail]">
</label>


6.开关 : .toggle input[type="checkbox"]

开关通常用来设置两种状态 - 开启和关闭：
 
正如上图中所见，开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：
<any class="toggle">
    <input type="checkbox">
    <any class="track">
        <any class="handle"></any>
    </any>
</any>
开关也有配色方案样式：.toggle-{color}，用来改变滑轨的背景色。

7.复选按钮
复选框通常用来在一组列表中选中部分成员：
 
和开关一样，复选按钮也是基于HTML的checkbox input实现的。使用如下的HTML模板声明复选按钮：
<any class="item-input">
    <any class="checkbox">
        <input type="checkbox">
    </any>
</any>
你也许已经猜到，复选按钮的配色方案样式为：.checkbox-{color}。

8.单选按钮 : .item-radio input[type="radio"]
单选按钮用来从一组选择中作出仅仅一个选择：
 
正如上图所见，单选按钮的可视部件包括两部分：选中图标（.radio-icon） 和描述内容（.item-content），你可以在.item-content随便添加 内容。
单选按钮基于HTML的radio input元素实现。使用如下的HTML模板 声明单选按钮：
<any class="item-radio">
    <input name="{group-name}" type="radio">
    <any class="item-content">...</any>
    <any class="radio-icon ion-checkmark"></any>
</any>
单选按钮通常不单独使用，将他们放入一个列表中：
<any class="list">
    <any class="item item-radio">...</any>
    <any class="item item-radio">...</any>
    ...
</any>
需要注意的是，group-name决定了单选按钮的分组，所以对于互斥的选择项，必须 将它们的group-name设置为相同的名称。

9.滑动条 : .range input[type="range"]
range是HTML5新引入的元素，常用来进行连续值的调节：
 
从上图可以看到，滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选的，当不用图标时，滑动条将占据整个宽度。
在ionic中，使用如下HTML模板声明滑动条：
<any class="range">
    <any class="icon {left-icon-name}"></any>
    <input name="{range-name}" type="range">
    <any class="icon {right-icon-name}"></any>
</any>
使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。


10.选择框 : .item-select select
在每个平台上，选择框的表现形式都不一样，例如，在PC上，是一个传统的下拉框，在Android 是一个单选弹出窗，而iOS上是一个覆盖半个窗体的定制滚动器：
 
通常总是将选择框与文字一起放入列表条目中，使用如下HTML模板创建选择框条目：
<label class="item-input item-select">
    <any class="input-label"></any>
    <select>
        <option>...</option>
        <option>...</option>
        ...
    </select>
</label>

6．    界面组件选项卡

1.    选项卡 : .tabs
选项卡是一个可以包含多个按钮或链接的容器，通常用于提供一致的导航体验。 ionic中使用.tabs样式声明选项卡，使用.tab-item样式声明选项卡 成员
<any class="tabs">
    <any class="tab-item">...</any>
    <any class="tab-item">...</any>
    ...
</any>
选项卡默认地位于屏幕底部。一旦元素应用了.tabs样式，就可以继续 选用三类预定义样式来进一步声明元素及其内容的外观：
1.    同级样式 - 同级样式与.tabs应用在同一元素上，声明选项卡的位置、配色等。
2.    下级样式 - 下级样式只能应用在.tabs的子元素上，声明子元素的大小等特征。
3.    上级样式 - 上级样式应用于.tabs的父元素中，声明选项卡的平台特征。
 
2.tab-item : 使用图标

选项卡的选项默认的只包含文字，使用图标会使其更加生动：比如 微博（weibo）和微信（wechat）：
 
要在某个选项元素中插入图标，需要注意两点：
1.    使用i标签在.tab-item中插入图标
2.    在.tabs容器上使用.tabs-icon-{position}声明图标位置。
有三种方式定义图标位置：
•    .tabs-icon-top - 将图标置于文字之上
•    .tabs-icon-left - 将图标置于文字左侧
•    .tabs-icon-only - 只使用图标，不显示文字

3.    .tab-item : 使用徽章

微信（wechat）的选项卡中第三项包含了一个红色的信息元素，被称为徽章：
 
要在.tab-item内包含徽章，需要注意两点：

    使用.badge样式插入徽章元素
    在.tab-item同级声明.has-badge样式

    <any class="tabs">
        <any class="tab-item has-badge">
            <any class="badge">...</any>
        </any>
        ...
    </any>

4.  .tabs : 顶部选项卡

默认情况下，选项卡位于屏幕底部，可以使用.tabs-top样式将选项卡置于顶部。
顶部选项卡应用也很广泛：
 


5. .tab-striped .tabs: 条带风格选项卡

条带风格的选项卡起源于Android平台，它使用一个细长的条带表示选项的选中状态：
 
在ionic中，使用.tabs-striped样式声明条带风格选项卡：
    <any class="tabs-striped">
        <any class="tabs">
            <any class="tab-item">...</any>
            <any class="tab-item">...</any>
            ...
        </any>
</any>

7．    定制布局 Grid布局

1. Grid布局
ionic的Grid布局采用了CSS3的弹性盒（Flexible Box）模型，这使得它与大多数 Grid布局都有所区别。
Flex布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序， 从而以最佳方式填充可用空间。CSS3引入Flex容器的主要目的是为了适应所 有类型的显示设备和屏幕大小：
 
在ionic中使用Grid布局主要使用两个类：
•    .row - 在容器元素上使用.row类，表示将其设置为弹性容器，即Flexible Box。
•    .col - 在子元素上使用.col类，其扩展系数和收缩系数都被设置为1。这意味着 所有的子元素将平分容器的宽度。
2.     .col : 默认的定宽列
在ionic的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。下图是instagram app的截图：
 
3.    .col-{width-percent} : 指定列宽

当然，我们也可以显式地指定某些列的宽度。ionic提供了一些预置的CSS类， 供我们快速指定列宽：

    .col-10 - 占据容器10%宽度
    .col-20 - 占据容器20%宽度
    .col-25 - 占据容器25%宽度
    .col-33 - 占据容器33%宽度
    .col-50 - 占据容器50%宽度
    .col-67 - 占据容器67%宽度
    .col-75 - 占据容器75%宽度
    .col-80 - 占据容器80%宽度
    .col-90 - 占据容器90%宽度

如果你有特殊的需求，比如，非要指定78%的宽度，可以这样：

    .col-78{
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 78%;
      -moz-box-flex: 0;
      -moz-flex: 0 0 %78;
      -ms-flex: 0 0 78%;
      flex: 0 0 78%;
    }
4.    .col-{width-percent} : 指定列宽

windows phone的metro风格在信息展示方面有很大的优势，虽然携程的APP 没有突出这一点:-( ：
 
 

通过定制栅格的列宽，我们可以简单地实现类似的界面。

5.    .col-offset-{width-percent} : 指定列偏移

列可以从默认位置偏移，ionic预置了一些CSS类供我们快速设置列偏移：

    .col-offset-10 - 偏移默认位置10%容器宽度
    .col-offset-20 - 偏移默认位置20%容器宽度
    .col-offset-25 - 偏移默认位置25%容器宽度
    .col-offset-33 - 偏移默认位置33%容器宽度
    .col-offset-50 - 偏移默认位置50%容器宽度
    .col-offset-67 - 偏移默认位置67%容器宽度
    .col-offset-75 - 偏移默认位置75%容器宽度
    .col-offset-80 - 偏移默认位置80%容器宽度
    .col-offset-90 - 偏移默认位置90%容器宽度

这实际上是通过设置子元素的margin-left样式实现的，所以如果你需要让它 偏移正常位置78%，可以这样：

    .col-offset-78{
        margin-left:78%;
    }

6.     .col-{align} : 列纵向对齐

如果一行中各元素的高度不一样，那么比较矮的那些元素将自动被拉伸以适应 整行的高度。

有时你不想这样，希望那些元素保持自身的高度。ionic提供了一些预置的CSS类用来 指定这些元素纵向的对齐方式：

    .col-top - 让元素纵向顶对齐
    .col-center - 让元素居中对齐
    .col-bottom - 让元素向底对齐
这是通过设置元素的CSS3样式align-self来实现的。