CSS实用程序
betway东盟体育app离子框架提供了一组CSS实用工具类，可以用于任何元素，以修改文本，元素的位置或调整填充和边距。
如果你的应用程序没有使用可用的Ionic Framework启动器启动，样式表列在betway东盟体育app 全局样式表的可选部分 将需要包括为了这些风格工作。
文字修改
文本对齐方式
<
ion-grid
>
<
ion-row
>
<
ion-col
>
<
div
类
＝
＂
ion-text-start
＂
>
<
h3
>
本文从
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-end
＂
>
<
h3
>
text-end
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-center
＂
>
<
h3
>
text-center
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
ion-row
>
<
ion-row
>
<
ion-col
>
<
div
类
＝
＂
ion-text-justify
＂
>
<
h3
>
text-justify
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-wrap
＂
>
<
h3
>
文本绕排
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-nowrap
＂
>
<
h3
>
text-nowrap
h3
>
我爱你，我爱你，我爱你。
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-text-left |
text-align:左 |
内联内容与行框的左边缘对齐。 |
.ion-text-right |
text-align:对 |
内联内容与行框的右边缘对齐。 |
.ion-text-start |
text-align:开始 |
一样的
text-left
如果方向是从左到右
text-right
如果方向是从右到左。 |
.ion-text-end |
text-align:结束 |
一样的
text-right
如果方向是从左到右
text-left
如果方向是从右到左。 |
.ion-text-center |
text-align:中心 |
行内内容在行框中居中。 |
.ion-text-justify |
text-align:证明 |
内联内容是对齐的。除最后一行外，文本应以行距对齐，使其左右边缘与行框的左右边缘对齐。 |
.ion-text-wrap |
空白:正常 |
空格序列被折叠。源文件中的换行符作为其他空格处理。必要时断行以填充行框。 |
.ion-text-nowrap |
空白:nowrap |
将空格折叠为
正常的
，但禁止文本中的换行(文本换行)。 |
文本转换
<
ion-grid
>
<
ion-row
>
<
ion-col
>
<
div
类
＝
＂
ion-text-uppercase
＂
>
<
h3
>
text-uppercase
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-lowercase
＂
>
<
h3
>
text-lowercase
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-capitalize
＂
>
<
h3
>
text-capitalize
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-text-uppercase |
大写首字母: |
强制将所有字符转换为大写。 |
.ion-text-lowercase |
首字母:小写 |
强制将所有字符转换为小写。 |
.ion-text-capitalize |
首字母:利用 |
强制将每个单词的第一个字母转换为大写。 |
响应文本类
上面列出的所有文本类都有额外的类，可以根据屏幕大小修改文本。而不是
文本- - - - - -
在每堂课上，使用
文本-{断点}
只在特定的屏幕尺寸上使用类，其中
{断点}
中是否列出了一个断点名称
betway东盟体育app离子断点
．
下表显示了默认行为，其中
{修饰符}
是下列任何一种情况:
左
，
正确的
，
开始
，
结束
，
中心
，
证明
，
包装
，
nowrap
，
大写字母
，
小写字母
,或
利用
，如上所述。
| 类 | 描述 |
|---|---|
.ion-text -{修饰符} |
对所有屏幕尺寸的元素应用修饰符。 |
.ion-text-sm -{修饰符} |
将修饰符应用于元素
min-width: 576像素
． |
.ion-text-md -{修饰符} |
将修饰符应用于元素
min-width: 768像素
． |
.ion-text-lg -{修饰符} |
将修饰符应用于元素
min-width: 992像素
． |
.ion-text-xl -{修饰符} |
将修饰符应用于元素
min-width: 1200像素
． |
元素的位置
浮动元素
float CSS属性指定元素应该放置在容器的左侧或右侧，文本和内联元素将围绕它。这样，元素从网页的正常流动中提取，尽管仍然是流动的一部分，与绝对定位相反。
<
ion-grid
>
<
ion-row
>
<
ion-col
类
＝
＂
ion-float-left
＂
>
<
div
>
<
h3
>
就是说浮动
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-float-right
＂
>
<
div
>
<
h3
>
float-right
h3
>
我爱你，我爱你，我爱你。这是我的车。
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-float-left |
浮:左 |
元素将在其包含块的左侧浮动。 |
.ion-float-right |
浮:对 |
元素将在其包含块的右侧浮动。 |
.ion-float-start |
浮:左
/
浮:对 |
一样的
就是说浮动
如果方向是从左到右
float-right
如果方向是从右到左。 |
.ion-float-end |
浮:左
/
浮:对 |
一样的
float-right
如果方向是从左到右
就是说浮动
如果方向是从右到左。 |
响应浮动类
上面列出的所有浮动类都有额外的类，可以根据屏幕大小修改浮动。而不是
浮动,
在每堂课上，使用
-{断点}浮动
只在特定的屏幕尺寸上使用类，其中
{断点}
中是否列出了一个断点名称
betway东盟体育app离子断点
．
下表显示了默认行为，其中
{修饰符}
是下列任何一种情况:
左
，
正确的
，
开始
,或
结束
，如上所述。
| 类 | 描述 |
|---|---|
.ion-float -{修饰符} |
对所有屏幕尺寸的元素应用修饰符。 |
.ion-float-sm -{修饰符} |
将修饰符应用于元素
min-width: 576像素
． |
.ion-float-md -{修饰符} |
将修饰符应用于元素
min-width: 768像素
． |
.ion-float-lg -{修饰符} |
将修饰符应用于元素
min-width: 992像素
． |
.ion-float-xl -{修饰符} |
将修饰符应用于元素
min-width: 1200像素
． |
元素显示
CSS的display属性决定了一个元素是否可见。如果元素被隐藏，它将仍然在DOM中，但不会被渲染。
<
ion-grid
>
<
ion-row
>
<
ion-col
类
＝
＂
ion-hide
＂
>
<
div
>
<
h3
>
隐藏的
h3
>
你看不见我。
div
>
ion-col
>
<
ion-col
>
<
div
>
<
h3
>
不隐瞒
h3
>
你能看见我!
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-hide |
显示:没有 |
元素将被隐藏。 |
响应显示属性
另外还有一些类可以根据屏幕大小修改可见性。而不是仅仅
.ion-hide
对于所有屏幕尺寸，使用
.ion-hide -{断点}{dir}
只在特定的屏幕尺寸上使用类，其中
{断点}
中是否列出了一个断点名称
betway东盟体育app离子断点
,
{dir}
是元素是否应该隐藏在以上所有屏幕大小(
向上
)或以下(
下来
)指定的断点。
| 类 | 描述 |
|---|---|
.ion-hide-sm - {dir} |
将修饰符应用于元素
min-width: 576像素
（
向上
)或
max-width: 576像素
（
下来
)． |
.ion-hide-md - {dir} |
将修饰符应用于元素
min-width: 768像素
（
向上
)或
max-width: 768像素
（
下来
)． |
.ion-hide-lg - {dir} |
将修饰符应用于元素
min-width: 992像素
（
向上
)或
max-width: 992像素
（
下来
)． |
.ion-hide-xl - {dir} |
将修饰符应用于元素
min-width: 1200像素
（
向上
)或
max-width: 1200像素
（
下来
)． |
内容空间
元素填充
填充类设置元素的填充区域。填充区是元素内容和边框之间的空间。
的默认金额
填充
要应用的是
16 px
是由
——ion-padding
变量。看到
<
ion-grid
>
<
ion-row
>
<
ion-col
类
＝
＂
ion-padding
＂
>
<
div
>
填充
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-padding-top
＂
>
<
div
>
padding-top
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-padding-start
＂
>
<
div
>
padding-start
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-padding-end
＂
>
<
div
>
padding-end
div
>
ion-col
>
ion-row
>
<
ion-row
>
<
ion-col
类
＝
＂
ion-padding-bottom
＂
>
<
div
>
padding-bottom
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-padding-vertical
＂
>
<
div
>
padding-vertical
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-padding-horizontal
＂
>
<
div
>
padding-horizontal
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-no-padding
＂
>
<
div
>
没有垫肩
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-padding |
填充:16 px |
应用填充到所有的边。 |
.ion-padding-top |
padding-top: 16 px |
应用填充到顶部。 |
.ion-padding-start |
padding-start: 16 px |
应用填充到开始。 |
.ion-padding-end |
padding-end: 16 px |
应用填充到末尾。 |
.ion-padding-bottom |
padding-bottom: 16 px |
应用填充到底部。 |
.ion-padding-vertical |
填充:16 px 0 |
应用填充到顶部和底部。 |
.ion-padding-horizontal |
填充:0 16 px |
应用填充到左和右。 |
.ion-no-padding |
填充:0 |
不适用填充到所有的边。 |
元素保证金
边界区域用一个空白区域扩展边界区域，用于将元素与其相邻元素分开。
的默认金额
保证金
要应用的是
16 px
是由
——ion-margin
变量。看到
<
ion-grid
>
<
ion-row
>
<
ion-col
类
＝
＂
ion-margin
＂
>
<
div
>
保证金
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-margin-top
＂
>
<
div
>
margin-top
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-margin-start
＂
>
<
div
>
margin-start
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-margin-end
＂
>
<
div
>
margin-end
div
>
ion-col
>
ion-row
>
<
ion-row
>
<
ion-col
类
＝
＂
ion-margin-bottom
＂
>
<
div
>
margin-bottom
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-margin-vertical
＂
>
<
div
>
margin-vertical
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-margin-horizontal
＂
>
<
div
>
margin-horizontal
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-no-margin
＂
>
<
div
>
根本没有
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-margin |
保证金:16 px |
将边距应用于所有边。 |
.ion-margin-top |
margin-top: 16 px |
将边距应用到顶部。 |
.ion-margin-start |
margin-start: 16 px |
将边距应用到左边。 |
.ion-margin-end |
margin-end: 16 px |
将边距应用到右边。 |
.ion-margin-bottom |
margin-bottom: 16 px |
将保证金应用到底部。 |
.ion-margin-vertical |
保证金:16 px 0 |
对顶部和底部应用边距。 |
.ion-margin-horizontal |
保证金:0 16 px |
对左右应用边距。 |
.ion-no-margin |
保证金:0 |
对任何一方都没有边际。 |
Flex特性
Flex容器属性
<
ion-grid
>
<
ion-row
类
＝
＂
ion-justify-content-start
＂
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
1的2
div
>
ion-col
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
2的2
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-justify-content-center
＂
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
1的2
div
>
ion-col
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
2的2
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-justify-content-end
＂
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
1的2
div
>
ion-col
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
2的2
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-justify-content-around
＂
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
1的2
div
>
ion-col
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
2的2
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-justify-content-between
＂
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
1的2
div
>
ion-col
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
2的2
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-justify-content-evenly
＂
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
1的2
div
>
ion-col
>
<
ion-col
大小
＝
＂
3.
＂
>
<
div
>
2的2
div
>
ion-col
>
ion-row
>
ion-grid
>
<
ion-grid
>
<
ion-row
类
＝
＂
ion-align-items-start
＂
>
<
ion-col
>
<
div
>
1的4
div
>
ion-col
>
<
ion-col
>
<
div
>
2的4
div
>
ion-col
>
<
ion-col
>
<
div
>
3的4
div
>
ion-col
>
<
ion-col
>
<
div
>
4的4
<
br
>
＃
<
br
>
＃
<
br
>
＃
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-align-items-end
＂
>
<
ion-col
>
<
div
>
1的4
div
>
ion-col
>
<
ion-col
>
<
div
>
2的4
div
>
ion-col
>
<
ion-col
>
<
div
>
3的4
div
>
ion-col
>
<
ion-col
>
<
div
>
4的4
<
br
>
＃
<
br
>
＃
<
br
>
＃
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-align-items-center
＂
>
<
ion-col
>
<
div
>
1的4
div
>
ion-col
>
<
ion-col
>
<
div
>
2的4
div
>
ion-col
>
<
ion-col
>
<
div
>
3的4
div
>
ion-col
>
<
ion-col
>
<
div
>
4的4
<
br
>
＃
<
br
>
＃
<
br
>
＃
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-align-items-baseline
＂
>
<
ion-col
>
<
div
>
1的4
div
>
ion-col
>
<
ion-col
>
<
div
>
2的4
div
>
ion-col
>
<
ion-col
>
<
div
>
3的4
div
>
ion-col
>
<
ion-col
>
<
div
>
4的4
<
br
>
＃
<
br
>
＃
<
br
>
＃
div
>
ion-col
>
ion-row
>
<
ion-row
类
＝
＂
ion-align-items-stretch
＂
>
<
ion-col
>
<
div
>
1的4
div
>
ion-col
>
<
ion-col
>
<
div
>
2的4
div
>
ion-col
>
<
ion-col
>
<
div
>
3的4
div
>
ion-col
>
<
ion-col
>
<
div
>
4的4
<
br
>
＃
<
br
>
＃
<
br
>
＃
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-justify-content-start |
justify-content: flex-start |
在主轴上往起点方向打包物品。 |
.ion-justify-content-end |
justify-content: flex-end |
物品在主轴上朝向末端打包。 |
.ion-justify-content-center |
justify-content:中心 |
项目沿着主轴居中。 |
.ion-justify-content-around |
justify-content:空间 |
物品均匀地分布在主轴上，周围的空间也相同。 |
.ion-justify-content-between |
justify-content:之间的空间 |
项目均匀分布在主轴上。 |
.ion-justify-content-evenly |
justify-content: space-evenly |
项的分布使任意两个项之间的间距相等。 |
.ion-align-items-start |
对齐项目:flex-start |
物品在交叉轴上向开始方向打包。 |
.ion-align-items-end |
对齐项目:flex-end |
在十字轴上，物品被打包到末端。 |
.ion-align-items-center |
对齐项目:中心 |
项目沿着交叉轴居中。 |
.ion-align-items-baseline |
基线对齐项目: |
条目对齐以使它们的基线对齐。 |
.ion-align-items-stretch |
对齐项目:拉伸 |
物品被拉伸以装满容器。 |
.ion-nowrap |
flex-wrap: nowrap |
所有项目将在一行上。 |
.ion-wrap |
flex-wrap:包装 |
项目将从上到下包裹在多行上。 |
.ion-wrap-reverse |
flex-wrap: wrap-reverse |
项目将从下到上包裹在多行上。 |
Flex项目属性
<
ion-grid
>
<
ion-row
>
<
ion-col
类
＝
＂
ion-align-self-start
＂
>
<
div
>
1的4
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-align-self-center
＂
>
<
div
>
2的4
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-align-self-end
＂
>
<
div
>
3的4
div
>
ion-col
>
<
ion-col
>
<
div
>
4的4
<
br
>
＃
<
br
>
＃
<
br
>
＃
div
>
ion-col
>
ion-row
>
ion-grid
>| 类 | 样式规则 | 描述 |
|---|---|---|
.ion-align-self-start |
align-self: flex-start |
物品在十字轴的起点被打包。 |
.ion-align-self-end |
align-self: flex-end |
物品在十字轴上向末端打包。 |
.ion-align-self-center |
align-self:中心 |
项目沿交叉轴居中。 |
.ion-align-self-baseline |
align-self:基线 |
项目对齐，以便其基线与其他项目基线对齐。 |
.ion-align-self-stretch |
align-self:拉伸 |
物品被拉伸以填满容器。 |
.ion-align-self-auto |
align-self:汽车 |
项将根据父项的位置进行定位
对齐项目
价值。 |
边界显示
border display CSS属性决定了边界是否可见。该属性可以应用于离子页眉和离子页脚。
<
ion-header
类
＝
＂
ion-no-border
＂
>
<
ion-toolbar
>
<
ion-title
>
页眉-无边框
ion-title
>
ion-toolbar
>
ion-header
>
<
ion-footer
类
＝
＂
ion-no-border
＂
>
<
ion-toolbar
>
<
ion-title
>
页脚-没有边框
ion-title
>
ion-toolbar
>
ion-footer
>| 类 | 描述 |
|---|---|
.ion-no-border |
元素将没有边界。 |
betway东盟体育app离子断点
betway东盟体育appionion在媒体查询中使用断点，以便根据屏幕大小来设计不同的应用程序样式。下面的断点名称在上面列出的实用程序类中使用，当满足宽度时将应用该类。
| 断点的名字 | 宽度 |
|---|---|
xs |
0 |
sm |
576 px |
医学博士 |
768 px |
lg |
992 px |
xl |
1200 px |
