0x001 Ionic CSS入門

0x001 簡(jiǎn)述

系統(tǒng)：win10
IDE：WebStome
教程地址：http://www.hubwiz.com/class/5507ca5be564e51314f544e4

0x002 安裝ionic

npm install -g ionic

0x003 初始化項(xiàng)目

空白項(xiàng)目：
```
ionic start myApp blank
```

Paste_Image.png

底部切換標(biāo)簽：
```
ionic start myApp tabs
```

Paste_Image.png

帶側(cè)滑菜單：
```
ionic start myApp sidemenu 
```

Paste_Image.png

項(xiàng)目生成后的項(xiàng)目目錄：

Paste_Image.png

0x004 布局模式

Paste_Image.png

.bar.bar-header：聲明元素為標(biāo)題區(qū)
.bar.bar-footer：聲明元素為頁(yè)腳區(qū)
.content：聲明元素為內(nèi)容區(qū)

0x005 bar樣式

Paste_Image.png

案例一：添加頭部條和底部條
-代碼：
<div class="bar bar-header">
<h1 class="title">標(biāo)題欄</h1>
</div>
<div class="bar bar-footer">
<h1 class="title">底部欄</h1>
</div>
- 效果：

Paste_Image.png

- 說(shuō)明如果不加顏色樣式搅窿，則為白色

案例二：添加顏色的頭部條和底部條

代碼：

<div class="bar bar-header bar-balanced">
<h1 class="title">標(biāo)題欄</h1>
</div>
<div class="bar bar-footer bar-calm">
<h1 class="title">底部欄</h1>
</div>

效果：

Paste_Image.png

案例三：添加副標(biāo)題和副底部

代碼：

<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">財(cái)經(jīng)</a>
    <a class="button button-clear">娛樂(lè)</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">財(cái)經(jīng)</a>
    <a class="button button-clear">娛樂(lè)</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 ">熱點(diǎn)</a>
  </div>
</div>

效果：

Paste_Image.png

0x006 content

Paste_Image.png

.content：流式定位，內(nèi)容元素在文檔流中按順序定位
.scroll-content：絕對(duì)定位疾棵，內(nèi)容元素占滿整個(gè)屏幕

案例一：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 圖標(biāo)

.icon：將元素聲明為圖標(biāo)
.ion-{icon-name}：聲明要使用的具體圖標(biāo)

代碼：

  <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>國(guó)務(wù)院常務(wù)會(huì)議部署推進(jìn)公司注冊(cè)資本登記制度改革</h2>
        <p>中國(guó)青年報(bào)</p>
      </li>
      <li class="item">
        <h2>大黃鴨在北京兩個(gè)月創(chuàng)收超兩億元 今日離京</h2>
        <p>中國(guó)經(jīng)營(yíng)報(bào)</p>
      </li>
      <li class="item">
        <h2>LinkedIn創(chuàng)始人：在見(jiàn)風(fēng)投之前戈钢，我希望自己當(dāng)時(shí)懂得這七件事...</h2>
        <p>虎嗅網(wǎng)</p>
      </li>
      <li class="item">
        <h2>美國(guó)男子為防妻分家產(chǎn) 將價(jià)值50萬(wàn)美元黃金扔垃圾桶</h2>
        <p>新浪新聞</p>
      </li>
    </ul>
  </div>

效果：

Paste_Image.png

-案例四：帶圖標(biāo)

代碼：

  <div class="bar bar-header bar-positive">
    <button class="button icon ion-ios-arrow-left">返回</button>
    <h1 class="title">酒店搜索</h1>
    <button class="button">首頁(yè)</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>入住城市：當(dāng)前位置</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>價(jià)格范圍：不限價(jià)格</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>什么時(shí)候去看演唱會(huì)啊是尔，...</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>國(guó)務(wù)院常務(wù)會(huì)議部署推進(jìn)公司注冊(cè)資本登記制度改革</h2>
       <p>中國(guó)青年報(bào)</p>
     </li>
     <li class="item item-thumbnail-right">
       [站外圖片上傳中……(5)]
       <h2>大黃鴨在北京兩個(gè)月創(chuàng)收超兩億元 今日離京</h2>
       <p>中國(guó)經(jīng)營(yíng)報(bào)</p>
     </li>
     <li class="item">
       <h2>LinkedIn創(chuàng)始人：在見(jiàn)風(fēng)投之前，我希望自己當(dāng)時(shí)懂得這七件事...</h2>
       <p>虎嗅網(wǎng)</p>
     </li>
     <li class="item item-thumbnail-right">
       [站外圖片上傳中……(6)]
       <h2>美國(guó)男子為防妻分家產(chǎn) 將價(jià)值50萬(wàn)美元黃金扔垃圾桶</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

案例二：按鈕嵌入圖標(biāo)
- 代碼：
  <div class="bar bar-header bar-positive">
  <h1 class="title">圖標(biāo)按鈕</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

案例三：列表嵌入圖標(biāo)按鈕
代碼：
<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>設(shè)置</h2>
<a class="button button-clear icon ion-ios-gear"></a>
</li>
<li class="item item-button-right">
<h2>云服務(wù)</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">賬號(hào)</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

案例二：文本輸入：堆疊式標(biāo)簽
- 代碼：
  <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
案例三：文本輸入：使用占位符做標(biāo)簽
- 代碼：
  <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="請(qǐng)輸入您的用戶名">
  </label>
  <label class="item item-input">
  <i class="icon ion-ios-unlocked-outline positive"></i>
  <input type="password" placeholder="請(qǐng)輸入您的密碼">
  </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">登錄系統(tǒng)</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">設(shè)置</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">
  字符計(jì)數(shù)
  <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
案例六：復(fù)選按鈕
- 代碼：
  <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

案例七：?jiǎn)芜x按鈕

代碼：

  <div class="bar bar-header bar-assertive">
    <a class="button icon ion-ios-undo"></a>
    <h1 class="title">確認(rèn)訂單</h1>
  </div>
  <div class="scroll-content has-header padding">
    <div class="list">
      <div class="item item-divider"><b>請(qǐng)選擇支付方式</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">支付寶網(wǎng)頁(yè)支付</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">一鍵支付（無(wú)需支付寶賬戶）</div>
        <i class="radio-icon ion-checkmark assertive"></i>
      </label>
    </div>
    <button class="button button-block button-assertive">立即購(gòu)買</button>
  </div>

效果：

Paste_Image.png

案例八：滑動(dòng)條
- 代碼：
  <div class="bar bar-header bar-stable">
  <button class="button button-clear button-positive icon ion-ios-arrow-left">設(shè)置</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">
  用按鈕調(diào)整
  <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">
  前端技術(shù)
  </div>
  <select>
  <option>HTML</option>
  <option selected>CSS</option>
  <option>JavaScript</option>
  </select>
  </label>
  </div>
  </div>
- 效果：

Paste_Image.png

0x0012 tab

Paste_Image.png

案例一：選項(xiàng)卡
- 代碼：
  <div class="bar bar-header">
  <h1 class="title">選項(xiàng)卡</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
案例二：使用圖標(biāo)
- 代碼：
  <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>首頁(yè)
  </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>發(fā)微博
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-eye-outline"></i>發(fā)現(xiàn)
  </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>發(fā)現(xiàn)
  <i class="badge">12</i>
  </a>
  <a class="tab-item">
  <i class="icon ion-ios-person-outline"></i>我
  </a>
  </div>
- 效果：
  
  Paste_Image.png
案例四：頂部選項(xiàng)卡
- 代碼：
  <div class="tabs tabs-top tabs-stable">
  <a class="tab-item">要聞</a>
  <a class="tab-item active">河南</a>
  <a class="tab-item">房產(chǎn)</a>
  <a class="tab-item">財(cái)經(jīng)</a>
  <a class="tab-item">娛樂(lè)</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

案例五：條帶風(fēng)格選項(xiàng)卡
- 代碼：
  <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 柵格系統(tǒng)

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 - 占據(jù)容器10%寬度
.col-20 - 占據(jù)容器20%寬度
.col-25 - 占據(jù)容器25%寬度
.col-33 - 占據(jù)容器33%寬度
.col-50 - 占據(jù)容器50%寬度
.col-67 - 占據(jù)容器67%寬度
.col-75 - 占據(jù)容器75%寬度
.col-80 - 占據(jù)容器80%寬度
.col-90 - 占據(jù)容器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>機(jī)票</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>景點(diǎn)門票</div>
        <i class="icon ion-pricetag"></i>
      </div>
      <div class="col  royal-bg light">
        <div>攻略社區(qū)</div>
        <i class="icon ion-person-stalker"></i>
      </div>
    </div>

  </div>

效果：

Metro 效果.png

案例四：指定列偏移
.col-offset-10 - 偏移默認(rèn)位置10%容器寬度
.col-offset-20 - 偏移默認(rèn)位置20%容器寬度
.col-offset-25 - 偏移默認(rèn)位置25%容器寬度
.col-offset-33 - 偏移默認(rèn)位置33%容器寬度
.col-offset-50 - 偏移默認(rèn)位置50%容器寬度
.col-offset-67 - 偏移默認(rèn)位置67%容器寬度
.col-offset-75 - 偏移默認(rèn)位置75%容器寬度
.col-offset-80 - 偏移默認(rèn)位置80%容器寬度
.col-offset-90 - 偏移默認(rèn)位置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

案例五：列縱向?qū)R

代碼：
<div class="bar bar-header">
<h1 class="title">列縱向?qū)R</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>

效果：

列縱向?qū)R.png

最后編輯于：2017.12.03 04:50:47

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末开仰，一起剝皮案震驚了整個(gè)濱河市拟枚，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌众弓，老刑警劉巖恩溅，帶你破解...
沈念sama閱讀 211,265評(píng)論 6贊 490
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異谓娃，居然都是意外死亡脚乡，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,078評(píng)論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門滨达，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)奶稠，“玉大人，你說(shuō)我怎么就攤上這事捡遍⌒慷” “怎么了？”我有些...
開(kāi)封第一講書人閱讀 156,852評(píng)論 0贊 347
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵画株，是天一觀的道長(zhǎng)辆飘。經(jīng)常有香客問(wèn)我啦辐，道長(zhǎng)，這世上最難降的妖魔是什么蜈项？我笑而不...
開(kāi)封第一講書人閱讀 56,408評(píng)論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任芹关，我火速辦了婚禮，結(jié)果婚禮上战得，老公的妹妹穿的比我還像新娘充边。我一直安慰自己，他們只是感情好常侦，可當(dāng)我...
茶點(diǎn)故事閱讀 65,445評(píng)論 5贊 384
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布浇冰。她就那樣靜靜地躺著，像睡著了一般聋亡。火紅的嫁衣襯著肌膚如雪肘习。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書人閱讀 49,772評(píng)論 1贊 290
城市分裂傳說(shuō)
那天坡倔，我揣著相機(jī)與錄音漂佩，去河邊找鬼。笑死罪塔，一個(gè)胖子當(dāng)著我的面吹牛投蝉，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播征堪，決...
沈念sama閱讀 38,921評(píng)論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼瘩缆，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了佃蚜？” 一聲冷哼從身側(cè)響起庸娱，我...
開(kāi)封第一講書人閱讀 37,688評(píng)論 0贊 266
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎谐算，沒(méi)想到半個(gè)月后熟尉，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,130評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡洲脂，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,467評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年斤儿，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恐锦。...
茶點(diǎn)故事閱讀 38,617評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡往果，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出踩蔚，到底是詐尸還是另有隱情棚放，我是刑警寧澤，帶...
沈念sama閱讀 34,276評(píng)論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布馅闽，位于F島的核電站飘蚯，受9級(jí)特大地震影響馍迄，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜局骤，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,882評(píng)論 3贊 312
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一攀圈、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧峦甩，春花似錦赘来、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 30,740評(píng)論 0贊 21
一樁弒父案犬辰，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至冰单，卻和暖如春幌缝，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背诫欠。一陣腳步聲響...
開(kāi)封第一講書人閱讀 31,967評(píng)論 1贊 265
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工涵卵，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人荒叼。一個(gè)月前我還...
沈念sama閱讀 46,315評(píng)論 2贊 360
代替公主和親
正文我出身青樓轿偎，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親被廓。傳聞我的和親對(duì)象是個(gè)殘疾皇子坏晦，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,486評(píng)論 2贊 348

0x001 Ionic CSS入門

0x001 簡(jiǎn)述

0x002 安裝ionic

0x003 初始化項(xiàng)目

0x004 布局模式

0x005 bar樣式

0x0012 tab

0x0013 柵格系統(tǒng)

推薦閱讀更多精彩內(nèi)容