跳到主要内容
版本：v8

CSS 工具类

Ionic 框架提供了一套 CSS 工具类，可用于任何元素，以修改文本样式、控制元素位置，或调整内边距（padding）和外边距（margin）。

important

如果你的应用不是通过 Ionic 框架的启动模板创建的，为了让这些样式生效，需要在全局样式表的可选部分中引入所列出的样式表。

文本修改​

文本对齐​

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-start">
        <h3>text-start (文本开头对齐)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-end">
        <h3>text-end (文本结尾对齐)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-center">
        <h3>text-center (文本居中对齐)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <div class="ion-text-justify">
        <h3>text-justify (文本两端对齐)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-wrap">
        <h3>text-wrap (文本换行)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-nowrap">
        <h3>text-nowrap (文本不换行)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
类名样式规则描述
.ion-text-lefttext-align: left内容与行框的左边缘对齐。
.ion-text-righttext-align: right内容与行框的右边缘对齐。
.ion-text-starttext-align: start在从左到右的文本方向中，等同于 text-left；在从右到左的文本方向中，等同于 text-right。
.ion-text-endtext-align: end在从左到右的文本方向中，等同于 text-right；在从右到左的文本方向中，等同于 text-left。
.ion-text-centertext-align: center内容在行框内居中对齐。
.ion-text-justifytext-align: justify内容两端对齐，文本间距会调整，使其左右边缘与行框的左右边缘对齐（最后一行除外）。
.ion-text-wrapwhite-space: normal合并空白序列。源代码中的换行符与其他空白符同等处理。必要时会换行以填充行框。
.ion-text-nowrapwhite-space: nowrap和 normal 一样合并空白，但禁止文本内的换行。

文本转换​

<ion-grid>
  <ion-row>
    <ion-col>
      <div class="ion-text-uppercase">
        <h3>text-uppercase (转大写)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-lowercase">
        <h3>text-lowercase (转小写)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
    <ion-col>
      <div class="ion-text-capitalize">
        <h3>text-capitalize (首字母大写)</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
类名样式规则描述
.ion-text-uppercasetext-transform: uppercase强制将所有字符转换为大写。
.ion-text-lowercasetext-transform: lowercase强制将所有字符转换为小写。
.ion-text-capitalizetext-transform: capitalize强制将每个单词的首字母转换为大写。

响应式文本类​

上述所有文本类都有额外的类，可以根据屏幕尺寸调整文本样式。将每个类中的 text- 替换为 text-{breakpoint}-，即可在特定的屏幕尺寸上应用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表展示了默认行为，其中 {modifier} 可以是上述提到的任意值：left, right, start, end, center, justify, wrap, nowrap, uppercase, lowercase, capitalize。

类名描述
.ion-text-{modifier}在所有屏幕尺寸上对元素应用该修饰。
.ion-text-sm-{modifier}当屏幕宽度 min-width: 576px 时对元素应用该修饰。
.ion-text-md-{modifier}当屏幕宽度 min-width: 768px 时对元素应用该修饰。
.ion-text-lg-{modifier}当屏幕宽度 min-width: 992px 时对元素应用该修饰。
.ion-text-xl-{modifier}当屏幕宽度 min-width: 1200px 时对元素应用该修饰。

元素定位​

浮动 (Float)​

CSS 的 float 属性指定元素应沿其容器的左侧或右侧放置，文本和行内元素将环绕它。这样，元素脱离了正常的网页文档流，但仍然保持对文档流的部分影响，这与绝对定位不同。

<ion-grid>
  <ion-row>
    <ion-col>
      <h3>无浮动</h3>
      <img
        alt="人物剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>向左浮动 (float-left)</h3>
      <img
        alt="人物剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-left"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
    <ion-col>
      <h3>向右浮动 (float-right)</h3>
      <img
        alt="人物剪影"
        src="https://ionicframework.com/docs/img/demos/avatar.svg"
        height="50px"
        class="ion-float-right"
      />
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
    </ion-col>
  </ion-row>
</ion-grid>
类名样式规则描述
.ion-float-leftfloat: left元素浮动在其包含块的左侧。
.ion-float-rightfloat: right元素浮动在其包含块的右侧。
.ion-float-startfloat: left / float: right在从左到右的文本方向中，等同于 float-left；在从右到左的文本方向中，等同于 float-right。
.ion-float-endfloat: left / float: right在从左到右的文本方向中，等同于 float-right；在从右到左的文本方向中，等同于 float-left。

响应式浮动类​

上述所有浮动类都有额外的类，可以根据屏幕尺寸调整浮动效果。将每个类中的 float- 替换为 float-{breakpoint}-，即可在特定的屏幕尺寸上应用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表展示了默认行为，其中 {modifier} 可以是上述提到的任意值：left, right, start, end。

类名描述
.ion-float-{modifier}在所有屏幕尺寸上对元素应用该修饰。
.ion-float-sm-{modifier}当屏幕宽度 min-width: 576px 时对元素应用该修饰。
.ion-float-md-{modifier}当屏幕宽度 min-width: 768px 时对元素应用该修饰。
.ion-float-lg-{modifier}当屏幕宽度 min-width: 992px 时对元素应用该修饰。
.ion-float-xl-{modifier}当屏幕宽度 min-width: 1200px 时对元素应用该修饰。

元素显示​

显示 (Display)​

CSS 的 display 属性设置元素是否被视为块级或行内盒子，以及用于其子元素的布局，如流式布局、网格或弹性盒。它也可以用来完全隐藏元素。

Ionic 为 display 提供了以下工具类：

类名样式规则描述
.ion-display-nonedisplay: none关闭元素的显示，使其在布局中不产生任何影响（文档渲染时如同该元素不存在）。
.ion-display-inlinedisplay: inline元素表现为行内元素，前后不产生换行。
.ion-display-inline-blockdisplay: inline-block元素表现为块级元素，但与其周围内容一起流动，如同一个行内盒子。
.ion-display-blockdisplay: block元素表现为块级元素，在正常流中前后都会产生换行。
.ion-display-flexdisplay: flex元素表现为块级元素，并根据弹性盒模型（flexbox）布局其内容。
.ion-display-inline-flexdisplay: inline-flex元素表现为行内元素，并根据弹性盒模型（flexbox）布局其内容。
.ion-display-griddisplay: grid元素表现为块级元素，并根据网格模型（grid）布局其内容。
.ion-display-inline-griddisplay: inline-grid元素表现为行内元素，并根据网格模型（grid）布局其内容。
.ion-display-tabledisplay: table元素的行为类似 HTML 的 <table> 元素，定义了一个块级盒子。
.ion-display-table-celldisplay: table-cell元素的行为类似 HTML 的 <td> 元素（表格单元格）。
.ion-display-table-rowdisplay: table-row元素的行为类似 HTML 的 <tr> 元素（表格行）。

响应式显示类​

上述所有显示类都有额外的类，可以根据屏幕尺寸调整显示效果。将每个类中的 display- 替换为 display-{breakpoint}-，即可在特定的屏幕尺寸上应用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表展示了默认行为，其中 {modifier} 可以是上述提到的任意值：none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-cell, table-row。

类名描述
.ion-display-{modifier}在所有屏幕尺寸上对元素应用该修饰。
.ion-display-sm-{modifier}当屏幕宽度 min-width: 576px 时对元素应用该修饰。
.ion-display-md-{modifier}当屏幕宽度 min-width: 768px 时对元素应用该修饰。
.ion-display-lg-{modifier}当屏幕宽度 min-width: 992px 时对元素应用该修饰。
.ion-display-xl-{modifier}当屏幕宽度 min-width: 1200px 时对元素应用该修饰。

已废弃的类​

废弃通知

以下类已废弃，将在下个主要版本中移除。请改用推荐的 .ion-display-* 类。

类名描述
.ion-hide在所有屏幕尺寸上对元素应用 display: none。
已废弃 — 请改用 ion-display-none 类。
.ion-hide-sm-{dir}当屏幕宽度 min-width: 576px (up) 或 max-width: 576px (down) 时对元素应用该修饰。
已废弃 — 请改用 ion-display-sm-{modifier} 类。
.ion-hide-md-{dir}当屏幕宽度 min-width: 768px (up) 或 max-width: 768px (down) 时对元素应用该修饰。
已废弃 — 请改用 ion-display-md-{modifier} 类。
.ion-hide-lg-{dir}当屏幕宽度 min-width: 992px (up) 或 max-width: 992px (down) 时对元素应用该修饰。
已废弃 — 请改用 ion-display-lg-{modifier} 类。
.ion-hide-xl-{dir}当屏幕宽度 min-width: 1200px (up) 或 max-width: 1200px (down) 时对元素应用该修饰。
已废弃 — 请改用 ion-display-xl-{modifier} 类。

内容间距​

内边距 (Padding)​

内边距类用于设置元素的内边距区域。内边距区域是元素内容与其边框之间的空间。

默认应用的 padding 大小为 16px，由 --ion-padding 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量部分。

<ion-grid>
  <ion-row>
    <ion-col class="ion-padding">
      <div>padding (四周内边距)</div>
    </ion-col>
    <ion-col class="ion-padding-top">
      <div>padding-top (上内边距)</div>
    </ion-col>
    <ion-col class="ion-padding-start">
      <div>padding-start (开始方向内边距)</div>
    </ion-col>
    <ion-col class="ion-padding-end">
      <div>padding-end (结束方向内边距)</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-padding-bottom">
      <div>padding-bottom (下内边距)</div>
    </ion-col>
    <ion-col class="ion-padding-vertical">
      <div>padding-vertical (垂直方向内边距)</div>
    </ion-col>
    <ion-col class="ion-padding-horizontal">
      <div>padding-horizontal (水平方向内边距)</div>
    </ion-col>
    <ion-col class="ion-no-padding">
      <div>no-padding (无内边距)</div>
    </ion-col>
  </ion-row>
</ion-grid>
类名样式规则描述
.ion-paddingpadding: 16px为所有四边添加内边距。
.ion-padding-toppadding-top: 16px添加上内边距。
.ion-padding-startpadding-start: 16px添加开始方向的内边距。
.ion-padding-endpadding-end: 16px添加结束方向的内边距。
.ion-padding-bottompadding-bottom: 16px添加下内边距。
.ion-padding-verticalpadding: 16px 0添加上和下内边距。
.ion-padding-horizontalpadding: 0 16px添加左和右内边距。
.ion-no-paddingpadding: 0移除所有内边距。

外边距 (Margin)​

外边距区域扩展了边框区域，是一个空白区域，用于将元素与其邻居隔开。

默认应用的 margin 大小为 16px，由 --ion-margin 变量设置。有关如何更改这些值的更多信息，请参阅 CSS 变量部分。

<ion-grid>
  <ion-row>
    <ion-col class="ion-margin">
      <div>margin (四周外边距)</div>
    </ion-col>
    <ion-col class="ion-margin-top">
      <div>margin-top (上外边距)</div>
    </ion-col>
    <ion-col class="ion-margin-start">
      <div>margin-start (开始方向外边距)</div>
    </ion-col>
    <ion-col class="ion-margin-end">
      <div>margin-end (结束方向外边距)</div>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col class="ion-margin-bottom">
      <div>margin-bottom (下外边距)</div>
    </ion-col>
    <ion-col class="ion-margin-vertical">
      <div>margin-vertical (垂直方向外边距)</div>
    </ion-col>
    <ion-col class="ion-margin-horizontal">
      <div>margin-horizontal (水平方向外边距)</div>
    </ion-col>
    <ion-col class="ion-no-margin">
      <div>no-margin (无外边距)</div>
    </ion-col>
  </ion-row>
</ion-grid>
类名样式规则描述
.ion-marginmargin: 16px为所有四边添加外边距。
.ion-margin-topmargin-top: 16px添加上外边距。
.ion-margin-startmargin-start: 16px添加开始方向的外边距。
.ion-margin-endmargin-end: 16px添加结束方向的外边距。
.ion-margin-bottommargin-bottom: 16px添加下外边距。
.ion-margin-verticalmargin: 16px 0添加上和下外边距。
.ion-margin-horizontalmargin: 0 16px添加左和右外边距。
.ion-no-marginmargin: 0移除所有外边距。

Flex 容器属性​

Flexbox 属性分为两类：控制所有 flex 项目布局的容器属性，以及控制单个 flex 项目的项目属性。项目级别的对齐请参阅 Flex 项目属性。

交叉轴对齐 (Align Items)​

align-items CSS 属性设置所有直接子元素的 align-self 值，作为一个组。在 flexbox 中，它控制项目在交叉轴（cross axis）上的对齐方式。在网格布局中，它控制项目在其网格区域内的块轴（block axis）上的对齐方式。

Ionic 为 align-items 提供了以下工具类：

类名样式规则描述
.ion-align-items-startalign-items: flex-start项目在交叉轴的起点对齐。
.ion-align-items-endalign-items: flex-end项目在交叉轴的终点对齐。
.ion-align-items-centeralign-items: center项目在交叉轴上居中对齐。
.ion-align-items-baselinealign-items: baseline项目根据它们的基线对齐。
.ion-align-items-stretchalign-items: stretch项目被拉伸以填满容器。

内容对齐 (Align Content)​

align-content CSS 属性设置行与行之间在 flexbox 交叉轴或网格/块级元素块轴上的空间分布。

此属性对单行的 flex 容器（即 flex-wrap: nowrap）没有影响。

Ionic 为 align-content 提供了以下工具类：

类名样式规则描述
.ion-align-content-startalign-content: flex-start行在交叉轴的起点紧凑排列。
.ion-align-content-endalign-content: flex-end行在交叉轴的终点紧凑排列。
.ion-align-content-centeralign-content: center行在交叉轴上居中对齐。
.ion-align-content-stretchalign-content: stretch行被拉伸以填满容器。
.ion-align-content-betweenalign-content: space-between行在交叉轴上均匀分布，首行靠起点，末行靠终点。
.ion-align-content-aroundalign-content: space-around行在交叉轴上均匀分布，每行周围间距相等。

主轴对齐 (Justify Content)​

justify-content CSS 属性定义了浏览器如何沿着 flex 容器的主轴（main axis）以及网格和多列容器的行内轴（inline axis）分配项目之间的空间。

Ionic 为 justify-content 提供了以下工具类：

类名样式规则描述
.ion-justify-content-startjustify-content: flex-start项目在主轴的起点紧凑排列。
.ion-justify-content-endjustify-content: flex-end项目在主轴的终点紧凑排列。
.ion-justify-content-centerjustify-content: center项目在主轴上居中对齐。
.ion-justify-content-aroundjustify-content: space-around项目在主轴上均匀分布，每个项目周围间距相等。
.ion-justify-content-betweenjustify-content: space-between项目在主轴上均匀分布，首项目靠起点，末项目靠终点。
.ion-justify-content-evenlyjustify-content: space-evenly项目在主轴上均匀分布，任意两个项目之间的间距相等。

主轴方向 (Flex Direction)​

flex-direction CSS 属性设置 flex 容器中主轴的方向以及项目排列的方向（正常或反向）。

Ionic 为 flex-direction 提供了以下工具类：

类名样式规则描述
.ion-flex-rowflex-direction: row项目水平排列，与文本方向一致。
.ion-flex-row-reverseflex-direction: row-reverse项目水平反向排列。
.ion-flex-columnflex-direction: column项目垂直排列。
.ion-flex-column-reverseflex-direction: column-reverse项目垂直反向排列。

换行 (Flex Wrap)​

flex-wrap CSS 属性设置 flex 项目是强制在一行内显示，还是可以换行显示。如果允许换行，它还设置了行堆叠的方向。

Ionic 为 flex-wrap 提供了以下工具类：

类名样式规则描述
.ion-flex-nowrapflex-wrap: nowrap所有项目将在一行内显示。
.ion-flex-wrapflex-wrap: wrap项目将从上到下换行显示在多行上。
.ion-flex-wrap-reverseflex-wrap: wrap-reverse项目将从下到上换行显示在多行上。

响应式 Flex 容器类​

上述所有 flex 容器类都有额外的类，可以根据屏幕尺寸调整属性。将基础类名替换为 {property}-{breakpoint}-{modifier}，即可在特定的屏幕尺寸上应用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表展示了默认行为，其中 {property} 可以是：justify-content, align-content, align-items, flex, 或 flex-wrap；{modifier} 是如上所述的相应值。

类名描述
.ion-{property}-{modifier}在所有屏幕尺寸上对元素应用该修饰。
.ion-{property}-sm-{modifier}当屏幕宽度 min-width: 576px 时对元素应用该修饰。
.ion-{property}-md-{modifier}当屏幕宽度 min-width: 768px 时对元素应用该修饰。
.ion-{property}-lg-{modifier}当屏幕宽度 min-width: 992px 时对元素应用该修饰。
.ion-{property}-xl-{modifier}当屏幕宽度 min-width: 1200px 时对元素应用该修饰。

已废弃的类​

废弃通知

以下类已废弃，将在下个主要版本中移除。请改用推荐的 .ion-flex-* 类。

类名描述
.ion-nowrap所有项目将在一行内显示。
已废弃 — 请改用 .ion-flex-nowrap。
.ion-wrap项目将从上到下换行显示在多行上。
已废弃 — 请改用 .ion-flex-wrap。
.ion-wrap-reverse项目将从下到上换行显示在多行上。
已废弃 — 请改用 .ion-flex-wrap-reverse。

Flex 项目属性​

Flex 项目属性控制单个 flex 项目在其 flex 容器中的行为。另请参阅：Flex 容器属性以了解容器级别的对齐。

单独对齐 (Align Self)​

align-self CSS 属性覆盖了网格或 flex 项目的 align-items 值。在网格中，它使项目在其网格区域内对齐。在 flexbox 中，它使项目在交叉轴上对齐。

此属性不适用于块级盒子或表格单元格。如果一个 flex 项目的交叉轴外边距为 auto，则 align-self 将被忽略。

Ionic 为 align-self 提供了以下工具类：

类名样式规则描述
.ion-align-self-startalign-self: flex-start项目在交叉轴的起点对齐。
.ion-align-self-endalign-self: flex-end项目在交叉轴的终点对齐。
.ion-align-self-centeralign-self: center项目在交叉轴上居中对齐。
.ion-align-self-baselinealign-self: baseline项目的基线与其他项目的基线对齐。
.ion-align-self-stretchalign-self: stretch项目被拉伸以填满容器。
.ion-align-self-autoalign-self: auto项目根据父元素的 align-items 值定位。

弹性 (Flex)​

flex CSS 属性是 flex-grow、flex-shrink 和 flex-basis 的简写属性。它设置了 flex 项目如何根据其 flex 容器中的可用空间进行伸缩。

Ionic 为 flex 提供了以下工具类：

类名样式规则描述
.ion-flex-1flex: 1项目与其他 flex 项目同等伸缩。
.ion-flex-autoflex: auto项目根据其内容大小进行伸缩。
.ion-flex-initialflex: initial项目收缩到其最小内容大小，但不会增长。
.ion-flex-noneflex: none项目不会增长或收缩。

增长因子 (Flex Grow)​

flex-grow CSS 属性设置 flex 增长因子，它指定当 flex 容器有正的自由空间时，应如何分配给该 flex 项目的主轴尺寸。

Ionic 为 flex-grow 提供了以下工具类：

类名样式规则描述
.ion-flex-grow-0flex-grow: 0项目不会超出其内容大小而增长。
.ion-flex-grow-1flex-grow: 1项目会按比例增长以填满可用空间。

收缩因子 (Flex Shrink)​

flex-shrink CSS 属性设置 flex 项目的收缩因子。如果所有 flex 项目的尺寸之和大于 flex 容器，项目会根据其 flex-shrink 值进行收缩以适应容器。

Ionic 为 flex-shrink 提供了以下工具类：

类名样式规则描述
.ion-flex-shrink-0flex-shrink: 0项目不会收缩到小于其内容大小。
.ion-flex-shrink-1flex-shrink: 1当容器空间不足时，项目会按比例收缩。

顺序 (Order)​

order CSS 属性设置项目在 flex 或 grid 容器中的布局顺序。容器中的项目按升序的 order 值排序，然后按源代码顺序排序。未指定 order 值的项目被赋予默认值 0。

Ionic 为 order 提供了以下工具类：

类名样式规则描述
.ion-order-firstorder: -1项目在 flex 容器中排在第一位。
.ion-order-0order: 0项目按自然顺序显示。
.ion-order-1order: 1项目显示在 order 为 0 的项目之后。
.ion-order-2order: 2项目显示在 order 为 1 的项目之后。
.ion-order-3order: 3项目显示在 order 为 2 的项目之后。
.ion-order-4order: 4项目显示在 order 为 3 的项目之后。
.ion-order-5order: 5项目显示在 order 为 4 的项目之后。
.ion-order-6order: 6项目显示在 order 为 5 的项目之后。
.ion-order-7order: 7项目显示在 order 为 6 的项目之后。
.ion-order-8order: 8项目显示在 order 为 7 的项目之后。
.ion-order-9order: 9项目显示在 order 为 8 的项目之后。
.ion-order-10order: 10项目显示在 order 为 9 的项目之后。
.ion-order-11order: 11项目显示在 order 为 10 的项目之后。
.ion-order-12order: 12项目显示在 order 为 11 的项目之后。
.ion-order-lastorder: 13项目在 flex 容器中排在最后一位。

响应式 Flex 项目类​

上述所有 flex 项目类都有额外的类，可以根据屏幕尺寸调整属性。将基础类名替换为 {property}-{breakpoint}-{modifier}，即可在特定的屏幕尺寸上应用该类，其中 {breakpoint} 是 Ionic 断点中列出的断点名称之一。

下表展示了默认行为，其中 {property} 可以是：align-self, flex, flex-grow, flex-shrink, 或 order；{modifier} 是如上所述的相应值。

类名描述
.ion-{property}-{modifier}在所有屏幕尺寸上对元素应用该修饰。
.ion-{property}-sm-{modifier}当屏幕宽度 min-width: 576px 时对元素应用该修饰。
.ion-{property}-md-{modifier}当屏幕宽度 min-width: 768px 时对元素应用该修饰。
.ion-{property}-lg-{modifier}当屏幕宽度 min-width: 992px 时对元素应用该修饰。
.ion-{property}-xl-{modifier}当屏幕宽度 min-width: 1200px 时对元素应用该修饰。

边框显示​

.ion-no-border 工具类可用于移除 Ionic 组件的边框。这个类可以应用于 ion-header 和 ion-footer 组件。

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title>Header - 无边框</ion-title>
  </ion-toolbar>
</ion-header>

<ion-footer class="ion-no-border">
  <ion-toolbar>
    <ion-title>Footer - 无边框</ion-title>
  </ion-toolbar>
</ion-footer>
类名描述
.ion-no-border元素将不显示边框。

Ionic 断点​

Ionic 在媒体查询中使用断点，以根据屏幕尺寸为应用应用不同的样式。以下断点名称用于上述工具类中，当屏幕宽度达到指定值时，该类将生效。

断点名称宽度
xs0
sm576px
md768px
lg992px
xl1200px

Contents

编辑此页