搜索文档 /

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 变量。看到 CSS变量 小节以获取关于如何更改这些值的更多信息。


                <
               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 变量。看到 CSS变量 小节以获取关于如何更改这些值的更多信息。


                <
               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
以前的
全局样式表
下一个
主题
Baidu