CSS实用程序
betway东盟体育appIonic Framework提供了一组CSS实用程序类，可以在任何元素上使用，以修改文本、元素位置或调整填充和空白。
如果您的应用程序没有使用可用的Ionic Framework启动程序启动，则betway东盟体育app 全局样式表的可选部分 将需要包括为了这些风格的工作。
文字修改
文本对齐方式
<
ion-grid
>
<
ion-row
>
<
ion-col
>
<
div
类
＝
＂
ion-text-start
＂
>
<
h3
>
本文从
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-end
＂
>
<
h3
>
text-end
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-center
＂
>
<
h3
>
text-center
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
ion-row
>
<
ion-row
>
<
ion-col
>
<
div
类
＝
＂
ion-text-justify
＂
>
<
h3
>
text-justify
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-wrap
＂
>
<
h3
>
文本绕排
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-nowrap
＂
>
<
h3
>
text-nowrap
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。
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
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-lowercase
＂
>
<
h3
>
text-lowercase
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
<
ion-col
>
<
div
类
＝
＂
ion-text-capitalize
＂
>
<
h3
>
text-capitalize
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
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
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
div
>
ion-col
>
<
ion-col
类
＝
＂
ion-float-right
＂
>
<
div
>
<
h3
>
float-right
h3
>
Lorem ipsum dolor sit amet, conttetur adipisciscing精英。交流车辆。
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像素
． |
元素显示
display CSS属性决定了一个元素是否应该可见。如果元素被隐藏，它仍然在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东盟体育appIonic在媒体查询中使用断点，以便根据屏幕大小设置不同的应用程序样式。下面的断点名称在上面列出的实用程序类中使用，当宽度满足时，该类将在其中应用。
| 断点的名字 | 宽度 |
|---|---|
xs |
0 |
sm |
576 px |
医学博士 |
768 px |
lg |
992 px |
xl |
1200 px |
