Ionic Tab选项卡使用整理（一）

一、Ionic CSS布局控制

指定 样式风格：tabs-positive，tabs-assertive

指定 选择风格：tabs-striped 带条风格，tabs-standard 不带条风格（默认值）

指定背景、前景色：tabs-background-positive，tabs-color-light

指定位置：tabs-top,tabs-bottom(默认值)

指定图标类型：tabs-icon-left，tabs-icon-bottom，tabs-icon-only

1.指定图标位置

<div class="tabs tabs-icon-top tabs-positive">    <a class="tab-item">        <i class="icon ion-home"></i>        Home    </a>    <a class="tab-item">        <i class="icon ion-star"></i>        Favorites    </a>    <a class="tab-item">        <i class="icon ion-gear-a"></i>        Settings    </a></div>
2.默认不使用图标
<div class="tabs">    <a class="tab-item">Home</a>    <a class="tab-item">Favorites</a>    <a class="tab-item">Settings</a></div>
3.指定tab的位置和选择风格
<div class="tabs-striped tabs-top tabs-icon-left tabs-background-positive tabs-color-light">    <div class="tabs">        <a class="tab-item active" href="#">            <i class="icon ion-home"></i>            Test        </a>        <a class="tab-item" href="#">            <i class="icon ion-star"></i>            Favorites        </a>        <a class="tab-item" href="#">            <i class="icon ion-gear-a"></i>            Settings        </a>    </div></div><div class="tabs-striped tabs-icon-bottom tabs-color-assertive">    <div class="tabs">        <a class="tab-item active" href="#">            <i class="icon ion-home"></i>            Test        </a>        <a class="tab-item" href="#">            <i class="icon ion-star"></i>            Favorites        </a>        <a class="tab-item" href="#">            <i class="icon ion-gear-a"></i>            Settings        </a>    </div></div>
特别说明：tabs-top，指定为头部的时候会留出空白给头部，可以使用heander填充
<ion-header-bar class="bar-positive">    <h1 class="title">ion-tabs简介</h1></ion-header-bar>
更多：
Cordova 配置WebView可以打开外部链接
Ionic Grid栅格布局居中实例
Ionic相关整理