自适应表单的样式构建 styling-constructs-for-adaptive-forms
前提条件 prerequisites
了解CSS和LESS框架。
可自定义的内容 what-can-be-customized
文章列出了自适应表单的公开可用css类。 您可以利用这些类来设置自适应表单中各个组件的样式。 创作组件的样式（如显示警告的对话框和状态栏）不在本文的涵盖范围内。 仅当您无法使用为组件设置样式时，才使用这些样式结构创建样式（使用CSS或更少） 主题编辑器.
在自适应表单中自定义样式 customizing-styles-in-adaptive-forms
LESS框架简化了用例，以自定义自适应表单中的样式。 框架允许您使用一组变量和函数（混合）来定义样式。 LESS框架有助于减小捆绑代码的大小并增加其可重用性。
您可以通过以下方式自定义自适应表单样式：
- 更改主题
- 更改组件样式
更改主题 changing-theme
您可以更改自适应表单的主题，以确保其外观与嵌入了自适应表单的网页一致。
使用CSS属性更改自适应表单的整体外观通常是主题更改的一部分。 对“自适应表单的确定和感觉”这一操作进行的重大更改（如组件布局和位置的更改）不会被视为主题更改。
根据引导，以下一组CSS属性定义网页的主题：
- 背景颜色
- 边框（类型、颜色、粗细）
- 字体颜色
- 边距
- 边距
- 字体大小
- LineHeight
目前，只为自适应表单中各元素的这些属性定义LESS变量。
更改组件样式 changing-component-style
您可以更改元素的外观、布局、位置和可见性。 要完成此任务，请创建或更新自定义.css文件，以包含本文中列出的样式结构。
要将样式应用于自适应表单，请在中打开自适应表单进行编辑，打开自适应表单容器的属性，在基本选项卡中指定自定义CSS文件的路径。 自适应表单的默认样式构造，并使用自定义.css文件中列出的构造来覆盖它。
组件 components
本文中讨论的组件具有其预定义的CSS类。 您可以编辑变量以修改CSS类中的样式。 或者，您也可以重写整个类。 本节介绍组件和样式中可以使用变量修改的类。
容器样式 container-styling
容器是顶级组件。 其他面板和字段位于容器组件下。
字段样式 field-styling
自适应表单包括各种类型的字段。 每个字段都有一个唯一的类名称，即字段的名称。 该字段还具有通用类名称 guideFieldNode.
字段包括标签、小组件、帮助描述（包括长描述和短描述）和字段帮助图标（问号）。
标签样式 label-styling
HTML元素 标签 用于字段的包括类 left 或 top 取决于标签位于顶部还是左侧。
标签的CSS规则将使用 guideFieldLabel 标签。 如果您是作者，请覆盖此规则以使自定义更改可见。
小组件样式 widgets-styling
小组件还包含类，具体取决于其类型。 通常，小组件包括 guideFieldWidget 类。 随HTML一起提供的小组件通常使用标准HTML元素输入和选择。 样式将相应地进行。 无法通过更改变量来设置自定义小组件的样式。
小组件样式限制 limitations-in-widget-styling
焦点、必填和禁用字段的样式使用变量进行限制。 但是，您可以通过覆盖样式来更改样式。 提供使用变量的限制主要是为了保持对变量数的检查。 如果字段的外观发生显着变化，则可以放松限制，因为它位于前面讨论的任何状态中。
帮助描述 help-description
作者可以使用短说明和长说明组件在字段中指定帮助内容。 两个组件都有一个通用类 .guideHelpDescription 另一个课 .long/ .short，具体取决于描述类型。 “帮助”内容将包含在段落元素中，以覆盖描述的样式。 帮助描述（长和短）将使用以widgetshelp开头的变量进行修改，如下表所述：
条款和条件 terms-and-conditions
条款和条件(TnC) ``)小组件可让您指定条款和条件。 您可以使用下表所述的变量自定义小组件。
按钮 button
按钮也是小组件。 但是，其样式与小组件略有不同。 在自适应表单中，以下任一选项都构成按钮：
- 输入[type = text]
- 按钮
- 具有class.button的元素
HTML按钮代码：
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
问号 question-mark
对于小组件，当作者在帮助内容中添加长描述时，将显示问号。 将使用引导中提供的默认图标。 要使用自定义图标，可以自定义引导图标。
表 table
您可以使用以下变量更改表中标题行和正文行的颜色主题。
文件附件 file-attachment
自适应表单的文件附件小组件允许您上传文件。 您还可以使用变量自定义小组件。
导航器样式 navigator-styles
有四种类型的导航器选项卡。 这些选项卡包括向导和折叠面板中左侧、顶部的选项卡。 每个导航器都有一个不同的类。
以下是选项卡导航器元素的HTML代码（类似于引导选项卡）：
<li>
tab title
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></span>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
您可以使用CSS规则更改导航器的样式，该规则会使用 后代 选择器。 例如，要向锚点标记添加文本修饰样式，请执行以下操作：
顶部的选项卡导航器：
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
此外，还有一些类，可根据它们是否具有嵌套/子/子导航器来显示样式选项卡导航器（包括左侧和顶部）。
guideNavIcon类为选项卡导航器（左上方）和向导导航器提供了默认图标。
面板样式 panel-styling
面板包括可选工具栏及其内容。
面板节点分为导航器和内容。 那里 ``不是内容的单独样式组件。 描述的变量将应用于导航器和内容。
(&A)；最顶部的面板(RootPanel)没有此类。
移动设备样式 mobile-styling
标题栏 header-bar
这些变量会影响在移动设备或包含面板标题以及下一和后导航器的小屏幕设备上可见的标题栏。
滚动指示器 scroll-indicator
这些变量会影响滚动指示器，该指示器是在移动设备或小屏幕设备上显示的橙色箭头。 滚动指示器指示屏幕的可见部分以外有内容。 您可以向下滚动以查看。 点击内容的结尾时，箭头会消失。
移动设备固定工具栏特定于布局的变量 mobile-fixed-toolbar-layout-specific-variables
下表中的这些变量会影响移动设备固定工具栏布局。