ionic 的 CSS 框架主要提供预定义的 CSS 类，来帮助我们快速构建适用于手机端的 UI。
ionic 的预定义 CSS 类主要分四个方面：
1、基本布局类
2、颜色和图标类
3、界面组件类
4、栅格系统类
1、基本布局类
手机App开发实践中，用户界面通常划分为几个区域 -
标题header
内容content
页脚footer
1.1标题header 页脚footer
定高条块bar
样式 .bar 将元素声明为屏幕上绝对定位的块状区域，具有固定的高度（44px）
bar 子元素
有三种.bar子元素的样式是预定义的：
1，标题文字 - 对包含标题文字的元素应用.title样式，通常使用h1元素。
2，按钮 - 对用作按钮的元素，应用.button样式，通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案。
3，工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常 使用div元素作为工具栏。
bar 嵌入 input
在 bar 元素中嵌入 input 元素，需要注意两点：
1,在条块元素上应用 item-input-inset 样式
2,将input包裹在应用 item-input-wrapper 样式的元素内
1.2内容：content/scroll-content
ionic预定义了两个内容容器样式：
content - 流式定位，内容在文档流中按顺序定位
scroll-content - 绝对定位，内容元素占满整个屏幕
2、颜色和图标类
2.1颜色
2.2图标
ionic 使用 ionicons 图标样式库。
使用图标很简单，在元素上声明以下两个 CSS 类即可：
.icon - 将元素声明为图标
.ion-{icon-name} - 声明要使用的具体图标
要了解有哪些图标及具体名称，需要访问http://ionicons.com/。 点击图标即可查看其类名称。
2.3内边距
样式名很直白，边距统一为10px。可以在任何元素上应用这些样式。
3,界面组件
3.1列表：list
列表非常适合于手机屏幕上的信息的显示。使用.list定义列表容器， 使用.item定义列表成员：
对列表外观的定制化主要集中在.item元素上，.list元素仅有 少数的几个样式定义：
3.2成员项 : item
列表的样式定制主要发生在.item元素上。
可以插入文本、徽章、图标、图像、按钮元素：
在ionic中，头像被设置为40x40固定大小
在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片
注意：将img标签放到.item内容的开头！
3.3按钮：button
ionic 使用 .button 样式定义按钮元素：
一旦应用了 .button 样式，可以继续选用两类预定义样式来进一步声明元素及其内容的外观：
同级样式 - 同级样式与.button应用在同一元素上，声明元素的位置、配色等。
下级样式 - 下级样式只能应用在.button的子元素上，声明子元素的大小等特征。
3.4输入组件容器：item-input
在ionic中，各种输入组件被定义成不同的HTML模板，以便将描述标签和输入元素 打包在一起。在这个模板的根元素上，需要声明.item-input样式：
<any class="item-input">...</any>
不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：
<div class="item-input">
<label class="input-label">用户名</label>
<input type="text" placeholder="请输入你的用户账号">
</div>
onic 预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用输入组件。
堆叠式标签
<any class="item-input item-stacked-label">
<any class="input-label">...</any>
<input type="text" placeholder="...">
</any>
开关
开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：
<any class="toggle">
<input type="checkbox">
<any class="track">
<any class="handle"></any>
</any>
</any>
复选按钮
复选框通常用来在一组列表中选中部分成员，
复选按钮的配色方案样式为：.checkbox-{color}。
和开关一样，复选按钮也是基于HTML的checkbox input实现的：
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
<span>Do you agree?</span>
</li>
单选按钮
单选按钮的可视部件包括两部分：选中图标（.radio-icon） 和描述内容（.item-content），你可以在内容随便添加 内容。
单选按钮通常不单独使用，需要将他们放入一个列表中。
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">支付宝网页支付</div>
<i class="radio-icon ion-checkmark calm"></i>
</label>
选择框
在每个平台上，选择框的表现形式都不一样，例如，在PC上，是一个传统的下拉框，在Android 是一个单选弹出窗
<label class="item item-select">
<span class="input-label">前端技术</span>
<select>
<option>HTML5</option>
<option selected>CSS3</option>
<option>ES6</option>
</select>
</label>
3.5滑动条
滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选的，当不用图标时，滑动条将占据整个宽度。
使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。
<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>
3.6选项卡：tabs
ionic 中使用 .tabs 样式声明选项卡，使用 .tab-item 样式声明选项卡成员
选项卡默认地位于屏幕底部。
<ul class="tabs">
<li class="tab-item">...</any>
<li class="tab-item">...</any>
...
</ul>
图标
标记
顶部选项卡
条带风格选项卡
Paste_Image.png
4、栅格系统
和 Bootstrap 一样，ionic 也提供了栅格系统。不过 ionic 的实现是基于 CSS3 的 Flex Box 模型，更为灵活。
在ionic中使用栅格系统主要使用两个类：
.row - 在容器元素上使用.row类，表示将其设置为弹性容器，即Flexible Box。
.col - 在子元素上使用.col类，其扩展系数和收缩系数都被设置为1。这意味着 所有的子元素将平分容器的宽度。
4.1默认的定宽列
在ionic的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。
4.2col-{w-p} 指定列宽
我们也可以显式地指定某些列的宽度：
.col-10 - 占据容器10%宽度
.col-20 - 占据容器20%宽度
.col-25 - 占据容器25%宽度
.col-33 - 占据容器33%宽度
.col-50 - 占据容器50%宽度
.col-67 - 占据容器67%宽度
.col-75 - 占据容器75%宽度
.col-80 - 占据容器80%宽度
4.3.col-offset-{w-p} 指定列偏移
列可以从默认位置偏移：
.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%容器宽度
4.4.col-{align} 列纵向对齐
如果一行中各元素的高度不一样，那么比较矮的那些元素将自动被拉伸以适应 整行的高度。
ionic提供了一些预置的CSS类用来 指定这些元素纵向的对齐方式：
.col-top - 让元素纵向顶对齐
.col-center - 让元素居中对齐
.col-bottom - 让元素向底对齐
这是通过设置元素的align-self来实现的。
网友评论