ionic标签对应的CSS代码和JS代码
28个月前 提问
因为公司主管表示用ionic的标签，后台那边很多都看不懂，建议用原生态的HTML标签（div之类的实现相同功能），所以想找ion-header-bar对应的代码（包含点击title回到顶部的效果）和ion-content对应的原生态的HTMLCSS和JS代码，麻烦大家可以将我下面的例子转换成原生态的HTMLCSS和JS代码（最重要是效果不变）。刚刚学，大神详细点哦谢谢~&!DOCTYPE html&&html ng-app="ksmApp"&&head& &meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"& &script src="js/ionic.bundle.min.js"&&/script& &link rel="stylesheet" type="text/css" href="css/ionic.min.css"&& & &script&& & & & angular.module("ksmApp", ["ionic"]).controller("ksmCtrl", function ($scope) {& & $scope.items = [];& & for (var i = 0; i & 20; i++)& & & & $scope.items.push("line " + i);})& & &/script&&/head&&!--实现点击title回到头--&&body ng-controller="ksmCtrl"& &ion-header-bar align-title="center" class="bar-positive"&
&h1 class="title"&ion-header-bar&/h1& &/ion-header-bar& &ion-content&
&ul class="list"&
&li class="item" ng-repeat="item in items"&{{item}}&/li&
&/ul& &/ion-content&&/body&&/body&&/html&
28个月前 回答
那最好别用了。
汇智网是一个学习最前沿编程技术的平台,互动式的学习和实时在线的练习,能让你迅速进入状态,快速掌握知识技能。
微信订阅号ionic 教程
ionic 列表操作
列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。
&ion-list&
&ion-item ng-repeat="item in items"&
Hello, {{item}}!
&/ion-item&
&/ion-list&
高级用法: 缩略图，删除按钮，重新排序，滑动
&ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe"&
&ion-item ng-repeat="item in items"
class="item-thumbnail-left"&
&img ng-src="{{item.img}}"&
&h2&{{item.title}}&/h2&
&p&{{item.description}}&/p&
&ion-option-button class="button-positive"
ng-click="share(item)"&
&/ion-option-button&
&ion-option-button class="button-info"
ng-click="edit(item)"&
&/ion-option-button&
&ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)"&
&/ion-delete-button&
&ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)"&
&/ion-reorder-button&
&/ion-item&
&/ion-list&
delegate-handle
该句柄定义带有$ionicListDelegate的列表。
show-delete
列表项的删除按钮当前是显示还是隐藏。
show-reorder
列表项的排序按钮当前是显示还是隐藏。
列表项是否被允许滑动显示选项按钮。默认：true。
HTML 代码：
&html ng-app="ionicApp"&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&
&title&Ionic List Directive&/title&
&link href="/static/ionic/css/ionic.min.css" rel="stylesheet"&
&script src="/static/ionic/js/ionic.bundle.min.js"&&/script&
&body ng-controller="MyCtrl"&
&ion-header-bar class="bar-positive"&
&div class="buttons"&
&button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showD data.showReorder = false"&&/button&
&h1 class="title"&Ionic Delete/Option Buttons&/h1&
&div class="buttons"&
&button class="button" ng-click="data.showDelete = data.showReorder = !data.showReorder"&
&/ion-header-bar&
&ion-content&
&!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists --&
&ion-list show-delete="data.showDelete" show-reorder="data.showReorder"&
&ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}" class="item-remove-animate"&
Item {{ item.id }}
&ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)"&
&/ion-delete-button&
&ion-option-button class="button-assertive"
ng-click="edit(item)"&
&/ion-option-button&
&ion-option-button class="button-calm"
ng-click="share(item)"&
&/ion-option-button&
&ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"&&/ion-reorder-button&
&/ion-item&
&/ion-list&
&/ion-content&
cursor: url('/try/demo_source/finger.png'),
JavaScript 代码
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.data = {
showDelete: false
$scope.edit = function(item) {
alert('Edit Item: ' + item.id);
$scope.share = function(item) {
alert('Share Item: ' + item.id);
$scope.moveItem = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
$scope.onItemDelete = function(item) {
$scope.items.splice($scope.items.indexOf(item), 1);
$scope.items = [
{ id: 0 },
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 },
{ id: 11 },
{ id: 12 },
{ id: 13 },
{ id: 14 },
{ id: 15 },
{ id: 16 },
{ id: 17 },
{ id: 18 },
{ id: 19 },
{ id: 20 },
{ id: 21 },
{ id: 22 },
{ id: 23 },
{ id: 24 },
{ id: 25 },
{ id: 26 },
{ id: 27 },
{ id: 28 },
{ id: 29 },
{ id: 30 },
{ id: 31 },
{ id: 32 },
{ id: 33 },
{ id: 34 },
{ id: 35 },
{ id: 36 },
{ id: 37 },
{ id: 38 },
{ id: 39 },
{ id: 40 },
{ id: 41 },
{ id: 42 },
{ id: 43 },
{ id: 44 },
{ id: 45 },
{ id: 46 },
{ id: 47 },
{ id: 48 },
{ id: 49 },
{ id: 50 }
记住登录状态
重复输入密码ionic能自动适配不同手机吗？ - 知乎5被浏览1781分享邀请回答11 条评论分享收藏感谢收起0添加评论分享收藏感谢收起写回答第十三讲 ionic css布局介绍
查看: 24507|
摘要: 学习要点： 1. ionic css基本布局 2. ionic css色彩、图标和边距3. ionic css界面组件列表4. ionic css界面组件按钮5. ionic css界面组件 表单输入6. ionic css界面组件选项卡7. ionic css定制布局 Grid布局第十三讲 ...
学习要点：&&& 1.&&&
css基本布局 2.&&& ionic css色彩、图标和边距3.&&& ionic css界面组件列表4.&&& ionic css界面组件按钮5.&&& ionic css界面组件 表单输入6.&&& ionic css界面组件选项卡7.&&& ionic css定制布局 Grid布局第十三讲免费视频教程下载地址：1．&&& 基本布局1.布局模式基本布局：标题/header、内容/content和页脚/footer。 &标题区总是位于屏幕顶部，页脚区总是位于屏幕底部，而内容区占据剩余的空间。 ionic使用以下CSS类声明对应区域:o&&& .bar.bar-header - 声明元素为标题区o&&& .bar.bar-footer - 声明元素为底部o&&& .content& . scroll-content- 声明元素为内容区2. .bar位置以及颜详解样式.bar将元素声明为屏幕上绝对定位的块状区域，具有 固定的高度（44px）：使用方式：1.&&& &any class="bar"&...&/any&&3. .bar : 位置ionic使用以下样式定义条块的位置：o&&& .bar-header - 置顶o&&& .bar-subheader - header之下置顶o&&& .bar-footer - 置底o&&& .bar-subfooter - footer之上置底下面例子，使用了三个条块：标题、副标题、页脚：&4. .bar : 嵌入子元素在ionic中，有三种.bar子元素的样式是预定义的：o&&& 标题文字 - 对包含标题文字的元素应用.title样式，通常使用h1元素：&any class="bar"&&&& &any class="title"&...&/any&&/any&o&&& 按钮 - 对用作按钮的元素，应用.button样式，通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案：&any class="bar"&&&& &any class="button"&...&/any&&/any&o&&& 工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常 使用div元素作为工具栏：&any class="bar"&&&& &any class="button-bar"&...&/any&&/any&5. bar : 嵌入input一种常见的UI模式是在标题栏中嵌入搜索栏，比如美团：&&&&&& 在.bar元素中嵌入input元素，需要注意两点：1.&&& 在条块元素上应用.item-input-inset样式2.&&& 将input包裹在应用.item-input-wrapper样式的元素内这是因为，在ionic的实现中，.bar中的.input 样式定义如下：&&& .bar.item-input-inset{&&& &&& .item-input-wrapper{&&& &&&&&&& .input{&&& &&&&&&&&&&& ...&&& &&&&&&& }&&& &&& }&&& }6. 内容：.content和.scroll-contentionic预定义了两个内容容器样式：o&&& .content – 相对定位o&&& .scroll-content - 绝对定位，内容元素占满整个屏幕o&&& 这两种样式都可以使用以下样式进一步确定位置及范围：&2．&&& Ionic 色彩、图标和边距1.ionic定义了九种前景/背景/边框的色彩样式&2.ionic 中的图标ionic使用ionicons图标样式库。ionicons采用了TrueType 字体实现图标样式，有超过500个图标可供选择。使用图标很简单，在元素上声明以下两个CSS类即可：o&&& .icon - 将元素声明为图标o&&& .ion-{icon-name} - 声明要使用的具体图标通常使用i元素定义图标，例如下面声明了元素显示ion-home图标：&i class="icon ion-home"&&/i&要了解有哪些图标及具体名称，需要访问。 点击某个图标即可查看其CSS类名称。可以在任何元素中插入图标，使用元素的font-size样式指定图标的大小：&any style="font-size:100"&&&& &&& &i class="icon ion-search"&&/i&&/any&3.Ionic 内边距ionic定义了常用的内边距样式：&样式名很直白，边距统一为10px。可以在任何元素上应用这些样式。3．&&& ionic界面组件列表1.&&& 列表 : .list列表非常适合于手机屏幕上的信息的显示。使用.list定义列表容器， 使用.item定义列表成员：&any class="list"&&any class="item"&...&/any&&any class="item"&...&/any&&any class="item"&...&/any&&any class="item"&...&/any&&/any&对列表外观的定制化主要集中在.item元素上，.list元素仅有 少数的几个样式定义：&2.&&& 成员容器 : .item 列表的样式定制主要发生在.item元素上。在.item元素内， 可以插入文本、徽章、图标、图像（头像、缩略图或大图）、按钮等各种 样式的元素：&3.&&& .item : 嵌入文本列表成员中经常需要显示不同规格的文本，比如新闻列表：&& .item元素可以使用h1~h6/p标签插入不同规格的文本。4.&&& .item : 嵌入图标列表成员的内容中插入图标，比单纯的文字更加生动：&要插入图标，需要满足两个条件：1.&&& 在.item元素上声明图标位置。图标可以位于列表的左侧或右侧， 分别使用.item-icon-left和.item-icon-right声明2.&&& 在.item元素内插入图标 list-inset。5.&&& .item : 嵌入头像很多社交App中，一个相当固定的UI模式是包含用户头像的信息列表：&&&&& 在ionic中，头像被设置为40x40固定大小。和插入图标类似，向.item 中插入头像需要满足两个条件：1.&&& 在.item元素上声明头像位置。头像可以位于列表的左侧或右侧， 分别使用.item-avatar-left和.item-avatar-right声明2.&&& 在.item元素内使用img标签插入头像。6.&&& .item : 嵌入缩略图回到今日头条的新闻列表，我们给它加上两张新闻图片：&在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片。 和插入头像类似，向.item中插入缩略图需要满足两个条件：1.&&& 在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧， 分别使用.item-thumbnail-left和.item-thumbnail-right声明2.&&& 在.item元素内使用img标签插入头像。注意：将img标签放到.item内容的开头！7.&&& .item : 嵌入大图& item-image&& 8.&&& .item& card&要插入图标，需要满足两个条件：1.&&& . card 可以让list和左右有一些边距2.&&& 在. item-divider元素定义list的头和尾&div class="list card"&&/div&&div class="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.&&&&&&&&&&& &/div&&&&&&&&&&&& &div class="item item-divider"&&&&&&&&&&&&&&&& I'm a Footer in a Card!&&&&&&&&&&& &/div&&&&&&&& &/div&&&& 4．&&& ionic界面组件按钮1.&&& 按钮 : .buttonionic使用.button样式定义按钮元素：&any class="button"&...&/any&一旦元素应用了.button样式，就可以继续选用两类预定义样式来进一步 声明元素及其内容的外观：1.&&& 同级样式 - 同级样式与.button应用在同一元素上，声明元素的位置、配色等。2.&&& 下级样式 - 下级样式只能应用在.button的子元素上，声明子元素的大小等特征。&2.& .button : 嵌入图标使用内置的Ionicons样式，图标可以很容易地加入到.button中：&a class="button"&&&& &i class="icon ion-home"&&/i&Home&/a&但是更简洁的办法是：直接在.button上设置样式，这样可以有效减少元素的数目：&a class="button icon-left ion-home"&...&/a&o&&& .icon-left - 将图标置于按钮左侧o&&& .icon-right - 将图标置于按钮右侧3. 在列表中使用按钮和插入图标类似，向.item中插入按钮需要满足两个条件：1.&&& 在.item元素上声明按钮位置。按钮可以位于列表的左侧或右侧， 分别使用.item-button-left和.item-button-right声明2.&&& 在.item元素内插入按钮。4. button-blockbutton显示成块元素&button class="button button-calm button-block"&button-light&/button&5．&&& ionic界面组件 表单输入1.输入组件容器 : .item-input在ionic中，各种输入组件被定义成不同的HTML模板，以便将描述标签和输入元素 打包在一起。在这个模板的根元素上，需要声明.item-input样式：&any class="item-input"&...&/any&不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：&div class="item-input"&&& &label class="input-label"&用户名&/label&&& &input placeholder="请输入你的用户账号" type="text"&&/div&ionic预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用 输入组件的样式：2. 文本输入 : input[type="text"]文本输入通常包含一个文本input元素和一个描述型标签：&在ionic中，使用以下HTML模板建立一个带有文本标签的输入框：&any class="item-input"&&&& &span class="input-label"&...&/span&&&& &input placeholder="..." type="text"&&/any&&对于多个输入组件，可以将它们放到一个列表中，让表单更加整齐：&any class="list"&&&& &any class="item item-input"&...&/any&&&& &any class="item item-input"&...&/any&&&& ...&/any&3. 文本输入：使用占位符做标签有时可以将描述标签省略，这样可以获得一种简洁的效果：&这是input元素原生的功能，设置其placeholder属性 即可实现：&label class="item item-input"&&&& &&& &&& &&& &i class="icon ion-ios-unlocked-outline positive"&&/i&&&& &&& &&& &&& &input type="password" placeholder="请输入您的密码"&&&& &&& &/label&4. 文本输入：堆叠式标签堆叠式标签意味着将描述性标签占据单独的一行：&使用.item-stacked-label样式声明堆叠式标签：&label class="item item-input item-stacked-label"&&&& &&& &&& &&& &span class="input-label"&Email&/span&&&& &&& &&& &&& &input type="text" placeholder=""&&/label&5.浮动标签& . item-floating-label&使用. item-floating-label样式声明堆叠式标签：&label class="item item-input item-floating-label"&&&& &&& &&& &&& &span class="input-label"&Email&/span&&&& &&& &&& &&& &input type="text" placeholder=""&&/label&6.开关 : .toggle input[type="checkbox"]开关通常用来设置两种状态 - 开启和关闭：&正如上图中所见，开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：&any class="toggle"&&&& &input type="checkbox"&&&& &any class="track"&&&&&&&& &any class="handle"&&/any&&&& &/any&&/any&开关也有配色方案样式：.toggle-{color}，用来改变滑轨的背景色。7.复选按钮复选框通常用来在一组列表中选中部分成员：&和开关一样，复选按钮也是基于HTML的checkbox input实现的。使用如下的HTML模板声明复选按钮：&any class="item-input"&&&& &any class="checkbox"&&&&&&&& &input type="checkbox"&&&& &/any&&/any&你也许已经猜到，复选按钮的配色方案样式为：.checkbox-{color}。8.单选按钮 : .item-radio input[type="radio"]单选按钮用来从一组选择中作出仅仅一个选择：&正如上图所见，单选按钮的可视部件包括两部分：选中图标（.radio-icon） 和描述内容（.item-content），你可以在.item-content随便添加 内容。单选按钮基于HTML的radio input元素实现。使用如下的HTML模板 声明单选按钮：&any class="item-radio"&&&& &input name="{group-name}" type="radio"&&&& &any class="item-content"&...&/any&&&& &any class="radio-icon ion-checkmark"&&/any&&/any&单选按钮通常不单独使用，将他们放入一个列表中：&any class="list"&&&& &any class="item item-radio"&...&/any&&&& &any class="item item-radio"&...&/any&&&& ...&/any&需要注意的是，group-name决定了单选按钮的分组，所以对于互斥的选择项，必须 将它们的group-name设置为相同的名称。9.滑动条 : .range input[type="range"]range是HTML5新引入的元素，常用来进行连续值的调节：&从上图可以看到，滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选的，当不用图标时，滑动条将占据整个宽度。在ionic中，使用如下HTML模板声明滑动条：&any class="range"&&&& &any class="icon {left-icon-name}"&&/any&&&& &input name="{range-name}" type="range"&&&& &any class="icon {right-icon-name}"&&/any&&/any&使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。10.选择框 : .item-select select在每个平台上，选择框的表现形式都不一样，例如，在PC上，是一个传统的下拉框，在Android 是一个单选弹出窗，而iOS上是一个覆盖半个窗体的定制滚动器：&通常总是将选择框与文字一起放入列表条目中，使用如下HTML模板创建选择框条目：&label class="item-input item-select"&&&& &any class="input-label"&&/any&&&& &select&&&&&&&& &option&...&/option&&&&&&&& &option&...&/option&&&&&&&& ...&&& &/select&&/label&6．&&& 界面组件选项卡1.&&& 选项卡 : .tabs选项卡是一个可以包含多个按钮或链接的容器，通常用于提供一致的导航体验。 ionic中使用.tabs样式声明选项卡，使用.tab-item样式声明选项卡 成员&any class="tabs"&&&& &any class="tab-item"&...&/any&&&& &any class="tab-item"&...&/any&&&& ...&/any&选项卡默认地位于屏幕底部。一旦元素应用了.tabs样式，就可以继续 选用三类预定义样式来进一步声明元素及其内容的外观：1.&&& 同级样式 - 同级样式与.tabs应用在同一元素上，声明选项卡的位置、配色等。2.&&& 下级样式 - 下级样式只能应用在.tabs的子元素上，声明子元素的大小等特征。3.&&& 上级样式 - 上级样式应用于.tabs的父元素中，声明选项卡的平台特征。&2.tab-item : 使用图标选项卡的选项默认的只包含文字，使用图标会使其更加生动：比如 微博（weibo）和微信（wechat）：&要在某个选项元素中插入图标，需要注意两点：1.&&& 使用i标签在.tab-item中插入图标2.&&& 在.tabs容器上使用.tabs-icon-{position}声明图标位置。有三种方式定义图标位置：o&&& .tabs-icon-top - 将图标置于文字之上o&&& .tabs-icon-left - 将图标置于文字左侧o&&& .tabs-icon-only - 只使用图标，不显示文字3.&&& .tab-item : 使用徽章微信（wechat）的选项卡中第三项包含了一个红色的信息元素，被称为徽章：&要在.tab-item内包含徽章，需要注意两点：&&& 使用.badge样式插入徽章元素&&& 在.tab-item同级声明.has-badge样式&&& &any class="tabs"&&&&&&&& &any class="tab-item has-badge"&&&&&&&&&&&& &any class="badge"&...&/any&&&&&&&& &/any&&&&&&&& ...&&& &/any&4.& .tabs : 顶部选项卡默认情况下，选项卡位于屏幕底部，可以使用.tabs-top样式将选项卡置于顶部。顶部选项卡应用也很广泛：&5. .tab-striped .tabs: 条带风格选项卡条带风格的选项卡起源于Android平台，它使用一个细长的条带表示选项的选中状态：&在ionic中，使用.tabs-striped样式声明条带风格选项卡：&&& &any class="tabs-striped"&&&&&&&& &any class="tabs"&&&&&&&&&&&& &any class="tab-item"&...&/any&&&&&&&&&&&& &any class="tab-item"&...&/any&&&&&&&&&&&& ...&&&&&&& &/any&&/any&7．&&& 定制布局 Grid布局1. Grid布局ionic的Grid布局采用了CSS3的弹性盒（Flexible Box）模型，这使得它与大多数 Grid布局都有所区别。Flex布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序， 从而以最佳方式填充可用空间。CSS3引入Flex容器的主要目的是为了适应所 有类型的显示设备和屏幕大小：&在ionic中使用Grid布局主要使用两个类：o&&& .row - 在容器元素上使用.row类，表示将其设置为弹性容器，即Flexible Box。o&&& .col - 在子元素上使用.col类，其扩展系数和收缩系数都被设置为1。这意味着 所有的子元素将平分容器的宽度。2.&&& &.col : 默认的定宽列在ionic的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。下图是instagram app的截图：&3.&&& .col-{width-percent} : 指定列宽当然，我们也可以显式地指定某些列的宽度。ionic提供了一些预置的CSS类， 供我们快速指定列宽：&&& .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%宽度如果你有特殊的需求，比如，非要指定78%的宽度，可以这样：&&& .col-78{&&&&& -webkit-box-flex: 0;&&&&& -webkit-flex: 0 0 78%;&&&&& -moz-box-flex: 0;&&&&& -moz-flex: 0 0 %78;&&&&& -ms-flex: 0 0 78%;&&&&& flex: 0 0 78%;&&& }4.&&& .col-{width-percent} : 指定列宽windows phone的metro风格在信息展示方面有很大的优势，虽然携程的APP 没有突出这一点:-( ：&&通过定制栅格的列宽，我们可以简单地实现类似的界面。5.&&& .col-offset-{width-percent} : 指定列偏移列可以从默认位置偏移，ionic预置了一些CSS类供我们快速设置列偏移：&&& .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%容器宽度这实际上是通过设置子元素的margin-left样式实现的，所以如果你需要让它 偏移正常位置78%，可以这样：&&& .col-offset-78{&&&&&&& margin-left:78%;&&& }6.&&& &.col-{align} : 列纵向对齐如果一行中各元素的高度不一样，那么比较矮的那些元素将自动被拉伸以适应 整行的高度。有时你不想这样，希望那些元素保持自身的高度。ionic提供了一些预置的CSS类用来 指定这些元素纵向的对齐方式：&&& .col-top - 让元素纵向顶对齐&&& .col-center - 让元素居中对齐&&& .col-bottom - 让元素向底对齐这是通过设置元素的CSS3样式align-self来实现的。第十三讲免费视频教程下载地址：
刚表态过的朋友 ()
上一篇：下一篇：
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered by在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想在非ionic框架中使用ionic的图标，应该引入哪些文件？怎样使用？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
Ionic 的图标集，有个专门的库，官网上有下载： 或者， Github 上也有对应的项目，提供了 bower 安装：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
下载文件里面有个ionicons.min.css
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你把图标的css文件引入就行了
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：