-
简介为了正确区分构成IPS4框架一部分的CSS类和HTML元素与不构成IPS4框架一部分的CSS类和HTML元素,为了创建一个一目了然的逻辑结构,命名约定如下所示。框架类和元素IPS4 CSS框架被划分为松散定义的“模块”。模块将相关样式组合在一个f中
-
说明与网格模块不同,柱模块提供的类可以轻松创建包含固定柱和流体柱的布局。例如,这是一种通常用于固定侧栏(带有流体内容区域)的布局。其他类可用于在较小的设备上折叠布局。用法列布局由包装器元素和列eleme组成
-
grid模块提供了基于灵活的12列网格构建布局的类,具有自动边距,以及附加的类,使布局能够在较小的设备上正确折叠。一个网格应该由带有类ipsGrid的包装器元素和应用了适当大小的类的直接后代组成(见下面)。例如:
-
数据列表CSS模块允许我们显示复杂的列表,同时在需要的情况下重新排列显示,例如在小型设备上。数据列表由包装器和单独的列表项组成,列表项可以包含各种类型的数据。在大多数情况下,为了语义目的,数据列表将使用HTML列表元素之一(如ul或ol),但这并不是必需的。基本的标记结构如下
-
form模块提供了用于在整个套件中样式化表单的类,并提供了一系列可用于更改外观和流程的选项。一个表单应该有一个基类ipsForm。在许多情况下,这将直接出现在
-
我们使用了一种叫做FontAwesome的图标字体。这使我们能够显示可访问的图标,这些图标不需要额外的HTTP请求,可以使用CSS进行样式设置(并自动继承样式),并且可以在不降低质量的情况下进行缩放。通过使用以下代码,图标可以包含在标记中
-
下拉菜单允许用户从许多选项中进行选择。该标记被设计成与ips.ui.menu javascript模块协同工作。菜单由触发器元素和菜单元素本身组成: &
-
messages模块提供了一种样式化信息消息的方法,以引起用户的注意。要创建消息,只需将ipsMessage类添加到容器元素(例如div),以及下面的一个消息样式。消息样式类将自动将适当的图标添加到消息框中。& #
-
这里描述的按钮类可以应用于任何元素,尽管通常是应用于input[type="submit"]或按钮这样的元素,以便用户可以与之交互。作为最小值,一个按钮应该接收基本的ipsButton类,加上一个尺寸类和一个样式类(解释如下)。按钮样式ipsButton_normal
-
说明排版模块提供了广泛的类别,用于设置套件标题中的文本样式。提供了许多标题样式,可用于构建页面上的信息。他们是元素不可知论者;您可以在任何标记(甚至其他标记)上使用它们-为您的特定用途选择最具语义的元素。ips
-
Padding ipsPad桌面上15px Padding ipsPad_桌面上半个7px Padding ipsPad_桌面上双个30px Padding在移动设备上适当缩放填充类。间距IPSPACER_顶部15px顶部边缘IPSPACER_底部15px底部边缘IPSPACER_两个15px顶部和底部边缘IPSPACER_一半当与上述其中一个组合时,间距IPSPACER_的一半当与上述其中一个组合时,间距IPSPACER_的两倍
-
徽章是一个有用的方式来显示一些附加的信息,例如,它的状态。标准徽章标准徽章接收基类ipsBadge,然后是下面所示的一个或多个选项。徽章样式ipsBadge_new徽章ipsbadge_styles2徽章
-
IPS4的CSS框架是响应式的,这意味着元素可以根据用户选择的显示大小进行调整。在大多数情况下,本指南中已经列出的现有类会为您处理它;例如,在移动电话上,菜单会自动调整,标签栏会折叠成下拉菜单。有时,您可能需要控制哪些设备大小的元素显示或隐藏自己。例如,如果您添加了自定义脚注