Ionic学习笔记1_基本布局
<body>
<!-- 头部 --> bar里嵌入子元素：title,button,button-bar和 input
<div class="bar bar-header bar-dark item-input-inset">
<h1 class="title">Header</h1> 布局？ item-input-inset, item-input-wrapper
<label class="item-input-wrapper">
<a class="button button-clear icon ion-search"></a>
<input class="light-bg" type="text" placeholder="qingshuru">
</label>
<a class="button button-clear icon ion-ios-gear"></a>
</div>
<!-- 二级栏目 -->
<div class="bar bar-subheader bar-stable">
<div class="button-bar">
<a class="button button-balanced">button1</a>
<a class="button button-clear">button2</a>
</div>
</div>
<!-- -->
<div class="scroll-content has-header has-subheader">
<h1 class="title">Content</h1>
</div>
<!-- 底部 -->
<div class="bar bar-footer bar-calm">
<div class="button-bar">
<i class="icon ion-home" style="font-size:50px;"></i> 声明图标大小及位置
<a class="button button-balanced icon icon-right ion-document-text">button3</a>
<a class="button button-clear">button4</a>
</div>
</div>
</body>
1.1. .bar
标题文字 -.title样式，通常使用h1元素
按钮 -.button样式，通常使用button 或a元素作为按钮
工具栏: -.button-bar样式,使用div元素作为工具栏
1.1.1. 在.bar元素中嵌入input元素
在标题栏中嵌入搜索栏
v 在条块元素上应用.item-input-inset样式
v 将input包裹在应用.item-input-wrapper样式的元素内
<div class="bar bar-header bar-energized item-input-inset">
<a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
<label class="item-input-wrapper">
<input class="light-bg" type="text" placeholder="qingshuru">
</label>
</div>
<label class="item-input-wrapper">
<a class="button button-clear icon ion-search"></a>
<input class="light-bg" type="text" placeholder="qingshuru">
</label>
1.1.2. button
按钮应用.button样式，常使button 或a元素作为按钮
嵌入图标
<a class="button"> <i class="icon ion-home"></i>Home </a>
<a class="button icon-left ion-home"> Home </a>
<div class="button icon ion-plus"></div>
<button class="button button-calm button-block">Home</button> button显示成块元素
² button-block
button显示成块元素 <button class="button button-calm button-block">button-light</button>
1.2. Ionic色彩、图标和边距
前景，背景，边框 及内边距偏移
内边距统一为10px
1.3. .content和.scroll-content
<div class="scroll-content has-header padding ">
<i class="icon ion-arrow-up-a calm">图标</i>
<i class="icon ion-arrow-up-a balanced"></i>
<div class="balanced-bg light">背景 字体</div>
<div class="padding-left">
<div class="energized-bg light">偏移</div>
</div>
</div>
内容容器样式：
.content – 相对定位
.scroll-content - 绝对定位，内容元素占满整个屏幕
1.3.1. .hasheader
1.3.2. .ion 图标
.icon - 将元素声明为图标
.ion-{icon-name} - 声明要使用的具体图标 ，图标及具体名称，需要访问ionics.com
<any style="font-size:100px;"> 图标的大小：
<i class="icon ion-search"></i>
</any>
1.3.3. .list .item
.list定义列表容器， 使用.item定义列表成员：
v 容器外观定制 .list元素
边框，缩进，阴影
v 列表外观定制 .item元素
分组，配色，边框
插入文本、徽章、图标、图像（头像、缩略图或大图）、按钮等各种 样式的元素
设置图文位置排版
v 简单应用
1) .item : 嵌入文本
h1~h6/p标签插入不同规格的文本
嵌入文本、徽章
文本可扩展多行，徽章可设置背景及字
2) .item :嵌入图标
.item元素上声明图标位置。使用.item-icon-left和.item-icon-right声明
.item元素内插入图标 list-inset
3) .item : 嵌入头像
头像被设置为40x40固定大小
.item元素上声明头像位置。使用.item-avatar-left和.item-avatar-right声明
.item元素内使用img标签插入头像
4) .item : 嵌入缩略图
缩略图被定义为80px大小，比头像大，适合新闻图片。
.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧，分别使用.item-thumbnail-left和.item-thumbnail-right声明
.item元素内使用img标签插入头像。
img标签放到.item内容的开头！
5) .item : 嵌入大图 item-image
6) .item :中使用按钮button
.item上声明按钮位置。可以位于列表的左侧或右侧， 分别使用.item-button-left和.item-button-right声明
.item元素内插入按钮
v 例1文本列表(单列)。
<ul class="list list-inset">
<li class="item">课程</li>
<li class="item"> h1~h6/p标签插入不同规格的文本
<h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>
<p>中国青年报</p>
</li>
<!-- 嵌入文本、徽章及徽章背景字 -->
<li class="item">
Mega Man <i class="badge positive-bg light">15</i>
</li>
<li class="item item-button-right">
<button class="button icon-left ion-home">按钮</button>
Enter home address
</li>
<li class="item">
<button class="button button-calm button-block">button-light</button>
</li>
<!-- 嵌入图标图标和文字排版，位置最多只能两图标，文本可扩展徽章多行 -->
<li class="item item-icon-left item-icon-right">
<i class="icon ion-location"></i>
<h2>入住城市：当前位置 </h2>
<h2>地址 </h2>
<i class="icon ion-ios-arrow-right"></i>
</li>
<!-- 缩略图位置 -->
<li class="item item-thumbnail-left">
<img src="img/a-1.jpg">
<h2>热点 <i class="badge positive-bg light">15</i> </h2>
<h2>大黄鸭在北京两个月创收超两亿元 今日离京</h2>
<p>中国经营报</p>
</li>
<!-- 图像位置 -->
<li class="item item-avatar">
<img src="img/a-1.jpg">
<h2>Thomasguy</h2>
<p>真的好好吃啊...</p>
</li>
<!-- 图片位置 -->
<li class="item item-image">
<img src="img/bmw.jpg">
</li>
</ul>
v 例2使用 div 和 a 显示 item
<div class="list ">
<a href="#" class="item">课程</a>
<a href="#" class="item">
<h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>
<p>中国青年报</p>
</a>
<a href="#" class="item">
Mega Man <i class="badge positive-bg aght">15</i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i> 图标
Friends
<span class="badge badge-assertive">0</span> 徽章
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note"> Grammy</span> 说明
</a>
<div class="item item-button-right">
Call Ma
<button class="button button-positive"> 按钮 带图标
<i class="icon ion-ios-telephone"></i>
</button>
</div>
<a class="item item-avatar" href="#"> 索罗图
<img src="venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
<a class="item item-thumbnail-left" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
</div>
v 列表分隔符 item-divider
使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分
v 内嵌列表 list list-inset
与常规列表区别是，它设置了外边距（marign）,类似于选项卡。
内嵌列表是没有阴影效果的，滚动时效果会更好
v 例3使用分组
1.3.4. 卡片 card
针对移动端的应用，卡片会根据屏幕大小自适应大小。可以很灵活的控制卡片的显示效果，甚至实现动画效果。卡片一般放在页面顶部，当然也可以实现左右切换的功能. 卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表（inset list）。
. card 可以让list和左右有一些边距
. item-divider元素定义list的头和尾
<div class="list card">
<div class="item item-divider">
I'm a Header in a Card!
</div>
<div class="item item-text-wrap">
This is a basic Card with some text.
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-ios-telephone"></i>
Enter phone number
</a>
<a href="#" class="item item-icon-left">
<i class="icon ion-wifi"></i>
Enter wireless password
</a>
</div>
<div class="item item-divider">
I'm a Footer in a Card!
</div>
</div>
卡片展现
开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。
<div class="list card">
<div class="item item-avatar">
<img src="mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="delorean.jpg">
<p>
菜鸟教程 -- 学的不仅是技术，更新梦想！<br>
菜鸟教程 -- 学的不仅是技术，更新梦想！
</p>
<p>
<a href="#" class="subdued">1 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>喜欢
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i> 分享
</a>
</div>
</div>
1.3.5. 表单输入
list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签
1) item item-input
<label class="item item-input">
<i class="icon ion-android-person positive"></i>
<input type="text" placeholder="请输入您的用户名"> placeholder 属性设置输入字段预期值的提示信息
</label>
<label class="item item-input item-stacked-label"> item-stacked-label堆叠标签通常位于输入框的头部
<span class="input-label">Email</span> 输入框属性：input-label
<input type="text" placeholder="me@vucek.com">
</label>
<label class="item item-input item-floating-label"> item-floating-label浮动标签类似于堆叠标签，有一个动画的效果
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name">
</label>
<label class="item item-input item-input-inset">
<textarea placeholder="Comments"></textarea>
</label>
内嵌表单
默认情况下每个输入域宽度都是100%，使用 list list-inset 或 card 类设置表单的内边距(padding)， card 类带有阴影。
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i> 带图标的输入框
<input type="text" placeholder="Search">
</label>
</div>
内嵌输入域
使用 list-inset 设置内嵌实体列表。 使用 item-input-inset 样式可以内嵌一个按钮。
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Email">
</label>
<button class="button button-small"> Submit </button>
</div>
</div>
头部输入框
输入框可放置在头部，并可添加提交或取消按钮。
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="搜索">
</label>
<button class="button button-clear">
取消
</button>
</div>
2) ionic Toggle(切换开关)
切换开关类似与 HTML 的 checkbox 标签，切换开关可以使用 toggle-assertive 来指定颜色。
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。
<ul class="list">
<li class="item item-toggle">
字符计数
<label class="toggle toggle-balanced">
<input type="checkbox" checked>
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>
3) ionic checkbox（复选框）
和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。
每个选项的 item 类后需要添加 item-checkbox 类。可以使用 checkbox-assertive 来指定颜色。
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
记住密码
</li>
<li class="item item-checkbox item-button-right">
<label class="checkbox">
<input type="checkbox" checked >
</label>
<h2>Shopping</h2>
<a class="button button-clear icon ion-ios-arrow-right"></a>
</li>
</ul>
4) ionic 单选框
ionic 当选按钮与标准 type="radio" 的 input元素类似。
每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。
ionic 在单选项中使用了 <label> 元素，使其更易点击。
<div class="list">
<div class="item item-divider"><b>请选择支付方式</b></div>
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="item-content">支付宝客户端支付</div>
<i class="radio-icon ion-checkmark balanced"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="python" >
<div class="item-content">支付宝网页支付</div>
<i class="radio-icon ion-checkmark balanced"></i>
</label>
</div>
5) ionic Range
ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。可以在许多种元素里使用它比如列表或者 Card 。
<div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<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" min="0" max="100" value=30>
<i class="icon ion-ios-volume-high"></i>
</div>
</div>
6) ionic select
ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。
在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。
<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 class="item item-input item-select">
<div class="input-label"> Lightsaber </div>
<select>
<option>Blue</option>
<option selected="">Green</option>
<option>Red</option>
</select>
</div>
1.3.6. 选项卡 : .tabs
ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可包含文字和图标的组合
选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。默认情况，选项卡颜色为默认，可设置以下不同颜色样式：tabs-default ，tabs-light ，tabs-stable ，tabs-positive ，tabs-calm ，tabs-balanced ，tabs-energized ，tabs-assertive ，tabs-royal ，tabs-dark。要隐藏选项卡栏，可使用 tabs-item-hide 类。
<ul class="tabs tabs-positive"> tabs-top
<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>
tabs-icon-top顶部图标+文字选项卡。tabs-icon-only可设置只显示图标选项卡,ttabs-icon-left 类可设置左侧图标+文字选项卡。
<div class="tabs tabs-stable tabs-icon-top">
<a class="tab-item active">
<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 has-badge">
<i class="icon ion-ios-eye-outline"></i>发现
<i class="badge badge-positive ">12</i>
</a>
</div>
条纹样式选项卡
在带有 tabs 的样式名的元素上添加 tabs-striped 来实现像 Android 风格的 tabs。也可以添加 tabs-top 来实现选项卡在页面顶部。
条纹选项卡颜色可通过 tabs-background-{color} 和 tabs-color-{color} 来控制， {color} 值可以是：default, light, stable, positive, calm, balanced, energized, assertive, royal, 或 dark。
注意：如果要再选项卡上设置头部标题，需要使用 has-tabs-top 类。
<div class="tabs-striped tabs-top tabs-dark tabs-icon-only tabs-background-positive tabs-color-light ">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-ios-telephone"></i> Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-ios-clock"></i> Favorites
</a>
</div>
</div>
1.3.7. Grid布局
它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。
同等大小网格
带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。如 row 的样式包含了 5 个 col 样式，每个 col 的宽度为 20%。
<div class="row">
<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">
<div class="col col-33 positive-bg">.col</div>指定列宽
<div class="col col-33 col-offset-33 dark-bg">.col</div> 列可以设置左侧偏移量
</div>
纵向对齐包含顶部，中间部分，底部，可以应用到每一行的列，或者指定的某列。
<div class="row row-top "> row-center row-bottom
<div class="col col-top col-50 positive-bg light">
<div>机票</div>
</div>
<div class="col col-25 assertive-bg light">
<img src="img/a-2.jpg" />
<br>你好
</div>
<div class="col col-25 calm-bg light">
<div>用车</div>
</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>
响应式网格
手持设备屏幕在切换时，例如横屏，竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。
.responsive-sm 小于手机横屏
.responsive-md 小于平板竖屏
.responsive-lg 小于平板横屏
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
