简介

ionic tab(选项卡、切换标签) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。

选项卡

选项卡容器使用了 tabs类，每个选项卡使用tab-item类。默认情况下，选项卡是文本的，并没有图标。下面的程序出来只有一个空空的框框，不太好看，所以我把之前写的卡片部分填进去，最起码看起来不尴尬

    <div class="bar bar-header">
      <div class="h1 title">选项卡</div>
    </div>

    <div class="tabs">
      <a class="tab-item" href="#">
        主页
      </a>
      <a class="tab-item" href="#">
        收藏
      </a>
      <a class="tab-item" href="#">
        设置
      </a>
    </div>

这样看起来还是有些简陋了，那就大胆的润色一下吧。
在tabs类后添加tabs-icon-left类可设置左侧图标+文字选项卡。在tabs类后添加tabs-icon-top类可设置顶部图标+文字选项卡。在 tabs类后添加 tabs-icon-only 类可设置只显示图标选项卡。使用 tabs-assertive等类可以添加颜色。在带有tabs的样式名的元素上添加tabs-striped来实现点击风格的。

<div class="bar bar-header bar-royal">
  <div class="h1 title">选项卡</div>
</div>

<div class="content has-header">
<div class="list card">
<div class="item item-avatar">
  <img src="111.png">
  <h2>邪人君子</h2>
  <p>潇潇这一场雨落人间惆怅</p>
</div>

<div class="item item-body">
  <img class="full-image" style="height:30%; width:100%" src="112.jpg">
  <p>
    侧径篮舁两眼明，出山犹带骨毛清。<br>白云笑我还多事，流水随人合有情。<br>
    不及鸟飞浑自在，羡他僧住便平生。<br>未能与世全无意，起为苍生试一鸣。
  </p>
  <p>
    <a href="#" class="subdued" style="text-color:red">13 喜欢</a>
    <a href="#" class="subdued">5 评论</a>
  </p>
</div>
</div>
</div>


<div class="tabs tabs-icon-top tabs-royal tabs-color-light tabs-striped">
  <a class="tab-item active" href="#">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

网格

只需添加你想要的列，他们将平均占用可用空间。添加布局所需的列数，不要担心计算百分比，因为它会自动计算出来。row 样式指定行，col 样式指定列。
为了便于查看结构，添加边框和背景

.col{
  background-color: #F9FAFB;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 2px;
  text-align: center;
}

正常语法是这样的

 <div class="row">
      <div class="col">
        <div class="col-demo">.col</div>
      </div>
    </div>

默认下列宽是平均分的，但是也可以自己制定列宽，就像这样

<div class="col col-50">
        <div class="col-demo">.col.col-50</div>
      </div>

当你觉得左边有些空格比较合适的话，也可以设置偏移量

<div class="col col-33 col-offset-33">
        <div class="col-demo">.col</div>
      </div>

看看效果吧

<div class="bar bar-header  bar-royal">
  <div class="h1 title">网格</div>
</div>

<div class="content has-header">

  <div class="row">
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
  </div>

  <div class="row">
    <div class="col col-50">
      <div class="col-demo">.col.col-50</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
  </div>

  <div class="row">
    <div class="col col-75">
      <div class="col-demo">.col.col-75</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
  </div>

  <div class="row">
    <div class="col col-33 col-offset-33">
      <div class="col-demo">.col</div>
    </div>
    <div class="col">
      <div class="col-demo">.col</div>
    </div>
  </div>

  <div class="row">
    <div class="col col-33 col-offset-67">
      <div class="col-demo">.col</div>
    </div>
  </div>
</div>

  <div class="tabs tabs-icon-top tabs-royal tabs-color-light tabs-striped">
    <a class="tab-item active" href="#">
      <i class="icon ion-home"></i>
      主页
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-star"></i>
      收藏
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-gear-a"></i>
      设置
    </a>
  </div>

全文GG