跳转到内容

CSS框架

  1. CSS框架简介

    简介为了正确区分构成IPS4框架一部分的CSS类和HTML元素与不构成IPS4框架一部分的CSS类和HTML元素,为了创建一个一目了然的逻辑结构,命名约定如下所示。框架类和元素IPS4 CSS框架被划分为松散定义的“模块”。模块将相关样式组合在一个f中
  2. 布局:列

    说明与网格模块不同,柱模块提供的类可以轻松创建包含固定柱和流体柱的布局。例如,这是一种通常用于固定侧栏(带有流体内容区域)的布局。其他类可用于在较小的设备上折叠布局。用法列布局由包装器元素和列eleme组成
  3. 布局:网格

    grid模块提供了基于灵活的12列网格构建布局的类,具有自动边距,以及附加的类,使布局能够在较小的设备上正确折叠。一个网格应该由带有类ipsGrid的包装器元素和应用了适当大小的类的直接后代组成(见下面)。例如:
  4. 数据列表

    数据列表CSS模块允许我们显示复杂的列表,同时在需要的情况下重新排列显示,例如在小型设备上。数据列表由包装器和单独的列表项组成,列表项可以包含各种类型的数据。在大多数情况下,为了语义目的,数据列表将使用HTML列表元素之一(如ul或ol),但这并不是必需的。基本的标记结构如下
  5. 形式

    form模块提供了用于在整个套件中样式化表单的类,并提供了一系列可用于更改外观和流程的选项。一个表单应该有一个基类ipsForm。在许多情况下,这将直接出现在
    元素上,但实际上它可以出现在任何包含form元素的元素上。推荐的表单基本DOM结构如下
  6. 图标

    我们使用了一种叫做FontAwesome的图标字体。这使我们能够显示可访问的图标,这些图标不需要额外的HTTP请求,可以使用CSS进行样式设置(并自动继承样式),并且可以在不降低质量的情况下进行缩放。通过使用以下代码,图标可以包含在标记中
  7. 下拉菜单

    下拉菜单允许用户从许多选项中进行选择。该标记被设计成与ips.ui.menu javascript模块协同工作。菜单由触发器元素和菜单元素本身组成: Open Menu &
  8. 信息

    messages模块提供了一种样式化信息消息的方法,以引起用户的注意。要创建消息,只需将ipsMessage类添加到容器元素(例如div),以及下面的一个消息样式。消息样式类将自动将适当的图标添加到消息框中。& #
  9. 按钮

    这里描述的按钮类可以应用于任何元素,尽管通常是应用于input[type="submit"]或按钮这样的元素,以便用户可以与之交互。作为最小值,一个按钮应该接收基本的ipsButton类,加上一个尺寸类和一个样式类(解释如下)。按钮样式ipsButton_normal
  10. 印刷术

    说明排版模块提供了广泛的类别,用于设置套件标题中的文本样式。提供了许多标题样式,可用于构建页面上的信息。他们是元素不可知论者;您可以在任何标记(甚至其他标记)上使用它们-为您的特定用途选择最具语义的元素。ips
  11. 混杂的

    Padding ipsPad桌面上15px Padding ipsPad_桌面上半个7px Padding ipsPad_桌面上双个30px Padding在移动设备上适当缩放填充类。间距IPSPACER_顶部15px顶部边缘IPSPACER_底部15px底部边缘IPSPACER_两个15px顶部和底部边缘IPSPACER_一半当与上述其中一个组合时,间距IPSPACER_的一半当与上述其中一个组合时,间距IPSPACER_的两倍
  12. 徽章

    徽章是一个有用的方式来显示一些附加的信息,例如,它的状态。标准徽章标准徽章接收基类ipsBadge,然后是下面所示的一个或多个选项。徽章样式ipsBadge_new徽章ipsbadge_styles2徽章
  13. 响应性

    IPS4的CSS框架是响应式的,这意味着元素可以根据用户选择的显示大小进行调整。在大多数情况下,本指南中已经列出的现有类会为您处理它;例如,在移动电话上,菜单会自动调整,标签栏会折叠成下拉菜单。有时,您可能需要控制哪些设备大小的元素显示或隐藏自己。例如,如果您添加了自定义脚注
    ×
    ×
    • 创建新的。。。
    Baidu