0x001 Ionic CSS入门

2016-04-28 本文已影响144人卖梳子的鲤鱼

0x001 简述

系统：win10
IDE：WebStome
教程地址：http://www.hubwiz.com/class/5507ca5be564e51314f544e4

0x002 安装ionic

npm install -g ionic

0x003 初始化项目

空白项目：
```
ionic start myApp blank
```

Paste_Image.png

底部切换标签：
```
ionic start myApp tabs
```

Paste_Image.png

带侧滑菜单：
```
ionic start myApp sidemenu 
```

Paste_Image.png

0x004 布局模式

Paste_Image.png

.bar.bar-header：声明元素为标题区
.bar.bar-footer：声明元素为页脚区
.content：声明元素为内容区

0x005 bar样式

Paste_Image.png

案例一：添加头部条和底部条
-代码：
<div class="bar bar-header">
<h1 class="title">标题栏</h1>
</div>
<div class="bar bar-footer">
<h1 class="title">底部栏</h1>
</div>
- 效果：

Paste_Image.png

- 说明如果不加颜色样式，则为白色

案例二：添加颜色的头部条和底部条

代码：

<div class="bar bar-header bar-balanced">
<h1 class="title">标题栏</h1>
</div>
<div class="bar bar-footer bar-calm">
<h1 class="title">底部栏</h1>
</div>

效果：

Paste_Image.png

案例三：添加副标题和副底部

代码：

<div class="bar bar-header bar-positive">
  <h1 class="title">腾讯新闻</h1>
</div>
<div class="bar bar-subheader bar-stable">
  <div class="button-bar">
    <a class="button button-balanced">要闻</a>
    <a class="button button-clear">财经</a>
    <a class="button button-clear">娱乐</a>
    <a class="button button-clear">体育</a>
    <a class="button button-clear">科技</a>
  </div>
</div>
<div class="bar bar-subfooter bar-stable">
  <div class="button-bar">
    <a class="button button-balanced">要闻</a>
    <a class="button button-clear">财经</a>
    <a class="button button-clear">娱乐</a>
    <a class="button button-clear">体育</a>
    <a class="button button-clear">科技</a>
  </div>
</div>
<div class="bar bar-footer bar-dark">
  <div class="button-bar">
    <a class="button button-clear">新闻</a>
    <a class="button button-clear">图片</a>
    <a class="button button-clear">话题</a>
    <a class="button button-clear ">热点</a>
  </div>
</div>

效果：

Paste_Image.png

0x006 content

Paste_Image.png

.content：流式定位，内容元素在文档流中按顺序定位
.scroll-content：绝对定位，内容元素占满整个屏幕

案例一：scroll-content

代码：

<div class="bar bar-header bar-stable">
  <div class="title">header</div>
</div>
<div class="scroll-content has-header balanced-bg light">
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<div class="bar bar-footer bar-dark">
  <div class="title">footer</div>
</div>

效果：

Paste_Image.png

案例二： content

代码：

<div class="bar bar-header bar-stable">
  <div class="title">header</div>
</div>
<div class="content has-header balanced-bg light">
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<div class="bar bar-footer bar-dark">
  <div class="title">footer</div>
</div>

效果：

Paste_Image.png

0x007 色彩样式：可以用在所有控件

Paste_Image.png

0x008 图标

.icon：将元素声明为图标
.ion-{icon-name}：声明要使用的具体图标

代码：

  <div class="scroll-content has-header padding">
    <i class="icon ion-ionic calm"></i>
    <i class="icon ion-arrow-up-a calm"></i>
    <i class="icon ion-arrow-right-a calm"></i>
    <i class="icon ion-arrow-down-a calm"></i>
    <i class="icon ion-arrow-left-a calm"></i>
    <i class="icon ion-toggle calm"></i>
    <i class="icon ion-settings calm"></i>
    <i class="icon ion-wrench calm"></i>
    <i class="icon ion-hammer calm"></i>
    <i class="icon ion-edit calm"></i>
    <i class="icon ion-headphone calm"></i>
    <i class="icon ion-happy calm"></i>
    <i class="icon ion-plane calm"></i>
  </div>

效果：

Paste_Image.png

0x008 边距

Paste_Image.png

代码：
<div class="scroll-content has-header padding">
<div class="padding-top"><div class="calm-bg light">.padding-top</div></div>
<div class="padding-bottom"><div class="assertive-bg light">.padding-bottom</div></div>
<div class="padding-left"><div class="energized-bg light">.padding-left</div></div>
<div class="padding-right"><div class="royal-bg light">.padding-right</div></div>
</div>
效果：

Paste_Image.png

0x009 list

Paste_Image.png

案例一：
- 代码：
  <div class="scroll-content has-header">
  <ul class="list">
  <li class="item">Battletoads</li>
  <li class="item">Contra</li>
  <li class="item">Duck Tales</li>
  <li class="item">Mega Man</li>
  <li class="item">Metroid</li>
  <li class="item">Mike Tyson's Punch-Out</li>
  </ul>
  </div>
- 效果：

Paste_Image.png

案例二：带item

Paste_Image.png

代码：

  <div class="bar bar-header">
    <h1 class="title">列表成员</h1>
  </div>
  <div class="scroll-content has-header">
    <ul class="list">
      <li class="item">Battletoads<i class="badge badge-positive">123</i></li>
      <li class="item">Contra<i class="badge badge-stable">15</i></li>
      <li class="item">Duck Tales</li>
      <li class="item">Mega Man</li>
      <li class="item">Metroid</li>
      <li class="item">Mike Tyson's Punch-Out<i class="badge badge-positive">20</i></li>
    </ul>
  </div>

效果

Paste_Image.png

案例三：多种样式文字

代码：

  <div class="bar bar-header bar-assertive">
    <h1 class="title">今日头条 <i class="icon ion-load-c"></i></h1>
    <a class="button button-clear icon ion-person-stalker"></a>
  </div>
  <div class="scroll-content has-header">
    <ul class="list">
      <li class="item">
        <h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>
        <p>中国青年报</p>
      </li>
      <li class="item">
        <h2>大黄鸭在北京两个月创收超两亿元 今日离京</h2>
        <p>中国经营报</p>
      </li>
      <li class="item">
        <h2>LinkedIn创始人：在见风投之前，我希望自己当时懂得这七件事...</h2>
        <p>虎嗅网</p>
      </li>
      <li class="item">
        <h2>美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶</h2>
        <p>新浪新闻</p>
      </li>
    </ul>
  </div>

效果：

Paste_Image.png

-案例四：带图标

代码：

  <div class="bar bar-header bar-positive">
    <button class="button icon ion-ios-arrow-left">返回</button>
    <h1 class="title">酒店搜索</h1>
    <button class="button">首页</button>
  </div>
  <div class="scroll-content has-header">
    <div class="list list-inset">
      <div class="item item-icon-left item-icon-right">
        <i class="icon ion-location"></i>
        <h2>入住城市：当前位置</h2>
        <i class="icon ion-ios-arrow-right"></i>
      </div>
      <div class="item item-icon-left item-icon-right">
        <i class="icon ion-calendar"></i>
        <h2>入住日期：7月27日 星期五</h2>
        <i class="icon ion-ios-arrow-right"></i>
      </div>
      <div class="item item-icon-left item-icon-right">
        <i class="icon ion-social-yen"></i>
        <h2>价格范围：不限价格</h2>
        <i class="icon ion-ios-arrow-right"></i>
      </div>
    </div>
    <div class="padding">
      <button class="button button-block button-assertive">搜索</button>
    </div>
  </div>

效果：

Paste_Image.png

案例五：嵌入图片：
- 代码：
  <div class="bar bar-header bar-dark">
  <h1 class="title">Header</h1>
  <button class="button icon ion-plus"></button>
  </div>
  <div class="scroll-content has-header">
  <div class="list">
  <div class="item item-avatar">
  
  <h2>Venkman</h2>
  <p>我们周末去爬山吧！</p>
  </div>
  <div class="item item-avatar">
  
  <h2>Ray</h2>
  <p>真的好好吃啊...</p>
  </div>
  <div class="item item-avatar">
  
  <h2>Egon</h2>
  <p>什么时候去看演唱会啊，...</p>
  </div>
  <div class="item item-avatar">
  
  <h2>Winston</h2>
  <p>I love this game!</p>
  </div>
  </div>
  </div>
  <div class="bar bar-footer bar-dark">
  <div class="button-bar">
  <a class="button button-clear icon ion-ios-chatbubble-outline">Chat</a>
  <a class="button button-clear icon ion-ios-list-outline">Address</a>
  <a class="button button-clear icon ion-ios-eye-outline">Discovery</a>
  <a class="button button-clear icon ion-ios-person-outline">Profile</a>
  </div>
  </div>
- 效果：

Paste_Image.png

案例六：略缩图

代码：

 <div class="bar bar-header bar-assertive">
   <h1 class="title">今日头条 <i class="icon ion-load-c"></i></h1>
   <a class="button button-clear icon ion-person-stalker"></a>
 </div>
 <div class="scroll-content has-header">
   <ul class="list">
     <li class="item">
       <h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>
       <p>中国青年报</p>
     </li>
     <li class="item item-thumbnail-right">
       [站外图片上传中……(5)]
       <h2>大黄鸭在北京两个月创收超两亿元 今日离京</h2>
       <p>中国经营报</p>
     </li>
     <li class="item">
       <h2>LinkedIn创始人：在见风投之前，我希望自己当时懂得这七件事...</h2>
       <p>虎嗅网</p>
     </li>
     <li class="item item-thumbnail-right">
       [站外图片上传中……(6)]
       <h2>美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶</h2>
       <p>新浪新闻</p>
     </li>
   </ul>
 </div>

效果：

Paste_Image.png

案例七：嵌入大图
<div class="bar bar-header bar-positive">
<h1 class="title">Instagram</h1>
<a class="button button-clear icon ion-refresh"></a>
</div>
<div class="scroll-content has-header">
<div class="list">
<div class="item item-avatar-left">

<h2>Thomasguy</h2>
</div>
<div class="item item-image">
[站外图片上传中……(8)]
</div>
<div class="item item-icon-left">
<i class="icon ion-thumbsup"></i>
<p>44 likes</p>
</div>
</div>
</div>
- 效果

Paste_Image.png

0x010 button

Paste_Image.png

-案例一：

代码：
<div class="bar bar-header bar-positive">
<h1 class="title">按钮</h1>
</div>
<div class="scroll-content has-header padding">
<button class="button">Default</button>
<button class="button button-light">button-light</button>
<button class="button button-stable">button-stable</button>
<button class="button button-positive">button-positive</button>
<button class="button button-calm">button-calm</button>
<button class="button button-balanced">button-balanced</button>
<button class="button button-energized">button-energized</button>
<button class="button button-assertive">button-assertive</button>
<button class="button button-royal">button-royal</button>
<button class="button button-dark">button-dark</button>
</div>
效果：

Paste_Image.png

案例二：按钮嵌入图标
- 代码：
  <div class="bar bar-header bar-positive">
  <h1 class="title">图标按钮</h1>
  </div>
  <div class="scroll-content has-header">
  <button class="button">
  <i class="icon ion-loading-c"></i> Loading...
  </button>
  <button class="button icon-left ion-home">Home</button>
  <button class="button icon-left ion-star button-positive">Favorites</button>
  <a class="button icon-right ion-chevron-right button-calm">Learn More</a>
  <a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
  <button class="button icon ion-gear-a"></button>
  <a class="button button-icon icon ion-settings"></a>
  <a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
  </div>
- 效果：

Paste_Image.png

案例三：列表嵌入图标按钮
代码：
<div class="bar bar-header">
<h1 class="title">列表中使用按钮</h1>
</div>
<div class="scroll-content has-header">
<ul class="list">
<li class="item item-button-right">
<h2>新闻</h2>
<a class="button button-clear icon ion-ios-arrow-right"></a>
</li>
<li class="item item-button-right">
<h2>邮件</h2>
<a class="button button-clear icon ion-ios-email"></a>
</li>
<li class="item item-button-right">
<h2>电话</h2>
<a class="button button-clear icon ion-ios-telephone"></a>
</li>
<li class="item item-button-right">
<h2>设置</h2>
<a class="button button-clear icon ion-ios-gear"></a>
</li>
<li class="item item-button-right">
<h2>云服务</h2>
<a class="button button-clear icon ion-ios-cloud"></a>
</li>
<li class="item item-button-right">
<h2>在线帮助</h2>
<a class="button button-clear icon ion-ios-help"></a>
</li>
</ul>
</div>
- 效果：

Paste_Image.png

0x011 input
http://www.hubwiz.com/course/5507ca5be564e51314f544e4/img/0032.png

案例一：文本输入 : input[type="text"]
- 代码：
  <div class="bar bar-header">
  <h1 class="title">表单输入</h1>
  </div>
  <div class="scroll-content has-header padding">
  <div class="item-input">
  <span class="input-label">账号</span>
  <input type="text" placeholder="zhang san">
  </div>
  <div class="item-input">
  <span class="input-label">口令</span>
  <input type="password" placeholder="********">
  </div>
  </div>
- 效果：

Paste_Image.png

案例二：文本输入：堆叠式标签
- 代码：
  <div class="scroll-content padding">
  <div class="list list-inset">
  <label class="item item-input">
  <span class="input-label">Username</span>
  <input type="text" placeholder="joeuser">
  </label>
  <label class="item item-input">
  <span class="input-label">Password</span>
  <input type="password" placeholder="required">
  </label>
  </div>
  <button class="button button-block button-balanced">Sign In</button>
  </div>
- 效果：
  
  Paste_Image.png
案例三：文本输入：使用占位符做标签
- 代码：
  <div class="scroll-content">
  <div class="list">
  <label class="item item-input">
  <i class="icon ion-ios-person-outline positive"></i>
  <input type="text" placeholder="请输入您的用户名">
  </label>
  <label class="item item-input">
  <i class="icon ion-ios-unlocked-outline positive"></i>
  <input type="password" placeholder="请输入您的密码">
  </label>
  <label class="item item-checkbox">
  <label class="checkbox">
  <input type="checkbox" checked>
  </label>
  记住密码
  </label>
  </div>
  <div class="padding-left padding-right">
  <button class="button button-block button-positive">登录系统</button>
  </div>
  </div>
- 效果：

Paste_Image.png

案例四：文字输入框
- 代码：
  <div class="scroll-content">
  <div class="list">
  <div class="item item-assertive item-button-right">
  <h1 class="light">livio</h1>
  </div>
  <label class="item item-input item-stacked-label">
  <span class="input-label">Email</span>
  <input type="text" placeholder="me@vucek.com">
  </label>
  <label class="item item-input item-stacked-label">
  <span class="input-label">Password</span>
  <input type="password" placeholder="********">
  </label>
  </div>
  <div class="padding-left padding-right">
  <button class="button button-block button-stable">Log in</button>
  </div>
  </div>
- 效果：
  
  Paste_Image.png
案例五：toggle
- 代码：
  <div class="bar bar-header bar-stable">
  <button class="button button-clear button-positive icon ion-ios-arrow-left">设置</button>
  <h1 class="title">信息</h1>
  </div>
  <div class="scroll-content has-header">
  <ul class="list">
  <li class="item item-toggle">
  iMessage
  <label class="toggle toggle-balanced">
  <input type="checkbox">
  <div class="track">
  <div class="handle"></div>
  </div>
  </label>
  </li>
  <li class="item item-divider">短信/彩信</li>
  <li class="item item-toggle">
  字符计数
  <label class="toggle toggle-balanced">
  <input type="checkbox" checked>
  <div class="track">
  <div class="handle"></div>
  </div>
  </label>
  </li>
  <li class="item item-toggle item-button-right">
  黑名单
  <a class="button button-clear icon ion-ios-arrow-right"></a>
  </li>
  </ul>
  </div>
- 效果：
  
  Paste_Image.png
案例六：复选按钮
- 代码：
  <div class="bar bar-header bar-positive">
  <button class="button">Edit</button>
  <h1 class="title">Tasks</h1>
  <button class="button icon ion-ios-plus-empty"></button>
  </div>
  <div class="scroll-content has-header">
  <ul class="list">
  <li class="item item-checkbox item-button-right">
  <label class="checkbox">
  <input type="checkbox">
  </label>
  <h2>Shopping</h2>
  <p>Due tommorow</p>
  <a class="button button-clear icon ion-ios-arrow-right"></a>
  </li>
  <li class="item item-checkbox item-button-right">
  <label class="checkbox">
  <input type="checkbox" checked>
  </label>
  <h2>Moving house checklist</h2>
  <a class="button button-clear icon ion-ios-arrow-right"></a>
  </li>
  <li class="item item-checkbox item-button-right">
  <label class="checkbox">
  <input type="checkbox">
  </label>
  <h2>Holiday destinations</h2>
  <a class="button button-clear icon ion-ios-arrow-right"></a>
  </li>
  <li class="item item-checkbox item-button-right">
  <label class="checkbox">
  <input type="checkbox">
  </label>
  <h2>App ideas</h2>
  <a class="button button-clear icon ion-ios-arrow-right"></a>
  </li>
  </ul>
  </div>
  <div class="bar bar-footer bar-positive">
  <div class="button-bar">
  <a class="button">All</a>
  <a class="button">Done</a>
  <a class="button">Completed</a>
  </div>
  </div>
- 效果：
  
  Paste_Image.png

案例七：单选按钮

代码：

  <div class="bar bar-header bar-assertive">
    <a class="button icon ion-ios-undo"></a>
    <h1 class="title">确认订单</h1>
  </div>
  <div class="scroll-content has-header padding">
    <div class="list">
      <div class="item item-divider"><b>请选择支付方式</b></div>
      <label class="item item-radio">
        <input type="radio" name="group">
        <div class="item-content">支付宝客户端支付</div>
        <i class="radio-icon ion-checkmark assertive"></i>
      </label>
      <label class="item item-radio">
        <input type="radio" name="group">
        <div class="item-content">支付宝网页支付</div>
        <i class="radio-icon ion-checkmark assertive"></i>
      </label>
      <label class="item item-radio">
        <input type="radio" name="group" checked>
        <div class="item-content">一键支付（无需支付宝账户）</div>
        <i class="radio-icon ion-checkmark assertive"></i>
      </label>
    </div>
    <button class="button button-block button-assertive">立即购买</button>
  </div>

效果：

Paste_Image.png

案例八：滑动条
- 代码：
  <div class="bar bar-header bar-stable">
  <button class="button button-clear button-positive icon ion-ios-arrow-left">设置</button>
  <h1 class="title">声音</h1>
  </div>
  <div class="scroll-content has-header">
  <div class="list">
  <div class="item item-divider">铃声和提醒</div>
  <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>
  <div class="item item-toggle">
  用按钮调整
  <label class="toggle toggle-balanced">
  <input type="checkbox" checked>
  <div class="track">
  <div class="handle"></div>
  </div>
  </label>
  </div>
  </div>
  </div>
- 效果：
  
  Paste_Image.png
案例九：下拉框
- 代码：
  <div class="bar bar-header bar-light">
  <h1 class="title">选择框</h1>
  </div>
  <div class="scroll-content has-header">
  <div class="list">
  <label class="item item-input item-select">
  <div class="input-label">
  前端技术
  </div>
  <select>
  <option>HTML</option>
  <option selected>CSS</option>
  <option>JavaScript</option>
  </select>
  </label>
  </div>
  </div>
- 效果：

Paste_Image.png

0x0012 tab

Paste_Image.png

案例一：选项卡
- 代码：
  <div class="bar bar-header">
  <h1 class="title">选项卡</h1>
  </div>
  <ul class="tabs tabs-positive">
  <li class="tab-item active">Chinese</li>
  <li class="tab-item">English</li>
  <li class="tab-item">Japanese</li>
  <li class="tab-item">Russian</li>
  </ul>
- 效果：
  
  Paste_Image.png
案例二：使用图标
- 代码：
  <div class="bar bar-header bar-stable item-input-inset">
  <label class="item-input-wrapper">
  <i class="icon ion-ios-search placeholder-icon"></i>
  <input type="search" placeholder="大家都在搜：七夕">
  </label>
  </div>
  <div class="tabs tabs-stable tabs-icon-top">
  <a class="tab-item">
  <i class="icon ion-ios-home-outline"></i>首页
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-email-outline"></i>信息
  </a>
  <a class="tab-item energized-bg light">
  <i class="icon ion-ios-plus-empty"></i>发微博
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-eye-outline"></i>发现
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-person-outline"></i>我
  </a>
  </div>
- 效果：
  
  Paste_Image.png
案例三：使用徽章
- 代码：
  <div class="bar bar-header bar-dark">
  <h1 class="title">微信</h1>
  <a class="button button-clear icon ion-ios-plus-empty"></a>
  </div>
  <div class="tabs tabs-dark tabs-icon-top">
  <a class="tab-item active">
  <i class="icon ion-ios-chatbubble-outline"></i>微信
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-paper-outline"></i>通信录
  </a>
  <a class="tab-item has-badge">
  <i class="icon ion-ios-eye-outline"></i>发现
  <i class="badge">12</i>
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-person-outline"></i>我
  </a>
  </div>
- 效果：
  
  Paste_Image.png
案例四：顶部选项卡
- 代码：
  <div class="tabs tabs-top tabs-stable">
  <a class="tab-item">要闻</a>
  <a class="tab-item active">河南</a>
  <a class="tab-item">房产</a>
  <a class="tab-item">财经</a>
  <a class="tab-item">娱乐</a>
  </div>
  <div class="content stable-bg">
  </div>
  <div class="tabs tabs-stable tabs-icon-top">
  <a class="tab-item active">
  <i class="icon ion-ios-paper-outline"></i>新闻
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-book-outline"></i>订阅
  </a>
  <a class="tab-item">
  <i class="icon ion-images"></i>图片
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-videocam-outline"></i>视频
  </a>
  </div>
- 效果：

Paste_Image.png

案例五：条带风格选项卡
- 代码：
  <div class="tabs-striped tabs-top tabs-dark tabs-icon-only">
  <div class="tabs">
  <a class="tab-item active">
  <i class="icon ion-ios-telephone"></i>
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-clock"></i>
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-person"></i>
  </a>
  </div>
  </div>
  <div class="tabs tabs-dark tabs-icon-only">
  <a class="tab-item">
  <i class="icon ion-ios-search"></i>
  </a>
  <a class="tab-item active">
  <i class="icon ion-ios-telephone"></i>
  </a>
  <a class="tab-item" href="#">
  <i class="icon ion-backspace"></i>
  </a>
  </div>
- 效果：

Paste_Image.png

0x0013 栅格系统

Paste_Image.png

案例一：瀑布流
- 代码：
  <div class="bar bar-header bar-positive">
  <h1 class="title">POPULAR</h1>
  <a class="button icon ion-refresh"></a>
  </div>
  <div class="scroll-content has-header">
  <div class="row">
  <div class="col">[站外图片上传中……(9)]</div>
  <div class="col">[站外图片上传中……(10)]</div>
  <div class="col">[站外图片上传中……(11)]</div>
  <div class="col">[站外图片上传中……(12)]</div>
  </div>
  <div class="row">
  <div class="col">[站外图片上传中……(13)]</div>
  <div class="col">[站外图片上传中……(14)]</div>
  <div class="col">[站外图片上传中……(15)]</div>
  <div class="col">[站外图片上传中……(16)]</div>
  </div>
  <div class="row">
  <div class="col">[站外图片上传中……(17)]</div>
  <div class="col">[站外图片上传中……(18)]</div>
  <div class="col">[站外图片上传中……(19)]</div>
  <div class="col">[站外图片上传中……(20)]</div>
  </div>
  <div class="row">
  <div class="col">[站外图片上传中……(21)]</div>
  <div class="col">[站外图片上传中……(22)]</div>
  <div class="col">[站外图片上传中……(23)]</div>
  <div class="col">[站外图片上传中……(24)]</div>
  </div>
  </div>
  <div class="tabs tabs-dark tabs-icon-only">
  <a class="tab-item"><i class="icon ion-home"></i></a>
  <a class="tab-item active"><i class="icon ion-star"></i></a>
  <a class="tab-item"><i class="icon ion-camera"></i></a>
  <a class="tab-item"><i class="icon ion-chatbubble"></i></a>
  <a class="tab-item"><i class="icon ion-document"></i></a>
  </div>
- 效果：
  
  Paste_Image.png
案例二：列宽
.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%宽度
- 代码：
  <div class="bar bar-header">
  <h1 class="title">指定列宽</h1>
  </div>
  <div class="scroll-content has-header">
  <div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  </div>
```
    <div class="row">
      <div class="col col-75">.col.col-75</div>
      <div class="col">.col</div>
    </div>

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

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

  </div>
```
- 效果：
  
  Paste_Image.png

案例三：Metro 效果

代码：
<div class="scroll-content">
<div class="row">
<div class="col col-50 positive-bg light">
<div>机票</div>
<i class="icon ion-plane"></i>
</div>
<div class="col col-25 assertive-bg light">
<div>火车票</div>
<i class="icon ion-android-train"></i>
</div>
<div class="col col-25 calm-bg light">
<div>用车</div>
<i class="icon ion-model-s"></i>
</div>
</div>

    <div class="row">
      <div class="col  calm-bg light">
        <div>酒店</div>
        <i class="icon ion-home"></i>
      </div>
      <div class="col stable-bg energized" >
        <i class="icon ion-person"></i>
        <div>我的携程</div>
      </div>
    </div>

    <div class="row">
      <div class="col  balanced-bg light">
        <div>旅游</div>
        <i class="icon ion-image"></i>
      </div>
      <div class="col energized-bg light">
        <div>景点门票</div>
        <i class="icon ion-pricetag"></i>
      </div>
      <div class="col  royal-bg light">
        <div>攻略社区</div>
        <i class="icon ion-person-stalker"></i>
      </div>
    </div>

  </div>

效果：

Metro 效果.png

案例四：指定列偏移
.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%容器宽度
- 代码：
  <div class="bar bar-header">
  <h1 class="title">指定列偏移</h1>
  </div>
  <div class="scroll-content has-header">
  <div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
  </div>
```
    <div class="row">
      <div class="col col-33">.col</div>
      <div class="col col-33 col-offset-33">.col</div>
    </div>

    <div class="row">
      <div class="col col-33 col-offset-67">.col</div>
    </div>
  </div>
```
- 效果：

指定列偏移.png

案例五：列纵向对齐

代码：
<div class="bar bar-header">
<h1 class="title">列纵向对齐</h1>
</div>
<div class="scroll-content has-header">
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1
2
3
4</div>
</div>

    <div class="row">
      <div class="col col-top">.col</div>
      <div class="col col-center">.col</div>
      <div class="col col-bottom">.col</div>
      <div class="col">1<br>2<br>3<br>4</div>
    </div>

    <div class="row row-top">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">1<br>2<br>3<br>4</div>
    </div>

    <div class="row row-center">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">1<br>2<br>3<br>4</div>
    </div>

    <div class="row row-bottom">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">1<br>2<br>3<br>4</div>
    </div>

  </div>

效果：

列纵向对齐.png

0x001 Ionic CSS入门

0x001 简述

0x002 安装ionic

0x003 初始化项目

0x004 布局模式

0x005 bar样式

0x0012 tab

0x0013 栅格系统

猜你喜欢

热点阅读