ionic入门到精通----css样式

Ionic CSS 介绍

ionic 的预定义 CSS 类主要分四个方面：

1. 基本布局类
2. 颜色和图标类
3. 界面组件类
4. 栅格系统类

基本布局类

ionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了 这几个区域的CSS类。

头部，定高条块：bar

样式 .bar 将元素声明为屏幕上绝对定位的块状区域，具有固定的高度（44px）：

<any class="bar">...</any>

bar 嵌入 input

在 bar 元素中嵌入 input 元素，需要注意两点：
在条块元素上应用 item-input-inset 样式
将input包裹在应用 item-input-wrapper 样式的元素内

<div class="bar bar-header bar-calm">

        <div class="item-input-inset  ">
            搜索  ： <input class="item-input-wrapper" type="" name="" id="" value="" />
        </div>
</div>

内容：content/scroll-content

ionic预定义了两个内容容器样式：
content - 流式定位，内容在文档流中按顺序定位
scroll-content - 绝对定位，内容元素占满整个屏幕

Ionic CSS 颜色

ionic定义了几个配色方案CSS类，并使用ionicons提供的字体图标类。

Ionic CSS图标

ionic 使用 ionicons 图标样式库。
使用图标很简单，在元素上声明以下两个 CSS 类即可：
.icon - 将元素声明为图标
.ion-{icon-name} - 声明要使用的具体图标
要了解有哪些图标及具体名称，需要访问http://ionicons.com/。 点击图标即可查看其类名称。

内边距

样式名很直白，边距统一为10px。可以在任何元素上应用这些样式。

Ionic CSS 界面组件

ionic定义了丰富的界面组件CSS类，让HTML元素看起来像移动平台的UI组件。

列表：list

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

成员项 : item
列表的样式定制主要发生在.item元素上。
可以插入文本、徽章、图标、图像、按钮元素：

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

<li class="item">
    <h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>
    <p>中国青年报</p>
</li>

item 嵌入图标

要插入图标，需要满足两个条件：
在.item元素上声明图标位置。图标可以位于列表的左侧或右侧， 分别使用 .item-icon-left 和 .item-icon-right 声明
在.item元素内插入图标。
例如：<i class="icon ion-location"></i>

item 嵌入头像

在ionic中，头像被设置为40x40固定大小：
在.item元素上声明头像位置。头像可以位于列表的左侧或右侧， 分别使用.item-avatar-left和.item-avatar-right声明
在.item元素内使用img标签插入头像。

item 嵌入缩略图

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

item : 嵌入大图

使用方式：在 .item 上加入 .item-image，然后在子集加入<img>

按钮：button

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

button 嵌入图标
使用内置的 ionicons 样式，图标可以很容易地加入到 .button 中：

<a class="button">
    <i class="icon ion-home"></i>
    Home
</a>

更简洁的办法是：直接在 .button 上设置样式，这样可以有效减少元素的数目：

<a class="button icon-left ion-home">...</a>

输入组件容器：item-input
在ionic中，各种输入组件被定义成不同的HTML模板，以便将描述标签和输入元素 打包在一起。在这个模板的根元素上，需要声明.item-input样式：

<any class="item-input">...</any>

不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：

<div class="item-input">
    <label class="input-label">用户名</label>
    <input type="text" placeholder="请输入你的用户账号">
</div>

输入组件容器：item-input
ionic 预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用输入组件：

堆叠式标签

堆叠式标签意味着将描述性标签占一行：

<any class="item-input item-stacked-label">
    <any class="input-label">...</any>
    <input type="text" placeholder="...">
</any>

开关标签

开关通常用来设置两种状态 - 开启和关闭：
开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：

<any class="toggle">
        <input type="checkbox">
        <any class="track">
            <any class="handle"></any>
        </any>
</any>

复选按钮

复选框通常用来在一组列表中选中部分成员
和开关一样，复选按钮也是基于HTML的checkbox input实现的：

<li class="item item-checkbox">
    <label class="checkbox">
        <input type="checkbox">
    </label>
    <h2>Do you agree?</h2>
</li>

复选按钮的配色方案样式为：.checkbox-{color}。

单选按钮

单选按钮的可视部件包括两部分：选中图标（.radio-icon） 和描述内容（.item-content），你可以在内容随便添加 内容。

<label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">支付宝网页支付</div>
    <i class="radio-icon ion-checkmark calm"></i>
</label>

单选按钮通常不单独使用，需要将他们放入一个列表中。

滑动条

滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选的，当不用图标时，滑动条将占据整个宽度。

<div class="item range range-positive">
    <i class="icon ion-ios-volume-low"></i>
    <input type="range" name="volume" value="30">
    <i class="icon ion-ios-volume-high"></i>
</div>

使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。

选择框

在每个平台上，选择框的表现形式都不一样，例如，在PC上，是一个传统的下拉框，在Android 是一个单选弹出窗

<label class="item item-select">
    <span class="input-label">前端技术</span>
    <select>
        <option>HTML5</option>
        <option selected>CSS3</option>
        <option>ES6</option>
    </select>
</label>

选项卡：tabs

ionic 中使用 .tabs 样式声明选项卡，使用 .tab-item 样式声明选项卡成员

<ul class="tabs">
    <li class="tab-item">...</any>
    <li class="tab-item">...</any>
    ...
</ul>

选项卡默认地位于屏幕底部。可以使用.tabs-top样式将选项卡置于顶部。

Ionic CSS 栅格系统

和 Bootstrap 一样，ionic 也提供了栅格系统。不过 ionic 的实现是基于 CSS3 的 Flex Box 模型，更为灵活
在ionic中使用栅格系统主要使用两个类：
.row - 在容器元素上使用.row类，表示将其设置为弹性容器，即Flexible Box。
.col - 在子元素上使用.col类，其扩展系数和收缩系数都被设置为1。这意味着 所有的子元素将平分容器的宽度。

默认的定宽列

在ionic的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。

.col-{w-p} 指定列宽

我们也可以显式地指定某些列的宽度：
.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-offset-{w-p} 指定列偏移

列可以从默认位置偏移：
.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-{align} 列纵向对齐

如果一行中各元素的高度不一样，那么比较矮的那些元素将自动被拉伸以适应 整行的高度。
ionic提供了一些预置的CSS类用来 指定这些元素纵向的对齐方式：
.col-top - 让元素纵向顶对齐
.col-center - 让元素居中对齐
.col-bottom - 让元素向底对齐
这是通过设置元素的align-self来实现的。